alhj/pages/alldeatil/contractdetail.vue

<template>
	<view>
		<view class="headboxcon">
			<view class="contractin">
				<text class="tis">合同基础信息</text>
				<view class="tip">
					<text class="yu">合同名称</text>
					<text class="yuna">{{msg.name}}</text>
				</view>
				<view class="tip">
					<text class="yu">合同编号</text>
					<text class="yuna">{{msg.contractNo}}</text>
				</view>
				<view class="tipup">
					<text class="yu">合同附件</text>
					<view class="upbox">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="fileList1.length" :deletable="false"></u-upload>
					</view>
				</view>
				<view class="tipup">
					<text class="yu">发票附件</text>
					<view class="upbox">
						<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
							:maxCount="fileList2.length" :deletable="false"></u-upload>
					</view>
				</view>
				<view class="tipup">
					<text class="yu">贸易合同</text>
					<view class="upbox">
						<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
							:maxCount="fileList3.length" :deletable="false"></u-upload>
					</view>
				</view>
				<view class="tip" style="border-top: 1rpx solid #E8E8E8;margin-top: 20rpx;padding-top: 30rpx;">
					<text class="yu">合同状态</text>
					<text   v-if="msg.statusText=='待审核'" :style="{'color':'#D05C39;'}">{{msg.statusText}}</text>
					<text   v-if="msg.statusText=='失败'" :style="{'color':'#1F242A'}">{{msg.statusText}}</text>
					<text  v-if="msg.statusText=='已删除'" :style="{'color':'#1F242A'}">{{msg.statusText}}</text>
					<text   v-if="msg.statusText=='成功'" :style="{'color':'#D8AB5A'}">{{msg.statusText}}</text>
				</view>
				<view class="">
					<view class="tipup " style="display: flex;flex-direction: column;" >
						<text class="yu">审核反馈</text>
						<view >
							<textarea placeholder="请输入审核反馈" style="background-color: #F6F6F6;width: 640rpx;height: 200rpx;border-radius: 20rpx;padding: 20rpx;box-sizing: border-box;margin:20rpx 0;margin-bottom: 30rpx;" v-model="fankui"></textarea>
						</view>
					</view>
					<view class="tipup" >
						<text class="yu">反馈截图</text>
						<view class="upbox" style="margin-bottom: 30rpx;">
							<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
								:maxCount="6" ></u-upload>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="acpcardlist">
			<view class="lable " v-for="(item,index) in msg.contractDraft" :key="index">
				<view class="radiobox" v-if="editall">
					<radio :value="index" :checked="item.checked" color="#D8AB5A"  @click="checkBox(item.id)"/>
				</view>
				<view class="acpcard"  @click="billDetail(item.id,index)">
					<view class="allmsg">
						<view class="acpcont">
							<view class="acpname">
								<text style="flex: 1;">{{item.name}}</text>
								<view class="tag">{{item.statusText}}</view>
							</view>
							<view class="acpinfo ">
								<text class="pt">汇票号码：{{item.draftNo}}</text>
								<text class="pt">金额：￥ {{item.money}}</text>
								<text class="pt">服务费：￥ {{item.serviceMoney}}</text>
								<text class="pt">承兑人：{{item.acceptorName}}</text>
							</view>

						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="totalmanage ">
			<text style="color:#68625B;font-size: 28rpx;">合计：4份</text>
			<view class=" maboxtitls" @click="editall=true">
				<view class="managebox">
					<image src="/static/img/manage.png" mode="aspectFit"></image>
				</view>
				<text style="padding-left: 15rpx;">管理</text>

			</view>

		</view>
		<view style="padding-bottom:150rpx;"></view>
		<view class="safebt"></view>
		
		<view class="newbill flex1" @click="addBill" v-if="state==1">
			<view class="newbillbtn">
				<text>新增汇票</text>
			</view>

		</view>
		<view class="newbill flex1"  v-if="state==0&&msg.statusText=='待审核'">
		<view class="choosebtn">
			<view class="delbtn flex1">审核失败</view>
			<view class="succbtn flex1">审核成功</view>
		</view>
		
		</view>
		<!-- 底部删除 -->
		<u-popup :show="editall&&state==1" @close="closeEidt" @open="openEidt" :overlay="false">
			<view class="editbox">
				<view class="chooseall flex6">
					<view class="leftchoose ">
						<radio :checked="quan" @click="makeSureAll" color="#D8AB5A"></radio>
						<text>全选</text>
					</view>
					<view class="surebtn" @click="selectDown">
						完成
					</view>
				</view>
				<view class="choosebtn">
					<view class="delbtn flex1">刪除</view>
					<view class="restorebtn flex1">复原</view>
				</view>
			</view>
		</u-popup>
		<!-- 底部删除 -->
		<u-popup :show="editall&&state==0" @close="closeEidt" @open="openEidt" :overlay="false">
			<view class="editbox">
				<view class="chooseall flex6">
					<view class="leftchoose ">
						<radio :checked="quan" @click="makeSureAll" color="#D8AB5A"></radio>
						<text>全选</text>
					</view>
					<view class="anniu">
						<text class="usa">删除</text>
						<text  class="usa">复原</text>
						<text  @click="selectDown"  class="usa">完成</text>
					</view>
				</view>
				<view class="choosebtn">
					<view class="delbtn flex1">审核失败</view>
					<view class="restorebtn flex1">审核成功</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				editall: false,
				quan: false,
				state: 0,
				fileList1: [],
				fileList2: [],
				fileList3:[],
				fileList4:[],
				msg:'',
				id:'',
				fankui:''
			}
		},
		onLoad(o) {
			that=this
			if(o.id){
				this.id=o.id
			}
			this.state = this.$store.state.admin
			this.init()
		},
		methods: {
			init(){
				uni.showLoading()
				uni.$u.http.get(`/api/Contract/${this.id}`,{
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					this.msg=res
					this.msg.contractDraft.forEach(item=>{
						item.checked=false
					})
					const newData1 = res.picList.map((item)=>{
					   return {
					     url: item,
					   }
					 })
					this.fileList1=newData1
					const newData2 = res.invoicePicList.map((item)=>{
					   return {
					     url: item,
					   }
					 })
					this.fileList2=newData2
					const newData3 = res.tradePicList.map((item)=>{
					   return {
					     url: item,
					   }
					 })
					this.fileList3=newData3
				}).catch((err) => {
					uni.hideLoading()
					console.log(err)
				})
			},
			openEidt(){
				this.editall=true
			},
			checkBox(id){
				let list=this.msg.contractDraft
				list.forEach(item=>{
					if(item.id==id){
						item.checked=!item.checked
					}
				})
				this.msg.contractDraft = JSON.parse(JSON.stringify(list))
				
			},
			allSelect(){
				let list=this.msg.contractDraft
				if(this.quan){
					list.forEach(item => {
						item.checked =true
					})
				}else{
					list.forEach(item => {
						item.checked =false
					})
				}
				this.msg.contractDraft = JSON.parse(JSON.stringify(list))
			},
			acpDetail() {
				uni.navigateTo({
					url: "/pages/alldeatil/acptdetail"
				})
			},
			addBill(){
				uni.navigateTo({
					url: "/pages/alldeatil/addbill"
				})
			},
			billDetail(id,index){
				let obj={
					id:id,
					index:index
				}
				uni.navigateTo({
					url: "/pages/alldeatil/billdetail?obj="+JSON.stringify(obj)
				})
			},
			makeSureAll() {
				this.quan = true
				this.allSelect()
			},
			selectDown(){
				this.editall=false
				that.quan=true
				let list=this.msg.contractDraft
				list.forEach(item=>{
						item.checked=false
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6 !important;
	}

	.headboxcon {
		margin: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.tis {
			font-size: 36rpx;
			font-weight: 600;
			display: block;
			padding: 30rpx 0;
			padding-top: 50rpx;
		}
		.tipup{
			display: flex;
		}
		.upbox{
			margin-left: 30rpx;
			width: 490rpx;
		}
		.yu {
		
			display: block;
			width: 120rpx;
			color: #BEBDBB;
		}
		.tip {
			padding-bottom: 30rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;

			

			.yuna {}
		}
	}

	.searchbox {
		padding-left: 30rpx;
		box-sizing: border-box;
		background-color: #ECECEC;
		border-radius: 38rpx;
		// width: 688rpx;
		flex: 1;
		height: 75rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.acpcardlist {
		// margin-top: 140rpx;

		.acpcard {
			flex: 1;
			// width: 690rpx;
			// height: 333rpx;
			margin: 0 30rpx;
			// margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0px 8rpx 20rpx 1rpx rgba(31, 36, 42, 0.08);

			.allmsg {
				display: flex;
				padding: 40rpx 30rpx;
				box-sizing: border-box;
				width: 100%;

				.cicle {
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
					background-color: #D8AB5A;
					margin-top: 8rpx;
				}

				.acpcont {
					margin-left: 20rpx;
					width: 100%;

					.acpname {
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 30rpx;
						flex-grow: 1;
						width: 100%;
						// width: 572rpx;
						font-size: 36rpx;
						font-weight: 600;

						.tag {
							margin-left: 10rpx;
							font-weight: 500;
							border-radius: 10rpx;
							// font-size: 36rpx;
							color: #BEBDBB;
							text-align: center;
						}
					}
				}

				.acpinfo {
					border-top: 1rpx solid #E8E8E8;
					display: flex;
					flex: 1;
					flex-direction: column;
					font-size: 28rpx;
					color: #68625B;
					justify-content: space-between;
					box-sizing: border-box;

					.pt {
						padding-top: 20rpx;
					}
				}
			}
		}
	}

	.totalmanage {
		margin-top: 50rpx;
		margin-bottom: 100rpx;
		// position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.managebox {
			width: 23.8rpx;
			height: 29.7rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.maboxtitls {
			width: 160rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			background-color: #D9D9D9;
			// line-height: 60rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			// align-items: center;
		}
	}

	.newbill {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
		width: 100%;

		.newbillbtn {
			background: linear-gradient(to right, #FFE1AD, #D8AB5A);
			width: 474rpx;
			height: 88rpx;
			border-radius: 43rpx;
			box-shadow: 0 10rpx 20rpx 1rpx rgba(179, 116, 5, 0.2);
			line-height: 88rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>