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.
691 lines
15 KiB
691 lines
15 KiB
<template>
|
|
<view class="bg">
|
|
<!-- 导航栏 -->
|
|
<view class="nav-list">
|
|
<view :class="['nav-item',{active:index==navActive}]" v-for="(item,index) in navList" :key="index"
|
|
@click="changeNav(index)">{{ item.name }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 列表 -->
|
|
<view class="coupon-list" v-if="coupon.length>0">
|
|
<view :class="['coupon-item',{'hasUse':navActive!=0}]" v-for="(item, index) in coupon" :key="index">
|
|
<!-- 分割线上部分 -->
|
|
<view class="item-top">
|
|
<view class="top-left" v-if="item.free_flag == 1">
|
|
<view class="price" v-if="item.type == 1">
|
|
<span>{{item.discounts/100}}</span>元
|
|
</view>
|
|
<view class="price" v-else>
|
|
<span>{{getPecenet(item.percent)}}</span>折
|
|
</view>
|
|
<view class="subtitle">
|
|
满{{item.min_limit/100}}元可用
|
|
</view>
|
|
</view>
|
|
<view class="top-left" v-else>
|
|
<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandan.png" v-if="navActive == 0"></image>
|
|
<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandans.png" v-else></image>
|
|
</view>
|
|
<view class="top-right">
|
|
<view class="title">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="time">
|
|
{{item.open_time.slice(0,10)}}-{{item.end_time.slice(0,10)}}可用
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 分割线 -->
|
|
<view class="item-circle">
|
|
<view class="circle left"></view>
|
|
<view class="line"></view>
|
|
<view class="circle right"></view>
|
|
</view>
|
|
<!-- 分割线下部分 -->
|
|
<view class="item-bottom">
|
|
<view class="rules" @click="changeRules(item,index)">
|
|
<span v-if="!item.openRules">使用规则：{{item.coupon_activity.note}}</span>
|
|
<view class="open" v-else>使用规则：{{item.coupon_activity.note}}</view>
|
|
<!-- <span v-if="!item.openRules">使用规则：{{item.content}}</span>
|
|
<view class="open" v-else>使用规则：{{item.content}}</view> -->
|
|
<image v-if="!item.openRules" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230415/6a7630c176f976bb16674dde482779fb.png" mode=""></image>
|
|
<image v-else src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230415/f0073b18b3ab88cac62de60411360fc1.png" mode=""></image>
|
|
</view>
|
|
<view class="use" @click="use(item)" v-if="navActive==0">
|
|
{{item.free_flag == 1 ? '去使用' : '查看详情'}}
|
|
</view>
|
|
<view class="use" @click="use(item)" v-else>
|
|
{{item.free_flag == 1 ? '已失效' : '查看详情'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="noCoupon">
|
|
<img src="https://static.ticket.sz-trip.com/yandu/images/user/couponNo.png" class="no-couPon">
|
|
<view>暂无优惠券</view>
|
|
</view>
|
|
|
|
<!-- 兑换优惠券 -->
|
|
<!-- <view class="duihuan" @click="open">
|
|
兑换优惠券 >
|
|
</view> -->
|
|
<!-- 弹框 -->
|
|
<uni-popup ref="popup" type="center">
|
|
<view class="popupBox">
|
|
<view class="name">
|
|
兑换优惠券
|
|
</view>
|
|
<input type="text" v-model="password" placeholder="请输入兑换码">
|
|
<view class="btns">
|
|
<view class="cancel" @click="cancel">
|
|
取消
|
|
</view>
|
|
<span></span>
|
|
<view class="sub" @click="submitPassword">
|
|
兑换
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 免单券详情弹框 -->
|
|
<uni-popup ref="popupMd" type="bottom" :safe-area="false">
|
|
<view class="info-box" v-if="Object.keys(selectInfo).length > 0">
|
|
<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/cha.png" class="cha" @click="$refs.popupMd.close()"></image>
|
|
|
|
<canvas canvas-id="qrcodeT" mode="widthFix"
|
|
style="position: absolute;z-index: -1;top: -100%;left: -500rpx;"></canvas>
|
|
|
|
<view class="code-box flex-center" v-if="false">
|
|
<image :src="qrcodeimg" alt=""></image>
|
|
|
|
<view class="code-past flex-center" v-if="navActive == 1">
|
|
<view class="flex-center">{{getStatusText(selectInfo.status)}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="text-align: center;font-weight: bold;font-size: 40rpx;">卡密：{{selectInfo.card_key}}</view>
|
|
|
|
<view class="coupon-item">
|
|
<view class="item-top">
|
|
<view class="top-left">
|
|
<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandan.png" v-if="navActive == 0"></image>
|
|
<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandans.png" v-else></image>
|
|
</view>
|
|
<view class="top-right">
|
|
<view class="title">
|
|
{{selectInfo.title}}
|
|
</view>
|
|
<view class="time">
|
|
{{selectInfo.open_time}}-{{selectInfo.end_time}}可用
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-circle">
|
|
<view class="circle left"></view>
|
|
<view class="line"></view>
|
|
<view class="circle right"></view>
|
|
</view>
|
|
<view class="item-bottom">
|
|
<view class="rules text-overflow">使用规则：{{selectInfo.content}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coupon-box">
|
|
<view>
|
|
<view class="title">券状态</view>
|
|
<view class="subtitle" style="color: #07C49B;">{{getStatusText(selectInfo.status)}}</view>
|
|
</view>
|
|
<view>
|
|
<view class="title">有效期</view>
|
|
<view class="subtitle">{{selectInfo.open_time}}~{{selectInfo.end_time}}可用</view>
|
|
</view>
|
|
<view v-if="selectInfo.notice">
|
|
<view class="title">使用须知</view>
|
|
<view class="subtitle">{{selectInfo.notice}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QRCode from '@/static/js/weapp-qrcode.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
navList: [
|
|
{name: '可使用', id:"wait_use"},
|
|
{name: '已失效', id:"past"},
|
|
],
|
|
navActive:'', // 当前导航
|
|
coupon:[],
|
|
// openRules: false,
|
|
password:'',
|
|
selectInfo: {},
|
|
qrcodeimg: ''
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getList(this.navList[0])
|
|
},
|
|
methods: {
|
|
// 优惠券状态文字
|
|
getStatusText(text) {
|
|
let statusText = ''
|
|
switch (text){
|
|
case 'wait_use':
|
|
statusText = '等待使用'
|
|
break;
|
|
case 'past':
|
|
statusText = '已过期'
|
|
break;
|
|
case 'complete':
|
|
statusText = '已使用'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return statusText;
|
|
},
|
|
getPecenet:function (percent) {
|
|
if(percent>=100 || percent<=0) return "";
|
|
percent = 100 - percent;
|
|
//if(percent%10==0){
|
|
percent = percent/10;
|
|
//}
|
|
return percent
|
|
},
|
|
use(item) {
|
|
if(this.navActive == 1 && item.free_flag == 1) return;
|
|
if(item.free_flag == 1) {
|
|
uni.switchTab({
|
|
url: "/pages/index/index",
|
|
});
|
|
}else {
|
|
this.selectInfo = item
|
|
this.getCodeImg()
|
|
this.$refs.popupMd.open()
|
|
}
|
|
},
|
|
// 二维码
|
|
getCodeImg() {
|
|
new QRCode('qrcodeT', {
|
|
text: this.selectInfo.card_key,
|
|
width: 120,
|
|
height: 120,
|
|
padding: 2,
|
|
colorDark: 'rgb(0,0,0)',
|
|
colorLight: 'rgb(255,255,255)',
|
|
correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
|
|
callback: res => {
|
|
this.qrcodeimg = res.path;
|
|
console.log(this.qrcodeimg)
|
|
this.$forceUpdate();
|
|
}
|
|
});
|
|
},
|
|
submitPassword() {
|
|
console.log('提交的兑换码',this.password);
|
|
let that = this
|
|
that.password = that.password.trim()
|
|
that.$refs.popup.close()
|
|
if (that.password== '') {
|
|
uni.showToast({
|
|
title: '请输入优惠券领取卡号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
that.Post({
|
|
card_key: that.password
|
|
}, "/api/coupon/getCoupon").then((res) => {
|
|
console.log(res.code);
|
|
if (res.code == 200) {
|
|
that.coupon = []
|
|
this.getList(this.navList[0])
|
|
uni.showToast({
|
|
title: '兑换成功',
|
|
icon: 'none'
|
|
})
|
|
} else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
that.password = ''
|
|
},
|
|
cancel() {
|
|
this.password = ''
|
|
this.$refs.popup.close()
|
|
},
|
|
open() {
|
|
this.$refs.popup.open('center')
|
|
},
|
|
// 打开使用规则
|
|
changeRules(item,index){
|
|
let list = this.coupon
|
|
list.forEach((Item, Index) => {
|
|
if (Index === index) {
|
|
Item.openRules = !Item.openRules
|
|
} else {
|
|
Item.openRules = false
|
|
}
|
|
})
|
|
this.coupon = list
|
|
this.$forceUpdate()
|
|
},
|
|
// 处理价格
|
|
showNoPriceNew(price) {
|
|
if (price && price > 0) {
|
|
return (price / 100)
|
|
} else {
|
|
return '0'
|
|
}
|
|
},
|
|
// 切换导航
|
|
changeNav(index){
|
|
this.navActive=index
|
|
this.getList(this.navList[this.navActive])
|
|
},
|
|
// 获取优惠券列表
|
|
getList(item) {
|
|
let that = this
|
|
that.Post({
|
|
status: item.id,
|
|
offset: 0,
|
|
limit: 100,
|
|
}, "/api/coupon/getUserCoupon").then((res) => {
|
|
if (res) {
|
|
console.log(res.data);
|
|
that.coupon = res.data
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
background: #F7F7F7;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/*导航*/
|
|
.nav-list {
|
|
width: 100%;
|
|
height: 107rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
position: fixed;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.nav-list .nav-item {
|
|
text-align: center;
|
|
line-height: 106rpx;
|
|
box-sizing: border-box;
|
|
font-size: 31rpx;
|
|
font-weight: bold;
|
|
padding: .23rpx 0;
|
|
color: #333333;
|
|
}
|
|
|
|
.nav-list .nav-item.active {
|
|
color: #71B580;
|
|
border-bottom: 7rpx solid #71B580;
|
|
}
|
|
|
|
.coupon-list{
|
|
/* width: 100%; */
|
|
position: absolute;
|
|
top: 115rpx;
|
|
padding: 0 26.67rpx;
|
|
background: #F7F7F7;
|
|
min-height: 100vh;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.coupon-item {
|
|
background: #ffffff;
|
|
margin-top: 20rpx;
|
|
border-radius: 13rpx;
|
|
}
|
|
|
|
.coupon-item .item-top {
|
|
display: flex;
|
|
padding: 30rpx 16rpx 24rpx 36rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.coupon-item .item-top .price {
|
|
font-size: 25rpx;
|
|
font-weight: bold;
|
|
color: #FC5209;
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
}
|
|
|
|
.coupon-item .item-top .price span {
|
|
font-size: 60rpx;
|
|
margin-right: 6.67rpx;
|
|
}
|
|
|
|
.top-left .subtitle {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #FC5209;
|
|
padding-left: 6rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.top-left .price-before::before{
|
|
content: '￥';
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.top-left image {
|
|
width: 133.33rpx;
|
|
height: 104rpx;
|
|
}
|
|
|
|
.top-right {
|
|
margin-left: 46.67rpx;
|
|
font-size: 25rpx;
|
|
font-weight: 500;
|
|
color: #111;
|
|
}
|
|
|
|
.top-right .title {
|
|
margin-bottom: 26rpx;
|
|
font-size: 31rpx;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.coupon-list .coupon-item .item-circle {
|
|
/* position: relative; */
|
|
line-height: 1rpx;
|
|
height: 1rpx;
|
|
width: 692rpx;
|
|
}
|
|
|
|
.coupon-list .coupon-item .item-circle .line {
|
|
border-bottom: 1px dashed #ccc;
|
|
/* position: absolute; */
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
/* width: calc(100% - 1rem); */
|
|
height: .1rpx;
|
|
margin: auto;
|
|
z-index: 9;
|
|
}
|
|
|
|
.coupon-list .coupon-item .item-circle .circle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
border-radius: 50%;
|
|
background: #ccc;
|
|
width: .46rpx;
|
|
height: .46rpx;
|
|
z-index: 10;
|
|
}
|
|
.coupon-list .coupon-item .item-circle .circle.left{
|
|
left:-.23rpx;
|
|
}
|
|
.coupon-list .coupon-item .item-circle .circle.right{
|
|
right: -.23rpx;
|
|
}
|
|
|
|
.item-bottom {
|
|
padding: 16rpx 20rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-bottom .rules {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #999;
|
|
display: flex;
|
|
line-height: 47rpx;
|
|
}
|
|
|
|
.item-bottom .rules span {
|
|
width: 425rpx;
|
|
overflow: hidden; //超出隐藏
|
|
white-space: nowrap; //不折行
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-bottom .rules image {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-left: 20rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.item-bottom .use {
|
|
width: 133rpx;
|
|
height: 47rpx;
|
|
border: 1px solid #FC5209;
|
|
border-radius: 23rpx;
|
|
text-align: center;
|
|
font-size: 25rpx;
|
|
font-weight: 500;
|
|
color: #fc5209;
|
|
line-height: 47rpx;
|
|
}
|
|
|
|
.open {
|
|
width: 425rpx;
|
|
min-height: 30rpx;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.duihuan {
|
|
width: 293rpx;
|
|
height: 67rpx;
|
|
background: #fff;
|
|
box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(153,153,153,0.18);
|
|
border-radius: 33rpx;
|
|
font-size: 31rpx;
|
|
font-weight: 500;
|
|
color: #07C49B;
|
|
text-align: center;
|
|
line-height: 67rpx;
|
|
margin-left: 228.67rpx;
|
|
position: fixed;
|
|
bottom: 52.67rpx;
|
|
}
|
|
.top-left {
|
|
width: 140rpx;
|
|
}
|
|
.top-left .price {
|
|
width: 100%;
|
|
/* overflow: hidden; */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.popupBox {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 40.67rpx 39.33rpx 35.33rpx 40rpx;
|
|
}
|
|
|
|
.popupBox .name {
|
|
font-size: 35rpx;
|
|
color: #111;
|
|
font-weight: bold;
|
|
margin-bottom: 57.33rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.popupBox input {
|
|
width: 454rpx;
|
|
height: 81rpx;
|
|
border: 1px solid #D8D8D8;
|
|
border-radius: 7rpx;
|
|
font-size: 31rpx;font-weight: 500;
|
|
color: #999999;
|
|
line-height: 81rpx;
|
|
margin: 0 39.33rpx 72.67rpx 40rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.popupBox .btns {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 35rpx;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.popupBox .btns .cancel {
|
|
color: #111;
|
|
}
|
|
|
|
.popupBox .btns span {
|
|
width: 1rpx;
|
|
height: 53rpx;
|
|
background: #D8D8D8;
|
|
}
|
|
|
|
.popupBox .btns .sub {
|
|
color: #07C49B;
|
|
}
|
|
|
|
.hasUse {
|
|
color: #999 !important;
|
|
}
|
|
.hasUse .item-top .top-left .price{
|
|
color: #999 !important;
|
|
}
|
|
.hasUse .item-top .top-left .subtitle{
|
|
color: #999 !important;
|
|
}
|
|
.hasUse .item-top .top-right .title {
|
|
color: #999 !important;
|
|
}
|
|
.hasUse .item-top .top-right .time {
|
|
color: #999 !important;
|
|
}
|
|
.hasUse .item-bottom .use {
|
|
border: 1px solid #B3B3B3 !important;
|
|
color: #999999 !important;
|
|
}
|
|
|
|
.noCoupon{
|
|
padding-top: 524rpx;
|
|
text-align: center;
|
|
font-size: 31rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
|
|
.no-couPon{
|
|
width: 173rpx;
|
|
height: 173rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
}
|
|
|
|
.info-box {
|
|
max-height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background: #F7F7F7;
|
|
border-radius: 27rpx 27rpx 0rpx 0rpx;
|
|
padding: 90rpx 26rpx 20rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.cha {
|
|
width: 31.33rpx;
|
|
height: 31.33rpx;
|
|
position: absolute;
|
|
top: 32rpx;
|
|
right: 37rpx;
|
|
}
|
|
|
|
.code-box {
|
|
width: 275rpx;
|
|
height: 269rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 33rpx 0rpx rgba(102,102,102,0.26);
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 243rpx;
|
|
height: 243rpx;
|
|
}
|
|
|
|
.code-past {
|
|
width: 275rpx;
|
|
height: 269rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-weight: bold;
|
|
font-size: 25rpx;
|
|
color: #000000;
|
|
background-color: rgba(0, 0, 0, .6);
|
|
|
|
view {
|
|
width: 143rpx;
|
|
height: 143rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 71rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon-box {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 13rpx;
|
|
padding: 34rpx 18rpx;
|
|
box-sizing: border-box;
|
|
margin: 28rpx auto 0;
|
|
|
|
&>view {
|
|
margin-bottom: 25rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #111111;
|
|
min-width: 130rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.subtitle {
|
|
font-weight: 500;
|
|
font-size: 25rpx;
|
|
color: #444444;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|