alhj/pages/alldeatil/billdetail.vue

<template>
	<view>
		<view class="boxcon">
			<text class="titlename">汇票{{index+1}}</text>
			<view class="container">
				<view class="titleall">
					<text class="pl">汇票名称</text>
					<text class="pr">{{msg.name}}</text>
				</view>
				<view class="titleall">
					<text class="pl">汇票号码</text>
					<text class="pr">{{msg.draftNo}}</text>
				</view>
				<view class="titleall">
					<text class="pl">承兑人</text>
					<text class="pr">{{msg.acceptorName}}</text>
				</view>
				<view class="titleall">
					<text class="pl">出票人</text>
					<text class="pr">{{msg.drawersName}}</text>
				</view>
				<view class="titleall">
					<text class="pl">金额</text>
					<text class="pr">{{msg.money}}</text>
				</view>
				<view class="titleall">
					<text class="pl">承兑日期</text>
					<text class="pr">{{msg.acceptDate}}</text>
				</view>
				<view class="titleall">
					<text class="pl">出票日期</text>
					<text class="pr">{{msg.issueDate}}</text>
				</view>
				<view class="titleall">
					<text class="pl">汇票到期日</text>
					<text class="pr">{{msg.expireDate}}</text>
				</view>
				<view class="titleall">
					<text class="pl">预计贴现日</text>
					<text class="pr">{{msg.expectDiscountDate}}</text>
				</view>
				<view class="titleall bod">
					<text class="pl">最高贷款额度</text>
					<text class="pr">{{msg.loanLimit}}</text>
				</view>
				<view class="titleall " style="padding-top: 30rpx !important; ">
					<text class="pl">服务费率</text>
					<text class="pr">{{msg.serviceRate?msg.serviceRate:''}}%</text>
				</view>
				<view class="titleall">
					<text class="pl">服务费</text>
					<text class="pr">{{msg.serviceMoney}}</text>
				</view>
				<view class="titleall ">
					<text class="pl">利率</text>
					<text class="pr">{{msg.interestRate?msg.interestRate:''}}%</text>
				</view>
				<view class="titleall ">
					<text class="pl">利息</text>
					<text class="pr">{{msg.interest?msg.interest:''}}</text>
				</view>
				<view class="titleall bod">
					<text class="pl">发票附件</text>
					<view class="uppic">
						<view class="picbox" v-for="item in msg.picList">
							<image :src="item" mode="aspectFill" @click="prviewPic(item)"></image>
						</view>
					</view>
				</view>
				<view class="titleall ptin">
					<text class="pl">汇票状态</text>
					<text class="pr cls">{{msg.statusText}}</text>
				</view>
				<view class="titleall " style="display: flex;flex-direction: column;">
					<text class="pl">审核反馈</text>
					<textarea :placeholder="placehodertitle"
						style="background-color: #F6F6F6;width: 675rpx;height: 200rpx;border-radius: 20rpx;padding: 20rpx;box-sizing: border-box;margin:20rpx 0;margin-bottom: 30rpx;"
						v-model="feedback" :disabled="disabled"></textarea>
				</view>
				<!-- <view class="titleall " v-else>
					<text class="pl">审核反馈</text>
					<view >
						<textarea placeholder="请输入审核反馈"
							style="background-color: #F6F6F6;width: 540rpx;height: 200rpx;border-radius: 20rpx;padding: 20rpx;box-sizing: border-box;margin:20rpx 0;margin-bottom: 30rpx;margin-top: 0;"
							v-model="feedback" disabled></textarea>
					</view>
				</view> -->

				<view class="titleall " style="justify-content: flex-start;">
					<text class="pl psa ">反馈截图</text>
					<view class="fanuppic">
						<view class="picbox" v-if="state==0">
							<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
								:maxCount="6" :disabled="disabled" :deletable="delablepic"></u-upload>
						</view>
						<view class="picbox" v-if="state==1">
							<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
								:maxCount="fileList4.length" :disabled="disabled" :deletable="delablepic"></u-upload>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 140rpx;"></view>
		<view class="newbill flex1" v-if="state==0&&statusText!='待审核'">
			<view class="choosebtn" v-if="msg.statusText === '成功'? isShow ==1 : isShow == 0  ">
				<view class="delbtn flex1" @click="examineFail()">审核失败</view>
				<view class="succbtn flex1" @click="examineSuccess()">审核成功</view>
			</view>

		</view>
		<!-- <view class="newbill flex1" @click="tryAgain" v-if="msg.statusText=='未通过'&&state==1">
			<view class="newbillbtn">
				<text>重新提交</text>
			</view>
		</view> -->
		<view class="newbill flex1" v-if="msg.statusText=='失败'&&state==1">
			<view class="choosebtn">
				<view class="delbtn flex1" @click="tryAgain()">重新提交</view>
				<view class="succbtn flex1" @click="addBill()">新增汇票</view>
			</view>

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

