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.result" :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" @click="examineFail()">审核失败</view>
				<view class="succbtn flex1" @click="examineSuccess">审核成功</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" @click="dele()">刪除</view>
					<view class="restorebtn flex1" @click="restore()">复原</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" @click="dele()">删除</text>
						<text class="usa" @click="restore()">复原</text>
						<text @click="selectDown" class="usa">完成</text>
					</view>
				</view>
				<view class="choosebtn">
					<view class="delbtn flex1" @click="examineBillFail()">审核失败</view>
					<view class="restorebtn flex1" @click="examineBillSuccess()">审核成功</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.result.forEach(item => {
						item.checked = false
					})
					const newData1 = res.picList.map((item) => {
						return {
							url: item,
						}
					})
					console.log(newData2)
					this.fileList1 = newData1
					console.log(newData2)
					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.result
				list.forEach(item => {
					if (item.id == id) {
						item.checked = !item.checked
					}
				})
				this.msg.contractDraft.result = JSON.parse(JSON.stringify(list))

			},
			allSelect() {
				let list = this.msg.contractDraft.result
				if (this.quan) {
					list.forEach(item => {
						item.checked = true
					})
				} else {
					list.forEach(item => {
						item.checked = false
					})
				}
				this.msg.contractDraft.result = 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 = !this.quan
				this.allSelect()
			},
			selectDown() {
				this.editall = false
				this.quan = true
				let list = this.msg.contractDraft.result
				list.forEach(item => {
					item.checked = false
				})
			},
			examineSuccess() {
				let ids = []

				ids.push(this.id)


				if (ids.length == 0) {
					that.$toast("请选择合同")
					return
				}
				uni.showModal({
					title: '提示',
					content: "是否审核成功？",
					success: function(res) {
						if (res.confirm) {

							uni.showLoading()
							uni.$u.http.post('/api/Contract/manage', {
								ids: ids,
								operateType: 3
							}, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								that.editall = false
								that.quan = false
								that.$toast("操作成功")
								setTimeout(() => {
									that.init()
								}, 500)

							}).catch((err) => {
								uni.hideLoading()
								that.$toast(err.msg)
							})

						} else if (res.cancel) {

						}
					}
				})

			},
			examineFail() {
				let ids = []

				ids.push(this.id)

				if (ids.length == 0) {
					this.$toast("请选择合同")
					return
				}
				uni.showModal({
					title: '提示',
					content: '是否审核失败？',
					success: function(res) {
						if (res.confirm) {

							uni.showLoading()
							uni.$u.http.post('/api/Contract/manage', {
								ids: ids,
								operateType: 4
							}, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								that.editall = false
								that.quan = false
								that.$toast("操作成功")
								setTimeout(() => {

									that.init()
								}, 500)
							}).catch((err) => {
								uni.hideLoading()
								that.$toast(err.msg)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			examineBillSuccess() {
				let ids = []
				this.msg.contractDraft.result.forEach(item => {
					if (item.checked) {
						ids.push(item.id)
					}
				})

				if (ids.length == 0) {
					that.$toast("请选择汇票")
					return
				}
				uni.showModal({
					title: '提示',
					content: "是否批量审核成功？",
					success: function(res) {
						if (res.confirm) {

							uni.showLoading()
							uni.$u.http.post('/api/Contract/contractDraft/manager', {
								ids: ids,
								operateType: 3
							}, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								that.editall = false
								that.quan = false
								that.$toast("操作成功")
								setTimeout(() => {
									that.init()
								}, 500)

							}).catch((err) => {
								uni.hideLoading()
								that.$toast(err.msg)
							})

						} else if (res.cancel) {

						}
					}
				})

			},
			
			examineBillFail() {
				let ids = []
				this.msg.contractDraft.result.forEach(item => {
					if (item.checked) {
						ids.push(item.id)
					}
				})
				if (ids.length == 0) {
					this.$toast("请选择汇票")
					return
				}
				uni.showModal({
					title: '提示',
					content: '是否审核失败？',
					success: function(res) {
						if (res.confirm) {

							uni.showLoading()
							uni.$u.http.post('/api/Contract/contractDraft/manager', {
								ids: ids,
								operateType: 4
							}, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								that.editall = false
								that.quan = false
								that.$toast("操作成功")
								setTimeout(() => {

									that.init()
								}, 500)
							}).catch((err) => {
								uni.hideLoading()
								that.$toast(err.msg)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			dele() {

				let ids = []
				this.msg.contractDraft.result.forEach(item => {
					if (item.checked) {
						ids.push(item.id)
					}
				})
				if (ids.length == 0) {
					that.$toast("请选择汇票")
					return
				}
				uni.showModal({
					title: '提示',
					content: "是否删除合同？",
					success: function(res) {
						if (res.confirm) {

							uni.showLoading()
							uni.$u.http.post('/api/Contract/contractDraft/manager', {
								ids: ids,
								operateType: 1
							}, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								that.editall = false
								that.quan = false
								that.$toast("操作成功")
								setTimeout(() => {
									that.init()
								}, 500)

							}).catch((err) => {
								uni.hideLoading()
								that.$toast(err.msg)
							})

						} else if (res.cancel) {

						}
					}
				})

			},
			restore() {
				let ids = []
				this.msg.contractDraft.result.forEach(item => {
					if (item.checked) {
						ids.push(item.id)
					}
				})

				if (ids.length == 0) {
					that.$toast("请选择汇票")
					return
				}
				uni.showModal({
					title: '提示',
					content: "是否复原汇票？",
					success: function(res) {
						if (res.confirm) {

							uni.showLoading()
							uni.$u.http.post('/api/Contract/contractDraft/manager', {
								ids: ids,
								operateType: 2
							}, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								that.editall = false
								that.quan = false
								that.$toast("操作成功")
								setTimeout(() => {
									that.init()
								}, 500)

							}).catch((err) => {
								uni.hideLoading()
								that.$toast(err.msg)
							})

						} else if (res.cancel) {

						}
					}
				})

			},
			// 删除图片
			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>