Browse Source

优惠券核销

dev_delivery
jiazhipeng 4 weeks ago
parent
commit
0792ad7916
  1. 72
      subPackages/pointsMall/index.vue
  2. 2
      subPackages/techan/index.vue
  3. 223
      subPackages/user/coupon.vue

72
subPackages/pointsMall/index.vue

@ -73,6 +73,30 @@
<text style="height: 100%;">搜索</text>
</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)">
@ -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>

2
subPackages/techan/index.vue

@ -40,7 +40,7 @@
</view>
</view>
<view class="right-box">
<view :class="['search-container',methodPopShow?'methodShow':'']">
<view :class="['search-container',methodPopShow?'methodShow':'']">
<view class="common-view" @click="showMethodPopup()">
<text :class="[delivery_method.length>0?'active-search-item':'']">配送方式</text>
<view :class='[methodPopShow?"delivery-active":"delivery-no"]'>

223
subPackages/user/coupon.vue

@ -13,15 +13,21 @@
<!-- 分割线上部分 -->
<view class="item-top">
<view class="top-left">
<view class="price price-before" v-if="item.activity.discount_type == 'pricebreak'">
<span>{{(item.activity.money) / 100}}</span>
</view>
<view class="price" v-else>
<span>{{item.activity.fold}}</span>
</view>
<view class="subtitle">
{{item.activity.mini_money/100}}元可用
</view>
<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>
<view class="price" v-else>
<span>{{item.activity.fold}}</span>
</view>
<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>

Loading…
Cancel
Save