543 lines
16 KiB
Vue
543 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<view class='tails_box' :style='"height:" + CenterCoupon.AllowOfflineWriteOff?"640rpx":"400rpx"'>
|
||
<view class='tails_couname'>
|
||
<text>
|
||
{{CenterCoupon.activity_name}}
|
||
<span style="font-size: 12rpx;margin-left:6rpx;color:#FF9933" v-if="CenterCoupon.activity_on_is_off === 1">(线下使用)</span>
|
||
</text>
|
||
</view>
|
||
<view class='tails_mon'><label style='font-size:30rpx;margin-right:8rpx;margin-left:25%'>{{__('￥')}}</label><label style='font-size:60rpx;margin-right: 24rpx;ont-weight:bold;'>{{CenterCoupon.voucher_price || CenterCoupon.activity_rule.voucher_price}}</label><label style='font-size:24rpx;color:#9B9B9B'>{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule.requirement.buy.subtotal )}}</label></view>
|
||
<view class='tails_time' style='width:100%'>{{sprintf(__('有效日期至：%s'), CenterCoupon.voucher_end_date || CenterCoupon.activity_endtime)}}
|
||
</view>
|
||
<view class='tails_time' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||
<image :src='CenterCoupon.WriteOffCodeUrl' style="width: 64%;height: 289rpx;"></image>
|
||
</view>
|
||
<view class='tails_time' style='font-size:24rpx;color:#9B9B9B ' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||
{{CenterCoupon.WriteOffCode}}
|
||
</view>
|
||
<view class='btn_box' v-if="!CenterCoupon.AllowOfflineWriteOff" style="height: 100rpx;">
|
||
<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenowWeixin" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL && CenterCoupon.CouponType==2" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenow" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" v-if="(CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_FINISHED || CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_CLOSED) && CenterCoupon.voucher_state_id != StateCode.VOUCHER_STATE_USED" :data-id="CenterCoupon.activity_id">{{__('已领完')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_USED">{{__('已使用')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_TIMEOUT">{{__('已过期')}}
|
||
</view>
|
||
<block v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff == false">
|
||
<view class='but-stl' style="margin-right: 86rpx;" v-if="(isOnLine)" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('立即使用')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" v-else :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" :data-writeoff_code="CenterCoupon.writeoff_code" @tap="Make">{{__('立即使用')}}
|
||
</view>
|
||
</block>
|
||
|
||
|
||
<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('在线使用')}}
|
||
</view>
|
||
|
||
|
||
<view :data-id="CenterCoupon.activity_id" :data-name="CenterCoupon.Name" @tap="shareBox" class='but-stl02' v-if="false">{{__('分享给好友')}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='img_box'>
|
||
<image src="https://static.lancerdt.com/xcxfile/appicon/coupon/partingLine.png" style="width:100%;height:100%;vertical-align:top;"></image>
|
||
</view>
|
||
<view class='tailfoli' style="overflow: hidden;">
|
||
<view class='btn_box' style='margin:9px auto 0 auto;overflow: hidden' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||
<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenowWeixin" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL && CenterCoupon.CouponType==2" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenow" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" v-if="(CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_FINISHED || CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_CLOSED) && CenterCoupon.voucher_state_id != StateCode.VOUCHER_STATE_USED" :data-id="CenterCoupon.activity_id">{{__('已领完')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_USED">{{__('已使用')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_TIMEOUT">{{__('已过期')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff == false" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('立即使用')}}
|
||
</view>
|
||
<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff " :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('在线使用')}}
|
||
</view>
|
||
<view class='but-stl02' :data-id="CenterCoupon.activity_id" @tap="shareBox" :data-name="CenterCoupon.Name" v-if="false">{{__('分享给好友')}}
|
||
</view>
|
||
<view class='btn_mx' v-if="CenterCoupon.AllowOfflineWriteOff">{{__('支持线下使用（在门店购物时，向店员出示此码抵扣）')}}</view>
|
||
</view>
|
||
<view class='tails_tox' v-if="!CenterCoupon.AllowOfflineWriteOff">
|
||
<view class='tail_fo1'>{{__('使用条件')}}</view>
|
||
<view class='tail_fo2'>
|
||
<view style="margin-bottom: 10rpx; ">1、{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule.requirement.buy.subtotal)}}</view>
|
||
<view>
|
||
<label style="margin-right: 57rpx;">2、{{CenterCoupon.store_name}}{{__('可用')}}</label>
|
||
<label v-if="CenterCoupon.activity_on_is_off === 0" style="color: #FFCA81;" :data-id="CenterCoupon.activity_id" @tap="usenow" :data-store_id="(CenterCoupon.store_id)">{{__('查看')}}</label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='tails_tox' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||
<view class='tail_fo5'>{{__('使用条件')}}</view>
|
||
<view class='tail_fo6'>
|
||
<view style="margin-bottom: 10rpx; ">1、{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule.requirement.buy.subtotal)}}</view>
|
||
<view><label style="margin-right: 57rpx;">2、{{CenterCoupon.store_name}}{{__('可用')}}</label><label style="color: #FFCA81;" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('查看')}}</label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style='width:100%' v-if="CenterCoupon.Description != ''&& CenterCoupon.Description != null || CenterCoupon.AllowOfflineWriteOff">
|
||
<view class='tails_tox' style="width: 85%;padding-bottom: 60rpx;">
|
||
<view class='tail_fo1' style='color:#fff '>{{__('使用说明')}}</view>
|
||
<view class='tail_fo3' style='color:#fff;height:43rpx' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||
{{__('支持线下使用，领取后向店员展示优惠券详情')}}
|
||
</view>
|
||
<rich-text style='color:#fff;white-space: pre-line;font-size:22rpx;word-break:break-all' v-if='CenterCoupon.Description' nodes='CenterCoupon.Description'></rich-text>
|
||
</view>
|
||
</view>
|
||
<template is="shareMskTpl" data="PageQRCodeInfo" />
|
||
|
||
<view :class="bannerShow ? 'canvas' : 'hide'" @click="setHide">
|
||
<canvas class="m-canvas" canvas-id="qrcode" style="width: 200px;height: 200px;" />
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $ from "../../helpers/util";
|
||
import uniQrcode from '@/components/uni-qrcode/uni-qrcode.vue';
|
||
|
||
import uQRCode from '@/components/uni-qrcode/uqrcode.js';
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex'
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
options: {},
|
||
CenterCoupon: {
|
||
activity_rule: {
|
||
requirement: {
|
||
buy: {}
|
||
}
|
||
}
|
||
},
|
||
cid: "",
|
||
couponItemId: "",
|
||
bannerShow: false,
|
||
isOnLine: false, //是否线上优惠券
|
||
};
|
||
},
|
||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||
onLoad: function(options) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.__('优惠券详情')
|
||
});
|
||
|
||
this.setData({
|
||
cid: options.cid,
|
||
couponItemId: options.couponItemId
|
||
});
|
||
|
||
var that = this;
|
||
that.GetCouponInfo()
|
||
|
||
/*
|
||
this.forceUserInfo(function(user) {
|
||
if (user) {
|
||
that.GetCouponInfo()
|
||
}
|
||
});
|
||
*/
|
||
},
|
||
methods: {
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
|
||
GetCouponInfo: function(e) {
|
||
var params = {
|
||
activity_id: this.cid,
|
||
user_voucher_id: this.couponItemId
|
||
},
|
||
that = this;
|
||
|
||
|
||
that.$.request({
|
||
url: this.Config.URL.user.voucher_get,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
if (status == 200) {
|
||
data.AllowOfflineWriteOff = false;
|
||
that.setData({
|
||
CenterCoupon: data
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
onGotUserInfo: function(e) {
|
||
if (null != e.detail.userInfo) {
|
||
var a = {
|
||
Photo: e.detail.userInfo.avatarUrl,
|
||
NickName: e.detail.userInfo.nickName,
|
||
UserName: app.globalData.UserInfo.UserName
|
||
};
|
||
$.xsr($.makeUrl(userapi.UpdateUserPhotoAndNickName, a), function(e) {
|
||
//console.log("个人信息：", e)
|
||
}), app.imageUrl = e.detail.userInfo.avatarUrl, app.nickName = e.detail.userInfo.nickName, app.authorize = true, this.shareQRCode()
|
||
}
|
||
},
|
||
shareQRCode: function(e) {
|
||
//console.log("2：", this.cid);
|
||
var a = this,
|
||
o = {
|
||
vendorId: app.globalData.VendorInfo.Id,
|
||
userId: app.globalData.UserInfo.Id,
|
||
couponId: this.cid
|
||
};
|
||
$.xsr($.makeUrl(userapi.QRCouponCodePoster, o), function(e) {
|
||
//console.log("图片", e), a.setData({PageQRCodeInfo: {Path: e.Info, IsShare: true, IsShareBox: false, IsJT: true}})
|
||
})
|
||
},
|
||
showCodeImg: function() {
|
||
wx.previewImage({
|
||
current: this.PageQRCodeInfo.Path,
|
||
urls: [this.PageQRCodeInfo.Path]
|
||
})
|
||
},
|
||
saveImg: function() {
|
||
var a = this;
|
||
$.loading(), wx.downloadFile({
|
||
url: this.PageQRCodeInfo.Path,
|
||
success: function(e) {
|
||
$.hideloading(), wx.saveImageToPhotosAlbum({
|
||
filePath: e.tempFilePath,
|
||
success: function() {
|
||
a.setData({
|
||
PageQRCodeInfo: {
|
||
Path: "",
|
||
IsShare: false,
|
||
IsShareBox: false,
|
||
IsJT: false
|
||
}
|
||
}), $.alert("保存图片成功！")
|
||
},
|
||
fail: function(e) {
|
||
$.hideloading()
|
||
}
|
||
})
|
||
},
|
||
fail: function(e) {
|
||
$.hideloading()
|
||
}
|
||
})
|
||
},
|
||
cancelShare: function() {
|
||
this.setData({
|
||
PageQRCodeInfo: {
|
||
Path: "",
|
||
IsShare: false,
|
||
IsShareBox: false,
|
||
IsJT: false
|
||
}
|
||
})
|
||
},
|
||
usenow: function(e) {
|
||
let that = this;
|
||
var t = e.currentTarget.dataset.store_id;
|
||
that.$.redirectTo({
|
||
url: "/member/product/coupon?store_id=" + t
|
||
})
|
||
},
|
||
|
||
receivenow: function(e) {
|
||
let that = this;
|
||
that.getCoupon(e.currentTarget.dataset.id)
|
||
},
|
||
|
||
setHide: function() {
|
||
this.setData({
|
||
bannerShow: false
|
||
});
|
||
},
|
||
|
||
Make: function(e) {
|
||
var that = this;
|
||
|
||
that.setData({
|
||
bannerShow: true
|
||
});
|
||
let writeoff_code = e.currentTarget.dataset.writeoff_code;
|
||
if (writeoff_code != null && writeoff_code != '') {
|
||
that.couponItemId = writeoff_code;
|
||
}
|
||
|
||
uQRCode.make({
|
||
canvasId: 'qrcode',
|
||
componentInstance: this,
|
||
text: that.couponItemId,
|
||
size: 200,
|
||
margin: 10,
|
||
backgroundColor: '#ffffff',
|
||
foregroundColor: '#000000',
|
||
fileType: 'jpg',
|
||
// correctLevel: uQRCode.errorCorrectLevel.H,
|
||
success: res => {
|
||
// console.log(res);
|
||
},
|
||
fail: error => {
|
||
console.log(error);
|
||
}
|
||
});
|
||
},
|
||
getCoupon: function(t) {
|
||
let that = this;
|
||
var params = {
|
||
activity_id: t,
|
||
user_is_new: 0
|
||
};
|
||
|
||
this.forceUserInfo((user) => {
|
||
if (user) {
|
||
$.request({
|
||
url: this.Config.URL.user.voucher_add,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
if (200 == status) {
|
||
that.getCouponlist();
|
||
|
||
that.$.confirm(that.__("领取成功!,去消费"), function(a) {
|
||
if (a.confirm) {
|
||
that.$.navigateTo({
|
||
url: "/pagesub/index/store?store_id=" + that.CenterCoupon.store_id
|
||
})
|
||
}
|
||
|
||
});
|
||
} else {
|
||
$.alert(msg);
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
|
||
|
||
/*
|
||
t && $.clearxsr($.makeUrl(userapi.UserReceiveCoupon, params), function (t) {
|
||
0 == t.Code ? (that.setData({isCancelSuccess: false, mskType: 2, Coupons: t.Info}), wx.showToast({
|
||
title: "领取成功！",
|
||
icon: "none"
|
||
})) : wx.showToast({title: t.Msg, icon: "none"})
|
||
})
|
||
|
||
*/
|
||
},
|
||
shareBox: function() {
|
||
this.setData({
|
||
PageQRCodeInfo: {
|
||
Path: "",
|
||
IsShare: true,
|
||
IsShareBox: true,
|
||
IsJT: false
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/_variables";
|
||
|
||
/* pages/Receivetails/Receivetails.wxss */
|
||
page {
|
||
background: #DB384C
|
||
}
|
||
|
||
.tails_box {
|
||
width: 94%;
|
||
/*height: 345rpx;*/
|
||
background: #fff;
|
||
margin: 70rpx auto 0 auto;
|
||
position: relative;
|
||
padding-top: 18rpx;
|
||
border-top-left-radius: 11px;
|
||
border-top-right-radius: 11px;
|
||
}
|
||
|
||
.tails_logo {
|
||
width: 112rpx;
|
||
position: absolute;
|
||
top: -14%;
|
||
left: 42%;
|
||
border-radius: 50%;
|
||
overflow: hidden
|
||
}
|
||
|
||
.tails_shopname {
|
||
width: 100%;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
text-align: center
|
||
}
|
||
|
||
.tails_couname {
|
||
width: 100%;
|
||
color: #DB384C;
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
margin-top: 10rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tails_mon {
|
||
width: 100%;
|
||
color: #DB384C;
|
||
text-align: center;
|
||
margin-top: 40rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.tails_but {
|
||
width: 54%;
|
||
margin: 43rpx auto 0 auto;
|
||
height: 50rpx;
|
||
background: #fff;
|
||
border-radius: 54rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
line-height: 50rpx;
|
||
color: #DB384C
|
||
}
|
||
|
||
.tails_time {
|
||
width: 64%;
|
||
/*margin: 25rpx auto 0 auto;*/
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: #DB384C
|
||
}
|
||
|
||
.tails_tox {
|
||
width: 89%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.tail_fo1 {
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
line-height: 62rpx
|
||
}
|
||
|
||
.tail_fo5 {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
padding-left: 20rpx;
|
||
line-height: 62rpx
|
||
}
|
||
|
||
.tail_fo2 {
|
||
width: 100%;
|
||
font-size: 24rpx;
|
||
color: #9B9B9B;
|
||
border-radius: 10rpx
|
||
}
|
||
|
||
.tail_fo6 {
|
||
width: 100%;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
padding-left: 20rpx;
|
||
border-radius: 10rpx
|
||
}
|
||
|
||
.tail_fo3 {
|
||
width: 100%;
|
||
height: 137rpx;
|
||
font-size: 22rpx;
|
||
border-radius: 10rpx
|
||
}
|
||
|
||
.but-stl {
|
||
width: 42%;
|
||
float: left;
|
||
text-align: center;
|
||
height: 61rpx;
|
||
border-radius: 50rpx;
|
||
border: 1px solid #fff;
|
||
background: #DB384C;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
line-height: 61rpx;
|
||
}
|
||
|
||
.but-stl02 {
|
||
width: 42%;
|
||
float: left;
|
||
text-align: center;
|
||
height: 61rpx;
|
||
border-radius: 50rpx;
|
||
border: 1px solid #DB384C;
|
||
background: #fff;
|
||
font-size: 26rpx;
|
||
color: #DB384C;
|
||
line-height: 61rpx;
|
||
}
|
||
|
||
.tailfoli {
|
||
width: 94%;
|
||
height: 88px;
|
||
background: #fff;
|
||
border-bottom-left-radius: 11px;
|
||
border-bottom-right-radius: 11px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.btn_box {
|
||
width: 88%;
|
||
margin: 22px auto 0 auto;
|
||
wxcs_style_margin: 22px auto 0 auto;
|
||
/*height: 100rpx;*/
|
||
display: flex;
|
||
}
|
||
|
||
.img_box {
|
||
width: 94%;
|
||
height: 72rpx;
|
||
margin: 0 auto
|
||
}
|
||
|
||
.btn_mx {
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: #9B9B9B;
|
||
margin: 88rpx 0 0
|
||
}
|
||
|
||
.m-canvas {
|
||
position: absolute !important;
|
||
/*重要的一步是设置绝对定位*/
|
||
margin: auto;
|
||
/*将四周边距都设为auto自动*/
|
||
left: 0;
|
||
/*离包含元素的距离均设为零*/
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.canvas {
|
||
background: rgba(0, 0, 0, 0.6);
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
}
|
||
</style> |