dingdong-mall/pages/my/withdraw.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">提现账户</block>
		</cu-custom>
		<!-- <view class="margin-lr-sm margin-tb-lg shadow-warp">
			<view @click="bindAccount">
				<view v-if="bindBankCard && bindBankCard.bankNum" class="bg-gray flex justify-between align-center text-xl padding">
					<view>
						<text class="cu-tag bg-main-color light margin-right-sm">已绑定</text>
						<text>{{bindBankCard.encodeBankNum}}</text>
					</view>
					<view>帐号另绑<text class="cuIcon-right"></text></view>
				</view>
				<view v-else class="bg-gray flex justify-between align-center text-xl padding">
					<view>提现帐号绑定</view>
					<view><text class="cuIcon-right"></text></view>
				</view>
			</view>
			<view class="bg-white padding solid-bottom">
				<view class="text-right text-lg">
					<text>可提现金额:</text>
					<text class="text-red text-price">{{balance}}</text>
				</view>
				<view class="text-lg margin-bottom-sm">提现金额</view>
				<view class="text-xxl solid-bottom flex justify-start align-baseline">
					<text class="margin-right-xs text-bold">￥</text>
					<input type="digit" placeholder="请输入金额" placeholder-style="color:#989898" style="height: 80rpx;">
				</view>
			</view>
			<view class="bg-white padding">
				<view class="text-lg margin-bottom-sm">发票凭证（电子票）</view>
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index"
						@tap="viewImage($event)" :data-url="item">
						<image :src="item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg($event)" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="chooseImage" v-if="imgList.length < 9">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="margin-sm shadow-warp">
			<view class="padding-tb-lg padding-lr bg-gradual-color light" v-if="bindBankCard && bindBankCard.bankNum">
				<view>提现账户</view>
				<view class="flex justify-between margin-top-sm">
					<!-- <text class="cu-tag bg-white radius margin-right-sm">已绑定</text> -->
					<text class="text-xxl">{{bindBankCard.encodeBankNum}}</text>
					<view class="cu-btn bg-white radius" @click="bindAccount">帐号另绑</view>
				</view>
			</view>
			<view class="padding-tb-lg padding-lr bg-gradual-color light" v-else>
				<view class="padding-bottom">提现帐号未绑定</view>
				<view class="cu-btn bg-white radius" @click="bindAccount">前往绑定</view>
			</view>
			<view class="padding bg-white flex justify-between">
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="margin-lr">
			<button class="cu-btn lg line-main-color long-btn shadow-blur" @click="showFinanalDetails">运营账单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: '0.00',
				imgList: [],
				curUserInfo: {},
				bindBankCard: null
			}
		},
		onLoad() {
			this.loadData();
		},
		onShow() {
			this.reloadData();
		},
		methods: {
			async loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.loadBindBankCard();
			},
			async reloadData() {
				this.loadBindBankCard();
			},
			async loadBindBankCard() {
				let res = await this.$request.getBindBankCardByCustomerId({
					customerId: this.curUserInfo.customerId
				});
				this.bindBankCard = res.data;
				if (this.bindBankCard && this.bindBankCard.bankNum) {
					this.bindBankCard.encodeBankNum = '****' + this.bindBankCard.bankNum.substring(this.bindBankCard.bankNum.length - 4);
				}
			},
			bindAccount() {
				uni.navigateTo({
					url: '/pages/my/b-account-bind'
				})
			},
			chooseImage(e) {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			viewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			delImg(e) {
				uni.showModal({
					title: '',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			showFinanalDetails() {
				uni.navigateTo({
					url: '/pages/my/my-money-bag'
				})
			}
		},
	}
</script>

<style>
</style>