279 lines
6.5 KiB
Vue
279 lines
6.5 KiB
Vue
<template>
|
|
<view class="padding-top">
|
|
<u-sticky bgColor="#fff">
|
|
<u-tabs :list="tabList" lineWidth="240rpx" lineColor="#242A38" :current="current" :scrollable="false"
|
|
:activeStyle="{
|
|
color: '#242A38',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}" :inactiveStyle="{
|
|
color: '#606266',
|
|
transform: 'scale(1)'
|
|
}" itemStyle="padding-left: 15px; width:240rpx; padding-right: 15px; height: 34px;" @change="changeTab">
|
|
</u-tabs>
|
|
</u-sticky>
|
|
|
|
<view class="margin-top">
|
|
<u-loading-page :loading="loadingShow"></u-loading-page>
|
|
<u-radio-group placement="column">
|
|
<view class="flex-col align-center margin-bottom" v-for="item,index in couponList" :key="index"
|
|
:style="{'filter': gray}">
|
|
<view class="box_1 flex-col" :style="{backgroundImage: 'url('+quanbg+')'}">
|
|
<view class="group_1 flex-row">
|
|
<view class="tag_1 flex-row">
|
|
<view class="image-text_1 flex-row justify-between align-center">
|
|
<image class="label_1" referrerpolicy="no-referrer"
|
|
:src="imagesUrl + 'money.png'" />
|
|
<text
|
|
class="text-sm text-bold margin-right-sm ">{{ changeCouponType(item.couponType) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="group_2 flex-row">
|
|
<view class="text-group_2 flex-col justify-between">
|
|
<text class="paragraph_1">
|
|
{{ item.title }}
|
|
</text>
|
|
<text class="text_6">
|
|
{{ '有效期 '+ item.startTime + '-' + item.expirationTime }}</text>
|
|
</view>
|
|
<text class="text_7">￥</text>
|
|
<text class="text_8">{{ changeDiscount(item.couponType,item.discount) }}</text>
|
|
<u-radio size="38rpx" activeColor="#ffa229" iconColor="#ffa229"
|
|
:customStyle="{marginBottom: '40rpx'}" :key="index" :name="item.couponId"
|
|
@change="selectCoupon($event,item.discount,item.title,item.couponType)" v-if="available">
|
|
</u-radio>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-radio-group>
|
|
|
|
<u-loadmore :status="isLoadMore" fontSize="30rpx" iconSize="30rpx" />
|
|
<u-gap height="30"></u-gap>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
imagesUrl: getApp().globalData.config.imagesUrl,
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
|
quanbg: getApp().globalData.config.imagesUrl + 'quanbg.png',
|
|
tabList: [{
|
|
name: '可用优惠券',
|
|
value: true
|
|
}, {
|
|
name: '不可用优惠券',
|
|
value: false
|
|
}],
|
|
current: 0,
|
|
couponList: [],
|
|
currCouponId: '',
|
|
gray: '',
|
|
isLoadMore: false, //是否加载中
|
|
params: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
},
|
|
status: 'loadmore',
|
|
loadingShow: false,
|
|
goodId: null,
|
|
type: null,
|
|
available: true
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
|
this.status = 'loading';
|
|
this.isLoadMore = true
|
|
this.params.pageNum++
|
|
this.getListByUserId()
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.goodId = option.goodId
|
|
this.type = option.type
|
|
this.getListByUserId()
|
|
},
|
|
methods: {
|
|
changeTab(e) {
|
|
this.gray = e.value ? "" : 'grayscale(1)'
|
|
this.available = e.value
|
|
this.getListByUserId(true)
|
|
},
|
|
async getListByUserId(isReload) {
|
|
if (isReload) {
|
|
this.params.pageNum = 1
|
|
}
|
|
let url;
|
|
url = this.available ? '/system/ShopCoupon/availableCouponsListByUserId' :
|
|
'/system/ShopCoupon/unAvailableCouponsListByUserId'
|
|
const res = await this.$request({
|
|
url,
|
|
data: {
|
|
// couponStatus: this.current,
|
|
pageSize: this.params.pageSize,
|
|
pageNum: this.params.pageNum,
|
|
goodId: this.goodId,
|
|
type: this.type
|
|
}
|
|
})
|
|
|
|
if (isReload) {
|
|
this.couponList = res.rows;
|
|
|
|
} else {
|
|
this.couponList = this.couponList.concat(res.rows);
|
|
}
|
|
console.log(res);
|
|
|
|
if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
|
this.status = 'nomore';
|
|
this.isLoadMore = true
|
|
} else {
|
|
this.isLoadMore = false
|
|
}
|
|
this.loadingShow = false
|
|
|
|
},
|
|
changeCouponType(couponType) {
|
|
return couponType == 'cash' ? '现金券' : couponType == 'offset' ? '抵消券' : null
|
|
},
|
|
changeDiscount(couponType, discount) {
|
|
return couponType === "offset" ? '全额' : discount / 100;
|
|
},
|
|
selectCoupon(e, discount,title,couponType) {
|
|
console.log(e, discount);
|
|
let emitData = {
|
|
userCouponId: e,
|
|
discount: discount / 100,
|
|
title:title,
|
|
couponType:couponType
|
|
}
|
|
uni.$emit('userCouponDiscount', emitData)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.box_1 {
|
|
height: 200rpx;
|
|
background-size: 100% 100%;
|
|
width: 700rpx;
|
|
}
|
|
|
|
.group_1 {
|
|
width: 142rpx;
|
|
height: 44rpx;
|
|
margin-top: -1rpx;
|
|
}
|
|
|
|
.tag_1 {
|
|
background-color: rgba(255, 179, 81, 1);
|
|
border-radius: 24px 0px 23px 0px;
|
|
width: 155rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.image-text_1 {
|
|
width: 150rpx;
|
|
height: 46rpx;
|
|
}
|
|
|
|
.label_1 {
|
|
width: 48rpx;
|
|
height: 46rpx;
|
|
}
|
|
|
|
.text-group_1 {
|
|
width: 60rpx;
|
|
height: 24rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(48, 48, 48, 1);
|
|
font-size: 24rpx;
|
|
font-family: MicrosoftYaHei-Bold;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
|
|
}
|
|
|
|
.group_2 {
|
|
width: 638rpx;
|
|
height: 115rpx;
|
|
margin: 17rpx 0 21rpx 24rpx;
|
|
}
|
|
|
|
.text-group_2 {
|
|
width: 351rpx;
|
|
height: 115rpx;
|
|
}
|
|
|
|
.paragraph_1 {
|
|
width: 351rpx;
|
|
height: 65rpx;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
line-height: 65rpx;
|
|
}
|
|
|
|
.text_6 {
|
|
width: 500rpx;
|
|
height: 24rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(104, 104, 104, 1);
|
|
font-size: 24rpx;
|
|
font-family: MicrosoftYaHei;
|
|
font-weight: NaN;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.text_7 {
|
|
width: 20rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 134, 27, 1);
|
|
font-size: 36rpx;
|
|
font-family: MicrosoftYaHei;
|
|
font-weight: NaN;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 36rpx;
|
|
margin: 22rpx 0 0 114rpx;
|
|
}
|
|
|
|
.text_8 {
|
|
min-width: 90rpx;
|
|
height: 38rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 134, 27, 1);
|
|
font-size: 50rpx;
|
|
font-family: MicrosoftYaHei-Bold;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 50rpx;
|
|
margin: 12rpx 20rpx 0 10rpx;
|
|
}
|
|
|
|
.section_3 {
|
|
border-radius: 50%;
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
border: 2px solid rgba(255, 162, 41, 1);
|
|
margin: 20rpx 0 0 50rpx;
|
|
}
|
|
</style> |