jiazhipeng
1 month ago
7 changed files with 524 additions and 62 deletions
@ -1,3 +1,4 @@ |
|||
/.hbuilderx/ |
|||
/unpackage/ |
|||
/node_modules/ |
|||
/node_modules/ |
|||
/pages/ |
|||
@ -0,0 +1,295 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="top-box"> |
|||
<view>积分余额</view> |
|||
<view class="points-num" style="margin: 24rpx 0 30rpx;"> |
|||
<text style="padding-right: 6rpx;">300</text> |
|||
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image> |
|||
</view> |
|||
<view> |
|||
<view>已连签0天</view> |
|||
<view class="sub-text">注：连续签到可获得更多积分，断签后重新累积</view> |
|||
</view> |
|||
|
|||
<view class="day-sign-box"> |
|||
<view class="day-sign-item" v-for="(item,i) in daySign" :key="i"> |
|||
<view class="day-sign-points">+{{item.num}}</view> |
|||
<view :class="['line','line'+i,i==lastSign?'last-line':'',i<lastSign?'active':'']"> |
|||
<view class="dot"></view> |
|||
<view class="last-sign" v-if="i==lastSign"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="rule-area"> |
|||
<view class="rule-btn">积分规则</view> |
|||
<view class="rule-btn" style="margin-top: 26rpx;">积分明细</view> |
|||
</view> |
|||
|
|||
<view :class="['sign-btn', !isSign?'active':'']"> |
|||
点击签到 |
|||
</view> |
|||
|
|||
<view> |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20250917/c7aa588b22b5710fcf61f5c109153157.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="product-box"> |
|||
<view class="flex-between"> |
|||
<view style="font-weight: bold;font-size: 35rpx;color: #000000;">每日精选</view> |
|||
<view style="font-weight: 500;font-size: 27rpx;color: #999999;">1300人已兑换</view> |
|||
</view> |
|||
|
|||
<view class="jx-box no-scrollbar"> |
|||
<view class="jx-item" v-for="(item,i) in JXList" :key="i"> |
|||
<image class="jx-head-image" :src="showImg(item.headimg)" mode="aspectFill"></image> |
|||
<view class="jx-content" > |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="flex-between"> |
|||
<view class="flex-between"> |
|||
<text class="price" style="padding-right: 6rpx;">{{item.price}}</text> |
|||
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image> |
|||
</view> |
|||
<view class="btn">兑换</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isSign: false, |
|||
// 7日连续签到日期 0-6 |
|||
lastSign: 3, |
|||
daySign: [ |
|||
{num:1, active:true}, |
|||
{num:2, active:true}, |
|||
{num:3, active:true}, |
|||
{num:4, active:false}, |
|||
{num:5, active:false}, |
|||
{num:6, active:false}, |
|||
{num:7, active:false}, |
|||
], |
|||
JXList: [], |
|||
} |
|||
}, |
|||
onReady () { |
|||
this.getJXList() |
|||
}, |
|||
methods: { |
|||
getJXList(){ |
|||
this.Post({ |
|||
tag_id: 95, |
|||
offset: 0, |
|||
limit: 999, |
|||
},'/api/product/get_product_by_tag_subject').then(res => { |
|||
if (res.data.length < this.viewNum) { |
|||
this.viewNum = 999 |
|||
} |
|||
this.JXList = res.data.list |
|||
}) |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg{ |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
background: #FFFFFF; |
|||
} |
|||
.point-image{ |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
.top-box{ |
|||
width: 100%; |
|||
height: 600rpx; |
|||
padding: 26rpx; |
|||
background: linear-gradient(-26deg, #FCE2C1, #F0BD90); |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #6E3D1D; |
|||
position: relative; |
|||
.points-num{ |
|||
font-weight: 500; |
|||
font-size: 53rpx; |
|||
color: #000000; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.sub-text{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: rgba(110, 61, 29, 0.8); |
|||
} |
|||
|
|||
.day-sign-box{ |
|||
width: 100%; |
|||
margin: 21rpx 0 42rpx; |
|||
display: flex; |
|||
|
|||
.day-sign-item{ |
|||
flex: 1; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.line{ |
|||
width: 100%; |
|||
height: 8rpx; |
|||
background: #FFF0B3; |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
overflow: visible; |
|||
position: relative; |
|||
.dot{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
background: #FFF0B3; |
|||
border-radius: 50%; |
|||
} |
|||
&.line0{ |
|||
width: 55%; |
|||
margin-left: auto; |
|||
justify-content: flex-start; |
|||
} |
|||
&.line6{ |
|||
width: 55%; |
|||
margin-right: auto; |
|||
justify-content: flex-end; |
|||
} |
|||
&.active{ |
|||
background: #FB2A54; |
|||
.dot{ |
|||
background: #FB2A54; |
|||
} |
|||
} |
|||
&.last-line{ |
|||
.dot{ |
|||
background: #FB2A54; |
|||
} |
|||
.last-sign{ |
|||
width: 100%; |
|||
background: #FB2A54; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
height: 100%; |
|||
border-radius: 0 10rpx 10rpx 0; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.day-sign-points{ |
|||
width: 93.33rpx; |
|||
height: 113.33rpx; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20250917/7f2c2ab38a4a6e97e876bc370786f6b7.png"); |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
font-weight: bold; |
|||
font-size: 24rpx; |
|||
color: #FB2A54; |
|||
text-align: center; |
|||
padding-top: 54rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
} |
|||
|
|||
.rule-area{ |
|||
position: absolute; |
|||
width: 134rpx; |
|||
top: 26rpx; |
|||
right: 0; |
|||
.rule-btn{ |
|||
width: 134rpx; |
|||
height: 40rpx; |
|||
background: #F0BD90; |
|||
border-radius: 20rpx 0rpx 0rpx 20rpx; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.sign-btn{ |
|||
width: 100%; |
|||
height: 67rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 33rpx; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #FB2A54; |
|||
text-align: center; |
|||
line-height: 67rpx; |
|||
&.active{ |
|||
color: #FFFFFF; |
|||
background: linear-gradient(-90deg, #FB2A54, #FF773D); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.product-box{ |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
padding: 32rpx 26rpx; |
|||
margin-top: -20rpx; |
|||
position: relative; |
|||
} |
|||
.jx-box{ |
|||
padding: 22rpx 0 80rpx; |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
overflow-y: auto; |
|||
|
|||
.jx-item{ |
|||
width: 253rpx; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
margin-right: 25rpx; |
|||
flex-shrink: 0; |
|||
.jx-content{ |
|||
width: 100%; |
|||
height: 150rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.jx-head-image{ |
|||
width: 253rpx; |
|||
height: 253rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
.price{ |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #FB2A54; |
|||
} |
|||
.btn{ |
|||
width: 93rpx; |
|||
height: 47rpx; |
|||
background: #FB2A54; |
|||
border-radius: 23rpx; |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 47rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue