web-retail-h5/pages/mine/balance/index.vue

<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<view v-if="!ifshowBtn" class="topbar">
			<view class="levelList_i" v-for="(item, index) in topList" :key="index" @click.prevent="handleLink(item)">
				{{ item.name }}
			</view>

		</view>
		<view class="balance">
			<view class="ba_list" :style="{ backgroundImage: 'url(' + item.backgroundImg + ')' }"
				v-for="(item,index) in balanceList" :key="index">
				<view class="balance_title">
					<view class="title_left">
						<view class="">{{item.pkAccountVal}}</view>
						<image v-if="!item.canSee" @click="item.canSee=!item.canSee" class="eyeimg"
							src="../../../static/images/my_eye.png" mode=""></image>
						<image v-if="item.canSee" @click="item.canSee=!item.canSee" class="eyeimg"
							src="../../../static/images/my_eye2.png" mode=""></image>
					</view>
					<view class="title_right" @click="goTrans">{{'交易明细'}}</view>
				</view>
				<view class="balance_total">
					{{`${'总余额'}(${userInfo.currencyIcon})`}}
				</view>
				<view class="balance_total2">
					<text v-if="item.canSee">{{item.balance|numberToCurrency}}</text>
					<text v-else>****</text>
				</view>

				<view class="balance_line">
					<view>{{`${'可用余额'}(${userInfo.currencyIcon})`}}</view>
					<view>
						<text v-if="item.canSee">{{item.availableBalance|numberToCurrency}}</text>
						<text v-else>****</text>
					</view>
				</view>

				<view class="balance_line">

					<view style="display: flex;align-items: center;">
						<view style="margin-right: 20rpx;">{{`${'不可用余额'}(${userInfo.currencyIcon})`}}</view>
						<image @click="showToast(item)" style="width: 25rpx;height:25rpx;"
							src="../../../static/images/my_tip.png" mode="">
						</image>

					</view>
					<view>
						<text v-if="item.canSee">{{item.unavailableBalance|numberToCurrency}}</text>
						<text v-else>****</text>
					</view>
				</view>
				<view v-if="item.accountType == 4" class="balance_line">
					<view>{{`${'可提现金额'}(${userInfo.currencyIcon})`}}</view>
					<view>
						<text v-if="item.canSee">{{item.withdrawBalance|numberToCurrency}}</text>
						<text v-else>****</text>
					</view>
				</view>
			</view>
		</view>
		<u-modal @confirm="toUnBind" @cancel='isNoBind=false' :show="isNoBind" title="提示" width="100%"
			:showCancelButton="true" :content=''请先进行经销商认证''></u-modal>
	</view>
</template>

