Skip to content

飞
飞鹤小程序
Commit d39ca323 authored by 王炽's avatar 王炽
Browse files
Options

积分页迭代

parent 761a9eea
Hide whitespace changes
Inline Side-by-side
Showing with 97 additions and 69 deletions
.DS_Store
View file @ d39ca323
No preview for this file type
integral/.DS_Store
View file @ d39ca323
No preview for this file type
views/Integral.vue
View file @ d39ca323
......@@ -10,6 +10,7 @@
indicator-color="#dfddd9"
indicator-active-color="#b27c1e"
:indicator-top="596"
v-if="swiperData?.length > 0"
>
<swiper-item v-for="(item, index) in swiperData" :key="index">
<image
......@@ -21,6 +22,8 @@
</swiper-item>
</swiper>
<view class="banner-swiper-space" v-else></view>
<!-- 会员等级区域 -->
<swiper
class="vip-swiper"
......@@ -32,24 +35,29 @@
>
<swiper-item
class="vip-area"
v-for="(item, index) in vipLvDatas"
v-for="(item, index) in integralData?.vipLvInfo"
:key="index"
@click="handleVipClick"
:style="{
background: `url(${$baseUrl}integral/${tupianBanben}/${item?.vipIconBg}) no-repeat center/contain`
background: `url(../../static/integral/${tupianBanben}/${item?.vipLvBg}) no-repeat center/contain`
}"
>
<image
class="vip-icon"
:src="$baseUrl + `integral/${tupianBanben}/${item?.vipIcon}`"
mode="aspectFit"
/>
<view class="vip-info">
:src="`/static/integral/${tupianBanben}/${item?.vipLvIcon}`"
mode="aspectFit"
/>
<image class="current-tag"
:src="`/static/integral/${tupianBanben}/${item?.currentLvTip}`"
mode="aspectFit"
/>
<view class="vip-info">
<text class="vip-name"
:style="{
color: islogin ? `${item?.nickNameColor}` : '#6f6d67',
}"
>{{`${nickName}`}}</text>
<view class="title-container">
<text v-if="!islogin" class="vip-title1">{{`${item?.vipName}`}}</text>
<image
......@@ -71,19 +79,8 @@
:src="$baseUrl + `integral/${tupianBanben}/integralArrow.png`"
mode="aspectFit"
/>
<view
class="current-tag"
v-if="islogin && index == vipLevel"
:style="{
background: `url(${$baseUrl}integral/${tupianBanben}/tabNowBg.png) no-repeat center/contain`
}"
>
<text class="tag-text"
:style="{
color: `${item?.dangqianColor}`,
}">当前</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
......@@ -415,14 +412,42 @@
const integralData = ref({
"tupianBanben": "1013",
"swiper": [
],
"vipLvInfo":[
{
"bannerImg": "integralBannerBg1.png",
"url": "",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
"currentLvTip":"currentLvTip0.png",
"barVip":"barVip0.png",
"barBgVip":"barBgVip0.png",
"vipLvBg":"vipLvBg0.png",
"vipLvIcon":"vipLvIcon0.png",
},
{
"currentLvTip":"currentLvTip1.png",
"barVip":"barVip1.png",
"barBgVip":"barBgVip1.png",
"vipLvBg":"vipLvBg1.png",
"vipLvIcon":"vipLvIcon1.png",
},
{
"currentLvTip":"currentLvTip2.png",
"barVip":"barVip2.png",
"barBgVip":"barBgVip2.png",
"vipLvBg":"vipLvBg2.png",
"vipLvIcon":"vipLvIcon2.png",
},
{
"currentLvTip":"currentLvTip3.png",
"barVip":"barVip3.png",
"barBgVip":"barBgVip3.png",
"vipLvBg":"vipLvBg3.png",
"vipLvIcon":"vipLvIcon3.png",
},
{
"currentLvTip":"currentLvTip4.png",
"barVip":"barVip4.png",
"barBgVip":"barBgVip4.png",
"vipLvBg":"vipLvBg4.png",
"vipLvIcon":"vipLvIcon4.png",
}
],
"viplv": {
......@@ -1378,8 +1403,8 @@
const {data} = await fetchIntegralJSON();
integralData.value = {...data};
// const {data} = await fetchIntegralJSON();
// integralData.value = {...data};
swiperData.value = integralData.value.swiper;
vipLvIcons.value = integralData.value.viplv.imgs;
......@@ -1434,19 +1459,20 @@
nickName.value = memberInfo.value.memberName;
// 清空之前的数据
vipLvDatas.value = [];//??????????
// vipLvDatas.value = [];//??????????
// vipLvDatas.value = integralData.value.vipLvInfo;
memberInfo.value?.gradeList.forEach((element, index) => {
vipLvDatas.value.push({
"vipName" : element.gradeName,
});
vipLvDatas.value[index].vipIcon = vipLvIcons.value[index];
vipLvDatas.value[index].vipIconBg = vipLvIconBgs.value[index];
vipLvDatas.value[index].vipNameImg = vipLvNameImgs.value[index];
vipLvDatas.value[index].nickNameColor = nickNameColors.value[index];
vipLvDatas.value[index].dangqianColor = dangqianColors.value[index];
});
// memberInfo.value?.gradeList.forEach((element, index) => {
// vipLvDatas.value.push({
// "vipName" : element.gradeName,
// });
// vipLvDatas.value[index].vipIcon = vipLvIcons.value[index];
// vipLvDatas.value[index].vipIconBg = vipLvIconBgs.value[index];
// vipLvDatas.value[index].vipNameImg = vipLvNameImgs.value[index];
// vipLvDatas.value[index].nickNameColor = nickNameColors.value[index];
// vipLvDatas.value[index].dangqianColor = dangqianColors.value[index];
// });
}else{
nickName.value = '未登录';
......@@ -1857,15 +1883,21 @@
// }
}
.banner-swiper-space{
width: 100%;
height: 160rpx;
flex-shrink: 0;
}
.vip-swiper {
width: 686rpx;
height: 154rpx;
height: 256rpx;
// margin-top: 15rpx;
margin-left:auto;
margin-right: auto;
.vip-area {
width: 686rpx;
height: 154rpx;
width: 687rpx;
height: 256rpx;
// margin-left: 32rpx;
// margin-right: 32rpx;
// background: url('@{baseUrl}integral/1008/vipDetailBg.png') no-repeat center/cover;
......@@ -1880,6 +1912,16 @@
margin-top: 32rpx;
}
.current-tag {
width: 60rpx;
height: 37rpx;
margin-left: 10rpx;
margin-top: 5rpx;
display: flex;
align-items: center;
justify-content: center;
}
.vip-info {
display: flex;
flex-direction: column;
......@@ -1908,36 +1950,22 @@
height: 31rpx;
}
.phone-button{
top:82rpx;
position: absolute;
width:285rpx;
height: 36rpx;
opacity: 0;
}
.phone-button{
top:82rpx;
position: absolute;
width:285rpx;
height: 36rpx;
opacity: 0;
}
.rule-icon{
margin-top: 14rpx;
margin-left: 10rpx;
width: 11rpx;
height: 19rpx;
}
.current-tag {
width: 60rpx;
height: 37rpx;
.rule-icon{
margin-top: 14rpx;
margin-left: 10rpx;
margin-top: 5rpx;
// background: url('@{baseUrl}integral/1008/tabNowBg.png') no-repeat center/contain;
display: flex;
align-items: center;
justify-content: center;
.tag-text {
font-size: 22rpx;
line-height: 37px;
color: #b27c1e;
}
width: 11rpx;
height: 19rpx;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment