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

优惠券核销

dev_delivery
jiazhipeng 4 weeks ago
parent
6f4c691997
commit
0792ad7916
3 changed files with 277 additions and 20 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. 72
      subPackages/pointsMall/index.vue
  2. 203
      subPackages/user/coupon.vue

72
subPackages/pointsMall/index.vue
View File

@ -74,6 +74,30 @@
</view>
</view>
<view :class="['search-container']">
<view class="common-view">
<text :class="[search_type==0?'active-search-item':'']" @click="changeSearchParm(0)">综合</text>
</view>
<view class="common-view">
<!-- <text :class="[[1,2].includes(search_type)?'active-search-item':'']" @click="changeSearchParm(search_type==1?2:1)">销量</text>
<view class="search-item">
<view :class="[search_type==1?'active-search-item':'','triangle-up']" @click="changeSearchParm(1)">▼</view>
<view :class="[search_type==2?'active-search-item':'']" @click="changeSearchParm(2)">▼</view>
</view> -->
<text :class="[[1,2].includes(search_type)?'active-search-item':'']" @click="changeSearchParm(2)">销量</text>
</view>
<view class="common-view">
<text :class="[[3,4].includes(search_type)?'active-search-item':'']" @click="changeSearchParm(search_type==3?4:3)">积分</text>
<view class="search-item">
<view :class="[search_type==3?'active-search-item':'','triangle-up']" @click="changeSearchParm(3)">▼</view>
<view :class="[search_type==4?'active-search-item':'']" @click="changeSearchParm(4)">▼</view>
</view>
</view>
</view>
<view class="prod-box2">
<view class="jx-item" v-for="(item,i) in prodList" :key="i" @click="gotoDetail(item)">
<image class="jx-head-image" :src="showImg(item.headimg)" mode="aspectFill"></image>
@ -143,6 +167,8 @@
page: 1,
finish: false,
search_type: 0,
}
},
onReady () {
@ -235,11 +261,25 @@
this.getProdListByType()
},
changeSearchParm(value) {
this.search_type = value
this.prodList = [];
this.finish = false;
this.page = 1;
this.getProdListByType()
},
getProdListByType () {
let param = {}
if (this.search_type == 1) { param = {order: 'asc',sort:'sales'} }
if (this.search_type == 2) { param = {order: 'desc',sort:'sales'} }
if (this.search_type == 3) { param = {order: 'asc',sort:'score'} }
if (this.search_type == 4) { param = {order: 'desc',sort:'score'} }
this.Post({
tag_id: this.typeList[this.typeIndex].id,
page: this.page,
limit: 10,
...param,
},'/api/score_goods_sku_price/index').then(res => {
this.prodList = [...this.prodList,...res.data.data]
if (res.data.current_page<res.data.last_page) {
@ -627,4 +667,36 @@
width: 100%;height: 100%;overflow-y: auto;overflow-x: hidden;
}
}
.search-container{
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold;
font-size: 27rpx;
color: #999;
flex-shrink: 0;
padding: 0 20rpx 20rpx;
background: #FFFFFF;
&>.common-view{
display: flex;
min-width: 70rpx;
align-items: center;
justify-content: space-between;
height: 100%;
}
.search-item{
display: flex;
flex-direction: column;
line-height: 16rpx;
font-size: 14rpx;
}
}
.triangle-up {
transform: rotate(180deg);
display: inline-block;
}
.active-search-item{
color: #6A8A2D;
}
</style>

203
subPackages/user/coupon.vue
View File

@ -13,6 +13,11 @@
<!-- 分割线上部分 -->
<view class="item-top">
<view class="top-left">
<template v-if="item.activity.discount_type == 'free'">
<image class="mian-dan" src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandan.png" v-if="navActive == 0"></image>
<image class="mian-dan" src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandans.png" v-else></image>
</template>
<template v-else>
<view class="price price-before" v-if="item.activity.discount_type == 'pricebreak'">
<span>{{(item.activity.money) / 100}}</span>
</view>
@ -22,6 +27,7 @@
<view class="subtitle">
满{{item.activity.mini_money/100}}元可用
</view>
</template>
</view>
<view class="top-right">
<view class="title text-overflowRows">
@ -39,7 +45,7 @@
<view class="circle right"></view>
</view>
<!-- 分割线下部分 -->
<view class="item-bottom">
<view class="item-bottom flex-between">
<view class="rules" @click="changeRules(item,index)">
<span v-if="!item.openRules">使用规则：{{item.note}}</span>
<view class="open" v-else>使用规则：{{item.note}}</view>
@ -48,12 +54,11 @@
<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="flex-between" style="justify-content: flex-end;width: 200rpx;"
v-if="item.activity.discount_type == 'free'">
<view class="use" @click="use(item)">查看详情</view>
</view>
<view class="use" v-else>
已失效
</view> -->
</view>
</view>
</view>
@ -85,10 +90,67 @@
</view>
</view>
</uni-popup>
<!-- 免单券详情弹框 -->
<uni-popup ref="popupMd" type="bottom" :safe-area="false">
<view class="info-box coupon-list" 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">
<image :src="qrcodeimg" alt=""></image>
<view class="code-past flex-center" v-if="navActive == 1">
<view class="flex-center">已失效</view>
</view>
</view>
<view class="coupon-item">
<view class="item-top">
<view class="top-left">
<image class="mian-dan" src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandan.png" v-if="navActive == 0"></image>
<image class="mian-dan" src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandans.png" v-else></image>
</view>
<view class="top-right">
<view class="title">
{{selectInfo.activity.name}}
</view>
<view class="time">
{{selectInfo.get_date.slice(0,10)}}-{{selectInfo.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 text-overflow">使用规则：{{selectInfo.note}}</view>
</view>
</view>
<view class="coupon-box">
<view>
<view class="title">券状态</view>
<view class="subtitle" style="color: #07C49B;">{{selectInfo.status==1?"可使用":"已失效"}}</view>
</view>
<view>
<view class="title">有效期</view>
<view class="subtitle">{{selectInfo.get_date.slice(0,10)}}-{{selectInfo.end_time.slice(0,10)}}可用</view>
</view>
<view>
<view class="title">使用须知</view>
<view class="subtitle">{{selectInfo.note}}</view>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import QRCode from '@/static/js/weapp-qrcode.js'
export default {
data() {
return {
@ -99,7 +161,9 @@
navActive:'', // 当前导航
coupon:[],
// openRules: false,
password:''
password:'',
qrcodeimg: '',
selectInfo: {},
}
},
onShow() {
@ -137,6 +201,7 @@
console.log(res.code);
if (res.code == 200) {
that.coupon = []
that.navActive = 0
this.getList(this.navList[0])
uni.showToast({
title: '兑换成功',
@ -197,7 +262,36 @@
that.coupon = res.data
}
});
},
use(item) {
if(item.free_flag == 1) {
return
}else {
this.selectInfo = item
this.getCodeImg()
this.$refs.popupMd.open()
}
},
// 二维码
getCodeImg() {
new QRCode('qrcodeT', {
text: this.selectInfo.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();
}
});
},
}
}
</script>
@ -352,10 +446,13 @@
color: #999;
display: flex;
line-height: 47rpx;
flex: 1;
width: 1rpx;
justify-content: space-between;
}
.item-bottom .rules span {
width: 569rpx;
width: 450rpx;
overflow: hidden; //超出隐藏
white-space: nowrap; //不折行
text-overflow: ellipsis;
@ -364,7 +461,6 @@
.item-bottom .rules image {
width: 20rpx;
height: 20rpx;
margin-left: 68rpx;
margin-top: 15rpx;
}
@ -491,4 +587,93 @@
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;
}
}
}
.mian-dan{
width: 133.33rpx;
height: 104rpx;
}
</style>

Write Preview
Loading…
Cancel
Save