<script>
	import * as bal from "@/config/balance.js"
	export default {

		data() {
			return {
				topList: [{
					name: '充值',
					path: '/pages/pay/index',
					id: '1'
				}, {
					name: '提现',
					path: '/pages/mine/balance/withdrawal',
					id: '2'
				}, {
					name: '转账',
					path: '/pages/mine/balance/transfer',
					id: '3'
				}, ],
				tabActive: "",
				balanceList: [],
				userInfo: {},
				ifshowBtn: false,
				isNoBind:false

			}
		},
		onLoad() {
			let params = {
				ifcz: true
			}
			this.topList[0].path = '/pages/pay/index?paramsPost=' + JSON.stringify(params)
			this.getList()
			this.userInfo = uni.getStorageSync('User')
		},
		onShow() {
			this.gettopList()
			this.ifCodeName()
		},
		methods: {
			ifCodeName() {
				if (this.userInfo.memberCode == 'CN68880628') {
					this.ifshowBtn = true
				} else {
					this.ifshowBtn = false
				}

			},
			gettopList() {
				if (this.userInfo.pkCountry == 1 && this.userInfo.pkGradeId == 1) {
					this.topList = [{
						name: '充值',
						path: '/pages/pay/index',
						id: '1'
					}, {
						name: '提现',
						path: '/pages/mine/balance/withdrawal',
						id: '2'
					}, ]
				} else {
					this.topList = [{
						name: '充值',
						path: '/pages/pay/index',
						id: '1'
					}, {
						name: '提现',
						path: '/pages/mine/balance/withdrawal',
						id: '2'
					}, {
						name: '转账',
						path: '/pages/mine/balance/transfer',
						id: '3'
					}, ]
				}
			},
			//交易明细跳转
			goTrans() {
				uni.navigateTo({
					url: '/pages/mine/balance/transDetail'
				})
			},
			showToast(item) {
				this.$refs.uToast.show({
					message: `${'禁止消费金额'}：${item.lockAccount}\n${'禁止转账金额'}：${item.transferAccount}\n${'禁止提现金额'}：${item.withdrawAccount}`,
				})
			},
			getList() {

				bal.getWalletBalance().then(res => {
					res.data.memberWalletBalanceVOList.forEach(ele => {
						ele.canSee = false
					})
					this.balanceList = res.data.memberWalletBalanceVOList
				})
			},
			checkExit(item) {
				bal.getIsExist({
					businessModule: item.id - 1
				}).then((res) => {
					if (res.code == 200 && res.flag == "Y") {
						uni.navigateTo({
							url: item.path
						})
					} else if (res.code == 200 && res.flag == "N") {
						this.isNoBind = true
						// uni.navigateTo({
						// 	 url: "/pages/mine/addLicense/addLicense"
						// })

					}
				});
			},
			toUnBind(){
				uni.navigateTo({
					url: "/pages/delear/index"
				})
			},
			
			handleLink(item) {
				this.tabActive = item.path;
				if (item.id == 2 || item.id == 3) {
					if (this.userInfo.pkCountry == 1) {
						if (this.userInfo.pkGradeId == 1 && item.id == 2) {

						} else {
							bal.getIfAuth({
								businessModule: item.id - 1
							}).then(res => {
								if (res.code == 200 && res.flag == "Y") {

									this.checkExit(item)
								} else if (res.code == 200 && res.flag == "N") {
									this.smShow = true;
									uni.showToast({
										title: '请先进行实名认证'
									})
									uni.navigateTo({
										url: "/pages/selfService/realName/realName"
									})
								}
							})
						}
					} else {
						uni.navigateTo({
							url: item.path
						})
					}

				} else {
					let paramsPost = {
						ifcz: true
					};
					uni.navigateTo({
						url: `${item.path}?paramsPost=${encodeURIComponent(JSON.stringify(paramsPost))}`
					});
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		background: #f2f2f2;
		padding-bottom: 40rpx;

		.topbar {

			display: flex;
			align-items: center;
			justify-content: center;
			padding: 27rpx 0;
			background-color: #FFFFFF;

			.levelList_i {
				min-width: 200rpx;
				height: 60rpx;
				border: 2rpx solid #DDDDDD;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				border-radius: 30rpx;
				font-size: 30rpx;
				margin: 0 22rpx;
			}

			.levelList_i:active {
				background-color: rgba(192, 31, 31, 1);
				color: #ffffff;
			}

		}

		.balance {
			padding: 0 23rpx;
			background: #F2F2F2;


			.ba_list {
				margin-top: 30rpx;
				padding: 40rpx 20rpx;
				border-radius: 25rpx;
				background-size: 100% 100%;

				.balance_title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title_left {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;

						.eyeimg {
							margin-left: 18rpx;
							width: 38rpx;
							height: 25rpx;
						}
					}

					.title_right {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #2e1aca;
					}
				}

				.balance_total {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-top: 10rpx;
				}

				.balance_total2 {
					font-size: 48rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-top: 5rpx;
					margin-bottom: 50rpx;
				}

				.balance_line {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-top: 5rpx;
				}
			}
		}

	}
</style>