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

<template>
	<view class="">
		<card @updateShowMoneyStatus="(e) => showMoney = e">
			<template #cardnum>
				{{ GiftMoneyAccount.usdt_totle || '--'}}
			</template>
			<template #cardnums>
				{{ GiftMoneyAccount.CNY || '--'}}
			</template>
			<template #cardmuen>
				<block v-for="(item , index ) in cardMuen">
					<view class="card-muen-item_1" @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="gift-money">
			<view class="lable-title">保证金</view>
			<uni-table class="table-box" emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="left">可用保证金</uni-th>
					<uni-th align="center">已用保证金</uni-th>
					<uni-th align="right">冻结</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td>124.8028 USDT</uni-td>
					<uni-td style="text-align: center;">100.0000 USDT</uni-td>
					<uni-td style="text-align: right;">29997.9123</uni-td>
				</uni-tr>

			</uni-table>
			<view class="account-money">
				<view class="money-item">
					赠金账户 124.8028 USDT
				</view>
				<view class="money-item">
					盈利账户 0.0000 USDT
				</view>
			</view>

			<gap />

			<view class="lable-title">盈亏</view>

			<view class="Profit-loss">
				<view class="Profit-loss-lable">
					浮动盈亏
				</view>
				<view class="Profit-loss-value">
					-1.8767 USDT
				</view>
			</view>
		</view>
		<capital-switch ref="capitalSwitchRef" />
	</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: 'GiftMoney',
 
		computed: {
			...mapGetters([
				'GiftMoneyAccount',
			])
		},
		components: {
			card,
			capitalSwitch
		},
		data() {
			return {
				showMoney: true,
				cardMuen: [{
					icon: require('@/static/logo.png'),
					name: '资金划转',
					btn: "GiftMoney"
				}, {
					icon: require('@/static/logo.png'),
					name: '用户账单',
					path: '/pages/property/bill?type=3'
				}]
			};
		},
		methods:{
			cardBtns(item) {
				const btn = item?.btn
				const path = item?.path
			
				if (btn) {
					// 资金转换
					this.$nextTick(() => {
						this.$refs.capitalSwitchRef.open()
					})
				} else if(path){
					 
					// '用户账单',
					checkBill(path)
				}
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gift-money {
		width: 100%;

		.lable-title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
			padding: 30rpx $pages-padding 11rpx;
			border-bottom: 1px solid #e6e6e6;
		}

	}

	.table-box {
		padding: 0 $pages-padding;

		::v-deep .uni-table-tr {
			.uni-table-th {
				border: none;
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;
			}

			.uni-table-td {
				border: none;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #1a1a1a;

			}

			.uni-table-th {
				padding: 20rpx 0 0;

				&:nth-child(2) {
					padding: 20rpx 20rpx 0;
				}
			}

			.uni-table-td {
				padding: 12rpx 0 20rpx;

				&:nth-child(2) {
					padding: 12rpx 20rpx 0;
				}
			}
		}

	}

	.account-money {
		padding: 0 $pages-padding;

		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #808080;
		line-height: 30rpx;

		.money-item {
			padding-bottom: 12rpx;

			&:last-child {
				padding-bottom: 30rpx;
			}
		}

	}

	.Profit-loss {
		width: 100%;
		padding: 0 $pages-padding;

		.Profit-loss-lable {
			padding: 20rpx 0 12rpx;
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #1a1a1a;
			line-height: 30rpx;
		}

		.Profit-loss-value {

			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
			line-height: 37rpx;
		}
	}
</style>