rongzidanbao-ui/work/components/popup/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<!-- 业务进度 -->
		<view class="speedbox" v-if="type=='ywjd'">
			<view class="tit">业务进度</view>
			<view class="lists" v-for="(ite,idx) in stepList" :key='idx'>
				<view class="listl">
					<image :src="stepa" class="imga" v-if="Number(stepval)>Number(ite.val)"></image>
					<image :src="stepb" v-else-if="stepval==ite.val"></image>
					<image :src="stepc" v-else></image>
				</view>
				<view class="listr">
					<view class="ltit" :class="stepval==ite.val?'act':''">{{ite.tit}}</view>
					<view class="ltxt">{{ite.time}}</view>
				</view>
			</view>
		</view>
		<!-- 业务审核 -->
		<view class="fixbox" v-if="type=='sh'">
			<view class="cloimg" @click="getClose">
				<image :src="closeimg"></image>
			</view>
			<view class="ttit">业务审核</view>
			<view class="mb16">
				<view class="ttxt mb18">是否同意进入初审</view>
				<uni-data-checkbox :selectedColor="actcolor" v-model="isty" :localdata="tyList" />
			</view>
			<view class="mb16">
				<view class="ttxt mb18">审核意见</view>
				<textarea class="textar" style="height: 156rpx;" placeholder="若不同意进入初审，请填写理由…"></textarea>
			</view>
			<view class="mb16">
				<view class="ttxt mb18">分配A角</view>
				<uni-data-select  v-model="mycdtxt"  placeholder="请选择A角"  :localdata="mycdlist"  ></uni-data-select>
			</view>
			<view class="mb16">
				<view class="ttxt mb18">分配B角</view>
				<uni-data-select  v-model="mycdtxt"  placeholder="请选择B角"  :localdata="mycdlist"  ></uni-data-select>
			</view>
			<view class="btns">确认并生成担保意向函</view>
		</view>
		<!-- a,b角色审核 -->
		<view class="fixbox" v-if="type=='ajssh'||type=='bjssh'">
			<view class="cloimg" @click="getClose">
				<image :src="closeimg"></image>
			</view>
			<view class="ttit">担保初审</view>
			<view class="mb16">
				<view class="ttxt mb18">是否通过</view>
				<uni-data-checkbox :selectedColor="actcolor" v-model="isty" :localdata="tyList" />
			</view>
			<view class="">
				<view class="ttxt mb18">审核意见</view>
				<textarea class="textar" style="height: 156rpx;" placeholder="若资料不予通过，请填写理由…"></textarea>
			</view>
			<view class="btns" @click="getupSubmit">确认</view>
			<view class="shtips" v-if="type=='ajssh'">* 提交后将交由B角复核，误操可撤回</view>
			<view class="shtips" v-if="type=='bjssh'">* 提交后将交由风险部进行风险审核，误操可撤回</view>
		</view>
		<!--  风险审核-->
		<view class="fixbox" v-if="type=='fxbmsh'">
			<view class="cloimg" @click="getClose">
				<image :src="closeimg"></image>
			</view>
			<view class="ttit">风险审核</view>
			<view class="mb16">
				<view class="ttxt mb18">是否通过</view>
				<uni-data-checkbox :selectedColor="actcolor" v-model="isty" :localdata="tyList" />
			</view>
			<view class="mb16">
				<view class="ttxt 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" >
						<view class="fbtns co0a" :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(idx)">
						<image :src="fdelimg"></image>
					</view>
				</view>
			</view>
			<view class="btns" @click="getupSubmit">确认</view>
		</view>
		<!-- 上会管理员审核 shsh -->
		<view class="fixbox" v-if="type=='shsh'">
			<view class="cloimg" @click="getClose">
				<image :src="closeimg"></image>
			</view>
			<view class="ttit">上会审核</view>
			<view class="mb16">
				<view class="ttxt mb18">是否同意上评审会</view>
				<uni-data-checkbox :selectedColor="actcolor" v-model="isty" :localdata="tyList" />
			</view>
			<view class="mb16">
				<view class="ttxt mb18">评审会日期</view>
				<picker mode="date"   @change='bindDateChangea'>
					<view class="chekt">
						<view :class="jtri?'':'coa'">{{jtri|| "请选择具体日期"}}</view>
						<image :src="upimg"></image>
					</view>
				</picker>
			</view>
			<view class="mb16">
				<view class="ttxt mb18">审核意见</view>
				<textarea class="textar" style="height: 156rpx;" placeholder="若不同意上会，请填写理由…"></textarea>
			</view>
			<view class="mb16">
				<view class="ttxt mb18 flexcj">上会人员
					<view class="addsh">
						<image :src="addpeimg"></image>添加上会人员
					</view>
				</view>
				<view class="peolists">
					<view class="plist">
						<view class="flex1 over">周大吉</view>
						<image :src="fdelimg"></image>
					</view>
					<view class="plist">
						<view class="flex1 over">周大吉</view>
						<image :src="fdelimg"></image>
					</view>
					<view class="plist">
						<view class="flex1 over">周大吉</view>
						<image :src="fdelimg"></image>
					</view>
					<view class="plist">
						<view class="flex1 over">周大吉</view>
						<image :src="fdelimg"></image>
					</view>
					
				</view>
			</view>
			<view class="shshtips">* 确认上会后，即出具评审意见签批表、股东会决议</view>
			<view class="btns" style="margin-top: 18rpx;" @click="getupSubmit">确认</view>
		</view>
		<!-- 上会上传附件 -->
		<view class="fixbox" v-if="type=='shhj'">
			<view class="cloimg" @click="getClose">
				<image :src="closeimg"></image>
			</view>
			<view class="ttit">上传附件</view>
			<view class="mb16">
				<view class="ttxt 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" >
						<view class="fbtns co0a" :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(idx)">
						<image :src="fdelimg"></image>
					</view>
				</view>
			</view>
			<view class="conbtns flexcj">
				<!-- <view class="cbtns bga">暂存</view> -->
				<view class="cbtns bgb">确认</view>
			</view>
		</view>
		<!-- 审核结果二次确认弹窗 -->
		<view class="fixbox con" v-if="type=='confirm'">
			<view class="cloimg" @click="getClose">
				<image :src="closeimg"></image>
			</view>
			<view class="ttit">确认提交审核意见</view>
			<view class="conttxt">请您二次确认对该项目资料提交 “<text>通过</text>”的审核意见吗？</view>
			<view class="conbtns flexcj">
				<view class="cbtns bga" @click="getClose">取消</view>
				<view class="cbtns bgb">确认</view>
			</view>
		</view>
		<!-- 尽职调查反馈 -->
		<view class="fixbox" v-if="type=='jztcsh'">
			<view class="cloimg" @click="getClose">
				<image :src="closeimg"></image>
			</view>
			<view class="ttit">业务审核</view>
			<view class="mb16">
				<view class="ttxt mb18">上传照片</view>
				<view class="addpbox">
					<view class="plist addpimg" @click="getaddImage">
						<image :src="addpimg"></image>
					</view>
					<view class="plist">
						<image :src="addpimg" class="img"></image>
						<image :src="fdelimg" class="del"></image>
					</view>
					<view class="plist">
						<image :src="addpimg" class="img"></image>
						<image :src="fdelimg" class="del"></image>
					</view>
					<view class="plist">
						<image :src="addpimg" class="img"></image>
						<image :src="fdelimg" class="del"></image>
					</view>
				</view>
			</view>
			<view class="ptips">* 点击添加照片可实时拍摄照片上传，也可由手 机相册中上传</view>
			<view class="mb16">
				<view class="ttxt 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" >
						<view class="fbtns co0a" :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(idx)">
						<image :src="fdelimg"></image>
					</view>
				</view>
			</view>
			<view class="conbtns flexcj">
				<view class="cbtns bga" @click="getClose">取消</view>
				<view class="cbtns bgb">确认</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{
		props:{
			type: {
				type: String,
				default () {
					return ''
				}
			},
			stepList:{
				type: Array,
				default () {
					return []
				}
			},
			stepval:{
				type: [Number,String],
				default () {
					return 0
				}
			}
		},
		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:[{name:'安徽嘉欣医疗用品有…调查报告.pdf',url:''}],
				
				stepa:require('@/work/static/images/busin/stepa.png'),
				stepb:require('@/work/static/images/busin/stepb.png'),
				stepc:require('@/work/static/images/busin/stepc.png'),
				closeimg:require('@/work/static/images/close.png'),
				filico:require('@/work/static/images/filico.png'),
				fdelimg:require('@/work/static/images/del.png'),
				addpimg:require('@/work/static/images/addp.png'),
				upimg:require('@/work/static/images/aup.png'),
				addpeimg:require('@/work/static/images/aap.png'),
				actcolor:'#00A9F0',
				tyList:[{text: '同意',value: '0'},{text: '不同意',value: '1'}],
				mycdlist:[{text: 'a',value: '0'},{text: 'b',value: '1'}],
				isty:'0',
				mycdtxt:'',
				jtri:'',//具体日期
			}
		},
		methods:{
			getClose(){
				this.$emit('getClose')
			},
			getupSubmit(){
				this.$emit('getupSubmit')
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.jtri=val;
			},
			// 上传图片
			getaddImage(e){
				let that = this;
				let file =[],count=9
				// if(e=='zj'){
				// 	file = that.zjfile;
				// 	count=9
				// }else{
				// 	file = that.mjfile;
				// 	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){
								if(e=='zj'){
									that.zjfile = that.zjfile.concat(rs);
									that.datainfo.identificationPhoto=that.zjfile.join(',')
								}
							})	
						}
					}
				});
			},
			onuploadEnd(item) {
				var newobj={}
				var responseText=JSON.parse(item.responseText)
				newobj.name=responseText.originalFilename;
				newobj.url=responseText.fileName;
				this.filelist.push(newobj)
				// this.datainfo.zsyzFjList=JSON.parse(JSON.stringify(this.filelist))
			},
			getDelFj(idx){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.filelist.splice(idx,1)
							// that.datainfo.zsyzFjList=JSON.parse(JSON.stringify(that.filelist))
						} else if (res.cancel) {
						}
					}
				});
			},
			getDown(e){
				uni.showLoading({
					title: '加载中'
				});
				var url=baseUrl+e;
				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()}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
