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.
295 lines
6.4 KiB
295 lines
6.4 KiB
<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>
|