pet-front/otherPages/workbenchManage/myLevel/commponents/levelInfo.vue

<template>
	<view class="my-level">
		<view class="my-level-need">
			<cardTitle :cardTitle="cardName"></cardTitle>
			<view :class="['my-level-content','mt20', baseList.length == 1 ? 'flex-rowc' : 'flex-b']">
				<view :class="i == 1 ? '' : 'flex-colc'" v-for="(item,i) in baseList" :key="i">
					<view class="color-999 size-28">{{item.title}}</view>
					<view class="mt20 size-28">{{item.num}}</view>
				</view>
			</view>
		</view>
	</view>
	<view>
		<up-swiper 
		:list="level_list" 
		previousMargin="10" 
		nextMargin="10" 
		circular 
		:autoplay="false" 
		radius="10" 
		height="440rpx"
		keyName="paramValueImage"
		img-mode="aspectFit"
		:current="currentIndex"
		@change="swiperChange"></up-swiper>
		
		<!-- <image src="" mode="aspectFit"></image> -->
	</view>
</template>

<script setup>
	import cardTitle from '../../components/cardTitle.vue'
	import {
		ref,
		reactive,
		onMounted,
		computed,
	} from "vue"
	
	
	const props = defineProps({
		dataInfo : {
			default : () => {
				return {}
			}
		}
	})
	
	let currentIndex = ref(0)
	
	const level_list = computed(() => {
		return props.dataInfo.level_list
	})
	
	const cardName = ref("距离下一等级要求")
	const baseList = ref([
		// {
		// 	title: '仍需至少注册',
		// 	num: "20人"
		// },
	]);

	const list3 = reactive([
		'/static/images/levelImage/1.jpeg',
		'/static/images/levelImage/2.jpg',
	]);
	
	
	onMounted(() => {
		currentIndex.value = props.dataInfo.info.userHhRole
		swiperChange({
			current : props.dataInfo.info.userHhRole,
		})
	})

	const swiperChange = (index) => {
		if(!props.dataInfo || !props.dataInfo.level_list) return
		
		let current = index.current + 1
		
		if(!props.dataInfo.level_list[current]){
		// if(index.current == (props.dataInfo.level_list.length - 1)){
			baseList.value = [{
				title: '已达到最高等级',
				num: ""
			}]
			return
		}
		
		let level = props.dataInfo.level_list[current]
		let info = props.dataInfo.info
		let register_users_sum = props.dataInfo.register_users_sum || 0
		let order_users_sum = props.dataInfo.order_users_sum || 0
		
		baseList.value = []
		
		// if(index.current <= info.userHhRole){
		// 	baseList.value.push({
		// 		title: '已达成',
		// 		num: ""
		// 	})
		// 	return
		// }
		
		if(level.paramCondition){
			baseList.value.push({
				title: '仍需至少注册',
				num: (level.paramCondition - register_users_sum) + "人"
			})
		}
		if(level.needOrderUserNum){
			if(baseList.value.length > 0){
				baseList.value.push({
					title: '或',
					num: ""
				})
			}
			baseList.value.push({
				title: '仍需至少下单',
				num: (level.needOrderUserNum - order_users_sum) + "人"
			})
		}
		
		// switch (index.current) {
		// 	case 0:
		// 		baseList.value = [{
		// 			title: '仍需至少注册',
		// 			num: "20人"
		// 		}]
		// 		break;
		// 	case 1:
		// 		baseList.value = [{
		// 				title: '仍需至少注册',
		// 				num: "20人"
		// 			},
		// 			{
		// 				title: '或',
		// 				num: " "
		// 			},
		// 			{
		// 				title: '仍需至少下单',
		// 				num: "5人"
		// 			}
		// 		]
		// 		break;
		// 	case 2:
		// 		break;
		// 	case 3:
		// 		break;
		// 	case 4:
		// 		break;
		// }
	}
</script>

<style scoped lang="scss">
	@import "../index.scss";
	// .comp-card{
	// 	&-head{
	// 		.line{
	// 			width: 11rpx;
	// 			height: 38rpx;
	// 			background-color: #FFBF60;
	// 			border-radius: 6rpx;
	// 		}
	// 		.title{
	// 			font-weight: bold;
	// 		}
	// 	}
	// }
</style>