You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
413 lines
7.0 KiB
413 lines
7.0 KiB
<template>
|
|
<view class="couponDetails" :style="{height:phoneHight}">
|
|
<far-bottom></far-bottom>
|
|
<view class="coupons">
|
|
<view class="couponsImg">
|
|
<image :src="detailInfo.logo" />
|
|
</view>
|
|
<view class="couponsTitle">
|
|
<view>
|
|
<span>{{ detailInfo.storename }}</span>
|
|
</view>
|
|
<view>
|
|
<span>{{ detailInfo.title }}</span>
|
|
</view>
|
|
<view>
|
|
<span>有效期至{{ detailInfo.endtime }}</span>
|
|
</view>
|
|
<view>
|
|
<span>{{ detailInfo.sub_title }}</span>
|
|
</view>
|
|
</view>
|
|
<view class="couponsFloat">
|
|
<view></view>
|
|
<view></view>
|
|
</view>
|
|
<view class="couponsBody">
|
|
<view class="qrcodeImg">
|
|
<image :src="detailInfo.url" />
|
|
</view>
|
|
<view class="qrCodes" v-if="detailInfo.code_list.length !== 0">
|
|
<view class="qrCodesPackage">
|
|
<view v-for="(item, index) in detailInfo.code_list">
|
|
<span>
|
|
消费码{{ index + 1 }}：
|
|
<span>{{ item }}</span>
|
|
</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="navButton" v-if="detailInfo.is_pwd == 1" @click="goOrderWrite">
|
|
<span>密码核销</span>
|
|
<image :src="imgfixUrls + 'merchant/right.svg'" />
|
|
</view>
|
|
<view class="navButton1" v-if="detailInfo.is_pwd == 1" @click="descriptionShow = true">
|
|
<span>使用说明</span>
|
|
<image :src="imgfixUrls + 'merchant/right.svg'" />
|
|
</view>
|
|
<view class="navButton" v-if="detailInfo.is_pwd == 0" @click="descriptionShow = true">
|
|
<span>使用说明</span>
|
|
<image :src="imgfixUrls + 'merchant/right.svg'" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 填充层 -->
|
|
<view class="full"></view>
|
|
<!-- 填充层 -->
|
|
|
|
<PopManager :show="descriptionShow" @clickmask="closeDescription">
|
|
<view class="descriptionView">
|
|
<view class="descriptionPackage">
|
|
<view class="descriptionTitle"><span>使用说明</span></view>
|
|
<scroll-view class="descriptionBody" scroll-y>
|
|
<rich-text :nodes="detailInfo.description" class="desText"></rich-text>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</PopManager>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PopManager from '@/components/template/PopManager';
|
|
|
|
import App from '@/common/js/app.js';
|
|
|
|
// #ifdef H5
|
|
import wxApi from '@/common/js/wxApi.js';
|
|
// #endif
|
|
|
|
export default {
|
|
components: {
|
|
PopManager
|
|
},
|
|
data() {
|
|
return {
|
|
phoneHight: null,
|
|
id: null,
|
|
detailInfo: {},
|
|
descriptionShow: false,
|
|
codeShow: false,
|
|
verkey: '',
|
|
order_id: null,
|
|
};
|
|
},
|
|
onLoad: function(option) {
|
|
let _this = this;
|
|
_this.id = option.id;
|
|
_this.order_id = option.order_id;
|
|
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
_this.phoneHight = res.windowHeight + 'px';
|
|
}
|
|
});
|
|
_this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
let _this = this;
|
|
_this.getDetailInfo();
|
|
},
|
|
goOrderWrite() {
|
|
let _this = this
|
|
App.navigationTo({
|
|
url: 'pages/mainPages/orderWrite/orderWrite?plugin=coupon&id=' + _this.order_id
|
|
})
|
|
},
|
|
closeCode() {
|
|
let _this = this;
|
|
_this.codeShow = false;
|
|
},
|
|
// 获取优惠卷详细信息
|
|
getDetailInfo() {
|
|
let _this = this;
|
|
let data = {
|
|
id: _this.id,
|
|
order_id: _this.order_id
|
|
};
|
|
App._post_form('&p=wlcoupon&do=detail', data, res => {
|
|
_this.detailInfo = res.data;
|
|
});
|
|
},
|
|
closeDescription() {
|
|
let _this = this;
|
|
_this.descriptionShow = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.codeView {
|
|
width: 600upx;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.codeViewPackage {
|
|
padding: 30upx;
|
|
}
|
|
|
|
.codeInput {
|
|
padding: 30upx;
|
|
background: rgba(248, 248, 248, 1);
|
|
border-radius: 10upx;
|
|
|
|
>input {
|
|
font-size: 24upx;
|
|
lor: rgba(51, 51, 51, 1);
|
|
}
|
|
}
|
|
|
|
.codeButton {
|
|
height: 80upx;
|
|
width: 400upx;
|
|
margin: 20upx auto 0 auto;
|
|
background: rgba(255, 68, 68, 1);
|
|
border-radius: 45upx 45upx 45upx 45upx;
|
|
text-align: center;
|
|
|
|
>span {
|
|
line-height: 80upx;
|
|
font-size: 28upx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
}
|
|
|
|
.desText {
|
|
font-size: 24upx;
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
|
|
.descriptionBody {
|
|
margin-top: 20upx;
|
|
height: 400upx;
|
|
}
|
|
|
|
.descriptionTitle {
|
|
text-align: center;
|
|
|
|
>span {
|
|
font-size: 30upx;
|
|
|
|
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
}
|
|
|
|
.descriptionView {
|
|
width: 600upx;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.descriptionPackage {
|
|
padding: 30upx;
|
|
}
|
|
|
|
page {
|
|
background: rgba(66, 71, 74, 1);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.couponDetails {
|
|
border: 1upx solid rgba(0, 0, 0, 0);
|
|
font-size: 0;
|
|
background: rgba(66, 71, 74, 1);
|
|
}
|
|
|
|
.coupons {
|
|
margin: 70upx auto 0 auto;
|
|
width: 656upx;
|
|
background: rgba(255, 255, 255, 1);
|
|
border-radius: 10upx;
|
|
}
|
|
|
|
.couponsImg {
|
|
margin: auto;
|
|
width: 80upx;
|
|
height: 80upx;
|
|
border: 4upx solid rgba(255, 255, 255, 1);
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
bottom: 40upx;
|
|
|
|
>image {
|
|
width: 80upx;
|
|
height: 80upx;
|
|
}
|
|
}
|
|
|
|
.couponsTitle {
|
|
padding-bottom: 45upx;
|
|
border-bottom: 1upx dashed rgba(238, 238, 238, 1);
|
|
|
|
>view:nth-child(1) {
|
|
>span {
|
|
font-size: 24upx;
|
|
|
|
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
margin-top: 30upx;
|
|
|
|
>span {
|
|
font-size: 56upx;
|
|
|
|
font-weight: bold;
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
}
|
|
|
|
>view:nth-child(3) {
|
|
margin-top: 30upx;
|
|
|
|
>span {
|
|
font-size: 24upx;
|
|
|
|
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
}
|
|
|
|
>view:nth-child(4) {
|
|
margin-top: 30upx;
|
|
|
|
>span {
|
|
font-size: 35upx;
|
|
|
|
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
}
|
|
|
|
>view {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.couponsFloat {
|
|
position: relative;
|
|
bottom: 15upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
>view:nth-child(1) {
|
|
margin-left: -15upx;
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
margin-right: -15upx;
|
|
}
|
|
|
|
>view {
|
|
width: 30upx;
|
|
height: 30upx;
|
|
background: #42474a;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.qrcodeImg {
|
|
margin: 20upx auto 0 auto;
|
|
width: 342upx;
|
|
height: 342upx;
|
|
border-radius: 10upx;
|
|
overflow: hidden;
|
|
|
|
>image {
|
|
width: 342upx;
|
|
height: 342upx;
|
|
}
|
|
}
|
|
|
|
.qrCodes {
|
|
margin: 10upx auto 0 auto;
|
|
width: 330upx;
|
|
background: rgba(248, 248, 248, 1);
|
|
border-radius: 10upx;
|
|
}
|
|
|
|
.qrCodesPackage {
|
|
padding: 30upx 40upx;
|
|
|
|
>view:nth-child(1) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
>view {
|
|
margin-top: 25upx;
|
|
|
|
>span {
|
|
font-size: 24upx;
|
|
|
|
|
|
color: rgba(151, 149, 159, 1);
|
|
|
|
>span {
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navButton1 {
|
|
border-top: 1upx solid rgba(238, 238, 238, 1);
|
|
height: 95upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 30upx;
|
|
|
|
>span {
|
|
line-height: 95upx;
|
|
vertical-align: middle;
|
|
font-size: 28upx;
|
|
|
|
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
|
|
>image {
|
|
margin-top: 30upx;
|
|
vertical-align: middle;
|
|
width: 10px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
.navButton {
|
|
margin-top: 40upx;
|
|
border-top: 1upx solid rgba(238, 238, 238, 1);
|
|
height: 95upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 30upx;
|
|
|
|
>span {
|
|
line-height: 95upx;
|
|
vertical-align: middle;
|
|
font-size: 28upx;
|
|
|
|
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
|
|
>image {
|
|
margin-top: 30upx;
|
|
vertical-align: middle;
|
|
width: 10px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
.full {
|
|
width: 750upx;
|
|
height: 75upx;
|
|
}
|
|
</style>
|
|
|