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.
702 lines
17 KiB
702 lines
17 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;">{{totalScore}}</text>
|
|
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
|
|
</view>
|
|
<view>
|
|
<view>已连签{{continue_days}}天</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.score}}</view>
|
|
<view :class="['line','line'+i,i==lastSign?'last-line':'',i<lastSign?'active':'']">
|
|
<view class="dot">
|
|
<uni-icons v-if="i<=lastSign" type="checkmarkempty" size="7" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="last-sign" v-if="i==lastSign"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="rule-area">
|
|
<view class="rule-btn" @click="$refs.rulePop.open()">积分规则</view>
|
|
<view class="rule-btn" style="margin-top: 26rpx;" @click="gotoPath('/subPackages/pointsMall/record')">积分明细</view>
|
|
</view>
|
|
|
|
<view class="sign-btn" v-if="isSign">已签到</view>
|
|
<view class="sign-btn active" v-else @click="signUp()">点击签到</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>
|
|
</view>
|
|
|
|
<scroll-view class="jx-box no-scrollbar flex-row-scroll-view" style="height: 500rpx;"
|
|
enable-flex scroll-x scroll-with-animation :show-scrollbar="false"
|
|
@scrolltolower="getJXList">
|
|
<view class="jx-item" v-for="(item,i) in JXList" :key="i" @click="gotoDetail(item)">
|
|
<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.score_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>
|
|
</scroll-view>
|
|
|
|
<view class="flex" style="height: 80rpx;">
|
|
<scroll-view class="type-box no-scrollbar flex-row-scroll-view" :scroll-into-view="scrollView"
|
|
enable-flex scroll-x scroll-with-animation :show-scrollbar="false"
|
|
>
|
|
<view :id="`scroll${i}`" :class="['type-item',typeIndex==i?'active':'']" v-for="(type,i) in typeList"
|
|
:key="i" @click="changeType(item,i)">
|
|
{{type.name}}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="search-box flex-between" @click="gotoPath('/subPackages/pointsMall/search')">
|
|
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/c7aa588b22b5710fcf61f5c109153157.png"></image>
|
|
<text style="height: 100%;">搜索</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view :class="['search-container']">
|
|
<view class="common-view">
|
|
<text :class="[search_type==0?'active-search-item':'']" @click="changeSearchParm(0)">综合</text>
|
|
</view>
|
|
|
|
<view class="common-view">
|
|
<!-- <text :class="[[1,2].includes(search_type)?'active-search-item':'']" @click="changeSearchParm(search_type==1?2:1)">销量</text>
|
|
<view class="search-item">
|
|
<view :class="[search_type==1?'active-search-item':'','triangle-up']" @click="changeSearchParm(1)">▼</view>
|
|
<view :class="[search_type==2?'active-search-item':'']" @click="changeSearchParm(2)">▼</view>
|
|
</view> -->
|
|
<text :class="[[1,2].includes(search_type)?'active-search-item':'']" @click="changeSearchParm(2)">销量</text>
|
|
</view>
|
|
<view class="common-view">
|
|
<text :class="[[3,4].includes(search_type)?'active-search-item':'']" @click="changeSearchParm(search_type==3?4:3)">积分</text>
|
|
<view class="search-item">
|
|
<view :class="[search_type==3?'active-search-item':'','triangle-up']" @click="changeSearchParm(3)">▼</view>
|
|
<view :class="[search_type==4?'active-search-item':'']" @click="changeSearchParm(4)">▼</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="prod-box2">
|
|
<view class="jx-item" v-for="(item,i) in prodList" :key="i" @click="gotoDetail(item)">
|
|
<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 style="font-weight: 500;font-size: 24rpx;color: #999999;">已兑{{item.sales}}件</view>
|
|
<view class="flex-between">
|
|
<view class="flex-between">
|
|
<text class="price" style="padding-right: 6rpx;">{{item.score_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>
|
|
|
|
<uni-popup ref="signPop" type="center" mask-background-color="rgba(0,0,0,0.6)">
|
|
<view class="signPop" @click="$refs.signPop.close()">
|
|
<image class="close-pop" src="https://static.ticket.sz-trip.com/uploads/20250918/730cffbd6032bad9e6f87d4a5f20724b.png"></image>
|
|
<view class="sign-content" v-if="todayRecord">+{{todayRecord.score}}</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="rulePop" type="bottom" mask-background-color="rgba(0,0,0,0.6)" :safe-area="false">
|
|
<view class="rulePop" v-if="scoreRule">
|
|
<view @click="$refs.rulePop.close()" class="close-pop">
|
|
<uni-icons type="closeempty" size="20"></uni-icons>
|
|
</view>
|
|
<view class="content" >
|
|
<view v-html="scoreRule.rule_desc"></view>
|
|
<view style="width: 100%;height: 140rpx;"></view>
|
|
</view>
|
|
<!-- <view class="btn-box">
|
|
<view class="btn" @click="$refs.rulePop.close()">完成</view>
|
|
</view> -->
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isSign: false,
|
|
totalScore: 0,
|
|
continue_days: 0,
|
|
// 7日连续签到日期 0-6
|
|
lastSign: -1,
|
|
daySign: [],
|
|
todayRecord: null,
|
|
|
|
|
|
JXList: [],
|
|
JXPage: 1,
|
|
|
|
typeIndex:0,
|
|
scrollView: "scroll0",
|
|
typeList: [
|
|
{name:"分类",id:"",},
|
|
],
|
|
prodList: [],
|
|
|
|
scoreRule: null,
|
|
|
|
page: 1,
|
|
finish: false,
|
|
|
|
search_type: 0,
|
|
}
|
|
},
|
|
onReady () {
|
|
this.getScore()
|
|
this.getSignList()
|
|
this.getJXList()
|
|
this.getTypeList()
|
|
this.getProdListByType()
|
|
this.getRule(this.envPropObj.score_rule_id)
|
|
},
|
|
methods: {
|
|
// 签到
|
|
signUp () {
|
|
this.Post({method:"POST"},"/api/user_sign/sign").then(res => {
|
|
this.$refs.signPop.open()
|
|
this.getSignList()
|
|
this.getScore()
|
|
})
|
|
},
|
|
// 获取签到记录
|
|
getSignList () {
|
|
this.Post({method:"POST"},"/api/user_sign/index").then(res=>{
|
|
let today = new Date().toISOString().split('T')[0];
|
|
// 在打卡记录中查找今天的记录
|
|
let todayRecordIndex = res.data.days.findIndex(day => day.date === today)
|
|
let todayRecord = res.data.days[todayRecordIndex]
|
|
this.isSign = todayRecord.is_sign;
|
|
this.continue_days = res.data.continue_days;
|
|
this.todayRecord = todayRecord;
|
|
let startIndex = 0
|
|
console.log(this.continue_days)
|
|
if (this.continue_days<=3) {
|
|
startIndex = todayRecordIndex - this.continue_days
|
|
this.lastSign = this.continue_days-1
|
|
} else {
|
|
startIndex = 4;
|
|
this.lastSign = 3
|
|
}
|
|
this.daySign = res.data.days.slice(startIndex, startIndex+7)
|
|
})
|
|
},
|
|
// 获取积分明细 取总积分
|
|
getScore() {
|
|
this.Post({},"/api/uservice/user/getMyInfo").then(res=>{
|
|
this.totalScore = res.data.score
|
|
})
|
|
},
|
|
|
|
getRule (id) {
|
|
this.Post({id: id},"/api/sweepstakes/sweepstakes_act/getActInfo").then(res => {
|
|
this.scoreRule = res.data
|
|
})
|
|
},
|
|
|
|
|
|
// 精选
|
|
getJXList(){
|
|
this.Post({
|
|
tag_id: this.envPropObj.score_daily_recommend,
|
|
page: this.JXPage,
|
|
limit: 10,
|
|
},'/api/score_goods_sku_price/index').then(res => {
|
|
this.JXList = [...this.JXList,...res.data.data]
|
|
if (res.data.data.length > 0) {
|
|
this.JXPage++
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取分类
|
|
getTypeList () {
|
|
this.Post({pid: this.envPropObj.score_type_all},'/api/product/tag_list').then(res => {
|
|
this.typeList = [
|
|
{name:"全部",id:"",},
|
|
...res.data
|
|
]
|
|
})
|
|
},
|
|
|
|
changeType (item,index) {
|
|
if (index == this.typeIndex) {
|
|
return
|
|
}
|
|
this.typeIndex = index;
|
|
let i = (index-1)>0?(index-1):0;
|
|
this.scrollView = "scroll"+i;
|
|
this.prodList = [];
|
|
this.finish = false;
|
|
this.page = 1;
|
|
this.getProdListByType()
|
|
},
|
|
|
|
changeSearchParm(value) {
|
|
this.search_type = value
|
|
this.prodList = [];
|
|
this.finish = false;
|
|
this.page = 1;
|
|
this.getProdListByType()
|
|
},
|
|
|
|
getProdListByType () {
|
|
let param = {}
|
|
if (this.search_type == 1) { param = {order: 'asc',sort:'sales'} }
|
|
if (this.search_type == 2) { param = {order: 'desc',sort:'sales'} }
|
|
if (this.search_type == 3) { param = {order: 'asc',sort:'score'} }
|
|
if (this.search_type == 4) { param = {order: 'desc',sort:'score'} }
|
|
this.Post({
|
|
tag_id: this.typeList[this.typeIndex].id,
|
|
page: this.page,
|
|
limit: 10,
|
|
...param,
|
|
},'/api/score_goods_sku_price/index').then(res => {
|
|
this.prodList = [...this.prodList,...res.data.data]
|
|
if (res.data.current_page<res.data.last_page) {
|
|
this.page++
|
|
this.finish = false;
|
|
} else {
|
|
this.finish = true;
|
|
}
|
|
})
|
|
},
|
|
|
|
gotoDetail (item) {
|
|
uni.navigateTo({
|
|
url:`/subPackages/pointsMall/detail?id=${item.id}&type=score`
|
|
})
|
|
},
|
|
|
|
},
|
|
onReachBottom() {
|
|
setTimeout(()=>{
|
|
if (!this.finish) this.getProdListByType()
|
|
},1000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.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%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
line-height: 0;
|
|
}
|
|
&.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 100rpx;
|
|
margin-top: -20rpx;
|
|
position: relative;
|
|
}
|
|
.jx-box{
|
|
padding: 22rpx 0;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.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: 24rpx;
|
|
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;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.type-box{
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
width: 1px;
|
|
flex: 1;
|
|
padding-right: 43rpx;
|
|
height: 100%;
|
|
.type-item{
|
|
margin: 0 26rpx;
|
|
position: relative;
|
|
font-weight: 500;
|
|
font-size: 35rpx;
|
|
color: #000000;
|
|
flex-shrink: 0;
|
|
height: 46rpx;
|
|
&.active{
|
|
font-weight: bold;
|
|
font-size: 35rpx;
|
|
color: #6E3D1D;
|
|
}
|
|
&.active:after {
|
|
display: block;
|
|
width: 60%;
|
|
font-size: 0;
|
|
content: '1';
|
|
margin: auto;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -6rpx;
|
|
height: 5rpx;
|
|
background: #6E3D1D;
|
|
}
|
|
}
|
|
.type-item:first-of-type{
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.search-box{
|
|
width: 110rpx;
|
|
flex-shrink: 0;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #6E3D1D;
|
|
height: 46rpx;
|
|
}
|
|
|
|
.prod-box2{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.jx-item{
|
|
width: 333rpx;
|
|
margin-right: 0;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.jx-content{
|
|
width: 100%;
|
|
height: 180rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.jx-head-image{
|
|
width: 100%;
|
|
height: 333.33rpx;
|
|
border-radius: 13rpx;
|
|
}
|
|
.price{
|
|
}
|
|
.btn{
|
|
width: 93rpx;
|
|
height: 47rpx;
|
|
background: #FB2A54;
|
|
border-radius: 23rpx;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 47rpx;
|
|
}
|
|
}
|
|
|
|
.signPop{
|
|
box-sizing: border-box;
|
|
width: 750rpx;
|
|
height: 809.33rpx;
|
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250918/07ba19980d9fe9b934097ce01a14a085.png");
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
.sign-content{
|
|
width: 400.67rpx;
|
|
height: 400.67rpx;
|
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250918/6832749da7b1aa0795f8389539ed7ecd.png");
|
|
background-size: 100% 100%;
|
|
font-weight: bold;
|
|
font-size: 64rpx;
|
|
color: #FB2A54;
|
|
padding: 160rpx 0 0 230rpx;
|
|
}
|
|
.close-pop{
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
top: 0;
|
|
right: 38rpx;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.rulePop{
|
|
height: 70vh;
|
|
box-sizing: border-box;
|
|
width: 750rpx;
|
|
position: relative;
|
|
padding: 60rpx 40rpx 0;
|
|
background: white;
|
|
|
|
|
|
.btn-box{
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120rpx;
|
|
padding: 20rpx 20rpx 0;
|
|
background: #f5f5f5;
|
|
.btn{
|
|
width: 100%;
|
|
height: 67rpx;
|
|
background: linear-gradient(-90deg, #FB2A54, #FF773D);
|
|
border-radius: 33rpx;
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 67rpx;
|
|
}
|
|
}
|
|
|
|
.close-pop{
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
position: absolute;
|
|
}
|
|
.content{
|
|
width: 100%;height: 100%;overflow-y: auto;overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
.search-container{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: bold;
|
|
font-size: 27rpx;
|
|
color: #999;
|
|
flex-shrink: 0;
|
|
padding: 0 20rpx 20rpx;
|
|
background: #FFFFFF;
|
|
&>.common-view{
|
|
display: flex;
|
|
min-width: 70rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
}
|
|
.search-item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 16rpx;
|
|
font-size: 14rpx;
|
|
}
|
|
}
|
|
.triangle-up {
|
|
transform: rotate(180deg);
|
|
display: inline-block;
|
|
}
|
|
.active-search-item{
|
|
color: #6A8A2D;
|
|
}
|
|
</style>
|