pet-front/otherPages/workbenchManage/myWallet/index.vue

<template>
	<view class="bind-user">
		<view class="bind-user-header">
			<view class="flex mb28 ml20	">
				<up-image width="140rpx" height="140rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"
					shape="circle"></up-image>
				<view class="header-name">
					<view class="font32 mb20 color-040">微信用户</view>
					<view class="label1">
						初级合伙人
					</view>
					<view class="flex font24">
						<view style="color: #B97132;">当前分成比例：
							<text style="color: #CD4732;">25%</text>
						</view>
						<view style="color: #B97132;">晋级后分成比例：
							<text style="color: #CD4732;">30%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bind-main">
			<view class="bind-main-content">

				<view class="top box-size mb20" :style="{borderRadius:'16rpx'}">
					<view class="level account">
						<view class="fw700">
							钱包余额
						</view>
						<view class="level text">
							<view @click="handleGoto('detail')">
								明细
							</view>
							<view class="line" @click="handleGoto('cash')">
								提现
							</view>
						</view>
					</view>
					<view class="money level fw700">
						<text class="text1">
							¥
						</text>
						<text style="color: #FF2A2A; font-size: 36rpx;">29.00</text>
					</view>
					<view class="line1">
					</view>
					<view class="level divide">
						<view class="level flex-rowl">
							<view class="">
								本月订单分成:&nbsp;&nbsp;
							</view>
							¥<view class="">
								0.00
							</view>
						</view>
						<view class="level flex-rowl">
							<view class="">
								累积订单分成:&nbsp;&nbsp;
							</view>
							¥<view class="">
								0.00
							</view>
						</view>
					</view>
				</view>

				<view class="my-data">
					<view class="my-data-total">
						<cardTitle :cardTitle="mounthName"></cardTitle>
						<cardData :cardData="nounthData"></cardData>
					</view>
				</view>

				<view class="my-data">
					<view class="my-data-total">
						<cardTitle :cardTitle="totalName"></cardTitle>
						<cardData :cardData="totalData"></cardData>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import tab from "@/plugins/tab.js"
	import cardTitle from '../components/cardTitle.vue'
	import cardData from '../components/cardData.vue'
	import {
		ref,
		reactive
	} from "vue"

	const mounthName = ref('本月数据')
	const totalName = ref('累计数据')
	const nounthData = reactive([{
			title: '本月注册用户',
			num: "0个"
		},
		{
			title: '本月下单用户',
			num: "0个"
		},
		{
			title: '本月有效用户',
			num: "0个"
		},
		{
			title: '本月订单金额',
			num: "￥0.00",
			color: 'red'
		},
		{
			title: '本月有效订单金额',
			num: "￥0.00",
			color: 'red'
		},
	])
	const totalData = reactive([{
			title: '累计注册用户',
			num: "0个",

		},
		{
			title: '累计下单用户',
			num: "0个"
		},
		{
			title: '累计有效用户',
			num: "0个",
		},
		{
			title: '累计订单金额',
			num: "￥0.00",
			color: 'red'
		},
		{
			title: '累计有效订单金额',
			num: "￥0.00",
			color: 'red'
		},
	])

	const handleGoto = (val) => {
		switch (val) {
			case 'detail':
				tab.navigateTo('/otherPages/binding/partner/index')
				// tab.navigateTo('/otherPages/workbenchManage/bindUser/index')
				break;
			case 'cash':
				tab.navigateTo('/otherPages/binding/withdrawal/index')
				break;
		}
	}
</script>

<style scoped lang="scss">
	@import "index";
</style>