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

<template>
	<view class="bind-user">
		<view class="bind-user-header">
			<view class="flex mb28" v-if="state.baseInfo && state.baseInfo.info">
				<up-image width="120rpx" height="120rpx" 
				
				:src="state.baseInfo.info.userImage" shape="circle"></up-image>
				<view class="header-name">
					<view class="font32 mb20" :style="{ color: '#000', fontSize: '32rpx' }">
						{{state.baseInfo.info.userName}}
					</view>
					<view class="flex-rowl">
						<!-- <view class="label1 mr20">
							{{ state.baseInfo.partner_level }}
						</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>
					<!--  <view class="flex font24">
            <view>当前分成比例：
              <text>25%</text>
            </view>
            <view>晋级后分成比例：
              <text>30%</text>
            </view>
          </view> -->
				</view>
			</view>
		</view>

		<view class="bind-main">
			<myData v-show="showFlag === 'data'" :dataInfo="state.baseInfo"></myData>
			<levelInfo v-show="showFlag === 'level'" :dataInfo="state.baseInfo"></levelInfo>
		</view>

		<view class="bind-user-foot flex-around">
			<view class="tab-bar flex-colc" @click="tabBarClick('data')">
				<up-image width="46rpx" height="46rpx" :src="tabBarList[dataNum]"></up-image>
				<view class="size-24 color-999" :class="{ activeColor: dataNum === 1 }">我的数据</view>
			</view>
			<view class="tab-bar flex-colc" @click="tabBarClick('level')">
				<up-image width="46rpx" height="46rpx" :src="tabBarList[levelNum]"></up-image>
				<view :class="['size-24', 'color-999', { activeColor: levelNum === 3 }]">等级信息</view>
			</view>
		</view>


		<!-- <view class="bind-main">
      <up-swiper
          :list="list3"
          previousMargin="30"
          nextMargin="30"
          circular
          :autoplay="false"
          radius="10"
          bgColor="#FFBF60"
          height="300rpx"
      ></up-swiper>
    </view> -->

	</view>
</template>

<script setup>
	import myData from './commponents/myData.vue'
	import levelInfo from './commponents/levelInfo.vue'
	import {
		reactive,
		ref,
		onMounted
	} from "vue";
	import {
		binBaseInfo,
		bindCode
	} from "@/api/home.js"
	const tabBarList = reactive([
		'/static/images/levelTabBar/data.png',
		'/static/images/levelTabBar/data_.png',
		'/static/images/levelTabBar/level.png',
		'/static/images/levelTabBar/level_.png',
	])
	const dataNum = ref(1)
	const levelNum = ref(2)
	const showFlag = ref('data')

	// const list3 = reactive([
	//   'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	//   'https://cdn.uviewui.com/uview/swiper/swiper2.png',
	//   'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	// ]);
	// const code = ref('asdasaadsdsa')
	// const url = ref('https://uview-plus.jiangruyi.com/components/button.html')
	const state = reactive({
		info: {},
		baseInfo: {}
	})
	onMounted(() => {
		state.info = JSON.parse(uni.getStorageSync("baseInfo"))
		getBaseInfo()
	})

	const getBaseInfo = () => {
		binBaseInfo(state.info.userId).then(res => {
			state.baseInfo = res.data
		})
		bindCode(state.info.userId).then(res => {
			state.code = {
				...cardData,
				code: res.data.code
			}
			state.posterUrl = res.data.url
		})
	}
	const tabBarClick = (flag) => {
		showFlag.value = flag
		switch (flag) {
			case 'data':
				dataNum.value = 1
				levelNum.value = 2
				break;
			case 'level':
				dataNum.value = 0
				levelNum.value = 3
				break;
			default:
				break;
		}
	}
</script>


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