261 lines
6.0 KiB
Vue
261 lines
6.0 KiB
Vue
<template>
|
||
<view class="coupon-page">
|
||
<HeaderCom></HeaderCom>
|
||
<view class="tab">
|
||
<view class="tab-item" :class="{'active':tabIndex === index}" v-for="(item,index) in tabList" :key="index" @click="tabCk(index)">
|
||
{{item.label}}
|
||
<view class="tab-active" v-if="tabIndex === index"></view>
|
||
<view class="heng" v-else></view>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower">
|
||
<view v-if="list.length === 0" style="padding-top: 200rpx;">
|
||
<empty></empty>
|
||
</view>
|
||
<view class="list" v-for="(item,index) in list" :key="index">
|
||
<view class="detail">
|
||
<view class="type">购物{{typeObj[item.type]}}券</view>
|
||
<view class="name">{{item.name}}</view>
|
||
<!-- <view class="name">{{source[item.source]}}</view> -->
|
||
<view class="sub">{{item.tips}}</view>
|
||
<!-- <view class="sub">满30元减10元，申购指定商品可用</view> -->
|
||
<view class="time">有效期至{{item.expiredTime}}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="price">
|
||
<text class="value">{{Number(item.amount)}}</text>
|
||
<text class="sym">{{item.type === 'REDUCTION' ? '' : '折'}}</text>
|
||
</view>
|
||
<view class="btn">{{tabObj[item.used]}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
|
||
</scroll-view>
|
||
<view class="footer-btn" @click="moreCoupon">更多优惠券</view>
|
||
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/mine/coupon"></page-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
import { userCouponApi } from '@/API/user.js'
|
||
import { mathDiv } from'@/utils/mathUtils.js'
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
tabList:[
|
||
{label:"未使用",value:"1"},
|
||
{label:"已使用",value:"0"},
|
||
{label:"已过期",value:"-1"},
|
||
],
|
||
tabObj:{
|
||
'1':'未使用',
|
||
'0':'已使用',
|
||
'-1':'已过期'
|
||
},
|
||
typeObj:{
|
||
'REDUCTION':"立减",
|
||
'DISCOUNT':"折扣"
|
||
},
|
||
source:{
|
||
'PURCHASE':'购买获得',
|
||
'SYS_GIVES':"系统赠送",
|
||
'TASK_REWARD':"任务赠送",
|
||
'SIGN_IN':'签到获得'
|
||
},
|
||
tabIndex:0,
|
||
type:'',
|
||
list:[],
|
||
page:1,
|
||
total:0
|
||
}
|
||
},
|
||
components:{HeaderCom},
|
||
onShow() {
|
||
this.getCoupon()
|
||
},
|
||
methods:{
|
||
getCoupon() {
|
||
uni.showLoading()
|
||
userCouponApi({
|
||
page: this.page,
|
||
status:this.tabList[this.tabIndex].value,
|
||
size: 10,
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
this.total = res.data.total
|
||
// res.data.content.forEach(item => {
|
||
// item.period = mathDiv(item.period,60)
|
||
// })
|
||
if (this.page > 1) {
|
||
this.list = [...this.list, ...res.data.content]
|
||
} else {
|
||
this.list = res.data.content
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
scrolltolower() {
|
||
if (this.total == this.list.length) {
|
||
return
|
||
}
|
||
this.page += 1
|
||
this.getCoupon()
|
||
},
|
||
tabCk(index){
|
||
this.page = 1
|
||
this.tabIndex = index
|
||
this.type = this.tabList[this.tabIndex].value
|
||
this.getCoupon()
|
||
},
|
||
moreCoupon(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/moreCoupon`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-color: #F5F5F5;
|
||
}
|
||
.coupon-page{
|
||
padding: 112rpx 0 32rpx 0;
|
||
.tab{
|
||
display: flex;
|
||
align-items: center;
|
||
.tab-item{
|
||
width: 250rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
height: 48rpx;
|
||
.tab-active{
|
||
width: 48rpx;
|
||
height: 8rpx;
|
||
background: linear-gradient( 90deg, #00AAFF 0%, rgba(0,170,255,0) 100%);
|
||
border-radius: 4rpx 0px 0px 4rpx;
|
||
}
|
||
.heng{
|
||
width: 48rpx;
|
||
height: 8rpx;
|
||
}
|
||
}
|
||
.active{
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.scroll-list-view{
|
||
padding: 0 32rpx;
|
||
margin-top: 18rpx;
|
||
height: calc(100vh - 226rpx);
|
||
.list{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 686rpx;
|
||
height: 240rpx;
|
||
background-image: url('@/static/new/mine/coupon.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
margin-bottom: 24rpx;
|
||
.detail{
|
||
width: 462rpx;
|
||
height: 240rpx;
|
||
padding: 0 32rpx;
|
||
.type{
|
||
width: 152rpx;
|
||
height: 40rpx;
|
||
background: #E0F0FF;
|
||
border-radius: 0px 0px 16rpx 16rpx;
|
||
font-size: 24rpx;
|
||
color: #0080FF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.name{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
margin-top: 16rpx;
|
||
}
|
||
.sub{
|
||
margin-top: 8rpx;
|
||
width: 370rpx;
|
||
height: 34rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.time{
|
||
margin-top: 32rpx;
|
||
// font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
border-top: 1px solid #F2F2F2;
|
||
padding-top: 16rpx;
|
||
}
|
||
}
|
||
.right{
|
||
width: 224rpx;
|
||
height: 240rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.price{
|
||
|
||
.value{
|
||
font-weight: 500;
|
||
font-size: 64rpx;
|
||
color: #000000;
|
||
}
|
||
.sym{
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.btn{
|
||
width: 120rpx;
|
||
height: 48rpx;
|
||
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 24rpx;
|
||
// font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.footer-btn{
|
||
position: fixed;
|
||
top: 36rpx;
|
||
right: 32rpx;
|
||
font-size: 28rpx;
|
||
color: #007FFF;
|
||
z-index: 101;
|
||
}
|
||
}
|
||
</style> |