时味苏州
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

1 month ago
<template>
<view class="bg">
<view class="top-box">
<view>积分余额</view>
<view class="points-num" style="margin: 24rpx 0 30rpx;">
1 month ago
<text style="padding-right: 6rpx;">{{totalScore}}</text>
1 month ago
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
</view>
<view>
4 weeks ago
<view>已连签{{continue_days}}</view>
1 month ago
<view class="sub-text">连续签到可获得更多积分断签后重新累积</view>
</view>
<view class="day-sign-box">
<view class="day-sign-item" v-for="(item,i) in daySign" :key="i">
1 month ago
<view class="day-sign-points">+{{item.score}}</view>
1 month ago
<view :class="['line','line'+i,i==lastSign?'last-line':'',i<lastSign?'active':'']">
4 weeks ago
<view class="dot">
<uni-icons v-if="i<=lastSign" type="checkmarkempty" size="7" color="#fff"></uni-icons>
</view>
1 month ago
<view class="last-sign" v-if="i==lastSign"></view>
</view>
</view>
</view>
<view class="rule-area">
4 weeks ago
<view class="rule-btn" @click="$refs.rulePop.open()">积分规则</view>
<view class="rule-btn" style="margin-top: 26rpx;" @click="gotoPath('/subPackages/pointsMall/record')">积分明细</view>
1 month ago
</view>
1 month ago
<view class="sign-btn" v-if="isSign">已签到</view>
<view class="sign-btn active" v-else @click="signUp()">点击签到</view>
1 month ago
1 month ago
</view>
<view class="product-box">
<view class="flex-between">
<view style="font-weight: bold;font-size: 35rpx;color: #000000;">每日精选</view>
1 month ago
<!-- <view style="font-weight: 500;font-size: 27rpx;color: #999999;">1300人已兑换</view> -->
<view></view>
1 month ago
</view>
6 days ago
<scroll-view class="jx-box no-scrollbar flex-row-scroll-view" style="height: 500rpx;"
4 weeks ago
enable-flex scroll-x scroll-with-animation :show-scrollbar="false"
@scrolltolower="getJXList">
1 month ago
<view class="jx-item" v-for="(item,i) in JXList" :key="i" @click="gotoDetail(item)">
1 month ago
<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">
1 month ago
<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> -->
1 month ago
</view>
<view class="btn">兑换</view>
</view>
</view>
</view>
4 weeks ago
</scroll-view>
1 month ago
4 weeks ago
<view class="flex" style="height: 80rpx;">
6 days ago
<scroll-view class="type-box no-scrollbar flex-row-scroll-view" :scroll-into-view="scrollView"
4 weeks ago
enable-flex scroll-x scroll-with-animation :show-scrollbar="false"
>
1 month ago
<view :id="`scroll${i}`" :class="['type-item',typeIndex==i?'active':'']" v-for="(type,i) in typeList"
:key="i" @click="changeType(item,i)">
1 month ago
{{type.name}}
1 month ago
</view>
</scroll-view>
1 month ago
<view class="search-box flex-between" @click="gotoPath('/subPackages/pointsMall/search')">
1 month ago
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/c7aa588b22b5710fcf61f5c109153157.png"></image>
<text style="height: 100%;">搜索</text>
</view>
</view>
4 weeks ago
<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>
1 month ago
<view class="prod-box2">
1 month ago
<view class="jx-item" v-for="(item,i) in prodList" :key="i" @click="gotoDetail(item)">
1 month ago
<image class="jx-head-image" :src="showImg(item.headimg)" mode="aspectFill"></image>
<view class="jx-content" >
<view class="title text-overflowRows">{{item.title}}</view>
4 weeks ago
<view style="font-weight: 500;font-size: 24rpx;color: #999999;">已兑{{item.sales}}</view>
1 month ago
<view class="flex-between">
<view class="flex-between">
1 month ago
<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> -->
1 month ago
</view>
<view class="btn">兑换</view>
</view>
</view>
</view>
</view>
1 month ago
</view>
1 month ago
1 month ago
<uni-popup ref="signPop" type="center" mask-background-color="rgba(0,0,0,0.6)">
1 month ago
<view class="signPop" @click="$refs.signPop.close()">
1 month ago
<image class="close-pop" src="https://static.ticket.sz-trip.com/uploads/20250918/730cffbd6032bad9e6f87d4a5f20724b.png"></image>
1 month ago
<view class="sign-content" v-if="todayRecord">+{{todayRecord.score}}</view>
1 month ago
</view>
</uni-popup>
4 weeks ago
<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>
1 month ago
</view>
</template>
<script>
export default {
data() {
return {
isSign: false,
1 month ago
totalScore: 0,
4 weeks ago
continue_days: 0,
1 month ago
// 7日连续签到日期 0-6
1 month ago
lastSign: -1,
daySign: [],
todayRecord: null,
1 month ago
JXList: [],
4 weeks ago
JXPage: 1,
1 month ago
typeIndex:0,
scrollView: "scroll0",
typeList: [
4 weeks ago
{name:"分类",id:"",},
1 month ago
],
1 month ago
prodList: [],
4 weeks ago
scoreRule: null,
page: 1,
finish: false,
4 weeks ago
search_type: 0,
1 month ago
}
},
onReady () {
1 month ago
this.getScore()
this.getSignList()
1 month ago
this.getJXList()
1 month ago
this.getTypeList()
this.getProdListByType()
4 weeks ago
this.getRule(this.envPropObj.score_rule_id)
1 month ago
},
methods: {
1 month ago
// 签到
signUp () {
this.Post({method:"POST"},"/api/user_sign/sign").then(res => {
this.$refs.signPop.open()
4 weeks ago
this.getSignList()
this.getScore()
1 month ago
})
},
1 month ago
// 获取签到记录
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;
4 weeks ago
this.continue_days = res.data.continue_days;
1 month ago
this.todayRecord = todayRecord;
let startIndex = 0
4 weeks ago
console.log(this.continue_days)
if (this.continue_days<=3) {
startIndex = todayRecordIndex - this.continue_days
this.lastSign = this.continue_days-1
1 month ago
} 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
})
},
1 month ago
4 weeks ago
getRule (id) {
this.Post({id: id},"/api/sweepstakes/sweepstakes_act/getActInfo").then(res => {
this.scoreRule = res.data
})
},
1 month ago
// 精选
1 month ago
getJXList(){
this.Post({
4 weeks ago
tag_id: this.envPropObj.score_daily_recommend,
page: this.JXPage,
1 month ago
limit: 10,
},'/api/score_goods_sku_price/index').then(res => {
4 weeks ago
this.JXList = [...this.JXList,...res.data.data]
if (res.data.data.length > 0) {
this.JXPage++
}
1 month ago
})
},
// 获取分类
getTypeList () {
4 weeks ago
this.Post({pid: this.envPropObj.score_type_all},'/api/product/tag_list').then(res => {
1 month ago
this.typeList = [
{name:"全部",id:"",},
...res.data
]
1 month ago
})
},
1 month ago
1 month ago
changeType (item,index) {
if (index == this.typeIndex) {
return
}
this.typeIndex = index;
let i = (index-1)>0?(index-1):0;
this.scrollView = "scroll"+i;
4 weeks ago
this.prodList = [];
this.finish = false;
this.page = 1;
1 month ago
this.getProdListByType()
},
4 weeks ago
changeSearchParm(value) {
this.search_type = value
this.prodList = [];
this.finish = false;
this.page = 1;
this.getProdListByType()
},
1 month ago
getProdListByType () {
4 weeks ago
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'} }
1 month ago
this.Post({
tag_id: this.typeList[this.typeIndex].id,
4 weeks ago
page: this.page,
1 month ago
limit: 10,
4 weeks ago
...param,
1 month ago
},'/api/score_goods_sku_price/index').then(res => {
4 weeks ago
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;
}
1 month ago
})
},
gotoDetail (item) {
uni.navigateTo({
url:`/subPackages/pointsMall/detail?id=${item.id}&type=score`
})
1 month ago
},
1 month ago
1 month ago
},
4 weeks ago
onReachBottom() {
setTimeout(()=>{
if (!this.finish) this.getProdListByType()
},1000)
}
1 month ago
}
</script>
<style lang="scss" scoped>
1 month ago
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
1 month ago
.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%;
4 weeks ago
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
line-height: 0;
1 month ago
}
&.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;
1 month ago
padding: 32rpx 26rpx 100rpx;
1 month ago
margin-top: -20rpx;
position: relative;
}
.jx-box{
4 weeks ago
padding: 22rpx 0;
1 month ago
display: flex;
flex-wrap: nowrap;
1 month ago
overflow-x: auto;
4 weeks ago
box-sizing: border-box;
1 month ago
}
.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{
1 month ago
width: 253rpx;
1 month ago
height: 253rpx;
border-radius: 13rpx;
}
.price{
1 month ago
font-weight: bold;
1 month ago
font-size: 24rpx;
1 month ago
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;
1 month ago
flex-shrink: 0;
1 month ago
}
}
.type-box{
display: flex;
flex-wrap: nowrap;
width: 1px;
flex: 1;
padding-right: 43rpx;
4 weeks ago
height: 100%;
1 month ago
.type-item{
margin: 0 26rpx;
position: relative;
font-weight: 500;
font-size: 35rpx;
1 month ago
color: #000000;
flex-shrink: 0;
1 month ago
height: 46rpx;
&.active{
1 month ago
font-weight: bold;
1 month ago
font-size: 35rpx;
color: #6E3D1D;
1 month ago
}
1 month ago
&.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;
1 month ago
}
}
1 month ago
.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{
1 month ago
box-sizing: border-box;
width: 750rpx;
1 month ago
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;
1 month ago
padding: 160rpx 0 0 230rpx;
1 month ago
}
.close-pop{
width: 34rpx;
height: 34rpx;
1 month ago
top: 0;
right: 38rpx;
position: absolute;
1 month ago
}
1 month ago
}
4 weeks ago
.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;
}
}
4 weeks ago
.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;
}
1 month ago
</style>