// 进度
.speedbox{background: #FFFFFF;box-shadow: 0px 0px 14rpx 0px rgba(184,184,184,0.76);border-radius: 20rpx;padding: 44rpx 40rpx 0;
	position: fixed;z-index: 10;left: 220rpx;top: 50%;transform: translateY(-50%);max-height: calc(100vh - 200rpx);overflow: auto;
	.tit{font-weight: bold;font-size: 30rpx;color: #222327;margin-bottom: 36rpx;}
	.lists{display: flex;align-items: flex-start;position: relative;padding-bottom: 52rpx;
		&::after{content: '';width: 2rpx;position: absolute;left: 15rpx;top: 56rpx;bottom: 56rpx;height: 60rpx;background: #E6E6E6;}
		&:last-child{
			&::after{display: none;}
			// .ltit{color: #01A9F0 !important;}
		}
		.listl{width: 32rpx;height: 32rpx;margin-right: 22rpx;display: flex;align-items: center;justify-content: center;
			image{width: 32rpx;height: 32rpx;
				&.imga{width: 30rpx;height: 30rpx;}
			}
		}
		.listr{
			.ltit{font-weight: 500;font-size: 26rpx;color: #222327;margin-bottom: 22rpx;
				&.act{color: #01A9F0;}
			}
			.ltxt{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
		}
	}
}
.fixbox /deep/ .uni-select{border: none;background-color: #EEEEEE;height: 88rpx;}
.fixbox /deep/ .uni-select__input-placeholder{font-size: 30rpx;color: #AAAAAA;}
.fixbox /deep/ .uni-textarea-placeholder{font-size: 26rpx;color: #AAAAAA;}
.textar{width: 100%;border-radius: 10rpx;padding: 26rpx 30rpx;font-size: 26rpx;color: #222327;height: 400rpx;background: #EEEEEE;
	&.texthe{height: 190rpx;}
}
.fixbox{position: fixed;left: 56rpx;right: 56rpx;background: #FFFFFF;max-height: calc(100vh - 200rpx);overflow: auto;
border-radius: 20rpx;z-index: 10;top: 50%;transform: translateY(-50%);padding: 40rpx 48rpx 52rpx;
	.cloimg{display: flex;align-items: center;justify-content: center;position: absolute;width: 40rpx;height: 40rpx;
	top: 40rpx;left: 40rpx;
		image{width: 22rpx;height: 22rpx;}
	}
	.ttit{font-weight: bold;text-align: center;font-size: 30rpx;color: #222327;margin-bottom:50rpx;}
	.ttxt{font-weight: bold;font-size: 30rpx;color: #222327;}
	.btns{margin-top: 70rpx;width: 100%;background: #00A9F0;border-radius:10rpx;height: 88rpx;display: flex;align-items: center;justify-content: center;font-weight: 500;font-size: 30rpx;color: #FFFFFF;}
	.shtips{font-weight: 500;text-align: center;margin-top: 36rpx;font-size: 24rpx;color: #FF6969;padding-bottom: 20rpx;}
	//按钮
	.conbtns{margin-top: 66rpx;
		.cbtns{flex:1;display: flex;align-items: center;justify-content: center;box-sizing: border-box;height: 88rpx;font-weight: 500;
	font-size: 30rpx;background: #FFFFFF;border-radius: 10rpx;
			&.bga{border: 1px solid #00A9F0;background: #FFFFFF;color: #01A9F0;margin-right: 24rpx;}
			&.bgb{background: #00A9F0;color: #FFFFFF;}
		}
	}
	// 二次确认弹窗
	&.con{
		left: 80rpx;right: 80rpx;padding-bottom: 60rpx;
		.conttxt{font-weight: bold;font-size: 30rpx;color: #222327;padding: 0 34rpx;text-align: center;
			padding-top: 36rpx;
			text{color: #00A9F0;}
			
		}	
	}
	// 上传图片
	.addpbox{display: flex;flex-wrap: wrap;
		.plist{width: 160rpx;height: 160rpx;background: #FFFFFF;border-radius: 20rpx;position: relative;margin-bottom: 10rpx;
			margin-right: 30rpx;border: 2rpx dashed #CDCDCD;display: flex;align-items: center;justify-content: center;
			&:nth-of-type(3n){margin-right: 0;}
			&.addpimg{
				border: 0;
				image{width: 100%;height: 100%;}
			}
			.img{width: 150rpx;height: 150rpx;}
			.del{width: 24rpx;height: 24rpx;position: absolute;right: -6rpx;top: -6rpx;}
		}
	}
	// 选择日期
	.chekt{
		background-color: #EEEEEE;height: 88rpx;border-radius: 8rpx;display: flex;align-items: center;padding: 0 40rpx 0 24rpx;
		view{font-size: 30rpx;flex: 1;}
		image{width: 16rpx;height: 10rpx;flex: 0 0 auto;margin-left: 12rpx;}
	}
	// 上会人员添加
	.shshtips{font-weight: 500;padding-top: 14rpx;font-size: 24rpx;color: #FF6969;}
	.addsh{font-weight: 500;flex:0 0 auto; font-size: 30rpx;color: #00A9F0;display: flex;align-items: center;
		image{width: 24rpx;height: 24rpx;margin-right: 8rpx;}
	}
	.peolists{
		display: flex;flex-wrap: wrap;
		.plist{background-color: rgba(0, 169, 240, 0.1);font-weight: 500;font-size: 26rpx;border-radius:10rpx;width: 172rpx;margin: 0 12rpx 18rpx 0;display: flex;align-items: center;padding: 18rpx 16rpx;box-sizing: border-box;
color: #666666;overflow: hidden;
			&:nth-of-type(3n){margin-right: 0;}
			image{width: 26rpx;height: 26rpx;}
		}
	}
	.ptips{font-weight: 500;font-size: 26rpx;color: #FF6969;margin-bottom: 40rpx;}
	// 附件
	.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;}
		.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;}
	}
}
</style>