Skip to content

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

666666

parent ee94be35
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 40 deletions
views/Integral.vue
View file @ 90766518
...@@ -35,14 +35,14 @@ ...@@ -35,14 +35,14 @@
<view class="vip-area"> <view class="vip-area">
<image <image
class="vip-icon" class="vip-icon"
src="/static/integral/imgPlatinum.png" :src="`/static/integral/imgPlatinum${index}.png`"
mode="aspectFit" mode="aspectFit"
/> />
<view class="vip-info"> <view class="vip-info">
<text class="vip-name">admin</text> <text class="vip-name">admin</text>
<view class="title-container"> <view class="title-container">
<text class="vip-title">VIP 铂金会员</text> <text class="vip-title">{{vipNameArr[index] ? vipNameArr[index] : "V1 黄金会员"}}</text>
<view class="current-tag"> <view class="current-tag" v-if="index == vipLevel">
<text class="tag-text">当前</text> <text class="tag-text">当前</text>
</view> </view>
</view> </view>
...@@ -70,28 +70,67 @@ ...@@ -70,28 +70,67 @@
/> />
</view> </view>
<!-- 第二行 --> <!-- 第二行 -->
<view class="progress-bar"> <view class="progress-bar1">
<image <image
src="/static/integral/progressBarBgIntegral.png" src="/static/integral/progressBarBgIntegral.png"
class="progress-bg" class="progress-bg1"
mode="scaleToFill"
/> />
<view class="progress-fill" :style="{width: (1210/4930)*100 + '%'}"> <view class="progress-mask">
<image <image
src="/static/integral/progressBarIntegral.png" src="/static/integral/progressBarIntegral.png"
class="progress-img" class="progress-img1"
mode="scaleToFill" :style="{ transform: `translateX(${(20/100)*100 -100}%)` }"
/> />
</view> </view>
</view> </view>
<!-- 第三行 --> <!-- 第三行 -->
<view class="info-row"> <view class="info-row">
<text class="count-text">1210/4930</text> <text class="count-text">1210/4931111110</text>
<text class="expire-text">(有120积分将到期)</text> <text class="expire-text">(有120积分将到期)</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 积分权益 -->
<view class="privilege-container">
<!-- 第一行 -->
<view class="privilege-header">
<text class="title-text">可享 <text class="highlight">10</text> 项权益会员</text>
<view class="rule-container">
<text class="rule-text">会员规则</text>
<image
class="rule-icon"
src="/static/integral/integralArrow.png"
mode="aspectFit"
/>
</view>
</view>
<!-- 第二行 -->
<view class="privilege-grid">
<view
class="privilege-item"
v-for="(item, index) in [
'yueyueliBtn','shengriBtn','yuerBtn','heliBtn',
'xinrenliBtn','mianfeiBtn','zhuanduanli','changxianBtn',
'jinjiBtn','suyuanBtn'
]"
:key="index"
>
<image
class="privilege-icon"
:src="`/static/integral/${item}.png`"
mode="aspectFit"
/>
<image
class="new-tip"
src="/static/integral/newTip.png"
mode="aspectFit"
/>
</view>
</view>
</view>
<view class="content"> <view class="content">
<!-- 积分服务内容 --> <!-- 积分服务内容 -->
...@@ -106,6 +145,8 @@ ...@@ -106,6 +145,8 @@
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
const vipLevel = ref(0);
const vipNameArr = ref(['V1 黄金会员', 'V2 铂金会员', 'V3 钻石会员', 'V4 星光会员', 'V5 星耀会员']);
const systemInfo = uni.getWindowInfo(); const systemInfo = uni.getWindowInfo();
const rpxRatio = 750 / systemInfo.windowWidth;// 如果需要rpx换算（1px = 2rpx） const rpxRatio = 750 / systemInfo.windowWidth;// 如果需要rpx换算（1px = 2rpx）
const itemIndex = ref(0); const itemIndex = ref(0);
...@@ -125,6 +166,7 @@ ...@@ -125,6 +166,7 @@
itemIndex.value = Math.round(scrollLeft / itemWidth + directionVal.value); itemIndex.value = Math.round(scrollLeft / itemWidth + directionVal.value);
} }
const scrollToIndex = (index) => { const scrollToIndex = (index) => {
...@@ -139,6 +181,7 @@ ...@@ -139,6 +181,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-x: hidden;
.banner-swiper { .banner-swiper {
width: 100%; width: 100%;
...@@ -187,9 +230,9 @@ ...@@ -187,9 +230,9 @@
.vip-icon { .vip-icon {
width: 138rpx; width: 138rpx;
height: 131rpx; height: auto;
margin-left: 10rpx; margin-left: 10rpx;
margin-top: 20rpx; margin-top: 30rpx;
} }
.vip-info { .vip-info {
...@@ -241,22 +284,25 @@ ...@@ -241,22 +284,25 @@
.integral-detail { .integral-detail {
height: 144rpx; height: 144rpx;
width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 32rpx; // padding: 0 32rpx;
margin-top: 40rpx; margin-top: 15rpx;
.excharge-btn { .excharge-btn {
width: 200rpx; width: 178rpx;
height: 80rpx; height: 144rpx;
margin-right: 32rpx; margin-left: 32rpx;
} }
.inte-bar-area { .inte-bar-area {
flex: 1; // flex: 1;
height: 100%; height: 144rpx;
width: 492rpx;
background: url('/static/integral/inteBarAreaBg.png') no-repeat center/cover; background: url('/static/integral/inteBarAreaBg.png') no-repeat center/cover;
padding: 16rpx 24rpx; margin-left: 16rpx;
// padding: 16rpx 24rpx;
.header-row { .header-row {
position: relative; position: relative;
...@@ -266,46 +312,61 @@ ...@@ -266,46 +312,61 @@
.integral-text { .integral-text {
font-size: 28rpx; font-size: 28rpx;
color: #1d1e25; color: #1d1e25;
margin-left: 26rpx;
margin-top: 23rpx;
} }
.strategy-icon { .strategy-icon {
position: absolute; position: absolute;
right: 0; right: 0;
top: -8rpx; top: 0rpx;
width: 120rpx; width: 96rpx;
height: 50rpx; height: 49rpx;
} }
} }
.progress-bar { .progress-bar1 {
position: relative; position: relative;
height: 30rpx; width: 444rpx; // 根据图片宽度设置
margin: 8rpx 0; height: 14rpx; // 根据图片高度设置
margin: 14rpx auto 16rpx auto;
.progress-bg { .progress-bg1 {
width: 100%; margin-top: 0rpx;
height: 100%; position: absolute;
width: 444rpx;
height: 14rpx;
top: 0rpx;
left: 0rpx;
} }
.progress-mask {
.progress-fill {
position: absolute; position: absolute;
left: 0; width: 444rpx;
top: 0; height: 14rpx;
height: 100%;
overflow: hidden; overflow: hidden;
border-radius: 7rpx;
.progress-img1 {
position: absolute;
width: 444rpx;
height: 14rpx;
display: block;
}
} }
} }
.info-row { .info-row {
display: flex; display: flex;
justify-content: space-between; flex-direction: row;
position: relative;
height: 26rpx;
margin-top: 0rpx;
margin-left: 26rpx;
.count-text { .count-text {
font-size: 24rpx; font-size: 24rpx;
color: #b27c1e; color: #b27c1e;
} }
.expire-text { .expire-text {
margin-left: 15rpx;
font-size: 22rpx; font-size: 22rpx;
color: #6f6d67; color: #6f6d67;
} }
...@@ -313,6 +374,79 @@ ...@@ -313,6 +374,79 @@
} }
} }
.privilege-container {
// padding: 48rpx 0rpx;
width: 686rpx;
.privilege-header {
display: flex;
justify-content: space-between;
align-items: center;
// margin-bottom: 40rpx;
padding: 48rpx 16rpx;
.title-text {
font-size: 32rpx;
color: #1d1e25;
.highlight {
color: #d3a358;
}
}
.rule-container {
display: flex;
align-items: center;
.rule-text {
font-size: 24rpx;
color: #1d1e25;
margin-right: 8rpx;
}
.rule-icon {
margin-right: 10rpx;
width: 11rpx;
height: 19rpx;
}
}
}
.privilege-grid {
display: flex;
flex-wrap: wrap;
gap: 39rpx;
padding-left: 16rpx;
.privilege-item {
position: relative;
&:nth-child(1) { width: 68rpx; height: 87rpx; } // 月月礼
&:nth-child(2) { width: 70rpx; height: 91rpx; } // 生日礼
&:nth-child(3) { width: 94rpx; height: 87rpx; } // 育儿礼
&:nth-child(4) { width: 48rpx; height: 87rpx; } // 贺礼
&:nth-child(5) { width: 71rpx; height: 88rpx; } // 新人礼
&:nth-child(6) { width: 95rpx; height: 87rpx; } // 免费礼
&:nth-child(7) { width: 70rpx; height: 86rpx; } // 专端礼
&:nth-child(8) { width: 94rpx; height: 87rpx; } // 尝鲜礼
&:nth-child(9) { width: 70rpx; height: 89rpx; } // 进阶礼
&:nth-child(10) { width: 71rpx; height: 90rpx; } // 溯源礼
.privilege-icon {
width: 100%;
height: 100%;
}
.new-tip {
position: absolute;
top: -10rpx;
right: -10rpx;
width: 40rpx;
height: 40rpx;
}
}
}
}
} }
......
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