property/property_ui/work/pages/service/patrolset.vue

<template>
	<view class="check">
		<uni-forms ref="form" :model="datainfo">
			<view class="tabs">
				<view class="tab" :class="tabval==ite.val?'act':''" v-for="(ite,idx) in weekList" :key="idx">{{ite.tit}}</view>
			</view>
			<view class="cbox" v-for="(ite,idx) in list" :key=''>
				<view class="chmain">
					<uni-forms-item label="巡检类型" name="phonenumber">
						<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择巡检类型'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="巡检时间" name="phonenumber">
						<picker mode="date" range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择时间'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="巡检路线" name="phonenumber">
						<view class="flexc">
							<uni-easyinput v-model="datainfo.phonenumber" :inputBorder='false' placeholder="请选择或输入巡检路线" />
							<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
								<view class="rimg"><image :src="rimg"></image></view>
							</picker>
						</view>
					</uni-forms-item>
					<uni-forms-item label="巡检人" name="phonenumber">
						<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择巡检人'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<view class="addbox ">
						<view class="btna flexc" @click="getAddFn">
							<image :src="addimg"></image>
							<view>新增</view>
						</view>
						<view  class="btnb flexc" @click="getDelFn(idx)">
							<image :src="delimg"></image><view>删除</view>
						</view>
					</view>
				</view>
			</view>
		</uni-forms>
		<view class="rfbtn" @click="getNext">确定</view>

		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	export default {
		components: {},
		data() {
			return {
				car: require('@/work/static/car/carico.png'),
				rimg: require('@/work/static/people/rimg.png'),
				addimg: require('@/work/static/service/add.png'),
				delimg: require('@/work/static/service/del.png'),
				baseUrl: config.baseUrl,
				checkflag:true,
				tabval:0,
				weekList:[{tit:"星期一",val:0,},{tit:"星期一",val:1,},{tit:"星期一",val:2,},{tit:"星期一",val:3,},{tit:"星期一",val:0,},{tit:"星期一",val:1,},{tit:"星期一",val:2,},{tit:"星期一",val:3,}],
				list:[{tit:''}],
				datainfo: {
					sex:0,
					realName: '',
					idCard: '',
					address: '',
					expirationDate: '',
					phonenumber: '',
					front: '',
					back: '',
				},
				syqxidx:'',
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
			}
		},
		onLoad: function() {

		},
		methods: {
			checkPermi,
			checkRole,
			bindDateChange(e){
				var val=e.detail.value;
				// this.datainfo.applicationBank=this.sdyhlist[val].value;
				// this.applicationBank=this.sdyhlist[val].label;
			},
			getAddFn(){
				var obj={tit:''}
				this.list.push(obj)
			},
			getDelFn(idx){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.list.splice(idx,1)
						} else if (res.cancel) {
						}
					}
				});
				
			}
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
.check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
.check{min-height: 100vh;padding: 148rpx 24rpx 110rpx;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;
	.chmain{
		padding: 0 32rpx;
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
		.addbox{display: flex;align-items: center;justify-content: space-between;padding:14rpx 0 24rpx;
			.btna{padding: 20rpx 0;
				view{font-weight: 500;font-size: 26rpx;color: #0256FD;}
				image{width: 24rpx;height: 24rpx;margin-right: 12rpx;}
			}
			.btnb{padding: 20rpx 0;
				view{font-weight: 500;font-size: 26rpx;color: #FF6969;}
				image{width: 22rpx;height: 24rpx;margin-right: 14rpx;}
			}
		}
	}
	
}
.tabs{display: flex;align-items: center;flex-wrap: nowrap;overflow: auto;padding: 58rpx 6rpx 40rpx 26rpx;position: fixed;left: 0;right: 0;top: 0;background-color: #F3F3F0;z-index: 2;
	.tab{min-width: 120rpx;height: 50rpx;background: #D9D9D9;border-radius: 26rpx;font-weight: 500;padding: 0 12rpx;box-sizing: border-box;margin-right:20rpx;font-size: 26rpx;color: #666666;display: flex;align-items: center;justify-content: center;
		&.act{border: 2rpx solid #0556F6;background: #FFFFFF;color: #0556F6;}
	}
}
</style>