sct/pagesT/money/BankPay.vue

<template>
	<view :class="['qn-page-' + theme]">
		<u-navbar title="上传打款凭证" :custom-back="customBack"></u-navbar>
		<view class="money-view">
			<view class="num">
				<text class="icon">¥</text>
				{{ payAmount }}
			</view>
			<view class="label">订单金额</view>
		</view>
		<view class="bank-view">
			<u-form label-width="180">
				<u-form-item label="账户名称">
					<view class="form-item-in">
						<u-input @click="copyData(bank_data.name)" v-model="bank_data.name" disabled />
						<text class="copy-text">复制</text>
					</view>
				</u-form-item>
				<u-form-item label="开户行">
					<view class="form-item-in">
						<u-input @click="copyData(bank_data.bankName)" v-model="bank_data.bankName" disabled />
						<text class="copy-text">复制</text>
					</view>
				</u-form-item>
				<u-form-item label="开户人">
					<view class="form-item-in">
						<u-input @click="copyData(bank_data.bankAccount)" v-model="bank_data.bankAccount" disabled />
						<text class="copy-text">复制</text>
					</view>
				</u-form-item>
				<u-form-item label="银行账户">
					<view class="form-item-in">
						<u-input @click="copyData(bank_data.accountNumber)" v-model="bank_data.accountNumber"
							disabled />
						<text class="copy-text">复制</text>
					</view>
				</u-form-item>
				<u-form-item label="上传凭证">
					<QiniuUpload @uploadSuccess="uploadSuccess" :images="bank_data.image" @handleRemove="imgRemove">
						<!-- <div slot="cont">
							<view class="bank-license" v-for="item,index in bank_data.image" :key='index'>
								<block v-if="item">
									<img class="license-pic" :src="item" alt="" />
									<u-icon name="close" class='del-icon' size='30' @click.stop="handleRemove(item, index)">
									</u-icon>
								</block>
							</view>
							<view class="bank-license">
								<text>+</text>
							</view>
						</div> -->
					</QiniuUpload>
				</u-form-item>
				<u-form-item label="备注">
					<view class="form-item-in">
						<u-input v-model="bank_data.remark" disabled />
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="confirm-btn primary-bg" @click="backConfirm">
			<u-loading v-if="loading" mode="circle"></u-loading>
			确定
		</view>
	</view>
</template>

<script>
	import QiniuUpload from '../components/qiniu/QiniuUpload.vue';
	export default {
		components: {
			QiniuUpload
		},
		data() {
			return {
				loading: false,
				bank_data: {
					// 银行信息
					id: '',
					name: '',
					image: [],
					bankName: '',
					accountNumber: ''
				},
				payAmount: 0,
				orderId: 0,
				tmplIds: []
			};
		},
		onLoad(options) {
			this.payAmount = options.payAmount || '0.00';
			if (Array.isArray(options.orderId)) {
				this.orderId = options.orderId;
			} else {
				this.orderId = [options.orderId];
			}

			this.getPaymentType();
			// 获取订阅消息模版
			// #ifdef MP-WEIXIN
			this.getSettingDataByMessageId()
			// #endif
		},
		methods: {
			// 复制到剪贴板
			copyData(data) {
				uni.setClipboardData({
					data: data,
					success: () => {
						this.$u.toast('已复制到剪贴板');
					}
				});
			},
			// 上传银行凭证
			uploadSuccess(imgData, uploadPicUrl) {
				this.bank_data.image.push(uploadPicUrl);
			},
			// 确定 订阅消息
			backConfirm() {
				// #ifdef MP-WEIXIN
				console.log(this.tmplIds)
				if (this.tmplIds.length) {
					uni.requestSubscribeMessage({
						tmplIds: this.tmplIds,
						success: res => {
							this.addOrderBankData();
						},
						fail: res => {
							this.addOrderBankData();
						}
					});
				} else {
					this.addOrderBankData();
				}
				// #endif
				// #ifdef APP-PLUS
				this.addOrderBankData();
				// #endif
			},
			// 确定
			addOrderBankData() {
				if (this.loading) {
					return;
				}

				if (!this.bank_data.image && !this.bank_data.image.length) {
					this.$u.toast('请上传打款凭证');
					return;
				}
				this.loading = true;
				this.$u.api
					.addOrderBankData({
						orderId: this.orderId,
						bankData: this.bank_data
					})
					.then(res => {
						this.loading = false;
						this.$u.toast('操作成功');
						setTimeout(res => {
							this.customBack();
						}, 1500);
					})
					.catch(err => {
						this.loading = false;
					});
			},
			customBack() {
				uni.redirectTo({
					url: '/pagesT/order/order?state=0'
				});
			},
			getPaymentType() {
				this.$u.api.getPaymentType().then(res => {
					const bankType = res.data.find(item => item.id === 4);
					if (bankType) {
						const accountData = bankType.accountData;
						this.bank_data = {
							id: accountData.id,
							name: accountData.name,
							image: [],
							bankName: accountData.bankName,
							accountNumber: accountData.accountNumber,
							bankAccount: accountData.bankAccount,
							remark: accountData.remark,
						};
					}
				});
			},
			// 获取消息模版ID
			getSettingDataByMessageId() {
				this.$u.api
					.getSettingDataByMessageId({
						id: [4]
					})
					.then(res => {
						if (res.data.length > 0) {
							this.tmplIds = res.data.map(item => {
								return item.weixinTemplateId;
							});
						}
					});
			},
			//移除图片
			// handleRemove(url, index) {
			// 	this.bank_data.image.splice(index, 1);
			// }
			imgRemove(arr) {
				this.bank_data.image = arr;
			}
		}
	};
</script>

<style scoped lang="scss">
	.bank-view {
		background-color: #ffffff;
		padding: 0 30rpx;
		width: 700rpx;
		margin: 0 auto;
		border-radius: 16rpx;

		.form-item-in {
			position: relative;

			.copy-text {
				position: absolute;
				right: 20rpx;
				display: block;
				top: 50%;
				transform: translateY(-50%);
				color: #999999;
				font-size: 24rpx;
			}
		}

		.bank-license {
			width: 124upx;
			height: 124upx;
			border-radius: 8upx;
			border: 2upx #999999 dashed;
			margin: 32upx 10rpx;
			background: #eee;
			text-align: center;
			line-height: 100upx;
			color: #666;
			font-size: 100rpx;
			font-weight: 300;
			display: inline-block;
			vertical-align: middle;
			position: relative;

			.del-icon {
				box-sizing: border-box;
				padding-left: 7rpx;
				position: absolute;
				color: #fff;
				right: -12rpx;
				top: -20upx;
				background-color: #FD463E;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				line-height: 40rpx;
			}
		}

		.license-pic {
			width: 120upx;
			height: 120upx;
			display: block;
		}
	}

	.confirm-btn {
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
	}

	.money-view {
		padding: 60rpx 0;
		text-align: center;

		.num {
			font-family: DIN-Medium;
			font-weight: bold;
			font-size: 64rpx;

			.icon {
				font-size: 40rpx;
			}
		}

		.label {
			color: #6c6c6c;
			font-size: 24rpx;
			padding-top: 20rpx;
		}
	}
</style>