crm-xcx/pages-approve/seal/detail.vue

<template>
	<view class="detail white-wrap">
		<image :src="statusImg" mode="aspectFill" class="status-img" v-if="statusImg"></image>
		<view class="section white-wrap">
			<view class="section-title require">用印用途</view>
			<view :class="opButton.CheckEdit?'section-select-box':null" :style="{color:newUse?'#333':'#999'}" @click="handleOperation('showPurpose')">{{newUse?newUse:'请选择'}}</view>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">客户名称（全称）</view>
			<view>{{detail.CompanyName}}</view>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">统一社会信用码</view>
			<input type="text" v-model="detail.CreditCode" placeholder="请填写统一社会信用码" disabled/>
		</view>
		<view class="section white-wrap">
			<view class="section-title">实际使用方名称</view>
			<input type="text" v-model="detail.UseCompanyName" placeholder="请填写实际使用方名称" disabled/>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">业务类型</view>
			<input type="text" v-model="detail.ServiceType" placeholder="请填写业务类型" disabled/>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">文件份数</view>
			<input type="number" v-model="newFileNum" placeholder="请填写总共盖章文件份数" :disabled="!opButton.CheckEdit"/>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">加盖何种印章</view>
			<view :class="opButton.CheckEdit?'section-select-box':null" :style="{color:typeLength?'#333':'#999'}" @click="handleOperation('showType')">{{newSealType.length>0?newSealType.join(','):'请选择'}}</view>
		</view>
		<view class="section white-wrap" v-if="detail.ContractId>0">
			<view class="section-title require">合同附件</view>
			<image 
				:src="files.img" 
				mode="aspectFill" 
				style="width: 102rpx;height: 120rpx" 
				@click="handlepreViewFile(files)">
			</image>
		</view>
		<view class="section white-wrap" v-else>
			<view class="section-title require">合同附件</view>
			<!-- 合规可修改上传 -->
			<div class="check-file-box" :style="'background-image:url('+files.img+')'" v-if="files.url" @click="handlepreViewFile(files)">
				<image class="del-icon" src="../static/del-icon.png" @click.stop="handleDeleteCheckFile" v-if="opButton.CheckEdit"></image>
			</div>
			<image v-else @click="handleUpload" src="../static/upload-icon.png" mode="aspectFill" style="width: 102rpx;height: 120rpx;"></image>
		</view>
		<view class="section white-wrap" v-if="detail.Status==='已驳回'">
			<view class="section-title">驳回理由</view>
			<view style="color: #F55768;">{{detail.ApprovalRemark}}</view>
		</view>
		<view class="section white-wrap">
			<view class="section-title">备注</view>
			<textarea type="text" auto-height v-model="newRemark" placeholder="请填写备注" :disabled="!opButton.CheckEdit"></textarea>
		</view>
		<!-- 签回附件模块 -->
		<view class="section white-wrap" v-if="checkBackFilesRes.length>0">
			<view class="section-title">签回附件</view>
			<image 
				v-for="item in checkBackFilesRes"
				:key="item.url"
				:src="item.img" 
				mode="aspectFill" 
				style="width: 102rpx;height: 120rpx" 
				@click="handlepreViewFile(item)">
			</image>
		</view>
		<!-- 流程模块 -->
		<view class="section white-wrap process-wrap">
			<view class="title" style="font-size: 16px;font-weight: bold;">审批流程</view>
			<steps :data="processData"></steps>
		</view>
		
		<!-- 审批/撤回申请 -->
		<view class="fix-bottom-wrap" style="text-align: center;" v-if="opButton.Approval||opButton.Cancel">
			<view class="flex" style="justify-content: space-between;width:100%">
				<van-button type="info" color="#3385FF" style="flex:1;" custom-class="btn-small" round @click="handleClickPass" v-if="opButton.Approval">通过</van-button>
				<van-button type="info" color="#F55768" style="flex:1;" custom-class="btn-small" round @click="handleApprovalReject" v-if="opButton.Approval">驳回</van-button>
				<van-button type="info" color="#F55768" style="flex:1;" :custom-class="opButton.Approval?'btn-small':'btn-big'" round @click="handleCancelApply" v-if="opButton.Cancel">撤回申请</van-button>
			</view>
		</view>
		<!-- 作废 -->
		<view class="fix-bottom-wrap flex" style="text-align: center;align-items:flex-end" v-if="opButton.Invalid||opButton.UploadFile">
			<view style="flex:1" v-if="opButton.Invalid">
				<view v-if="detail.ContractId>0" style="margin-bottom: 10rpx;" @click="checked=!checked"><radio value="同时作废合同" :checked="checked" color="#3385FF" style="transform:scale(0.8)"/>是否同时作废合同？</view>
				<van-button type="info" color="#F55768" :custom-class="opButton.UploadFile?'btn-small':'btn-big'" round @click="handleSealInvalid">用印作废</van-button>
			</view>
			<van-button v-if="opButton.UploadFile" style="flex:1" type="info" color="#3385FF" :custom-class="opButton.Invalid?'btn-small':'btn-big'" round @click="handleUploadCheckFile">{{checkBackFilesRes.length>0?'更新回签附件':'上传回签附件'}}</van-button>
		</view>
		<!-- 重新提交 -->
		<view class="fix-bottom-wrap" style="text-align: center;" v-if="opButton.Edit">
			<van-button type="info" color="#3385FF" custom-class="btn-big" round @click="handleEdit">重新申请</van-button>
		</view>
		<!-- 撤回申请 -->
		<!-- <view class="fix-bottom-wrap" style="text-align: center;" v-if="opButton.Cancel">
			<van-button type="info" color="#3385FF" custom-class="btn-big" round @click="handleCancelApply">撤回申请</van-button>
		</view> -->
		
		<!-- 用印用途 -->
		<van-popup :show="showPurpose" @close="showPurpose=false" position="bottom">
			<van-picker 
				show-toolbar 
				title="选择用印用途" 
				:columns="purposeArr" 
				@confirm="handlePurposeConfirm"  
				@cancel="showPurpose=false"
			/>
		</van-popup>
		<!-- 何种印章 -->
		<van-popup :show="showType" @close="showType=false" position="bottom">
			<view class="type-popup-wrap">
				<view class="flex top-title">
					<text style="color:#969799" @click="showType=false">取消</text>
					<text style="font-size:16px">选择何种印章</text>
					<text style="color:#576b95" @click="handleTypeConfirm">确认</text>
				</view>
				<van-checkbox-group v-model="temType" @change="onChangeType">
					<van-checkbox shape="square" :name="item" v-for="item in typeArr" :key="item">{{item}}</van-checkbox>
				</van-checkbox-group>
			</view>
		</van-popup>
		
		<!-- 客户搜索 -->
		<van-popup :show="showCustome" @close="showCustome=false" position="bottom" custom-style="height: 100vh">
			<view class="custome-search-wrap">
				<van-search use-left-icon-slot use-action-slot shape="round" :value="searchCustomeVal" placeholder="请输入客户名称/社会信用码" @change="onSearchValChange" @search="onSearch"
					custom-class="search-box" field-class="search-con">
					<view slot="left-icon">
						<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
					</view>
					<view slot="action" @click="showCustome=false" class="search-btn">取消</view>
				</van-search>
				<view class="search-result">
					<view class="result-custome-box" v-if="searchContractList.length===0">
						<view class="result-item flex" v-for="item in searchCustomeList" :key="item" @click="getContract(item)">
							<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
							<view class="con van-ellipsis">{{item}}</view>
							<image src="../static/click-icon.png" mode="aspectFill" class="click-icon"></image>
						</view>
					</view>
					<view class="result-contract-box" v-else>
						<view class="result-contract-item" v-for="item in searchContractList" :key="item.ContractId" @click="handleChooseContract(item)">
							<view class="name">{{item.CompanyName}}</view>
							<view style="margin-top: 20rpx;">合同编号：{{item.ContractCode}}</view>
							<view style="margin-top: 20rpx;">合同类型：{{item.ContractType}}</view>
							<view style="margin-top: 20rpx;">合同金额：{{item.Price}}</view>
						</view>
					</view>
					
				</view>
			</view>
		</van-popup>

		<!-- 上传回签附件弹窗确认弹窗 -->
		<van-popup :show="showConfirmCheckBackfile" @close="showConfirmCheckBackfile=false" position="bottom" round>
			<view class="uploadfile-wrap">
				<view style="text-align: center;font-size: 16px;font-weight: bold;">上传回签附件</view>
				<view class="contract-list" style="height: 30vh;">
					<view class="contract-item" v-for="item in checkBackFiles" :key="item.url"
						@click="handlepreViewCheckFile(item)">
						<image class="contract-img" mode="aspectFill" :src="item.img"></image>
					</view>
				</view>
				<button style="width: 450rpx;" @click='handleConfirmCheckBackFile'>确定</button>
			</view>
		</van-popup>
		
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import {
		apiSealDetail,
		apiSearchCustome,
		apiSearchContract,
		apiApprovalPass,
		apiInvalidSeal,
		apiApprovalPassModify,
		apiSealCancelApply,
		apiFlowDetail,
		apiSealCheckBackFiles
		} from '@/api/approve/seal.js'
	import steps from '../components/steps.vue'
	import {preViewFile} from '../utils/util.js'
	import {uploadFiles} from '@/utils/uploadFile.js'
	export default{
		components:{
			steps
		},
		computed:{
			typeLength() {
				if (this.newSealType.length > 0) {
					return true;
				} else {
					return false;
				}
			},

			statusImg(){
				if(this.detail.Status==='已审批'){
					return require('../static/pass-icon.png')
				}else if(this.detail.Status==='已驳回'){
					return require('../static/fail-icon.png')
				}else if(this.detail.Status==='处理中'){
					return require('../static/processing-icon.png')
				}else if(this.detail.Status==='已撤回'){
					return require('../static/recall-icon.png')
				}else if(this.detail.Status==='已作废'){
					return require('../static/cancel-icon.png')
				}else if(this.detail.Status==='已签回'){
					return require('../static/draw-back-icon.png')
				}
			},
			//页面显示的回签附件
			checkBackFilesRes(){
				const reg = /\.(pdf)$/;
				return this.detail&&this.detail.CheckBackFileUrl&&this.detail.CheckBackFileUrl.split("#").map((item) => {
					if (reg.test(item)) {
						return {
							type: "pdf",
							url: item,
							img: require("@/pages-approve/static/pdf.png"),
						};
					} else {
						return {
							type: "word",
							url: item,
							img: require("@/pages-approve/static/word.png"),
						};
					}
				});
			}
		},
		watch: {
			showType() {
				if (!this.showType) {
					this.temType = JSON.parse(JSON.stringify(this.newSealType));
				}
			}			
		},
		data() {
			return {
				checkBackFiles:[],// 上传的签回附件文件
				showConfirmCheckBackfile:false,//确认上传的签回附件弹窗

				ContractApprovalId:0,
				ContractApprovalRecordId:0,
				SealId:0,
				processData:null,
				detail:{},
				opButton:{},
				files:{
					type:'',
					img:'',
					url:''
				},//合同附件
				
				showPurpose:false,//显示用印用途选项
				purposeArr: ["销售合同", "代付合同", "总对总协议", "渠道合同", "付款通知函", "招投标", "战略合作协议"],

				showType:false,//显示用印用途选项
				typeArr:['合同章','公章','法人章'],
				temType: [], //临时存放选择的用印用途

				showCustome:false,//显示搜索客户名称
				searchCustomeVal:'',//搜索客户输入数据
				searchCustomeList:[],//搜索到的客户名称列表
				searchContractList:[],//选择搜索中的客户后合同列表数据
				
				checked:false,//是否同时作废合同
				
				newUse:"",
				newFileNum:'',
				newSealType:[],
				newRemark:'',
				oldFile:''
			}
		},
		onLoad(options) {
			this.ContractApprovalId=options.ContractApprovalId||0
			this.ContractApprovalRecordId=options.ContractApprovalRecordId||0
			this.SealId=options.SealId||0
			this.getDetail()
		},
		onShow() {
			uni.$once('updateSealDetail',(data)=>{
				console.log('监听到事件来自updateSealDetail ，携带参数 msg 为：' + data.msg);
				this.getDetail()
			})
		},
		onPullDownRefresh() {
			this.getDetail()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		methods: {
			// 上传(更新)签回附件
			handleUploadCheckFile(){
				wx.chooseMessageFile({
					count:1,
					type:'file',
					success:(res)=>{
						const tempFile=res.tempFiles[0]
						const reg = /\.(pdf)$/;
						const reg2=	/\.doc|\.docx$/
						if(!reg.test(tempFile.path)&&!reg2.test(tempFile.path)){
							uni.showToast({
								title:'请上传pdf/word格式文件',
								icon:"none"
							})
							return 
						}
						// pdf
						if(reg.test(tempFile.path)){
							this.checkBackFiles=[{type:'pdf',url:tempFile.path,img: require("@/pages-approve/static/pdf.png")}]
						}
						if(reg2.test(tempFile.path)){
							this.checkBackFiles=[{type:'word',url:tempFile.path,img: require("@/pages-approve/static/word.png")}]
						}

						this.showConfirmCheckBackfile=true
					},
					fail:(error)=>{
						if(error.errMsg.indexOf('not supported')){
							uni.showToast({
								title:'请通过手机上传附件',
								icon:'none'
							})
						}
					}
				})

				// const res=await uploadFiles({type:'file'})
				// const reg = /\.(pdf)$/;
				// const reg2=	/\.doc|\.docx$/
				// if(reg.test(res[0])){
				// 	this.checkBackFiles=[{
				// 		type:'pdf',
				// 		url:res[0],
				// 		img:require('../static/pdf.png')
				// 	}]
				// 	this.showConfirmCheckBackfile=true
				// }else if(reg2.test(res[0])){
				// 	this.checkBackFiles=[{
				// 		type:'word',
				// 		url:res[0],
				// 		img:require('../static/word.png')
				// 	}]
				// 	this.showConfirmCheckBackfile=true
				// }else{
				// 	uni.showToast({
				// 		title:'请上传pdf/word格式文件',
				// 		icon:"none"
				// 	})
				// }
			},

			//确认上传的签回附件
			async handleConfirmCheckBackFile(){
				const temres=await apiSealCheckBackFiles({
					SealId:Number(this.detail.SealId),
					tempPath:this.checkBackFiles[0].url
				})
				const res=JSON.parse(temres.data)
				if(res.code===200){
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					// 如果是已审批上传回签附件则更新列表页
					if(this.detail.Status==='已审批'){
						this.handleUpdateList()
					}
					setTimeout(()=>{
						this.checkBackFiles=[]
						this.showConfirmCheckBackfile=false
						this.getDetail()
					},500)
				}

				
				// let FileUrlarr=this.checkBackFiles.map(item=>item.url)
				// const res=await apiSealCheckBackFiles({
				// 	
				// 	FileUrl:FileUrlarr.join('#')
				// })
				// if(res.code===200){

				// 	uni.showToast({
				// 		title:'操作成功',
				// 		icon:'none'
				// 	})
				// 	// 如果是已审批上传回签附件则更新列表页
				// 	if(this.detail.Status==='已审批'){
				// 		this.handleUpdateList()
				// 	}
				// 	setTimeout(()=>{
				// 		this.checkBackFiles=[]
				// 		this.showConfirmCheckBackfile=false
				// 		this.getDetail()
				// 	},500)
				// }
			},	

			// 预览要上传的签回附件
			handlepreViewCheckFile(){
				uni.openDocument({
					filePath:this.checkBackFiles[0].url,
					showMenu:true,
					success() {
						console.log('打开成功');
					},
					fail(){
						setTimeout(() => {
							uni.showToast({
								title:'打开失败，请重试',
								icon:"none"
							})
						}, 0);
					}
				})
			},

			// 更新列表页
			handleUpdateList(){
				uni.$emit('sealApproveListUpdate',{
					ContractApprovalId:this.ContractApprovalId,
					ContractApprovalRecordId:this.ContractApprovalRecordId, 
					SealId:this.SealId
				})
			},

			// 合规删除合同附件
			handleDeleteCheckFile(){
				this.files={
					type:'',
					img:'',
					url:''
				}
			},

			//合规上传附件
			async handleUpload(){
				const res=await uploadFiles({type:'all'})
				const reg = /\.(pdf)$/;
				const reg2=	/\.doc|\.docx$/
				if(reg.test(res[0])){
					this.files={
						type:'pdf',
						url:res[0],
						img:require('../static/pdf.png')
					}
				}else if(reg2.test(res[0])){
					this.files={
						type:'word',
						url:res[0],
						img:require('../static/word.png')
					}
				}else{
					this.files={
						type:'img',
						url:res[0],
						img:res[0]
					}
				}
			},

			// 撤回申请
			handleCancelApply(){
				this.$dialog.confirm({
					title: '提示',
					 message: '是否确认撤回',
				}).then(async ()=>{
					const res=await apiSealCancelApply({SealId:Number(this.detail.SealId)})
					if(res.code===200){
						uni.showToast({
							title:'撤回成功',
							icon:'none'
						})
						this.handleUpdateList()
						this.getDetail()
					}
				}).catch(() => {
					console.log('取消撤回');
				});
				
			},
			
			handlePurposeConfirm(e){
				this.newUse=e.detail.value
				this.showPurpose=false
			},
			
			// 确认盖章类型
			handleTypeConfirm(e){
				this.newSealType=JSON.parse(JSON.stringify(this.temType))
				this.showType=false
				this.getProcessData()
			},

			// 盖章类型变换
			onChangeType(e){
				this.temType=e.detail
			},
			
			//前去重审
			handleEdit(){
				uni.$once('sealEditSubmit',()=>{
					this.handleUpdateList()
				})
				uni.navigateTo({
					url:`./edit?ContractApprovalId=${this.ContractApprovalId}&ContractApprovalRecordId=${this.ContractApprovalRecordId}&SealId=${this.SealId}`
				})
			},
			
			//用印作废
			handleSealInvalid(){
				this.$dialog.confirm({
					title: '提示',
					 message: '是否确认作废',
				}).then(async ()=>{
					const res=await apiInvalidSeal({
						IsInvalidContract:this.checked,
						SealId:this.detail.SealId
					})
					if(res.code===200){
						uni.showToast({
							title:'操作成功',
							icon:'none'
						})
						this.handleUpdateList()
						this.getDetail()
					}
				}).catch(() => {
					console.log('取消作废');
				});
				
			},
			
			//点击通过
			handleClickPass(){
				//判断是否有内容修改
				const flag1=this.newUse===this.detail.Use 
				const flag2=Number(this.newFileNum)===Number(this.detail.FileNum)
				// const flag3=this.newSealType.join(',')===this.detail.SealType
				const flag3=this.isArrEqual(this.newSealType,this.detail.SealType.split(','))
				const flag4=this.newRemark===this.detail.Remark
				const flag5=this.files.url===this.detail.FileUrl
				if(flag1&&flag2&&flag3&&flag4&&flag5){
					this.handleApprovalPass()
				}else{
					this.handleApprovePassModify()
				}
			},

			//判断两个数组是否相同
			isArrEqual(arr1, arr2){
				return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
			},
			
			//审批通过 （修改内容）
			async handleApprovePassModify(){
				if(!this.newFileNum){
					uni.showToast({
						title:'请填写文件份数',
						icon:"none"
					})
					return
				}
				if(this.newFileNum<1){
					uni.showToast({
						title:'文件份数不合法',
						icon:"none"
					})
					return
				}
				if(!this.newSealType){
					uni.showToast({
						title:'印章类型不能为空',
						icon:"none"
					})
					return
				}
				if(!this.newUse){
					uni.showToast({
						title:'请选择用印用途',
						icon:"none"
					})
					return
				}
				if(!this.files.url){
					uni.showToast({
						title:'合同附件不能为空',
						icon:"none"
					})
					return
				}
				const res=await apiApprovalPassModify({
					FileNum:Number(this.newFileNum),
					Remark:this.newRemark,
					SealId:Number(this.detail.SealId),
					SealType:this.newSealType.join(','),
					Use:this.newUse,
					FileUrl:this.files.url
				})
				if(res.code===200){
					this.$dialog.alert({
						title: "处理成功",
						confirmButtonColor: "#5890FB",
					}).then(() => {
						this.handleUpdateList()
						this.getDetail()
					});
				}
			},
			
			// 审批通过 （未修改内容）
			async handleApprovalPass(){
				const res=await apiApprovalPass({
					SealId:Number(this.detail.SealId),
					Remark:""
				})
				if(res.code===200){
					this.$dialog.alert({
						title: "处理成功",
						confirmButtonColor: "#5890FB",
					}).then(() => {
						this.handleUpdateList()
						this.getDetail()
					});
				}
			},
			
			//驳回
			handleApprovalReject(){
				uni.$once('sealApproveReject',()=>{
					this.handleUpdateList()
				})
				uni.navigateTo({
					url:`./reason?SealId=${this.detail.SealId}`
				})
			},
			
			//预览文件
			handlepreViewFile(e){
				if (e.type === "pdf"||e.type==='word') {
					preViewFile(e.url)
				} else {
					uni.previewImage({
						urls: [e.url]
					})
				}
			},
			
			// 只有当 checkEdit 为true  即合规才能修改
			handleOperation(key){
				if(this.opButton.CheckEdit){
					this[key]=true
				}
			},
			
			// 客户搜索
			// 先搜索出客户 再通过客户去请求出客户下面存在的合同
			onSearchValChange(e){
				this.searchCustomeVal=e.detail
			},
			
			//搜索客户
			async onSearch(){
				if(!this.searchCustomeVal){
					uni.showToast({
						title:'请输入搜索关键字',
						icon:'none'
					})
					return
				}
				this.searchContractList=[]
				this.searchCustomeList=[]
				const res=await apiSearchCustome({Keyword:this.searchCustomeVal})
				if(res.code===200){
					this.searchCustomeList=res.data
				}
			},
			
			// 搜索客户对应的合同
			async getContract(e){
				const res=await apiSearchContract({Keyword:e})
				if(res.code===200){
					if(res.data.List){
						this.searchContractList=res.data.List 
					}else{
						uni.showToast({
							title:"此客户无合同，请重新选择",
							icon:"none"
						})
					}
				}
			},
			
			// 选择合同 更新表单数据
			handleChooseContract(e){
				
				this.detail.CompanyName=e.CompanyName
				this.detail.ServiceType=e.ContractType
				this.detail.CreditCode=e.CreditCode
				this.detail.UseCompanyName=e.CompanyName
				this.detail.ContractId=e.ContractId
				this.detail.ContractfileUrl=e.FileUrl
				// 关闭搜索弹窗
				this.showCustome=false
				this.searchCustomeVal=''
				this.searchContractList=[]
				this.searchCustomeList=[]
			},

			//合同章5  公章、法人章 6
			async getProcessData(){
				let id=0
				if (this.newSealType.includes("公章") || this.newSealType.includes("法人章")) {
					id = 6;
				} else {
					id = 5;
				}
				
				let res=await apiFlowDetail({FlowId:id})
				if(res.code===200){
					this.processData=res.data||null
				}
			},
			
			//获取详情
			async getDetail() {
				const res=await apiSealDetail({
					ContractApprovalId:Number(this.ContractApprovalId),
					ContractApprovalRecordId:Number(this.ContractApprovalRecordId),
					SealId:Number(this.SealId)
				})
				if(res.code===200){
					this.detail=res.data.SealDetail
					this.newUse=res.data.SealDetail.Use
					this.newFileNum=res.data.SealDetail.FileNum
					this.newSealType=res.data.SealDetail.SealType.split(',')
					this.temType=res.data.SealDetail.SealType.split(',')
					this.newRemark=res.data.SealDetail.Remark
					this.processData=res.data.FlowNodeList
					this.opButton=res.data.OpButton
					this.handleFile(res.data.SealDetail.FileUrl)
				}
			},
			
			//处理文件
			handleFile(filesUrl){
				const reg = /\.(pdf)$/;
				const reg2=	/\.doc|\.docx$/
				if(reg.test(filesUrl)){
					this.files={
						type: "pdf",
						url: filesUrl,
						img: require("../static/pdf.png"),
					}
				}else if(reg2.test(filesUrl)){
					this.files={
						type: "word",
						url: filesUrl,
						img: require("../static/word.png"),
					}
				}else{
					this.files={
						type: "img",
						url: filesUrl,
						img: filesUrl,
					}
				}
			},
		},
	}
</script>

<style lang="scss">
	.uploadfile-wrap{
		width: 100%;
		height: 50vh;
		background-color: #FFFFFF;
		padding: 32rpx;
		button {
			margin-left: auto;
			margin-right: auto;
			width: 260rpx;
			height: 70rpx;
			display: block;
			border-radius: 28px;
			border: none;
			font-size: 15px;
			color: #fff;
			line-height: 70rpx;
			background-color: #5890fb;
		}
		.contract-list {
			display: flex;
			flex-wrap: wrap;
		
			.contract-img {
				width: 102rpx;
				height: 120rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	.check-file-box{
		width: 102rpx;
		height: 120rpx;
		background-size: cover;
		background-position: center;
		position: relative;
		.del-icon{
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			top: -15rpx;
			right: -15rpx;
		}
	}
	.detail{
		width: 100%;
		min-height: 100vh;
		padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		position: relative;
	}
	.status-img{
		position: absolute;
		right: 0;
		top: 50rpx;
		width: 220rpx;
		height: 220rpx;
		z-index: 10;
	}
	.section{
		padding: 30rpx 34rpx;
		border-top: 10rpx solid #F5F5F5;
		position: relative;
		.section-title{
			font-size: 16px;
			margin-bottom: 20rpx;
		}
		.require::before{
			content: '*';
			font-size: 16px;
			color: #FF0000;
			position: absolute;
			left: 20rpx;
		}
		.section-select-box{
			color: #999;
			position: relative;
			&::after{
				position: absolute;
				right: 0;
				top: 50%;
				content: '';
				display: block;
				width: 18rpx;
				height: 18rpx;
				border-top: 1px solid #999;
				border-right: 1px solid #999;
				transform: translateY(-50%) rotate(45deg);
			}
		}
	}
	
	.btn-big{
		width: 450rpx;
	}
	.btn-small{
		min-width: 220rpx;
	}

	.fix-bottom-wrap{
		button{
			height: 70rpx;
			font-size: 15px;
		}
	}
	
	
	.custome-search-wrap{
		padding: 34rpx;
		height: 100%;
		.search-box {
			border: 1px solid #3385FF;
			padding: 0 !important;
			border-radius: 60rpx;
			background-color: #fff !important;
		}
		
		.search-con {
			background-color: #fff !important;
		}
		
		.van-search__content {
			background-color: #fff !important;
			padding-left: 30rpx !important;
		}
		
		.search-btn {
			position: relative;
			color: #3385FF;
			&::before {
				content: '';
				display: block;
				width: 1px;
				height: 60%;
				background-color: #D1D1D1;
				position: absolute;
				left: -16rpx;
				top: 20%;
			}
		}
		.search-icon{
			width: 40rpx;
			height: 40rpx;
			display: block;
			position: relative;
			top: 4rpx;
			margin-right: 20rpx;
		}
	
		.click-icon{
			width: 24rpx;
			height: 24rpx;
		}
		.result-item{
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #EBEBEB;
			.con{
				flex: 1;
				margin-right: 20rpx;
			}
		}
		.search-result{
			overflow-y: auto;
			height: 100%;
		}
	
		.result-contract-box{
			padding: 0 10rpx;
			.result-contract-item{
				margin-top: 30rpx;
				box-shadow: 0px 0px 12rpx rgba(175, 175, 175, 0.38);
				padding: 30rpx;
				border-radius: 8px;
				.name{
					font-size: 16px;
					font-weight: bold;
					&::before{
						content:'';
						display:inline-block;
						width: 31rpx;
						height: 34rpx;
						background-image: url(../../static/man.png);
						background-size: cover;
						position: relative;
						top: 4rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.type-popup-wrap{
		padding: 20rpx 32rpx;
		height: 250px;
		.top-title{
			justify-content: space-between;
			margin-bottom: 124rpx;
		}
		.van-checkbox{
			margin-bottom: 30rpx;
			width: 200rpx;
			margin-left: auto;
			margin-right: auto;
		}
	}
</style>