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="state?.baseInfo?.info?.userImage" shape="circle"></up-image>
				<view class="header-name">
					<view class="font32 mb20 color-040">{{ state?.baseInfo?.info?.userName }}</view>
					<view class="label1" v-if="state.baseInfo.info.userHhRole == 1">
						初级伴宠师
					</view>
					<view class="label1" v-if="state.baseInfo.info.userHhRole == 2">
						中级伴宠师
					</view>
					<view class="label1"v-if="state.baseInfo.info.userHhRole == 3">
						高级伴宠师
					</view>
					<view class="size-22" style="color: #B97132;">
						已加入合伙人:{{state.baseInfo.partner_day}}
					</view>
					<view class="flex font24">
						<view style="color: #B97132;">当前分成比例：
							<text style="color: #CD4732;">{{state.baseInfo.partner_new_num}}</text>
						</view>
						<view style="color: #B97132;">晋级后分成比例：
							<text style="color: #CD4732;">{{state.baseInfo.partner_upgrade_num}}</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;">{{state.baseInfo.money}}</text>
					</view>
					<view class="line1">
					</view>
					<view class="level divide">
						<view class="level flex-rowl">
							<view >
								本月订单分成:&nbsp;&nbsp;
							</view>
							¥<view >
								{{state.baseInfo.new_money}}
							</view>
						</view>
						<view class="level flex-rowl">
							<view >
								累积订单分成:&nbsp;&nbsp;
							</view>
							¥<view >
								{{state.baseInfo.old_money}}
							</view>
						</view>
					</view>
				</view>

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

				<view class="my-data">
					<view class="my-data-total">
						<cardTitle :cardTitle="totalName"></cardTitle>
						<cardData :cardData="state.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,
		onMounted
	} from "vue"

	import {
		binBaseInfo,
		bindCode
	} from "@/api/home.js"

	const mounthName = ref('本月数据')
	const totalName = ref('累计数据')

	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;
		}
	}

	const state = reactive({
		info: {},
		baseInfo: {},
		nounthData: [],
		totalData: []
	})

	onMounted(() => {
		state.info = JSON.parse(uni.getStorageSync("baseInfo"))
		getBaseInfo()
	})

	const getBaseInfo = () => {
		binBaseInfo(state.info.userId).then(res => {
			state.baseInfo = res.data
			state.nounthData = [{
					title: '本月注册用户',
					num: state.baseInfo.register_users,
					code: "register_users"
				},
				{
					title: '本月下单用户',
					num: state.baseInfo.register_users,
					code: "order_users"
				},
				{
					title: '本月有效用户',
					num: state.baseInfo.use_users,
					code: "use_users"
				},
				{
					title: '本月订单金额',
					num: `￥${state.baseInfo.order_users_money}`,
					color: 'red',
					code: "order_users_money"
				},
				{
					title: '本月有效订单金额',
					num: `￥${state.baseInfo.use_users_money}`,
					color: 'red',
					code: "use_users_money"
				},
			]

			state.totalData = [{
					title: '累计注册用户',
					num: state.baseInfo.register_users_sum,
					code: "register_users_sum"
				},
				{
					title: '累计下单用户',
					num: state.baseInfo.order_users_sum,
					code: "order_users_sum"
				},
				{
					title: '累计有效用户',
					num: state.baseInfo.use_users_sum,
					code: "use_users_sum"
				},
				{
					title: '累计订单金额',
					num: `￥${state.baseInfo.order_users_sum_money}`,
					color: 'red',
					code: "order_users_sum_money"
				},
				{
					title: '累计有效订单金额',
					num: `￥${state.baseInfo.use_users_sum_money}`,
					color: 'red',
					code: "use_users_sum_money"
				},
			]
		})

	}
</script>

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