BiKing/pages/property/modules/card.vue

<template>
	<view class="box">
		<view class="card-box">
			<view class="card-title">
				<text class="title">资产估值(USDT)</text>
				<image class="icon" src="../../../static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="card-num">
				29858.7458
			</view>
			<view class="card-nums">
				￥ 205129.58
			</view>
			<view class="card-muen">
				<block v-for="(item , index ) in cardMuen[cardIndex]">
					<template v-if="[0,2,3].includes(cardIndex)">
						<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>
					</template>
					<template v-else-if="[1].includes(cardIndex)">
						<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>
					</template>
				</block>
			</view>
		</view>
		<capital-switch ref="capitalSwitchRef" />


		<!-- 币币账户 / 资金转换 -->
		<BibiSwitch ref="BibiSwitchRef" />

		<!-- GiftMoney / 赠金账户 -->
		<GiftMoney ref="GiftMoneyRef" />


	</view>
</template>

<script>
	import capitalSwitch from "./capital-switch.vue"
	import GiftMoney from "./GiftMoney/capital-switch.vue"
	import BibiSwitch from "./Bibi/capital-switch.vue"
	export default {
		name: 'cardModules',
		props: {
			userInfo:{
				type:[String , Object],
				default: null
			},
			cardIndex: {
				type: Number,
				default: 0
			}
		},
		components: {
			capitalSwitch,
			GiftMoney,
			BibiSwitch
		},
		data() {
			return {
				cardMuen: [
					[{
						icon: require('../../../static/logo.png'),
						name: '资金划转',
						btn: "capitalSwitch"
					}, {
						icon: require('../../../static/logo.png'),
						name: '用户账单',
						path: '/pages/property/bill?type=0'
					}],
					[{
						icon: require('../../../static/logo.png'),
						name: '充币'
					}, {
						icon: require('../../../static/logo.png'),
						name: '提币'
					}, {
						icon: require('../../../static/logo.png'),
						name: '闪兑'
					}, {
						icon: require('../../../static/logo.png'),
						name: '划转',
						btn: "BibiSwitch"
					}, {
						icon: require('../../../static/logo.png'),
						name: '记录',
						path: '/pages/property/bill?type=1'
					}],
					[{
						icon: require('../../../static/logo.png'),
						name: '资金划转'
					}, {
						icon: require('../../../static/logo.png'),
						name: '用户账单',
						path: '/pages/property/bill?type=2'
					}],
					[{
						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
				console.log('cardBtns ', btn)
				if (btn) {
					switch (btn) {
						case 'capitalSwitch':
							// 资金转换
							this.$nextTick(() => {
								this.$refs.capitalSwitchRef.open()
							})
							break;
						case 'BibiSwitch':
							// 币币账户  - 资金转换
							this.$nextTick(() => {
								this.$refs.BibiSwitchRef.open()
							})
							break;


						case 'GiftMoney':
							// 资金转换
							this.$nextTick(() => {
								this.$refs.GiftMoneyRef.open()
							})
							break;

					}
					return false
				}

				const path = item?.path
				if (path) {
					uni.navigateTo({
						url: path
					});
				}
			},
			// 资金转换
			openCapitalSwitch() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 $pages-padding;
	}

	.card-box {
		width: 100%;
		min-height: 327rpx;
		padding: 34rpx 30rpx;
		background: linear-gradient(89deg, #05c373 1%, #8eeabb 99%);
		border-radius: 18rpx;

		.card-title {
			width: 100%;
			display: flex;
			align-items: center;

			.title {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #ffffff;
				line-height: 33rpx;
			}

			.icon {
				width: 28rpx;
				height: 18rpx;
				margin-left: 10rpx;
			}
		}

		.card-num {
			padding: 19rpx 0 11rpx;
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #ffffff;
			line-height: 56rpx;
		}

		.card-nums {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #ffffff;
			line-height: 28rpx;
		}

		.card-muen {
			padding-top: 48rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.card-muen-item_1 {
				width: calc((100% - 22rpx) / 2);

				min-height: 64rpx;
				flex-shrink: 0;
				background: #05bd73;
				border: 1rpx solid rgba(255, 255, 255, 0.81);
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&:nth-child(even) {
					margin-left: 22rpx;
				}

				&:nth-child(n + 3) {
					margin-top: 22rpx;
				}

				.item-icon {
					width: 38rpx;
					height: 38rpx;
					border-radius: 6rpx;
				}

				.item-name {
					padding-left: 32rpx;


					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.card-muen-item_2 {
				flex-shrink: 0;
				width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.item-icon {
					width: 32rpx;
					height: 32rpx;
					border-radius: 6rpx;
				}

				.item-name {
					padding-top: 2.5px;
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #ffffff;
					line-height: 30rpx;
				}
			}
		}
	}
</style>