yuanqu_ui/work/pages/clock/cardSupple.vue

<template>
	<view class="lists">

			<view class="list" @click="showDatePicker">
				<view class="listl"><text>*</text>补卡时间</view>
				<view class="listi" :style="formData.applicationTime?'':'color: #AAAAAA;'">{{formData.applicationTime||"请选择补卡时间"}}</view>
				<image :src="rimg"></image>
			</view>
			<view class="list lista" >
				<view class="listl"><text>*</text>补卡原因</view>
				<textarea placeholder="请输入补卡原因" maxlength="1000" class="listia" v-model="formData.reason"></textarea>
				<view class="listib">{{formData.reason.length}}/1000</view>
			</view>

		<view class="listbtn" @click="getSure">提交</view>
		<dataTimePicke ref="timeicker" type="datetime-all" toolBarTitle="请选择时间" @change="timeChange"></dataTimePicke>

	</view>
</template>

<script>
	import dataTimePicke from "@/components/timepick/dataTimePicke.vue"
	import {getMapconfig} from "@/api/work/check.js"
	export default{
		data(){
			return{
				rimg:require("@/work/static/clock/right.png"),
				formData:{
					applicationTime:'',
					reason:''
				}
				
			}
		},
		components:{
			dataTimePicke
		},
		onLoad(e) {

			
		},
		mounted() {

		},
		methods:{
			showDatePicker(){
				this.$refs.timeicker.show();	
			},
			timeChange(e){
				that.formData.applicationTime=e
			}
		}
	}
</script>

<style scoped lang="scss">
page{background-color: #FFFFFF;}
	.lists{padding: 20rpx 34rpx;
		.list{padding:30rpx 0;display: flex;align-items: center;
		&.lista{flex-direction: column;align-items: flex-start;}
			.listl{font-size:28rpx;font-weight: bold;color: #343434;flex:0 0 auto;margin-right: 26rpx;
			text{font-size: 28rpx;color: #FF0000;margin-right: 8rpx;}
}
			.listr{font-size: 28rpx;color: #1678FF;flex: 1 ;text-decoration: underline;text-align: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
			.listi{font-size:28rpx;color: #343434;flex:1;text-align: right;}
			.listia{font-size:28rpx;color: #343434;text-align: left;margin-top: 24rpx;width: 100%;}
			.listib{font-size: 28rpx;color: #666666;text-align: right;margin-top: 20rpx;width: 100%;}
			image{width: 10rpx;height: 18rpx;flex: 0 0 auto;margin-left: 26rpx;}
		}
		.listbtn{width: 100%;height: 76rpx;background: #1678FF;border-radius: 6px;font-size: 28rpx;color: #FFFFFF;margin-top:70rpx;line-height: 76rpx;text-align: center;}
	}
	.boxtopbb{text-decoration: none;}
</style>