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

<template>
	<view class="bind-user">
		<view class="bind-user-header">
			<view class="flex mb28">
				<up-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"
					shape="circle"></up-image>
				<view class="header-name">
					<view class="font32 mb20" :style="{color:'#000',fontSize:'32rpx'}">猫小姐</view>
					<view class="flex-rowl">
						<view class="label1 mr20">
							初级合伙人
						</view>
						<view class="size-22" style="color: #B97132;">
							已加入合伙人:130天
						</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'"></myData>
			<levelInfo v-show="showFlag === 'level'"></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
	} from "vue";

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