shop_h5/pages/vip/distribution/guide.vue

<template>
	<view class="whole">
		<view class="oneBox">
			<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/11/27/SPqnXxeUJoCEevSdJS8pePeEckwO5MlIGUqbmYWR.png" mode="widthFix"></image>
		</view>
		<view class="topBox">
			<image class="avatar" :src="userInfo.avatar" mode="aspectFill" @click="toPage('/pages/user/info')"></image>
			<view class="box">
				<view class="tit">{{userInfo.nickname}}({{shenfen[role_level]}})<text>&nbsp;&nbsp;ID:{{userInfo.user_id}}</text></view>
				<view class="tag" @click="toPage('/pages/user/info')">更新昵称和头像</view>
			</view>
		</view>
		<view class="back flex" @click="toBack()"><up-icon name="arrow-left" size="18" color="#333" /></view>
		<view class="twoBox">
			<view class="title">升级方式</view>
			<view class="acBox">
				<view class="wid10">
					<ProgressCircle v-if="!loading" :progress="report.qualified_rate1" color="#07C160" :text="report.qualified_rate" :size="80" />
					<view class="e72" v-else></view>
				</view>
				
				<view class="box">
					<view class="tit">直接邀请</view>
					<view class="txt">{{report.qualified_count}}个合格店主<text>(升级目标>={{report.invite_user_count_target}}个合格店主)</text></view>
				</view>
			</view>
			<view class="line"></view>
			<view class="acBox">
				<view class="wid10">
					<ProgressCircle v-if="!loading" :progress="report.group_amount_rate1" color="#07C160" :text="report.group_amount_rate" :size="80" />
					<view class="e72" v-else></view>
				</view>
				<view class="box">
					<view class="tit">团队销售额</view>
					<view class="txt">{{report.group_amount}}元<text>(升级目标>={{report.group_amount_target}}元)</text></view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast } from '@/components/common.js'
	import ProgressCircle from '@/components/ProgressCircle.vue'
	
	export default {
		components: { ProgressCircle },
		setup() {
			const data = reactive({
				Color: uni.getStorageSync('theme_color'),
				report: {},
				loading: true,
				pagesLength: 0,
				userInfo: {
					group_amount: 0,
					group_amount_rate: 0,
					group_amount_target: 0,
					invite_user_count_target: 0,
					qualified_count: 0,
					qualified_rate: 0
				},
				shenfen: {
					'0': '合伙人',
					'1': '服务商',
					'2': '店主'
				},
				role_level: 2
			})
			
			function getInfo() {
				data.loading = true
				uni.showLoading({
					title: '加载中...'
				})
				get(`/api/v1/sales/distributor/target`).then((res) => {
					data.report = res.data
					let rate = res.data.group_amount_rate && res.data.group_amount_rate.split('%')[0]
					data.report.group_amount_rate1 = rate * 1
					
					let rate1 = res.data.qualified_rate && res.data.qualified_rate.split('%')[0]
					data.report.qualified_rate1 = rate1 * 1
					uni.hideLoading()
					setTimeout(() => {
						data.loading = false
					}, 100)
				}).catch((err) => {
					uni.hideLoading()
					showToast(JSON.stringify(err))
					data.loading = false
				})
			}
			
			let pages = getCurrentPages()
			data.pagesLength = pages.length
			const toBack = (val) => {
				if(data.pagesLength > 1) {
					uni.navigateBack({ delta: 1 })
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
			
			function getUserInfo() {
				get('/api/v1/user/detail').then((res) => {
					data.userInfo = res.data
				})
			}
			
			const toPage = (url) => {
				uni.navigateTo({ url })
			}
			
			function getInvite() {
				get('/api/v1/sales/distributor/invitationList').then((res) => {
					data.role_level = res.role_level
				})
			}
			
			return {
				...toRefs(data),
				getInfo,
				toBack,
				toPage,
				getUserInfo,
				getInvite
			}
		},
		onShow() {
			this.getInfo()
			this.getUserInfo()
			this.getInvite()
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.whole{
		height: 100vh;
		position: relative;
		overflow: hidden;
		.oneBox{
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			height: 100%;
			image{
				display: block;
				width: 100%;
			}
		}
	}
	.back{
		position: fixed;
		left: 12px;
		top: 12px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.7);
	}
	.topBox{
		display: flex;
		align-items: center;
		padding: 10rpx;
		position: fixed;
		left: 20px;
		top: 54px;
		background: linear-gradient(to right , rgba(255,255,255,1), rgba(255,255,255,0));
		border-radius: 50px 0 0 50px;
		.avatar {
			border-radius: 50%;
			width: 80rpx;
			height: 80rpx;
		}
		.box{
			flex: 1;
			padding-left: 24rpx;
			.tit{
				font-size: 32rpx;
				font-weight: 600;
				text{
					font-size: 26rpx;
					font-weight: 500;
				}
			}
			.tag{
				font-size: 24rpx;
				border-radius: 22px;
				margin-top: 10rpx;
				padding: 2rpx 15rpx;
				display: inline-block;
				color: #666;
				border: 1rpx solid #999;
			}
		}
	}
	.twoBox{
		width: 94%;
		margin: 480rpx 3% 0;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 10px;
		padding: 20rpx 24rpx;
		position: relative;
		z-index: 2;
		.title{
			padding-left: 10px;
			border-left: 2px solid #07C160;
			margin-bottom: 40px;
			line-height: 1;
		}
		.line{
			width: 100%;
			height: 1rpx;
			background: #f5f5f5;
		}
		.acBox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40px 0;
			.wid10{
				width: 80px;
				height: 80px;
				.e72{
					border: 5px solid #eee;
					margin: 4px;
					box-sizing: border-box;
					width: 72px;
					height: 72px;
					border-radius: 50%;
				}
			}
			.box{
				width: calc(100% - 100px);
				.tit{
					font-size: 30rpx;
					font-weight: 600;
					margin-bottom: 24rpx;
					color: #222;
				}
				.txt{
					font-size: 24rpx;
					text{
						color: #888;
					}
				}
			}
		}
	}
</style>