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.
451 lines
15 KiB
451 lines
15 KiB
<template>
|
|
<view class="container flex flex-col">
|
|
<block v-if="isload">
|
|
<view class="discount-detail flex1 flex-col">
|
|
<block v-if="record.id">
|
|
<view class="discount-detail__hd flex">
|
|
<view class="discount-detail__hd-left" :style="{color:t('color1')}" v-if="record.type==1">{{record.type==1?'券':(record.type==2?'礼':(record.type==3?'次':(record.type==4?'抵':(record.type==5?'餐':''))))}}</view>
|
|
<view class="discount-detail__hd-right">
|
|
<view class="discount-detail__hd-title">{{record.couponname}}</view>
|
|
<view class="discount-detail__hd-tips">到店使用时请出示核销码进行核销</view>
|
|
</view>
|
|
</view>
|
|
<view class="discount-detail__bd flex1">
|
|
<view class="discount-detail__bd-code" v-if="record.status==0 && record.hexiaoqr">
|
|
<image class="code-img" :src="record.hexiaoqr" @tap="previewImage" :data-url="record.hexiaoqr"></image>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex" v-if="record.type==1">
|
|
<text class="item-hd">面额</text>
|
|
<text class="item-bd">{{record.money}}元</text>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex" v-if="coupon.bid!=0">
|
|
<text class="item-hd">适用商家</text>
|
|
<text class="item-bd">{{coupon.bname}}</text>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">类型</text>
|
|
<text class="item-bd">{{record.type==1?'代金券':(record.type==2?'礼品券':(record.type==3?'计次券':(record.type==4?'运费抵扣券':(record.type==5?'餐饮券':''))))}}{{coupon.isgive == 1?'（可赠送）':''}}</text>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">使用条件</text>
|
|
<text class="item-bd">{{record.minprice > 0?'满'+record.minprice+'元可用':'无门槛'}}</text>
|
|
</view>
|
|
<block v-if="record.type==3">
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">共计次数</text>
|
|
<text class="item-bd">{{record.limit_count}}</text>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">已使用次数</text>
|
|
<text class="item-bd">{{record.used_count}}</text>
|
|
</view>
|
|
<block v-if="record.limit_perday>0">
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">每天限制次数</text>
|
|
<text class="item-bd">{{record.limit_perday}}</text>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">领取时间</text>
|
|
<text class="item-bd">{{record.createtime}}</text>
|
|
</view>
|
|
<block v-if="record.status==1">
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">使用时间</text>
|
|
<text class="item-bd">{{record.usetime}}</text>
|
|
</view>
|
|
</block>
|
|
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">有效期</text>
|
|
<view class="item-bd">
|
|
<view>{{record.starttime}} 至</view>
|
|
<view>{{record.endtime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">使用说明</text>
|
|
<view class="item-bd">{{coupon.usetips || "无"}}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="discount-detail__hd flex al-item-center">
|
|
<view class="discount-detail__hd-left" :style="{color:t('color1')}" v-if="coupon.type==1">{{coupon.type==1?'券':(coupon.type==2?'礼':(coupon.type==3?'次':(coupon.type==4?'抵':(coupon.type==5?'餐':''))))}}</view>
|
|
<view class="discount-detail__hd-right">
|
|
<view class="discount-detail__hd-title">{{coupon.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="discount-detail__bd flex1">
|
|
<view class="discount-detail__bd-item flex" v-if="coupon.type==1">
|
|
<text class="item-hd">面额</text>
|
|
<text class="item-bd">{{coupon.money}}元</text>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex" v-if="coupon.bid!=0">
|
|
<text class="item-hd">适用商家</text>
|
|
<text class="item-bd">{{coupon.bname}}</text>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">类型</text>
|
|
<text class="item-bd">{{coupon.type==1?'代金券':(coupon.type==2?'礼品券':(coupon.type==3?'计次券':(coupon.type==4?'运费抵扣券':(coupon.type==5?'餐饮券':''))))}}{{coupon.isgive == 1?'（可赠送）':''}}</text>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">使用条件</text>
|
|
<text class="item-bd">{{coupon.minprice > 0 ? '满'+coupon.minprice+'元可用' : '无门槛'}}</text>
|
|
</view>
|
|
<block v-if="coupon.type==3">
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">共计次数</text>
|
|
<text class="item-bd">{{coupon.limit_count}}次</text>
|
|
</view>
|
|
<block v-if="coupon.limit_perday>0">
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">每天限制使用</text>
|
|
<text class="item-bd">{{coupon.limit_perday}}次</text>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
<block v-if="coupon.price>0">
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">所需金额</text>
|
|
<text class="item-bd">￥{{coupon.price}}</text>
|
|
</view>
|
|
</block>
|
|
<block v-if="coupon.score>0">
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">所需{{t('积分')}}</text>
|
|
<text class="item-bd">{{coupon.score}}{{t('积分')}}</text>
|
|
</view>
|
|
</block>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">活动时间</text>
|
|
<view class="item-bd">
|
|
<view>{{coupon.starttime}} 至</view>
|
|
<view>{{coupon.endtime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">有效日期</text>
|
|
<block v-if="coupon.yxqtype==1">
|
|
<view class="item-bd">
|
|
<view>{{coupon.yxqtime.substring(0,coupon.yxqtime.indexOf('~'))}} 至</view>
|
|
<view>{{coupon.yxqtime.substring(coupon.yxqtime.indexOf('~')+1,coupon.yxqtime.length)}}</view>
|
|
</view>
|
|
</block>
|
|
<block v-else-if="coupon.yxqtype==2">
|
|
<text class="item-bd">领取后{{coupon.yxqdate}}天内有效</text>
|
|
</block>
|
|
<block v-else-if="coupon.yxqtype==3">
|
|
<text class="item-bd">领取后{{coupon.yxqdate}}天内有效（次日0点生效）</text>
|
|
</block>
|
|
</view>
|
|
<view class="discount-detail__bd-item flex">
|
|
<text class="item-hd">使用说明</text>
|
|
<view class="item-bd">{{coupon.usetips || '无'}}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view v-if="!record.id" class="discount-detail__ft" @tap="getcoupon" :data-id="coupon.id" :data-price="coupon.price" :data-score="coupon.score" :data-canget="coupon.canget">{{coupon.price>0?'立即购买':(coupon.score>0?'立即兑换':(coupon.canget?'立即领取':'立即使用'))}}</view>
|
|
<block v-if="mid == record.mid">
|
|
<view v-if="record.id && coupon.type==1 && record.status==0 && coupon.bid==0" class="discount-detail__ft" @tap="goto" :data-url="'/pages/maidan/pay?cprid=' + record.id">立即使用</view>
|
|
<block v-if="record.id && record.status==0 && coupon.isgive == 1">
|
|
<view class="discount-detail__ft" @tap="shareapp" v-if="getplatform() == 'app'" :data-id="record.id">转赠好友</view>
|
|
<view class="discount-detail__ft" @tap="sharemp" v-else-if="getplatform() == 'mp'" :data-id="record.id">转赠好友</view>
|
|
<view class="discount-detail__ft" @tap="sharemp" v-else-if="getplatform() == 'h5'" :data-id="record.id">转赠好友</view>
|
|
<button class="discount-detail__ft" open-type="share" v-else :data-id="record.id">转赠好友</button>
|
|
</block>
|
|
</block>
|
|
<block v-else>
|
|
<view v-if="coupon.isgive == 1 && opt.pid == record.mid && opt.pid > 0" class="discount-detail__ft" @tap="receiveCoupon" :style="{background:'linear-gradient(to bottom,'+t('color2')+' 0%,rgba('+t('color2rgb')+',0.8) 100%)'}" :data-id="record.id">立即领取</view>
|
|
</block>
|
|
</view>
|
|
|
|
<view class='return-tips' @tap="goto" data-url='/pages/index/index'><text>返回首页</text></view>
|
|
</block>
|
|
<loading v-if="loading"></loading>
|
|
<dp-tabbar :opt="opt"></dp-tabbar>
|
|
<popmsg ref="popmsg"></popmsg>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
opt:{},
|
|
loading:false,
|
|
isload: false,
|
|
menuindex:-1,
|
|
pre_url:app.globalData.pre_url,
|
|
|
|
textset:{},
|
|
record:{},
|
|
coupon:{},
|
|
shareTitle:'',
|
|
sharePic:'',
|
|
shareDesc:'',
|
|
shareLink:'',
|
|
mid:0
|
|
}
|
|
},
|
|
|
|
onLoad: function (opt) {
|
|
this.opt = app.getopts(opt);
|
|
this.getdata();
|
|
},
|
|
onPullDownRefresh: function () {
|
|
this.getdata();
|
|
},
|
|
onShareAppMessage:function(){
|
|
return this._sharewx({title:this.shareTitle,pic:this.sharePic,desc:this.shareDesc,link:this.shareLink});
|
|
},
|
|
onShareTimeline:function(){
|
|
var sharewxdata = this._sharewx({title:this.shareTitle,pic:this.sharePic,desc:this.shareDesc,link:this.shareLink});
|
|
var query = (sharewxdata.path).split('?')[1];
|
|
console.log(sharewxdata)
|
|
console.log(query)
|
|
return {
|
|
title: sharewxdata.title,
|
|
imageUrl: sharewxdata.imageUrl,
|
|
query: query
|
|
}
|
|
},
|
|
methods: {
|
|
getdata: function () {
|
|
var that = this;
|
|
that.loading = true;
|
|
app.get('ApiCoupon/coupondetail', {rid: that.opt.rid,id: that.opt.id}, function (res) {
|
|
that.loading = false;
|
|
that.textset = app.globalData.textset;
|
|
uni.setNavigationBarTitle({
|
|
title: that.t('优惠券') + '详情'
|
|
});
|
|
if(!res.coupon.id) {
|
|
app.alert(that.t('优惠券')+'不存在');return;
|
|
}
|
|
that.mid = app.globalData.mid;
|
|
that.record = res.record;
|
|
that.coupon = res.coupon;
|
|
that.shareTitle = '送你一张优惠券，点击领取';
|
|
that.shareDesc = that.coupon.name;
|
|
that.sharePic = app.globalData.initdata.logo;
|
|
that.shareLink = app.globalData.pre_url +'/h5/'+app.globalData.aid+'.html#/pages/coupon/coupondetail?scene=id_'+that.coupon.id+'-pid_' + app.globalData.mid+'-rid_' + that.record.id;
|
|
that.loaded({title:that.shareTitle,pic:that.sharePic,desc:that.shareDesc,link:that.shareLink});
|
|
});
|
|
},
|
|
getcoupon: function (e) {
|
|
var that = this;
|
|
var datalist = that.datalist;
|
|
var id = e.currentTarget.dataset.id;
|
|
var score = parseInt(e.currentTarget.dataset.score);
|
|
var price = e.currentTarget.dataset.price;
|
|
var canget = e.currentTarget.dataset.canget;
|
|
|
|
if (price > 0) {
|
|
app.post('ApiCoupon/buycoupon', {id: id}, function (res) {
|
|
if(res.status == 0) {
|
|
app.error(res.msg);
|
|
} else {
|
|
app.goto('/pages/pay/pay?id=' + res.payorderid);
|
|
}
|
|
})
|
|
return;
|
|
}
|
|
var key = e.currentTarget.dataset.key;
|
|
if (score > 0) {
|
|
app.confirm('确定要消耗' + score + '' + that.t('积分') + '兑换吗?', function () {
|
|
app.showLoading('兑换中');
|
|
app.post('ApiCoupon/getcoupon', {id: id}, function (data) {
|
|
app.showLoading(false);
|
|
if (data.status == 0) {
|
|
app.error(data.msg);
|
|
} else {
|
|
app.success(data.msg);
|
|
datalist[key]['haveget'] = data.haveget;
|
|
that.datalist = datalist;
|
|
}
|
|
});
|
|
});
|
|
} else if(!canget) {
|
|
uni.navigateTo({
|
|
url:'/pages/shop/prolist?cpid='+ id
|
|
})
|
|
} else {
|
|
app.showLoading('领取中');
|
|
app.post('ApiCoupon/getcoupon', {id: id}, function (data) {
|
|
app.showLoading(false);
|
|
if (data.status == 0) {
|
|
app.error(data.msg);
|
|
} else {
|
|
app.success(data.msg);
|
|
setTimeout(function(){
|
|
app.goto('mycoupon');
|
|
},1000)
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
receiveCoupon:function(){
|
|
var that = this;
|
|
var datalist = that.datalist;
|
|
var rid = that.record.id;
|
|
var id = that.coupon.id;
|
|
app.showLoading('领取中');
|
|
app.post('ApiCoupon/receiveCoupon', {id: id,rid:rid}, function (data) {
|
|
app.showLoading(false);
|
|
if (data.status == 0) {
|
|
app.error(data.msg);
|
|
} else {
|
|
app.success(data.msg);
|
|
that.getdata();
|
|
}
|
|
});
|
|
},
|
|
|
|
sharemp:function(){
|
|
app.error('点击右上角发送给好友或分享到朋友圈');
|
|
this.sharetypevisible = false
|
|
},
|
|
shareapp:function(){
|
|
var that = this;
|
|
that.sharetypevisible = false;
|
|
uni.showActionSheet({
|
|
itemList: ['发送给微信好友', '分享到微信朋友圈'],
|
|
success: function (res){
|
|
if(res.tapIndex >= 0){
|
|
var scene = 'WXSceneSession';
|
|
if (res.tapIndex == 1) {
|
|
scene = 'WXSenceTimeline';
|
|
}
|
|
var sharedata = {};
|
|
sharedata.provider = 'weixin';
|
|
sharedata.type = 0;
|
|
sharedata.scene = scene;
|
|
sharedata.title = '送你一张优惠券，点击领取';
|
|
sharedata.summary = that.shareDesc;
|
|
sharedata.href = that.shareLink;
|
|
sharedata.imageUrl = that.sharePic;
|
|
|
|
uni.share(sharedata);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.container {
|
|
padding: 20rpx 40rpx;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(180deg,#058552 0%,#096742 100%);
|
|
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.discount-detail {
|
|
border-radius:50rpx;
|
|
background: #FFF;
|
|
padding: 44rpx 40rpx;
|
|
&__hd {
|
|
padding-bottom: 40rpx;
|
|
position: relative;
|
|
&::before,&::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
bottom: -15rpx;
|
|
border-radius: 50%;
|
|
background: #068150;
|
|
}
|
|
&::before {
|
|
left: -55rpx;
|
|
}
|
|
&::after {
|
|
right: -55rpx;
|
|
}
|
|
&-left {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(to right,#EAFBF4 0%,#CAF6E5 100%);
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
line-height: 96rpx;
|
|
text-align: center;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
&-right {
|
|
flex: 1;
|
|
}
|
|
&-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 44rpx;
|
|
}
|
|
&-tips {
|
|
margin-top: 10rpx;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
&__bd {
|
|
padding-top: 40rpx;
|
|
position: relative;
|
|
margin-bottom: 60rpx;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 2rpx;
|
|
background-image: linear-gradient(to right, #EEEEEE 0%, #EEEEEE 50%, transparent 50%);
|
|
background-size: 20rpx 4rpx;
|
|
background-repeat: repeat-x;
|
|
}
|
|
&-code {
|
|
width: 530rpx;
|
|
height: 520rpx;
|
|
margin: 0 auto 16rpx;
|
|
.code-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
&-item {
|
|
margin-top: 28rpx;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
.item-hd {
|
|
color: #999999;
|
|
width: 140rpx;
|
|
flex-shrink: 0;
|
|
margin-right: 20rpx;
|
|
}
|
|
.item-bd {
|
|
color: #333333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
&__ft {
|
|
height: 80rpx;
|
|
line-height :80rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border-radius: 40rpx;
|
|
background: linear-gradient(to right,#00AE68 0%,#096742 100%);
|
|
}
|
|
}
|
|
.return-tips {margin-top: 60rpx;text-align: center;font-size: 28rpx;color: rgba(255,255,255,0.4);line-height: 40rpx;}
|
|
</style>
|