You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
3.4 KiB
171 lines
3.4 KiB
<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>
|