tourGuide/subPackages/clockIn/apply.vue

<template>
	<view class="bg">
		<view class="user-other-info">
			
			<view class="userinfo-item edit" >
				<span>打卡日期</span>
				<view>
					<!-- <picker mode="date" :value="info.date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="text-overflow" v-if="info.date">{{info.date}}</view>
						<view v-else class="empty-value" >请选择</view>
					</picker> -->
					<view class="text-overflow" >{{timeFormat(new Date())}}</view>

				</view>
			</view>
			<!-- <view class="userinfo-item edit" >
				<span>打卡时段</span>
				<view>
					<picker @change="bindPickerChange" :value="info.time" :range="timeArr">
						<view class="text-overflow" v-if="info.time || info.time===0">{{timeArr[info.time]}}</view>
						<view v-else class="empty-value" >请选择</view>
					</picker>
					
				</view>
			</view> -->
			<view class="userinfo-item" style="border: none;">
				<span>审批事由</span>
			</view>
			<textarea class="reason" auto-height  v-model="info.reason" placeholder="请填写您审批的事由"/>
			
			
			
			
			<view class="btn-tao" @click="submit">提交</view>
		</view>
		
		
		
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			
			return {
				info: {
					date: '',
					time: '',timeStr: '',
					reason: ''
				},
				startDate:getDate('start'),
				endDate:getDate('end'),
				timeArr: [
					"09:00-10:00",
				]
			}
		},
		
		
		onLoad () {
			
		},
		methods: {
			bindDateChange: function(e) {
				this.info.date = e.detail.value
			},
			bindPickerChange: function(e) {
				console.log(e.detail.value)
				this.info.time = e.detail.value
			},
			submit() {
				if (!this.info.reason.trim()) {
					uni.showToast({title: "请输入审批事由",icon:'none'})
					return;
				}
				this.Post({reason: this.info.reason},'/api/Merchants/guideClockExamine').then(res=>{
					uni.showToast({
						title:'提交成功',icon:"none"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/subPackages/clockIn/record'
						})
					},1000)
					
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: content-box;
	}
	.bg{
		min-height: calc(100vh - 44px - env(safe-area-inset-top)) ;
		overflow-x: hidden;
		background: white;
		padding-bottom: 50rpx;
	}
	.empty-value{
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}
	

	.user-other-info {
		margin:0 30rpx;
		.info-title{
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
	}

	.userinfo-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		border-bottom: 1rpx solid #D8D8D8;
		padding: 40rpx 30rpx 40rpx 0;
		height: 48rpx;
		color: #333;
		position: relative;
	}

	.info-avatar-top span {
		font-weight: 500;
		font-size: 31rpx;
		flex-shrink: 0;
	}

	.userinfo-item>span {
		font-weight: 500;
		font-size: 31rpx;
		flex-shrink: 0;
		color: #000;
		width: 200rpx;
		&::before{
			content: "*";
			color: #96684F;
		}
	}
	
	.userinfo-item>i {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.userinfo-item.edit {
		&>view::after {
			content: "";
			width: 20rpx;
			height: 20rpx;
			margin-left: 6rpx;
			background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png');
			background-size: 100% 100%;
			position: absolute;
			right: 0;
			margin: auto;
			top: 0;
			bottom: 0;
		}
	}

	.birthday-box {
		text-align: right;
	}

	.dialog-footer .change-avatar-btn {
		position: fixed;
		text-align: center;
		bottom: 80rpx;
		left: 50%;
		margin-left: -110rpx;
	}

	.btn-tao {
		text-align: center;
		font-size: 30rpx;
		width: 697rpx;
		height: 80rpx;
		background: #96684F;
		border-radius: 40rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 50rpx;
	}
	
	.reason{
		background: #F5F5F5;
		border-radius: 13rpx;
		min-height: 265rpx;
		width: 100%;
		padding: 20rpx 12rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
</style>