<script>
	let that
	import {
		mainUrl
	} from '@/http/baseUrl.js';
	export default {
		data() {
			return {
				//审核成功后隐藏按钮
				isShow:0,
				id: '',
				msg: '',
				index: '',
				state: 0,
				fileList4: [],
				feedback: '',
				disabled: false,
				delablepic: true,
				placehodertitle: '请输入审核反馈',
				contractId: '',
				statusText: ''
			}
		},
		onLoad(o) {
			that = this
			this.state = this.$store.state.admin
			if (this.state == 1) {
				this.disabled = true
				this.delablepic = false
			}

			if (o.obj) {
				let obj = JSON.parse(o.obj)
				this.id = obj.id
				console.log(obj, 6464654)
				this.index = obj.index
				this.contractId = obj.contractId
				this.statusText = obj.statusText
				console.log(this.statusText, 9999)
			}
			this.init()
		},
		methods: {
			init() {
				let id = this.id
				uni.showLoading()
				uni.$u.http.get(`/api/Contract/contractDraft/${id}`, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					this.msg = res
					if (res.feedbackPicList) {
						const newData4 = res.feedbackPicList.map((item) => {
							return {
								url: item,
							}
						})

						this.fileList4 = newData4
					}
					if (this.state == 1) {
						if (res.feedback.length > 0) {
							this.feedback = res.feedback
						} else {
							this.feedback = "无"
						}
					} else {
						if (res.feedback.length > 0) {
							this.feedback = res.feedback
						} else {
							this.placehodertitle = "请输入审核反馈"
						}
					}



				}).catch((err) => {
					uni.hideLoading()
					this.$toast(err.msg)
				})
			},
			prviewPic(item) {
				let pics = []
				pics.push(item)
				uni.previewImage({
					urls: pics,
				});
			},
			tryAgain() {
				let obj = {
					contractId: this.contractId,
					id: this.id,
					contractDrafts: [this.msg]

				}

				uni.navigateTo({
					url: "/pages/alldeatil/addbill?obj=" + JSON.stringify(obj)
				})
			},
			addBill() {
				uni.navigateTo({
					url: "/pages/alldeatil/addbill"
				})
			},
			examineSuccess() {
				// let ids = []
				// ids.push(this.id)
				console.log(111);

				uni.showModal({
					title: '提示',
					content: "是否审核成功？",
					success: function(res) {
						if (res.confirm) {

							let form = {
								id: Number(that.id),
								approveStatus: 1
							}
							if (that.fileList4.length > 0) {
								let feedbackPicList = []
								that.fileList4.forEach(item => {
									feedbackPicList.push(item.url)
								})
								form.feedbackPicList = feedbackPicList
							}
							let feedback = that.feedback
							if (feedback.length > 0) {
								form.feedback = feedback
							}
							// ={
							// 	feedback:feedback,
							// 	feedbackPicList:feedbackPicList
							// }
							uni.showLoading()
							uni.$u.http.post('api/Contract/approveContractDraft', form, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								that.editall = false
								that.quan = false
								that.$toast("操作成功")
								that.isShow = 1
								setTimeout(() => {
									that.init()
								}, 500)

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

						} else if (res.cancel) {

						}
					}
				})

			},
			examineFail() {
				uni.showModal({
					title: '提示',
					content: "是否审核失败？",
					success: function(res) {
						if (res.confirm) {

							let form = {
								id: Number(that.id),
								approveStatus: 2
							}
							if (that.fileList4.length > 0) {
								let feedbackPicList = []
								that.fileList4.forEach(item => {
									feedbackPicList.push(item.url)
								})
								form.feedbackPicList = feedbackPicList
							}
							let feedback = that.feedback
							if (feedback.length > 0) {
								form.feedback = feedback
							}

							uni.showLoading()
							uni.$u.http.post('api/Contract/approveContractDraft', form, {
								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: mainUrl + '/api/File', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'File',
						header: {
							"User-Agent": "apifox/1.0.0 (https://www.apifox.cn)"
						},
						formData: {
							File: JSON.stringify(url),
						},
						success: (res) => {
							let request = JSON.parse(res.data)
							setTimeout(() => {
								resolve(request.data.file)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

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

	.boxcon {
		margin: 20rpx 20rpx;
		padding: 50rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;

		.titlename {
			font-size: 36rpx;
			font-weight: 600;
			padding-bottom: 30rpx;
			display: block;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #E8E8E8;
		}

		.container {
			.bod {
				border-bottom: 1rpx solid #E8E8E8;
				box-sizing: border-box;
			}

			.ptin {
				padding-top: 50rpx;
			}

			.plas {
				padding-left: 65rpx;
				word-wrap: wrap;
				box-sizing: border-box;
			}

			.ds {
				padding-top: 30rpx;
			}

			.psa {
				padding-right: 30rpx;
			}

			.cls {
				color: #68625B;
			}

			.titleall {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				padding-bottom: 30rpx;

				.pl {
					// width: 180rpx;
					color: #BEBDBB;
					flex-shrink: 0;
					// margin-right: 30rpx;
				}

				.pr {
					word-wrap: wrap;
					display: block;
					display: -webkit-box;
				}

				.uppic {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;


				}

				.picbox {
					width: 150rpx;
					height: 150rpx;
					margin-left: 20rpx;
					border-radius: 20rpx;
					overflow: hidden;

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

				.fanuppic {
					display: flex;
					flex-wrap: wrap;
				}
			}

		}
	}
</style>