property/property_ui/work/components/popup/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<!-- 指派 -->
		<view v-if="type=='assign'" class="assignbox">
			<view class="asstit">报修指派</view>
			<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
				<view class="flexc asline">
					<view class="flex1  f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择是类型'}}</view>
					<view class="rimg"><image :src="rimg"></image></view>
				</view>
			</picker>
			<view class="tabtit">选择维修师傅</view>
			<view class="asslists">
				<view class="asslist" :class="peoval==ite.val?'act':''" v-for="(ite,idx) in peolist" :key="idx" @click="getChose(ite.val)">
					<image :src="headbg" v-if="peoval==ite.val"></image>
					<view class="altit">{{ite.name}}</view>
					<view class="altxt cof6" v-if="ite.type==0">指派中</view>
					<view class="altxt co28" v-if="ite.type==1">空闲中</view>
				</view>
			</view>
			<view class="rhbtn"  @click="getSure">确定</view>
			<image :src="closeimg" class="closeimg"  @click="getClose"></image>
		</view>
		<!-- 上门打卡 -->
		<view v-if="type=='assigncheck'" class="assignbox pra">
			<view class="asstit">{{finshtype==2?'完成打卡':'上门打卡'}}</view>
			<view class="assadd">
				<image :src="addpho"></image>
				<view>去拍照</view>
			</view>
			<view class="assimgs">
				<view class="assimg">
					<image :src="headbg" class="img"></image>
					<image :src="rdelimg" class="delimg" @click="getDelFn"></image>
				</view>
				<view class="assimg">
					<image :src="headbg" class="img"></image>
					<image :src="rdelimg" class="delimg" @click="getDelFn"></image>
				</view>
				<view class="assimg">
					<image :src="headbg" class="img"></image>
					<image :src="rdelimg" class="delimg" @click="getDelFn"></image>
				</view>
			</view>
			<view class="rhbtn"  @click="getSure">确定</view>
			<image :src="closeimg" class="closeimg"  @click="getClose"></image>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { getToken } from '@/utils/auth'
	import {uploadmore} from '@/utils/common.js'
	export default{
		components:{},
		props:{
			type: {
				type: String,
				default () {
					return ''
				}
			},
			finshtype:{
				type: [String,Number],
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				baseUrl:config.baseUrl,
				closeimg:require("@/work/static/close.png"),
				rimg: require('@/work/static/people/rimg.png'),
				headbg: require('@/work/static/service/headbg.png'),
				addpho: require('@/work/static/service/addpho.png'),
				rdelimg: require('@/work/static/service/rdel.png'),
				syqxidx:'',
				datainfo:{
					iszc:""
				},
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				peoval:0,
				peolist:[{name:'王安安',val:"0",type:0},{name:'刘柠溪',val:"1",type:1},{name:'王合一',val:"2",type:0},]
			}
		},
		mounted() {
			this.baseUrl=baseUrl
		},
		watch:{
			
			type(val){
				// this.filelist=[];
				// this.shtext='';
				// this.isty='2';
				// this.phofile=[];
			}
		},
		methods:{
			bindDateChange(){
				var val=e.detail.value;
			},
			getClose(){
				this.$emit('getClose')
			},
			getSure(){
				this.$emit('getSure')
			},
			getChose(val){
				this.peoval=val
			},
			getPreviewImage(arr,idx){
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
			getDelFn(){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							// that.filelist.splice(idx,1)
						} else if (res.cancel) {
						}
					}
				});
			},
			getaddImage(e){
				let that = this;
				let file =[],count=9
				uni.chooseImage({
					count: 1,
					success:function(res){
						let img= res.tempFilePaths;
						if(img.length + file.length > count){
							uni.showToast({
								title: '最多上传'+count+'张图片',
								icon: 'none',
								duration: 2000
							})
						}else{
							let imglen = res.tempFilePaths.length;
							var fuwufile = [];
							uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								var resurl=rs[0];
								// if(e=='front'){
								// 	that.datainfo.front=resurl.fileName;
								// }else{
								// 	that.datainfo.back=resurl.fileName;
								// }
							})	
						}
					}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>	
// 指派
.assignbox{background: #FFFFFF;border-radius: 20rpx;position: fixed;left:56rpx;right:54rpx;z-index: 10;top: 50%;transform: translateY(-50%);padding: 32rpx 38rpx 36rpx;
	.asstit{font-weight: bold;font-size: 30rpx;color: #272727;text-align: center;padding-left: 16rpx;margin-bottom: 28rpx;}
	.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
		image{width: 100%;height: 100%;}
	}
	.asline{border-bottom: 2rpx solid #E5E5E5;padding: 30rpx 0;margin-bottom: 40rpx;}
	.tabtit{font-weight: bold;font-size: 26rpx;color: #272727;line-height: 36rpx;margin-bottom: 24rpx;padding-left: 14rpx;}
	.asslists{display: flex;flex-wrap: wrap;
		.asslist{width: 252rpx;height: 76rpx;border-radius: 20rpx;border: 2rpx solid #DADADA;position: relative;display: flex;align-items: center;box-sizing: border-box;padding: 0 22rpx;margin: 0 14rpx 24rpx 14rpx;overflow: hidden;
			&.act{border-color: #0256FD;
				.altit{color: #0256FD;}
			}
			image{position: absolute;right: -2rpx;bottom: -2rpx;width: 34rpx;height: 32rpx;}
			.altit{font-weight: bold;font-size: 26rpx;color: #666666;flex: 1;}
			.altxt{font-weight: bold;font-size: 22rpx;flex: 0 0 auto;}
		}
	}
	
	// 上传图片
	&.pra{left: 100rpx;right: 100rpx;}
	.assadd{display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 10rpx;height: 192rpx;
border: 2rpx dashed #A7A7A7;box-sizing: border-box;margin-bottom: 32rpx;
		image{width:48rpx;height: 40rpx;margin-bottom: 16rpx;}
		view{font-weight: bold;font-size: 26rpx;color: #272727;}
	}
	.assimgs{display: flex;align-items: center;flex-wrap: wrap;margin-bottom: 8rpx;
		.assimg{width: 140rpx;height: 140rpx;position: relative;overflow: hidden;margin: 0 24rpx 24rpx 0;
			&:nth-of-type(3n){margin-right: 0;}
			.img{width: 100%;height: 100%;}
			.delimg{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;}
		}
	}
}
.closeimg{width: 32rpx;height: 32rpx;position: absolute;bottom: -62rpx;left: 50%;margin-left: -16rpx;}
</style>