property/property_ui/service/components/popup/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<!-- 指派 -->
		<view v-if="type=='assign'" class="assignbox">
			<view class="assbox">
				<view class="asstit">报修指派</view>
				<picker range-key='dictLabel' disabled="true" :value="syqxidx" :range="sexs"   @change='bindDateChange'>
					<view class="flexc asline">
						<!-- <view class="flex1  f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择维修类型'}}</view> -->
						<view class="flex1 co27 f13">{{kaType(bxlb,bxlbList)}}</view>
						<view class="rimg"><image :src="rimg"></image></view>
					</view>
				</picker>
				<view class="tabtit">选择维修师傅</view>
				<view class="asslists">
					<view class="asslist" :class="peoval==ite.staffId?'act':''" v-for="(ite,idx) in peolist" :key="idx" @click="getChose(ite.staffId,ite)">
						<image :src="headbg" v-if="peoval==ite.staffId"></image>
						<view class="altit">{{ite.staffName}}</view>
						<view class="altxt " :class="{'cof6':ite.status==0,'co28':ite.status==1,}">{{kaType(ite.status,vxsztList)}}</view>
						<!-- <view class="altxt co28" v-if="ite.status==1">空闲中</view> -->
					</view>
				</view>
				<view class="rhbtn"  @click="getSure('assign')">确定</view>
			</view>
			<image :src="closeimg" class="closeimg"  @click="getClose"></image>
		</view>
		<!-- 上门打卡 -->
		<view v-if="type=='assigncheck'" class="assignbox pra">
			<view class="assbox">
				<view class="asstit">{{finshtype==3?'完成打卡':'上门打卡'}}</view>
				<view class="assadd" @click="getaddImage">
					<image :src="addpho"></image>
					<view>去拍照</view>
				</view>
				<view class="assimgs" v-if="phofile&&phofile.length">
					<view class="assimg" v-for="(ite,idx) in phofile" :key="idx" @click="getPreview(idx,phofile)">
						<image :src="baseUrl+ite" class="img"></image>
						<image :src="rdelimg" class="delimg" @click.stop="getDelFn(idx)"></image>
					</view>
				</view>
				<view class="rhbtn"  @click="getSure('assigncheck')">确定</view>
			</view>
			<image :src="closeimg" class="closeimg"  @click="getClose"></image>
		</view>
		<!-- 建议回复 -->
		<view v-if="type=='reply'" class="assignbox pra">
			<view class="assbox">
				<view class="asstit">回复</view>
				<uni-easyinput maxlength='200' type="textarea" autoHeight v-model="text" :inputBorder='false' placeholder="请输入回复内容，最多不超过200字…" />
				<view class="voice mb20">
					<view class="flexc">
						<image :src="voice"></image>
						语音输入
					</view>
				</view>
				<view class="fjtxt mb18 flexcj">附件信息
					<lsj-upload ref="lsjUpload" childId="upload1"  :width="width" :height="height" :option="option" :size="size" :formats="formats" :debug="debug" :instantly="instantly"
						    @progress="" @uploadEnd="onuploadEnd" fileVal="1" bigType="1">
							<!-- fileName="123" fileVal='dbxmhfhgb' bigType="c" -->
						<view class="fjbtns co02" :style="{width: width,height: height}">上传附件</view>
					</lsj-upload>
				</view>
				<view class="fjlists"  v-for="(fite,fidx) in filelist" :key='fidx'>
					<view class="flext" @click="getDown(fite.url)">
						<view class="imgl"><image :src="filico" ></image></view>
						<view class="tit">{{fite.name}}</view>
					</view>
					<view class="delimg flex0" @click.stop="getDelFj(fidx)">
						<image :src="fdelimg"></image>
					</view>
				</view>
				<view class="rhbtn mt40"  @click="getSure('reply')">确定</view>
			</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'
	import {selectDictValue} from "@/utils/common.js"
	export default{
		components:{},
		props:{
			type: {
				type: String,
				default () {
					return ''
				}
			},
			finshtype:{
				type: [String,Number],
				default () {
					return ''
				}
			},
			suggestionId:{
				type: [String,Number],
				default () {
					return ''
				}
			},
			peolist:{
				type: Array,
				default () {
					return []
				}
			},
			vxsztList:{
				type: Array,
				default () {
					return []
				}
			},
			bxlbList:{
				type: Array,
				default () {
					return []
				}
			},	
			bxlb:{
				type: [String,Number],
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				//附件
				option: {
				    // 上传服务器地址，需要替换为你的接口地址
				    url: baseUrl+'/common/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
				    // 上传附件的key
				    name: 'file',
				    // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
				    header: {
				        // 示例参数可删除
				        'Authorization':  'Bearer ' + getToken(),
				    },
				    // 根据你接口需求自定义body参数
				    formData: {
					}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				width: '',
				height: '40rpx',
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: 'doc,docx,xls,xlsx,ppt,txt,pdf,zip,rar,word,png,jpg,jpeg',
				// 文件上传大小限制
				size: 100,
				// 文件数量限制 默认10
				count: 5,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: false,
				filelist:[],
				filico:require('@/work/static/filico.png'),
				fdelimg:require('@/work/static/fjdel.png'),
				
				baseUrl:config.baseUrl,
				closeimg:require("@/work/static/close.png"),
				rimg: require('@/people/static/people/rimg.png'),
				headbg: require('@/service/static/service/headbg.png'),
				addpho: require('@/service/static/service/addpho.png'),
				rdelimg: require('@/service/static/service/rdel.png'),
				voice: require('@/service/static/service/voice.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},],
				text:'',//文本框
				peoinfo:'',
				phofile:[],
			}
		},
		mounted() {
			this.baseUrl=baseUrl
		},
		watch:{
			// loanApplicationNumber(val){
			// 	this.option.formData.loanApplicationNumber=val
			// 	this.jjoption.formData.loanApplicationNumber=val
			// },
			// loanApplicationId(val){
			// 	this.option.formData.loanApplicationId=val
			// 	this.jjoption.formData.loanApplicationId=val
			// },
			type(val){
				// this.filelist=[];
				// this.shtext='';
				// this.isty='2';
				// this.phofile=[];
			}
		},
		methods:{
			kaType(data, list) {
				console.log(data,list)
				return selectDictValue(list, data);
			},
			bindDateChange(){
				var val=e.detail.value;
			},
			getClose(){
				this.$emit('getClose')
			},
			getSure(type){
				var that=this;
				var data={}
				if(type=='reply'){
					if(!this.text){
						this.$toast("请输入回复内容")
						return
					}
					data.replyContent=this.text;
					if(this.filelist){
						data.suggestionFjList=this.filelist
					}
				}else if(type=='assign'){
					var peoinfo=JSON.parse(JSON.stringify(this.peoinfo))
					data.staffName=peoinfo.staffName;
					data.staffId=peoinfo.staffId;
					data.staffPhone=peoinfo.phoneNumber;
				}else if(type=='assigncheck'){
					var peoinfo=JSON.parse(JSON.stringify(this.phofile))
					if(peoinfo.length<1){
						this.$toast("请上传图片")
						return
					}
					data.imgurl=peoinfo.join(',');
				}
				this.$emit('getSure',data)
			},
			getChose(val,ite){
				this.peoval=val;
				this.peoinfo=JSON.parse(JSON.stringify(ite))
			},
			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) {
						
					}
				});
			},
			// 上传
			onuploadEnd(item,fileVal,bigType) {
				var newobj={}
				var responseText=JSON.parse(item.responseText)
				if(responseText.code==200){
					// if(fileVal=='qtfj'){
					// 	newobj.name=responseText.originalFilename;
					// }else{
					// 	newobj.name=responseText.newFileName;
					// }
					newobj.name=responseText.newFileName;
					newobj.oldName=responseText.originalFilename;
					newobj.url=responseText.fileName;
					newobj.type=fileVal;
					newobj.bigType=bigType;
					newobj.suggestionId=this.suggestionId;
					// newobj.loanApplicationNumber=this.loanApplicationNumber;
					this.filelist.push(newobj)
				}else{
					this.$toast(responseText.msg)
				}
			},
			getDelFj(idx){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.filelist.splice(idx,1)
						} else if (res.cancel) {
						}
					}
				});
			},
			getDown(path,name){
				console.log(path,name)
				// #ifdef APP-PLUS
				self.getFilePermissions(function(res){
					if(res==1){
						uni.showLoading({
							title: '加载中'
						});
						var url = baseUrl + path;
						let dtask = plus.downloader.createDownload(url, {
							filename: 'file://storage/emulated/0/'+baseName+'/' + name
						}, (d, status) => {
							//d为下载的文件对象
							if (status == 200) {
								uni.hideLoading();
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '已保存到文件夹：/'+baseName+'/'+ name, //保存路径
									duration: 3000,
								});
								
								//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
								let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
								setTimeout(() => {
									plus.runtime.openFile(d.filename); //选择软件打开文件
								}, 1500)
							} else {
								//下载失败
								uni.hideLoading();
								plus.downloader.clear(); //清除下载任务
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '下载失败，请稍后重试',
								});
							}
						})
						dtask.start();
					}else{
						uni.hideLoading();
						uni.showToast({
							title: '无法获取权限，文件下载将出错！',
							icon: 'none',
						})
					}			
				})
				// #endif
				// #ifndef APP-PLUS
				this.getDownloader(path)
				// #endif
			},
			getDownloader(e){
				uni.showLoading({
					title: '加载中'
				});
				var url=baseUrl+e;
				let index1 = e.lastIndexOf("."); // 得到一个索引值
				let index2 = e.length;
				let type = e.substring(index1, index2);
				if ((type.indexOf('jpg') > -1 || type.indexOf('jpeg') > -1 || type.indexOf('png') > -1)) {
					uni.previewImage({
						current: 0,
						urls: [url],
						// background: '#ffffff'
					});
					uni.hideLoading();
				} else {
				uni.downloadFile({
					url: url,//文件的下载路径
					success(result) {
							uni.hideLoading()
						var filePath = result.tempFilePath;
						   uni.openDocument({
						     filePath: filePath,
						     showMenu: true,
						     success: function (res) {
						       // console.log('打开文档成功');
						     }
						   });
					},
					fail(res) {uni.hideLoading()}
				})
				}
			},
			getDelFn(idx){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.phofile.splice(idx,1)
						} else if (res.cancel) {
						}
					}
				});
			},
			getaddImage(e){
				let that = this;
				let file =[],count=9
				uni.chooseImage({
					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){
								that.phofile = that.phofile.concat(rs);
							})	
						}
					}
				});
			},
			
		}
	}
</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;
	.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;}
	.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;}
		}
	}
}
.voice{font-weight: 500;display: flex;justify-content:flex-end;align-items: center;margin-top: 40rpx;
font-size: 24rpx;
color: #45CB99;
		image{width: 24rpx;height: 24rpx;margin-right: 8rpx;}
	}
// 附件
	.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 20rpx;
		&:last-child{margin-bottom: 0;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;flex: 0 0 auto;
			image{width: 26rpx;height: 24rpx;}
		}
		.tit{font-size: 26rpx;color: #222327;font-weight: 500;margin-top: 4rpx;word-break: break-all;}
		.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;
			image{width: 24rpx;height: 24rpx;}
		}
		.txta{color: #28C529;font-weight: 500;line-height: 40rpx;flex: 0 0 auto;margin-left: 18rpx;padding: 0 6rpx;}
	}
.closeimg{width: 32rpx;height: 32rpx;position: absolute;bottom: -62rpx;left: 50%;margin-left: -16rpx;}
</style>