jiazhipeng
1 month ago
7 changed files with 524 additions and 62 deletions
@ -1,3 +1,4 @@ |
|||||
/.hbuilderx/ |
/.hbuilderx/ |
||||
/unpackage/ |
/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