BiKing/pages/property/modules/Bibi/index.vue

<template>
	<view class="">
		<card @updateShowMoneyStatus="(e) => showMoney = e">
			<template #cardnum>
				{{ bibiAccount.usdt_totle || '--'}}
			</template>
			<template #cardnums>
				{{ bibiAccount.totle || '--'}}
			</template>
			<template #cardmuen>
				<block v-for="(item , index ) in cardMuen">
					<view class="card-muen-item_2" @click.stop="cardBtns(item)">
						<image class="item-icon" :src="item.icon" mode="aspectFit"></image>
						<text class="item-name">{{item.name}}</text>
					</view>
				</block>
			</template>

		</card>
		<view class="legal-tender-box">
			<view class="lable-title">保证金</view>
			<view class="capital-item">
				<view class="capital-status" @click.stop="hideNoNums = !hideNoNums">
					<view :class="['status-box' , !hideNoNums ? '' : 'show-status-box' ]">
						<text v-show="hideNoNums" class="iconfont">&#xe6c5;</text>
						<!-- <image v-show="hideNoNums" class="capital-icon" src="@/static/images/notarize.png"
							mode="aspectFit"></image> -->
					</view>
					<text>隐藏为0的资产 </text>
				</view>
				<view class="capital-nums">
					钱包:{{ bibiAccount.usdt_totle || '--'}} USDT
				</view>
			</view>
			<uni-table class="table-box" emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="left" style="flex: 1;">币种</uni-th>
					<uni-th align="left" style="flex: 1;">账户权益</uni-th>
					<uni-th align="right" style="flex: 1;">可用</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<template v-if="bibiAccount.balance">
					<uni-tr v-for="(item , index) in bibiAccount.balance" v-if="hideNoName(hideNoNums , index)">
						<uni-td style="flex: 1;">{{ item.currency_name }}</uni-td>
						<uni-td style="flex: 1;">{{ showMoney ? item.usdt_price : '*****' }}</uni-td>
						<uni-td style="text-align: right; flex: 1;">{{ showMoney ? item.usdt_price : '*****' }}</uni-td>
					</uni-tr>
				</template>
			</uni-table>

			<capitalSwitch ref="capitalSwitchRef"/>
		</view>
	</view>
</template>

<script>
	import card from "../card.vue"
	import capitalSwitch from "./capital-switch.vue"
	import {
		checkBill
	} from "../card.js"
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'BibiModules',
		components: {
			card,
			capitalSwitch
		},
		computed: {
			...mapGetters([
				'contractAccount',
				'bibiAccount'
			])
		},
		data() {
			return {
				showMoney: true,
				hideNoNums: false,
				cardMuen: [{
					icon: require('@/static/logo.png'),
					name: '充币',
					path:'/pages/content/select-currency?type=recharge'
				}, {
					icon: require('@/static/logo.png'),
					name: '提币',
					path:'/pages/content/select-currency?type=withdraw'
				}, {
					icon: require('@/static/logo.png'),
					name: '闪兑',
					path:'/pages/exchange/index'
				}, {
					icon: require('@/static/logo.png'),
					name: '划转',
					btn: "BibiSwitch"
				}, {
					icon: require('@/static/logo.png'),
					name: '记录',
					path: '/pages/property/bill?type=1'
				}],
			};
		},
		methods: {
			hideNoName(type, index) {
				// console.log('hideNoName = ', type, index)
				if (type) {
					return index % 2
				}
				return true
			},
			cardBtns(item) {
				const path = item?.path

				if (!path) {
					// 资金转换
					this.$nextTick(() => {
						this.$refs.capitalSwitchRef.open()
					})
				} else if (path) {

					// '用户账单',
					checkBill(path)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~./../table.scss";

	.legal-tender-box {
		// padding: 0 $pages-padding ;
		width: 100%;

		.lable-title {
			border-bottom: none;
		}

		.capital-item {
			width: 100%;
			padding: 14rpx $pages-padding 25rpx;
			display: flex;
			justify-content: space-between;

			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #808080;
			line-height: 33rpx;
			border-bottom: 1px solid #e6e6e6;

			.capital-status {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				padding-right: 20rpx;

				.status-box {
					width: 28rpx;
					height: 28rpx;
					background: #e7e7e7;
					border-radius: 2rpx;
					margin-right: 12rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.iconfont {
						font-size: 24rpx;
						color: #fff;
					}

					.capital-icon {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.show-status-box {
					background-color: $Theme-Color;
				}

			}

			.capital-status,
			.capital-nums {
				// width: 1px;
				// flex: 1;
				// flex-shrink: 0;
				white-space: pre-wrap;
			}

			// <view class="capital-status">
			// 	<view class="status-box">
			// 		<image v-show="notarizeAgreement" class="capital-icon" src="@/static/images/notarize.png"
			// 			mode="aspectFit"></image>
			// 	</view>
			// 		<text>隐藏为0的资产</text>
			// </view>
		}
	}

	.table-box {
		padding: 0 $pages-padding ;
	}
</style>