|
@@ -1,12 +1,13 @@
|
|
<template>
|
|
<template>
|
|
<view>
|
|
<view>
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券详情" leftIconSize="0"></u-navbar>
|
|
|
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券详情" leftIconSize="0">
|
|
|
|
+ </u-navbar>
|
|
<!-- #endif -->
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP-ALIPAY -->
|
|
<!-- #ifndef MP-ALIPAY -->
|
|
<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券详情"></u-navbar>
|
|
<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券详情"></u-navbar>
|
|
<!-- #endif -->
|
|
<!-- #endif -->
|
|
-
|
|
|
|
|
|
+
|
|
<view class="detail">
|
|
<view class="detail">
|
|
<!-- 优惠券信息 -->
|
|
<!-- 优惠券信息 -->
|
|
<view class="flex detail-item">
|
|
<view class="flex detail-item">
|
|
@@ -31,28 +32,40 @@
|
|
</view>
|
|
</view>
|
|
<view class="content-right flex">
|
|
<view class="content-right flex">
|
|
<view class="title ells-one">{{ info.title }}</view>
|
|
<view class="title ells-one">{{ info.title }}</view>
|
|
- <view class="desc">适用范围:{{ info.useAreaDesc || '-' }}</view>
|
|
|
|
- <view class="desc">使用期限:{{ $parseTime(info.validStart, '{y}.{m}.{d}') }} ~ {{ $parseTime(info.validEnd, '{y}.{m}.{d}') }}</view>
|
|
|
|
|
|
+ <view class="desc"
|
|
|
|
+ v-if="info.type && JSON.parse(info.type).value == 2 && info.useArea && JSON.parse(info.useArea).value == 1">
|
|
|
|
+ 适用范围:点击查看</view>
|
|
|
|
+ <view class="desc"
|
|
|
|
+ v-else-if="info.type && JSON.parse(info.type).value == 2 && info.useArea && JSON.parse(info.useArea).value == 2">
|
|
|
|
+ 适用范围:点击查看</view>
|
|
|
|
+ <view class="desc" v-else>适用范围:{{ info.useAreaDesc || '-' }}</view>
|
|
|
|
+ <view class="desc">使用期限:{{ $parseTime(info.validStart, '{y}.{m}.{d}') }} ~
|
|
|
|
+ {{ $parseTime(info.validEnd, '{y}.{m}.{d}') }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 间隔 -->
|
|
<!-- 间隔 -->
|
|
<view class="detail-interval flex">
|
|
<view class="detail-interval flex">
|
|
<view class="detail-interval__left"></view>
|
|
<view class="detail-interval__left"></view>
|
|
<view class="detail-interval__line"></view>
|
|
<view class="detail-interval__line"></view>
|
|
<view class="detail-interval__right"></view>
|
|
<view class="detail-interval__right"></view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 二维码 -->
|
|
<!-- 二维码 -->
|
|
- <view class="flex detail-code" v-if = "info && info.useArea && JSON.parse(info.useArea).value != 4">
|
|
|
|
|
|
+ <view class="flex detail-code" v-if="info && info.useArea && JSON.parse(info.useArea).value != 4">
|
|
<canvas style="width: 220px;height: 220px;" canvas-id="couponQrcode" id="couponQrcode"></canvas>
|
|
<canvas style="width: 220px;height: 220px;" canvas-id="couponQrcode" id="couponQrcode"></canvas>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+ <!-- 范围 -->
|
|
|
|
+ <view class="detail-explain" v-if="info && info.useArea && JSON.parse(info.useArea).value == 1">
|
|
|
|
+ <view class="txt">使用范围:</view>
|
|
|
|
+ <view class="txt detail">共{{info.channelTotal}}家门店可使用 <view class="detail-address" @click="toAddress">立即查看</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
<!-- 说明 -->
|
|
<!-- 说明 -->
|
|
<view class="detail-explain">
|
|
<view class="detail-explain">
|
|
<view class="txt">使用说明:</view>
|
|
<view class="txt">使用说明:</view>
|
|
- <view class="txt">{{ info.description }}</view>
|
|
|
|
|
|
+ <view class="txt detail">{{ info.description }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -92,6 +105,12 @@
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ //地址
|
|
|
|
+ toAddress() {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url:`/packagePrize/address/index?couponId=${this.info.couponId}`,
|
|
|
|
+ })
|
|
|
|
+ },
|
|
// 二维码生成工具
|
|
// 二维码生成工具
|
|
couponQrCode() {
|
|
couponQrCode() {
|
|
new qrCode('couponQrcode', {
|
|
new qrCode('couponQrcode', {
|
|
@@ -113,42 +132,42 @@
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
-
|
|
|
|
|
|
+
|
|
// 优惠券信息
|
|
// 优惠券信息
|
|
&-item {
|
|
&-item {
|
|
padding: 30rpx 0 30rpx;
|
|
padding: 30rpx 0 30rpx;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
-
|
|
|
|
|
|
+
|
|
.content {
|
|
.content {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 184rpx;
|
|
height: 184rpx;
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
-
|
|
|
|
|
|
+
|
|
&-left {
|
|
&-left {
|
|
width: 210rpx;
|
|
width: 210rpx;
|
|
height: 100%;
|
|
height: 100%;
|
|
margin-right: 20rpx;
|
|
margin-right: 20rpx;
|
|
-
|
|
|
|
|
|
+
|
|
image {
|
|
image {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.price {
|
|
.price {
|
|
position: absolute;
|
|
position: absolute;
|
|
color: #fff;
|
|
color: #fff;
|
|
-
|
|
|
|
|
|
+
|
|
text:first-child {
|
|
text:first-child {
|
|
font-size: 70rpx;
|
|
font-size: 70rpx;
|
|
padding-right: 20rpx;
|
|
padding-right: 20rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
text:last-child {
|
|
text:last-child {
|
|
font-size: 40rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
&-right {
|
|
&-right {
|
|
flex: 1;
|
|
flex: 1;
|
|
align-items: flex-start;
|
|
align-items: flex-start;
|
|
@@ -156,7 +175,7 @@
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
height: 100%;
|
|
padding: 24rpx 0;
|
|
padding: 24rpx 0;
|
|
-
|
|
|
|
|
|
+
|
|
.title {
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
line-height: 32rpx;
|
|
@@ -164,7 +183,7 @@
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.desc {
|
|
.desc {
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
line-height: 24rpx;
|
|
@@ -180,7 +199,7 @@
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 30rpx;
|
|
height: 30rpx;
|
|
margin-bottom: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
-
|
|
|
|
|
|
+
|
|
&__left {
|
|
&__left {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: -15rpx;
|
|
left: -15rpx;
|
|
@@ -189,13 +208,13 @@
|
|
background: #F9F7F5;
|
|
background: #F9F7F5;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
&__line {
|
|
&__line {
|
|
height: 1px;
|
|
height: 1px;
|
|
background-color: #F9F7F5;
|
|
background-color: #F9F7F5;
|
|
width: 90%;
|
|
width: 90%;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
&__right {
|
|
&__right {
|
|
position: absolute;
|
|
position: absolute;
|
|
right: -15rpx;
|
|
right: -15rpx;
|
|
@@ -205,19 +224,36 @@
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
// 二维码
|
|
// 二维码
|
|
&-code {
|
|
&-code {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 460rpx;
|
|
height: 460rpx;
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
// 说明
|
|
// 说明
|
|
&-explain {
|
|
&-explain {
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
padding: 0 34rpx 34rpx;
|
|
padding: 0 34rpx 34rpx;
|
|
|
|
|
|
|
|
+ .detail {
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
+
|
|
|
|
+ &-address {
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 150rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ color: #FE9E48;
|
|
|
|
+ border: 2rpx solid #FE9E48;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
.txt {
|
|
.txt {
|
|
line-height: 40rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|