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.
772 lines
16 KiB
772 lines
16 KiB
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view :class="isIphoneX ? 'iphone-x' : ''">
|
|
<view class="cf-container color-line-border" v-if="token">
|
|
<view class="tab">
|
|
<view @click="changeState(1)" class="tab-bor">
|
|
<text :class="state == 1 ? 'color-base-text active color-base-border-bottom' : ''">
|
|
可使用优惠卷
|
|
</text>
|
|
</view>
|
|
<view @click="changeState(2)" class="tab-bor">
|
|
<text :class="state == 2 ? 'color-base-text active color-base-border-bottom' : ''">
|
|
不可使用优惠卷
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="head" v-if="state == 1">
|
|
<view class="" v-for="(item, index) in couponList" :key="index">
|
|
<!-- 满减 -->
|
|
<view class="biejin df jcsb" v-if="item.type == 'reward'">
|
|
<image :src="$util.img('/upload/weapp/user/beijing.png')" mode=""></image>
|
|
<div style="z-index: 10;">
|
|
<div>
|
|
<div class="time">
|
|
￥
|
|
<span>{{ item.money | filterCount }}</span>
|
|
</div>
|
|
<div class="charge" v-if="item.at_least == 0">无使用门槛</div>
|
|
<div class="charge" v-else>满{{ item.at_least }}元使用</div>
|
|
</div>
|
|
|
|
<!-- <div class="charge" v-if="item.at_least==0">无使用门槛</div> -->
|
|
</div>
|
|
<view class="df jcsb">
|
|
<div class="df aic">
|
|
<div class="xukid"></div>
|
|
</div>
|
|
<div style="z-index: 10;">
|
|
<div class="df jcsb draw">
|
|
<div class="drawone">{{ item.coupon_name }}</div>
|
|
<div class="drawtwo df aic jcsa" @click="useBtn">去使用</div>
|
|
</div>
|
|
<div class="timeod" v-if="item.end_time">
|
|
有效期：
|
|
<span>{{ item.end_time | time }}</span>
|
|
</div>
|
|
<div class="timeod" v-else>
|
|
有效期：
|
|
<span>长期有效</span>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<!-- 折扣 -->
|
|
<view class="biejin df jcsb" v-if="item.type == 'discount'">
|
|
<image :src="$util.img('/upload/weapp/user/beijing.png')" mode=""></image>
|
|
<div style="z-index: 10;">
|
|
<div>
|
|
<div class="time">
|
|
<span>{{ item.discount | filterCount }}</span>
|
|
折
|
|
</div>
|
|
<div class="charge" v-if="item.at_least == 0">无使用门槛</div>
|
|
<div class="charge" v-else>满{{ item.at_least }}元使用</div>
|
|
</div>
|
|
|
|
<!-- <div class="charge" v-if="item.at_least==0">无使用门槛</div> -->
|
|
</div>
|
|
<view class="df jcsb">
|
|
<div class="df aic">
|
|
<div class="xukid"></div>
|
|
</div>
|
|
<div style="z-index: 10;">
|
|
<div class="df jcsb draw">
|
|
<div class="drawone">{{ item.coupon_name }}</div>
|
|
<div class="drawtwo df aic jcsa" @click="useBtn">去使用</div>
|
|
</div>
|
|
<div class="timeod" v-if="item.end_time">
|
|
有效期：
|
|
<span>{{ item.end_time | time }}</span>
|
|
</div>
|
|
<div class="timeod" v-else>
|
|
有效期：
|
|
<span>长期有效</span>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="head2" v-if="state == 2">
|
|
<view class="" v-for="(item, index) in couponList" :key="index">
|
|
<!-- 满减 -->
|
|
<view class="biejin df jcsb" v-if="item.type == 'reward'">
|
|
<image :src="$util.img('/upload/weapp/user/beijintwo.png')" mode=""></image>
|
|
<div style="z-index: 10;">
|
|
<div>
|
|
<div class="time">
|
|
￥
|
|
<span>{{ item.money | filterCount }}</span>
|
|
</div>
|
|
<div class="charge" v-if="item.at_least == 0">无使用门槛</div>
|
|
<div class="charge" v-else>满{{ item.at_least }}元使用</div>
|
|
</div>
|
|
|
|
<!-- <div class="charge" v-if="item.at_least==0">无使用门槛</div> -->
|
|
</div>
|
|
<view class="df jcsb">
|
|
<div class="df aic">
|
|
<div class="xukid"></div>
|
|
</div>
|
|
<div style="z-index: 10;">
|
|
<div class="df jcsb draw">
|
|
<div class="drawone">{{ item.coupon_name }}</div>
|
|
<!-- 2已使用 3已过期 -->
|
|
<div class="drawtwo df aic jcsa" v-if="item.state == 2">已使用</div>
|
|
<div class="drawtwo df aic jcsa" v-if="item.state == 3">已过期</div>
|
|
</div>
|
|
<div class="timeod" v-if="item.end_time">
|
|
有效期：
|
|
<span>{{ item.end_time | time }}</span>
|
|
</div>
|
|
<div class="timeod" v-else>
|
|
有效期：
|
|
<span>长期有效</span>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<!-- 折扣 -->
|
|
<view class="biejin df jcsb" v-if="item.type == 'discount'">
|
|
<image :src="$util.img('/upload/weapp/user/beijintwo.png')" mode=""></image>
|
|
<div style="z-index: 10;">
|
|
<div>
|
|
<div class="time">
|
|
<span>{{ item.discount | filterCount }}</span>
|
|
折
|
|
</div>
|
|
<div class="charge" v-if="item.at_least == 0">无使用门槛</div>
|
|
<div class="charge" v-else>满{{ item.at_least }}元使用</div>
|
|
</div>
|
|
|
|
<!-- <div class="charge" v-if="item.at_least==0">无使用门槛</div> -->
|
|
</div>
|
|
<view class="df jcsb">
|
|
<div class="df aic">
|
|
<div class="xukid"></div>
|
|
</div>
|
|
<div style="z-index: 10;">
|
|
<div class="df jcsb draw">
|
|
<div class="drawone">{{ item.coupon_name }}</div>
|
|
<div class="drawtwo df aic jcsa" v-if="item.state == 2">已使用</div>
|
|
<div class="drawtwo df aic jcsa" v-if="item.state == 3">已过期</div>
|
|
</div>
|
|
<div class="timeod" v-if="item.end_time">
|
|
有效期：
|
|
<span>{{ item.end_time | time }}</span>
|
|
</div>
|
|
<div class="timeod" v-else>
|
|
有效期：
|
|
<span>长期有效</span>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const timesfm = require('../../common/js/timesfm.js');
|
|
export default {
|
|
data() {
|
|
return {
|
|
type: '',
|
|
types: '',
|
|
state: 1,
|
|
sort: 1,
|
|
couponList: [],
|
|
isIphoneX: false, //判断手机是否是iphoneX以上
|
|
token: null,
|
|
showEmpty: false,
|
|
related_id: 0
|
|
};
|
|
},
|
|
onLoad(data) {
|
|
if (data.related_id) this.related_id = data.related_id ? data.related_id : 0;
|
|
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
|
},
|
|
onShow() {
|
|
this.token = uni.getStorageSync('token');
|
|
if (this.token) {
|
|
this.getMyCoupon();
|
|
}
|
|
},
|
|
methods: {
|
|
//切换状态
|
|
changeState(state) {
|
|
this.list = [];
|
|
this.state = state;
|
|
this.getMyCoupon();
|
|
},
|
|
getMyCoupon() {
|
|
// 1已领用（未使用） 2已使用 3已过期
|
|
if (this.state == 1) {
|
|
this.couponList = [];
|
|
this.$api.sendRequest({
|
|
url: '/coupon/api/coupon/memberpage',
|
|
data: {
|
|
state: this.state
|
|
},
|
|
success: res => {
|
|
this.couponList = res.data.list;
|
|
console.log(this.couponList);
|
|
}
|
|
});
|
|
} else {
|
|
this.couponList = [];
|
|
this.$api.sendRequest({
|
|
url: '/coupon/api/coupon/memberpage',
|
|
data: {
|
|
state: 2
|
|
},
|
|
success: res => {
|
|
res.data.list.forEach(item => {
|
|
item.state = 2;
|
|
this.couponList.push(item);
|
|
});
|
|
}
|
|
});
|
|
this.$api.sendRequest({
|
|
url: '/coupon/api/coupon/memberpage',
|
|
data: {
|
|
state: 3
|
|
},
|
|
success: res => {
|
|
res.data.list.forEach(item => {
|
|
item.state = 3;
|
|
this.couponList.push(item);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
//使用优惠券
|
|
useBtn() {
|
|
this.$util.redirectTo('/page_goods/goodsList/goodsList');
|
|
}
|
|
},
|
|
filters: {
|
|
filterCount(num) {
|
|
return num.substring(0, num.indexOf('.'));
|
|
},
|
|
time(num) {
|
|
return timesfm(num * 1000);
|
|
}
|
|
},
|
|
watch: {},
|
|
computed: {}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bode {
|
|
padding: 16rpx 28rpx 0 28rpx;
|
|
box-sizing: border-box;
|
|
|
|
.bode-list {
|
|
width: 694rpx;
|
|
height: 250rpx;
|
|
|
|
image {
|
|
width: 694rpx;
|
|
height: 250rpx;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.time {
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #999999;
|
|
line-height: 38rpx;
|
|
position: absolute;
|
|
top: 60rpx;
|
|
left: 62rpx;
|
|
|
|
span {
|
|
font-size: 64rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #999999;
|
|
line-height: 74rpx;
|
|
position: absolute;
|
|
top: -32rpx;
|
|
}
|
|
}
|
|
|
|
.wu {
|
|
font-size: 22rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #bfbfbf;
|
|
line-height: 32rpx;
|
|
position: absolute;
|
|
top: 104rpx;
|
|
left: 62rpx;
|
|
}
|
|
|
|
.xukjm {
|
|
width: 0;
|
|
height: 116rpx;
|
|
border: 2rpx solid #ddd;
|
|
position: absolute;
|
|
top: 30rpx;
|
|
left: 230rpx;
|
|
}
|
|
|
|
.Years {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
left: 272rpx;
|
|
}
|
|
|
|
.Yearstay {
|
|
font-size: 36rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.Yearstime {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #bfbfbf;
|
|
line-height: 34rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.zheli {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 34rpx;
|
|
position: absolute;
|
|
bottom: -235rpx;
|
|
left: 52rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head {
|
|
padding: 8rpx 32rpx 0 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
.biejin {
|
|
width: 686rpx;
|
|
height: 176rpx;
|
|
margin-top: 24rpx;
|
|
|
|
image {
|
|
width: 686rpx;
|
|
height: 176rpx;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.time {
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #e5831e;
|
|
line-height: 38rpx;
|
|
margin-top: 30rpx;
|
|
margin-left: 58rpx;
|
|
z-index: 10;
|
|
|
|
span {
|
|
font-size: 64rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #f08433;
|
|
line-height: 74rpx;
|
|
margin-left: 4rpx;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.charge {
|
|
font-size: 22rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: rgba(240, 132, 51, 0.78);
|
|
line-height: 32rpx;
|
|
margin-left: 58rpx;
|
|
margin-top: 6rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.xukid {
|
|
height: 114rpx;
|
|
border: 2rpx dashed rgb(235, 207, 175);
|
|
// margin-left: 54rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.draw {
|
|
width: 420rpx;
|
|
margin-top: 40rpx;
|
|
|
|
.drawone {
|
|
width: calc(420rpx - 150rpx);
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #F08433;
|
|
line-height: 50rpx;
|
|
margin-left: 20rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.drawtwo {
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
background: linear-gradient(133deg, #fb6677 0%, #f33b50 100%);
|
|
border-radius: 28rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 34rpx;
|
|
margin-right: 38rpx;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.timeod {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: rgba(240, 132, 51, 0.78);
|
|
line-height: 34rpx;
|
|
margin-left: 20rpx;
|
|
margin-top: 10rpx;
|
|
z-index: 12;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head2 {
|
|
padding: 8rpx 32rpx 0 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
.biejin {
|
|
width: 686rpx;
|
|
height: 176rpx;
|
|
margin-top: 24rpx;
|
|
|
|
image {
|
|
width: 686rpx;
|
|
height: 176rpx;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.time {
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #999999;
|
|
line-height: 38rpx;
|
|
margin-top: 30rpx;
|
|
margin-left: 58rpx;
|
|
z-index: 10;
|
|
|
|
span {
|
|
font-size: 64rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #999999;
|
|
line-height: 74rpx;
|
|
margin-left: 4rpx;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.charge {
|
|
font-size: 22rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #bfbfbf;
|
|
line-height: 32rpx;
|
|
margin-left: 58rpx;
|
|
margin-top: 6rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.xukid {
|
|
height: 114rpx;
|
|
border: 2rpx dashed #ddd;
|
|
// margin-left: 54rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.draw {
|
|
width: 420rpx;
|
|
margin-top: 40rpx;
|
|
|
|
.drawone {
|
|
width: calc(420rpx - 150rpx);
|
|
margin-left: 20rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 36rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #999;
|
|
line-height: 50rpx;
|
|
z-index: 10;
|
|
|
|
}
|
|
|
|
.drawtwo {
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
background: linear-gradient(133deg, #999 0%, #bfbfbf 100%);
|
|
border-radius: 28rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 34rpx;
|
|
margin-right: 38rpx;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.timeod {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #bfbfbf;
|
|
line-height: 34rpx;
|
|
margin-left: 20rpx;
|
|
margin-top: 10rpx;
|
|
z-index: 12;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cart-empty {
|
|
margin-top: 208rpx !important;
|
|
}
|
|
|
|
.active {
|
|
border-bottom: 4rpx solid;
|
|
}
|
|
|
|
.coupon-head {
|
|
display: flex;
|
|
background: #fff;
|
|
padding: 20rpx 50rpx;
|
|
|
|
.sort {
|
|
border: 2rpx solid #c5c5c5;
|
|
padding: 1rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
cursor: pointer;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
|
|
.cf-container {
|
|
background: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 86rpx;
|
|
|
|
.tab-bor {
|
|
flex: 1;
|
|
}
|
|
|
|
>view {
|
|
text-align: center;
|
|
width: 33%;
|
|
height: 86rpx;
|
|
|
|
text {
|
|
display: inline-block;
|
|
line-height: 86rpx;
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon-listone {
|
|
margin: 0 30rpx;
|
|
|
|
.item {
|
|
display: flex;
|
|
background-color: #fff2f0;
|
|
background-size: 100% 100%;
|
|
border-radius: 20rpx;
|
|
align-items: stretch;
|
|
margin-top: $padding;
|
|
overflow: hidden;
|
|
|
|
&.item-disabled {
|
|
.item-base {
|
|
background: #e7e7e7 !important;
|
|
}
|
|
}
|
|
|
|
.item-base {
|
|
position: relative;
|
|
width: 197rpx;
|
|
min-width: 197rpx;
|
|
text-align: center;
|
|
background: linear-gradient(to left, var(--bg-color), var(--bg-color-shallow));
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 38rpx 10rpx 38rpx 18rpx;
|
|
|
|
&.disabled {
|
|
background: #dedede;
|
|
}
|
|
|
|
.coupon-line {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
>view {
|
|
width: calc(100%);
|
|
height: auto;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
.use_price {
|
|
font-size: 60rpx;
|
|
line-height: 1;
|
|
color: #fff;
|
|
|
|
text {
|
|
font-size: $font-size-toolbar;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $color-tip;
|
|
}
|
|
}
|
|
|
|
.use_condition {
|
|
color: #fff;
|
|
margin-top: $padding;
|
|
|
|
&.margin_top_none {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $color-tip;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
background-color: #f8f8f8;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
height: 30rpx;
|
|
width: 15rpx;
|
|
border-radius: 0 30rpx 30rpx 0;
|
|
}
|
|
}
|
|
|
|
.item-btn {
|
|
position: relative;
|
|
width: 160rpx;
|
|
min-width: 160rpx;
|
|
align-self: center;
|
|
|
|
view {
|
|
width: 100rpx;
|
|
height: 50rpx;
|
|
border-radius: $border-radius;
|
|
line-height: 50rpx;
|
|
margin: auto;
|
|
text-align: center;
|
|
background-image: linear-gradient(to right,
|
|
var(--bg-color),
|
|
var(--bg-color-shallow));
|
|
color: var(--btn-text-color);
|
|
font-size: $font-size-tag;
|
|
|
|
&.disabled {
|
|
background: $color-line !important;
|
|
color: $color-tip !important;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
background-color: #f8f8f8;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
height: 30rpx;
|
|
width: 15rpx;
|
|
border-radius: 30rpx 0 0 30rpx;
|
|
}
|
|
}
|
|
|
|
.item-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: $padding;
|
|
overflow: hidden;
|
|
background-repeat-x: no-repeat;
|
|
background-repeat-y: repeat;
|
|
|
|
.use_time {
|
|
padding: $padding 0;
|
|
border-top: 2rpx dashed #cccccc;
|
|
font-size: $font-size-activity-tag;
|
|
color: #909399;
|
|
}
|
|
|
|
.use_title {
|
|
font-size: $font-size-base;
|
|
font-weight: 500;
|
|
padding: $padding 0;
|
|
|
|
.title {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.max_price {
|
|
font-weight: 400;
|
|
font-size: $font-size-tag;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|