|
|
@@ -13,7 +13,7 @@
|
|
|
<view class="name">{{detail.actName}}</view>
|
|
|
<view class="time" v-if="detail.startTime">
|
|
|
有效期：{{detail.startTime.slice(0,10)}}-{{detail.endTime.slice(0,10)}}</view>
|
|
|
- <view class="time" v-else>有效期：</view>
|
|
|
+ <view class="time" v-else>有效期：领取后{{detail.endOffsetDays}}天</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
@@ -31,12 +31,19 @@
|
|
|
|
|
|
</view>
|
|
|
<view style="margin-bottom: 30rpx;">
|
|
|
- <view class="titleBox">
|
|
|
- <image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
|
|
|
- <view class="title">适用门店</view>
|
|
|
+ <view style="display: flex;justify-content: space-between;">
|
|
|
+ <view class="titleBox">
|
|
|
+ <image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
|
|
|
+ <view class="title">适用门店</view>
|
|
|
+ </view>
|
|
|
+ <view @click="spShopS" style="color: #666666;font-size: 24rpx;line-height: 24rpx;display: flex;">
|
|
|
+ {{detail.shopNames.split(',').length}}家门店通用
|
|
|
+ <image src="../../static/img/little_rightArrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
|
|
|
- <view v-for="(v,index) in detail.shopNames.split(',')">
|
|
|
+ <view v-for="(v,index) in detail.shopNames.split(',')" v-if="index<5">
|
|
|
<view class="content">{{v}}</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -77,9 +84,44 @@
|
|
|
|
|
|
<view style="height: 120rpx;"></view>
|
|
|
<view class="useBox" v-if="detail.usedState==0">
|
|
|
- <view class="useBtn">去使用</view>
|
|
|
+ <view class="useBtn" @click="hxHide">去使用</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 核销码 -->
|
|
|
+ <view class="authorizBox" v-if="hxShow" @click="hxclose">
|
|
|
+ <view class="hxBox" @click.stop="">
|
|
|
+ <view class="chBox">
|
|
|
+ <img src="../../static/timg/chahao.png" alt="" class="chahaoImg" @click="hxclose"/>
|
|
|
</view>
|
|
|
+ <view class="hxName">{{detail.actName}}</view>
|
|
|
+ <view class="hxTime" v-if="detail.startTime">
|
|
|
+ 有效期：{{detail.startTime.slice(0,10)}}-{{detail.endTime.slice(0,10)}}</view>
|
|
|
+ <view class="hxTime" v-else>有效期：领取后{{detail.endOffsetDays}}天</view>
|
|
|
+ <view style="display: flex;justify-content: center;padding-top:50rpx;">
|
|
|
+ <tki-qrcode cid="qrcode1" ref="qrcode" :val="detail.code" :size="400" :unit="unit"
|
|
|
+ :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
|
|
|
+ :loadMake="loadMake" :usingComponents="true" @result="qrR" />
|
|
|
|
|
|
+ </view>
|
|
|
+ <view class="couponCode">{{detail.couponCode}}</view>
|
|
|
+ <view class="couponCodeTs">请到店出示券码即可开始服务</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 适用门店 -->
|
|
|
+ <view class="authorizBox" v-if="spShopShow" @click="spShopHide">
|
|
|
+ <view class="syShopBox" @click.stop="">
|
|
|
+ <view class="chBox2">
|
|
|
+ <view class="syShopTitle">适用门店</view>
|
|
|
+ <img src="../../static/timg/chahao.png" alt="" class="chahaoImg" @click="spShopHide"/>
|
|
|
+ </view>
|
|
|
+ <view class="spShopLineBox">
|
|
|
+ <view class="spShopLine">连锁一号门店</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 手机号授权 -->
|
|
|
<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
|
|
|
@@ -97,7 +139,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ tkiQrcode,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
id: '',
|
|
|
@@ -108,6 +154,19 @@
|
|
|
ext:'',
|
|
|
wxOpenData:'',
|
|
|
authorizShow:false,
|
|
|
+ onval: true, // val值变化时自动重新生成二维码
|
|
|
+ loadMake: true, // 组件加载完成后自动生成二维码
|
|
|
+ val: '二维码', // 要生成的二维码值
|
|
|
+ unit: 'upx', // 单位
|
|
|
+ background: '#b4e9e2', // 背景色
|
|
|
+ foreground: '#309286', // 前景色
|
|
|
+ pdground: '#262637', // 角标色
|
|
|
+ icon: '', // 二维码图标
|
|
|
+ iconsize: 40, // 二维码图标大小
|
|
|
+ lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
|
|
+ src: '', // 二维码生成后的图片地址或base64
|
|
|
+ hxShow:false,
|
|
|
+ spShopShow:false,
|
|
|
}
|
|
|
},
|
|
|
onLoad(opt) {
|
|
|
@@ -138,6 +197,18 @@
|
|
|
//this.getData();
|
|
|
},
|
|
|
methods: {
|
|
|
+ spShopHide(){
|
|
|
+ this.spShopShow=false;
|
|
|
+ },
|
|
|
+ spShopS(){
|
|
|
+ this.spShopShow=true;
|
|
|
+ },
|
|
|
+ hxHide(){
|
|
|
+ this.hxShow=true;
|
|
|
+ },
|
|
|
+ hxclose(){
|
|
|
+ this.hxShow=false;
|
|
|
+ },
|
|
|
getData() {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
@@ -166,6 +237,74 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.syShopBox{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 80vh;
|
|
|
+ margin-top: 20vh;
|
|
|
+}
|
|
|
+.spShopLineBox{
|
|
|
+ height: calc(80vh - 90rpx);
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+.spShopLine{
|
|
|
+ color: #333333;font-size: 26rpx;
|
|
|
+ padding: 26rpx 30rpx;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
+.chBox2{
|
|
|
+ display: flex;justify-content: space-between;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+}
|
|
|
+.syShopTitle{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+}
|
|
|
+.hxBox{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 70vh;
|
|
|
+ margin-top: 30vh;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
|
+}
|
|
|
+.couponCode{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.couponCodeTs{
|
|
|
+ color: #666666;font-size: 24rpx;
|
|
|
+ text-align: center;padding-top: 10rpx;
|
|
|
+}
|
|
|
+.hxName{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 26rpx;
|
|
|
+}
|
|
|
+.hxTime{
|
|
|
+ color: #3C3C3C;font-size: 24rpx; text-align: center;padding-top: 16rpx;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+ border-bottom: 1px dashed #C3C3C3;
|
|
|
+}
|
|
|
+.chahaoImg{
|
|
|
+ width: 36rpx;height: 36rpx;
|
|
|
+}
|
|
|
+.chBox{
|
|
|
+ text-align: right;
|
|
|
+ padding-top: 33rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+}
|
|
|
.couponCodeBox{
|
|
|
display: flex;
|
|
|
padding-top: 15rpx;
|
