property/staff_ui/components/home/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<!-- 实名认证 -->
		<view v-if="type=='tips'" class="assignbox atips">
			<image :src="tiprz" class="tiprz"></image>
			<view class="assbox">
				<view class="asstips">
					<view class="tit">温馨提示</view>
					<view class="txt">您还未进行实名认证，认证即可接单</view>
				</view>
				<view class="rhbtn mlr4"  @click="getSure">去实名认证</view>
			</view>
			<image :src="closeimg" class="closeimg"  @click="getClose"></image>
		</view>
		<!-- 取消订单 -->
		<view v-if="type=='cancel'" class="assignbox cancel">
			<view class="assbox">
				<view class="asstit mb18">取消订单</view>
				<view class="pb16">
					<view class="canceltxt">您确定取消该订单吗？</view>
					<view class="canceltxt">如若取消，则需缴纳罚单<text class="cofe">¥20</text></view>
					<view class="cantips mt18 mb13">
						<text class="cof4">*</text> 取消原因
					</view>
					<view class="canlists" v-for="(ite,idx) in canres" :key="idx" @click="getTabFn(ite.val)">
						<image :src="chose" v-if="tabval==ite.val"></image>
						<image :src="nchose" v-else></image>
						{{ite.tit}}
					</view>
				</view>
				<view class="rhbtn"  @click="getSure">确认取消</view>
			</view>
			<image :src="closeimg" class="closeimg"  @click="getClose"></image>
		</view>
		
		<!-- 拍照 -->
		<view v-if="type=='addpho'" class="assignbox pra">
			<view class="assbox">
				<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>
			</view>
			<image :src="closeimg" class="closeimg"  @click="getClose"></image>
		</view>
		<!-- 二维码 -->
		<view v-if="type=='minecode'" class="mcode">
			<view class="asstop flex1">
				<view class="flexe">
					<image :src="closeimg" class="closes"  @click="getClose"></image>
				</view>
				<view class="codetit">我的二维码</view>
				<view class="assbox">
					<view class="mtop flexc">
						<image :src="headimg" class="head flex0"></image>袁明朗
						<image :src="rzico" class="rzimg flex0"></image>
					</view>
					<view class="codes">
						<image :src="headimg" class="codes"></image>
					</view>
				</view>
			</view>
			<view class="sharebox flexcc">
				<view class="shbox">
					<image :src="sharea"></image>
					<view>微信好友</view>
				</view>
				<view class="shbox">
					<image :src="shareb"></image>
					<view>微信朋友圈</view>
				</view>
				<view class="shbox">
					<image :src="down"></image>
					<view>保存图片</view>
				</view>
			</view>
			
		</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 ''
				}
			},
			canres:{
				type: Array,
				default () {
					return []
				}
			},
			finshtype:{
				type: [String,Number],
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				baseUrl:config.baseUrl,
				closeimg:require("@/static/images/close.png"),
				// rimg: require('@/work/static/people/rimg.png'),
				// headbg: require('@/work/static/service/headbg.png'),
				addpho: require('@/static/images/addpho.png'),
				rdelimg: require('@/static/images/rdel.png'),
				tiprz: require('@/static/images/home/tiprz.png'),
				chose: require('@/static/images/home/chose.png'),
				nchose: require('@/static/images/home/nchose.png'),
				headimg:require("@/static/images/mine/profile.png"),
				rzico:require("@/static/images/mine/rzico.png"),
				down:require("@/static/images/mine/down.png"),
				sharea:require("@/static/images/mine/sharea.png"),
				shareb:require("@/static/images/mine/shareb.png"),
				datainfo:{
					iszc:""
				},
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				tabval: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')
			},
			getTabFn(val){
				this.tabval=val
			},
			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:140rpx;right:140rpx;z-index: 10;top: 50%;transform: translateY(-50%);padding:32rpx 36rpx 36rpx;
	.assbox{max-height: calc(100vh - 300rpx);overflow: auto;}
	.asstit{font-weight: bold;font-size: 30rpx;color: #272727;text-align: center;padding-left: 16rpx;margin-bottom: 28rpx;}
	// 取消订单
	&.cancel{padding-bottom: 40rpx;
		.canceltxt{font-weight: 500;text-align: center;
font-size: 30rpx;
color: #272727;}
		.cantips{font-weight: bold;font-size: 26rpx;color: #272727;
			text{margin-right: 6rpx;}
		}
		.canlists{font-weight: 500;font-size: 26rpx;color: #666666;padding-left: 18px;margin-bottom: 20rpx;
			image{width: 20rpx;height: 20rpx;margin-right: 16rpx;flex: 0 0 auto;margin-top: 7rpx;}
		}
	}
	
	// 温馨提示
	&.atips{min-height: 348rpx;background: linear-gradient(180deg, #E8F2FF 0%, #FFFFFF 65%);padding: 32rpx 28rpx 36rpx;
border-radius: 10px;}
	.tiprz{width: 112rpx;height: 130rpx;position: absolute;left: 50%;top: -42rpx;margin-left: -56rpx;}
	.asstips{padding-top: 40rpx;
		.tit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 24rpx;}
		.txt{font-weight: 500;font-size: 26rpx;color: #272727;margin-bottom: 20rpx;min-height: 72rpx;}
	}
	
	// 上传图片
	&.pra{}
	.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;}
		}
	}
	
}
// 二维码
	.mcode{background-color: transparent;left: 0rpx;right: 0;top: 0;bottom: 0;position: fixed;z-index: 10;box-sizing: border-box;display: flex;flex-direction: column;padding-bottom: 100rpx;align-items: center;overflow: auto;
		.asstop{margin-bottom: 40rpx;display: flex;flex-direction: column;justify-content: center;
			width: 566rpx;position: relative;
			.closes{width: 30rpx;height: 30rpx;margin-bottom: 100rpx;}
			.codetit{font-weight: bold;font-size: 26rpx;color: #FFFFFF;margin-bottom: 76rpx;text-align: center;}
			.assbox{background: #FFFFFF;border-radius: 20rpx;padding: 56rpx 88rpx 88rpx;
				.codes{width: 384rpx;height: 384rpx;}
			}
			.mtop{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 68rpx;
				.head{width: 56rpx;height: 56rpx;margin-right: 32rpx;border-radius: 50%;}
				.rzimg{width: 64rpx;height: 22rpx;margin-left: 18rpx;}
			}
		}
		
		.sharebox{flex: 0 0 auto;
			.shbox{display: flex;flex-direction: column;align-items: center;padding: 0 22rpx;margin: 0 26rpx;
				image{width: 90rpx;height: 90rpx;}
				view{font-weight: 500;font-size: 24rpx;color: #DFDFDF;}
			}
		}
	}
.closeimg{width: 32rpx;height: 32rpx;position: absolute;bottom: -62rpx;left: 50%;margin-left: -16rpx;}
</style>