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.
227 lines
4.8 KiB
227 lines
4.8 KiB
<template>
|
|
<view class="coupon">
|
|
<view class="position-fixed top-0 left-0 bg-white vw-100 zIndex-2">
|
|
<u-tabs font-size="34" :list="list" :is-scroll="false" :current="current" @change="change" active-color="#01AEEA" />
|
|
</view>
|
|
<view class="coupon-container" v-if="couponData.length>0">
|
|
<view class="items" v-for="item in couponData" :key="item.id">
|
|
<text class="title font-28">优惠券</text>
|
|
<text class="price font-40">{{item.name}}</text>
|
|
<text>有效期至：{{item.validTime}}</text>
|
|
<button class="btn" type="default" @click="chooseCoup(item)">立即使用</button>
|
|
|
|
<view class="position-absolute zIndex-1 coupon-invalid" v-if="item.useFlag == 1">
|
|
<view class="coupon-invalid-image position-absolute">
|
|
<image :src="IMG_URL + 'my/invalid.png'" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="!couponData.length">
|
|
<u-empty margin-top="450" text="暂无优惠券~" mode="list" ></u-empty>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- invalid -->
|
|
<script>
|
|
import { IMG_URL } from '@/env.js'
|
|
export default {
|
|
data () {
|
|
return {
|
|
IMG_URL,
|
|
list: [{
|
|
name: '待使用'
|
|
}, {
|
|
name: '已过期'
|
|
}],
|
|
options: {},
|
|
current: 0,
|
|
couponData: [],
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: null,
|
|
isLock: true,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.options = options
|
|
this.getCouponPage()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.couponData = [];
|
|
this.pageNo = 1;
|
|
this.total = null;
|
|
this.isLock = true;
|
|
this.getCouponPage()
|
|
},
|
|
onReachBottom() {
|
|
if(this.isLock){
|
|
this.isLock = false;
|
|
if(this.total !== null && this.pageNo * this.pageSize >= this.total){
|
|
this.$Toast('没有更多数据了哦！');
|
|
setTimeout(()=>{
|
|
this.isLock = true;
|
|
},3000)
|
|
return
|
|
}
|
|
this.pageNo+=1;
|
|
this.getCouponPage();
|
|
}
|
|
},
|
|
methods: {
|
|
getCouponPage() {
|
|
uni.showLoading();
|
|
const params = {
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
type: this.current,
|
|
id: this.options?.id || null
|
|
}
|
|
this.$api('getCouponPage',params).then(res => {
|
|
let { code, result, message} = res;
|
|
if(code == 200) {
|
|
if(this.total == null) {
|
|
this.total = result.total;
|
|
}
|
|
// 处理 图片
|
|
this.couponData = this.couponData.concat(result.records)
|
|
console.log(result);
|
|
}else {
|
|
this.$Toast(message);
|
|
}
|
|
uni.hideLoading()
|
|
uni.stopPullDownRefresh()
|
|
this.isLock = true;
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
this.isLock = true;
|
|
uni.stopPullDownRefresh()
|
|
this.$Toast(err.message);
|
|
})
|
|
},
|
|
chooseCoup(item) {
|
|
if (this.options?.id) {
|
|
uni.$emit('coupon', item)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else {
|
|
this.$tools.navigateTo({
|
|
url: '/pagesC/goodsInfo/goodsInfo?type=home&id='+ item.goodsId
|
|
})
|
|
}
|
|
},
|
|
change(index) {
|
|
this.current = index;
|
|
this.couponData = [];
|
|
this.pageNo = 1;
|
|
this.total = null;
|
|
this.isLock = true;
|
|
this.getCouponPage()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.coupon{
|
|
&-container {
|
|
padding: 100rpx 20rpx 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&-invalid {
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 10rpx;
|
|
background: rgba(0,0,0,0.3);
|
|
&-image {
|
|
width: 200rpx;
|
|
right: 40rpx;
|
|
bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.items{
|
|
margin-bottom: 40rpx;
|
|
background: url('https://hanhai-image-dev.oss-cn-guangzhou.aliyuncs.com/blindbox/youhuiquan.png') no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 40rpx 30rpx;
|
|
border-radius: 10rpx;
|
|
text{
|
|
margin-top: 20rpx;
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
}
|
|
.title{
|
|
font-size: 30rpx;
|
|
}
|
|
.price{
|
|
font-size: 36rpx;
|
|
}
|
|
.btn{
|
|
position: absolute;
|
|
right: 15rpx;
|
|
top: 100rpx;
|
|
width: 146rpx;
|
|
height: 58rpx;
|
|
padding: 0rpx;
|
|
// border: 1rpx solid #fb7b5e;
|
|
border-radius: 17rpx;
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
|
|
background: #ffffff;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.noCoupon {
|
|
text-align: center;
|
|
}
|
|
|
|
.giving-box {
|
|
width: 602rpx;
|
|
.giving-title {
|
|
padding:40rpx 0;
|
|
width: 100%;
|
|
font-size: 37rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
.giving-cont {
|
|
padding: 0 41rpx;
|
|
.input-box {
|
|
background-color: #F5F5F5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10rpx 21rpx;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
margin-bottom: 24rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.giving-btn {
|
|
padding-bottom: 30rpx;
|
|
margin-top: 85rpx;
|
|
.custom-style {
|
|
width: 374rpx;
|
|
height: 77rpx;
|
|
background-color: #000000;
|
|
color: #FFFfff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|