vue-insagent-app/pages/wallet/billInfo.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<service-widget @btnClick="btn_click"></service-widget>
		<public-module></public-module>
		<view style="z-index: 99;" class="flexd">
			<view class="search dis  a-c j-s">
				<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
				<text class="center">账单详情</text>
			</view>
		</view>
		<view class="" style="padding:100px 16px 16px;">
			<view class="assets dis f-c j-s" v-if="detailsType==2">
				<view class="dis f-c j-s a-c" style="border: none;">
					<text>推广金额</text>
					<text>￥{{promotionData.amount}}</text>
				</view>
			</view>

			<view class="assets dis f-c j-s" v-if="detailsType==3">
				<view class="dis f-c j-s a-c">
					<text>业务收入提现到银行卡</text>
					<text>￥{{MoneyData.withdrawalAmount}}</text>
					<text>{{MoneyData.withdrawalStatusName}}</text>
				</view>
				<view class="yushou dis f-c">
					<u-steps :list="numList" :current="trajectoryLength" direction="column" mode="number"
						active-color="#13C15A">
					</u-steps>
				</view>
			</view>
			<view class="assets dis f-c j-s" v-if="detailsType==4">
				<view class="dis f-c j-s a-c" style="border: none;">
					<text>退款金额</text>
					<text>￥{{refundData.refundAmount}}</text>
				</view>
			</view>
			<view class="assets1 dis f-c j-s">
				<template v-if="detailsType==2">
					<view class="dis j-s a-c" v-if="promotionData.subOrderId">
						<text>订单编号：</text>
						<text>{{promotionData.subOrderId}}</text>
					</view>
					<view class="dis j-s a-c" v-if="promotionData.signingTime">
						<text>承保时间：</text>
						<text>{{promotionData.signingTime}}</text>
					</view>
					<view class="dis j-s a-c" v-if="promotionData.licenseNo">
						<text>车牌号：</text>
						<text>{{promotionData.licenseNo}}</text>
					</view>
					<view class="dis j-s a-c" v-if="promotionData.jqpremium">
						<text>交强险：</text>
						<text>{{promotionData.jqpremium}}</text>
					</view>
					<view class="dis j-s a-c" v-if="promotionData.jypremium">
						<text>驾意险：</text>
						<text>{{promotionData.jypremium}}</text>
					</view>
					<view class="dis j-s a-c" v-if="promotionData.sypremium">
						<text>商业险：</text>
						<text>{{promotionData.sypremium}}</text>
					</view>
					<view class="dis j-s a-c" v-if="promotionData.agentName">
						<text>代理人姓名：</text>
						<text>{{promotionData.agentName}}</text>
					</view>
					<view class="dis j-s a-c" v-if="promotionData.agentLevel">
						<text>代理人级别：</text>
						<text>{{promotionData.agentLevel}}</text>
					</view>
				</template>
				<template v-if="detailsType==3">
					<view class="dis j-s a-c" v-if="MoneyData.transactionNumber">
						<text>交易编号：</text>
						<text>{{MoneyData.transactionNumber}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.rejectReason">
						<text>失败原因：</text>
						<text>{{MoneyData.rejectReason}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.applicationDate">
						<text>申请时间：</text>
						<text>{{MoneyData.applicationDate}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.paymentDate && MoneyData.withdrawalStatus=='4'">
						<text>到账时间：</text>
						<text>{{MoneyData.paymentDate}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.bankNumber">
						<text>到账账户：</text>
						<text>{{MoneyData.bankNumber}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.bankAccount">
						<text>到账银行：</text>
						<text>{{MoneyData.bankAccount}}</text>
					</view>
					<view class="dis j-s a-c" v-if="MoneyData.bankReceipt">
						<text>银行回单：</text>
						<image :src="MoneyData.bankReceipt" mode="" style="width: 150px;height: 100px;"
							@click="closeImage(MoneyData.bankReceipt)"></image>
					</view>
				</template>
				<template v-if="detailsType==4">
					<view class="dis j-s a-c" v-if="refundData.transactionNumber">
						<text>交易编号：</text>
						<text>{{refundData.transactionNumber}}</text>
					</view>
					<view class="dis j-s a-c" v-if="refundData.refundTime">
						<text>退款时间：</text>
						<text>{{refundData.refundTime}}</text>
					</view>

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

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				numList: [],
				MoneyData: {},
				promotionData: {},
				refundData: {},
				trajectoryLength: 0,
				detailsType: "",
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {

		},
		async onLoad(params) {
			if (params.id) {
				this.detailsType = params.type;
				switch (params.type) {
					case '2':
						let data = await this.$http.get('/sysUserAccount/getSubOrderDetails?subOrderId=' + params
							.subOrderNo);
						if (data.code == '200') {
							this.promotionData = data.data;
							this.promotionData.amount = params.amount;
						} else {
							uni.showToast({
								title: data.msg,
								icon: 'none',
							});
						}
						break;
					case '3':
						let res = await this.$http.get('/sysUserAccount/findDetailById?id=' + params.id);
						this.MoneyData = res.data;
						this.MoneyData.bankReceipt = this.$base.baseUrl + this.MoneyData.bankReceipt
						console.log(this.MoneyData.bankReceipt)
						this.numList = res.data.record;
						const filteredArray = this.numList.filter(item => item.processingStatusFlag === true).length -
							1;;
						this.trajectoryLength = filteredArray;
						break;
					case '4':
						let audit = await this.$http.get('/sysUserAccount/findRefundDetailById?id=' + params.id);
						if (audit.code == '200') {
							this.refundData = audit.data;
						}
						break;
					default:
				}

			}
		},
		onShow() {},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			closeImage(img) {
				uni.previewImage({
					urls: [img],
				});
			},
			// 绑定银行卡界面
			async changeBank() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: "",
				});
				if (res.data.length) {
					this.navigate({
						url: "/pages/wallet/bankCard"
					}, "navigateTo", true);
				} else {
					this.navigate({
						url: '/pages/wallet/bindBank',
						complete: () => {
							setTimeout(() => {
								uni.showToast({
									title: '请先绑定银行卡',
									duration: 3000,
									icon: "none"
								});
							}, 500);

						}
					}, "navigateTo", true)
				}

			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			details(url) {
				this.navigate({
					url: url
				}, "navigateTo", true);
			},
			// 去提现
			async toWithdraw() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: '1',
				});
				if (res.data.length) {
					this.navigate({
						url: `/pages/wallet/withdraw?amountStatus=1&amount=${this.handlingFee}`,
					}, "navigateTo", true)
				} else {
					uni.showToast({
						title: '暂无审核通过的银行卡，不可提现',
						duration: 3000,
						icon: "none"
					});

				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		background: #F8FAFE;
	}

	.flexd {
		position: fixed;
		left: 0;
		right: 0;
	}

	.assets1 {
		width: 100%;
		height: auto;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;

		>view {
			border-bottom: 1px solid #f2f2f2;
			font-size: 14px;
			color: #232832;
			padding: 10px;
		}
	}

	.assets {
		width: 100%;
		height: auto;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 10px;
		border: 1px solid #FFFFFF;
		padding: 0 12px;
		margin-bottom: 12px;

		>view:nth-child(1) {
			border-bottom: 1px solid #CFCFCF;
			padding: 16px 0;
			color: #333;

			text:nth-child(1) {
				font-size: 14px;
			}

			text:nth-child(2) {
				font-size: 30px;
				font-weight: bold;
				margin: 6px 0;
			}
		}

		.yushou {
			padding: 8px;


			image {
				width: 20px;
				height: 20px;
				margin-top: 5px;
			}
		}
	}

	/* 银行卡信息Start */

	.search {
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 50px 16px 30px;
		height: auto;
		background: #F8FAFE;
		background-image: url("/static/image/wallet/qianbao.png");
		background-size: 100% 100%;
		position: relative;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}

		.bank {
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.center {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		image {
			width: 22px;
			height: 22px;
			margin-left: 20px;
		}
	}
</style>