chenkainan
/
yandu_WeChat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

免单券

master
chenkainan 6 months ago
parent
1eb839d829
commit
87838e3e33
1 changed files with 213 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 225
      subPackages/user/coupon.vue

225
subPackages/user/coupon.vue
View File

@ -12,9 +12,9 @@
<view :class="['coupon-item',{'hasUse':navActive!=0}]" v-for="(item, index) in coupon" :key="index">
<!-- 分割线上部分 -->
<view class="item-top">
<view class="top-left">
<view class="price price-before" v-if="item.type == 1">
<span>{{item.discounts/100}}</span>
<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>折
@ -23,6 +23,10 @@
满{{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}}
@ -48,12 +52,12 @@
<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" v-if="navActive==0">
去使用
<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 class="use" v-else>
已失效
</view> -->
</view>
</view>
</view>
@ -85,10 +89,71 @@
</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 {
@ -99,13 +164,33 @@
navActive:'', // 当前导航
coupon:[],
// openRules: false,
password:''
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;
@ -114,10 +199,34 @@
}
return percent
},
use() {
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);
@ -244,13 +353,13 @@
padding-bottom: 30rpx;
}
.coupon-list .coupon-item {
.coupon-item {
background: #ffffff;
margin-top: 20rpx;
border-radius: 13rpx;
}
.coupon-list .coupon-item .item-top {
.coupon-item .item-top {
display: flex;
padding: 30rpx 16rpx 24rpx 36rpx;
align-items: center;
@ -284,6 +393,11 @@
font-size: 32rpx;
}
.top-left image {
width: 133.33rpx;
height: 104rpx;
}
.top-right {
margin-left: 46.67rpx;
font-size: 25rpx;
@ -355,7 +469,7 @@
}
.item-bottom .rules span {
width: 569rpx;
width: 425rpx;
overflow: hidden; //超出隐藏
white-space: nowrap; //不折行
text-overflow: ellipsis;
@ -364,7 +478,7 @@
.item-bottom .rules image {
width: 20rpx;
height: 20rpx;
margin-left: 68rpx;
margin-left: 20rpx;
margin-top: 15rpx;
}
@ -491,4 +605,87 @@
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>

Write Preview
Loading…
Cancel
Save