You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
13 KiB
Vue
431 lines
13 KiB
Vue
<template>
|
|
<view v-if="!isLoading" class="container b-f p-b">
|
|
<view class="base">
|
|
<view class="coupon-main">
|
|
<image class="image" :src="detail.image"></image>
|
|
<view v-if="detail.code && detail.status == 'A' && detail.isGive" class="gift" @click="give()"><text>转赠好友</text></view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">卡券名称：</view>
|
|
<view class="name">{{ detail.name ? detail.name : '' }}</view>
|
|
</view>
|
|
<view v-if="detail.amount > 0" class="item">
|
|
<view class="label">卡券面额：</view>
|
|
<view class="amount">￥{{ detail.amount }}</view>
|
|
</view>
|
|
<view v-if="detail.point > 0" class="item">
|
|
<view class="label">兑换积分：</view>
|
|
<view class="amount">{{ detail.point }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">有效期至：</view>
|
|
<view class="time">{{ detail.effectiveDate }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">适用门店：</view>
|
|
<view>{{ detail.storeNames ? detail.storeNames : '全部'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="coupon-qr" v-if="detail.code">
|
|
<view>
|
|
<image class="image" :src="detail.qrCode"></image>
|
|
</view>
|
|
<view class="qr-code">
|
|
<p class="code">核销码：{{ detail.code }}</p>
|
|
<p class="tips">请出示以上券码给核销人员</p>
|
|
</view>
|
|
</view>
|
|
<view class="coupon-content m-top20">
|
|
<view class="title">使用须知</view>
|
|
<view class="content"><jyf-parser :html="detail.description ? detail.description : '暂无...'"></jyf-parser></view>
|
|
</view>
|
|
<!-- 快捷导航 -->
|
|
<shortcut/>
|
|
<view class="give-popup" v-if="detail.qrCode">
|
|
<uni-popup ref="givePopup" type="dialog">
|
|
<uni-popup-dialog mode="input" focus="false" title="转赠给好友" type="info" placeholder="输入好友手机号码" :before-close="true" @close="cancelGive" @confirm="doGive"></uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
<!-- 底部选项卡 -->
|
|
<view v-if="!detail.code && !detail.isReceive" class="footer-fixed">
|
|
<view class="footer-container">
|
|
<!-- 操作按钮 -->
|
|
<view class="foo-item-btn">
|
|
<view class="btn-wrapper">
|
|
<view class="btn-item btn-item-main" @click="receive(detail.id)">
|
|
<text v-if="!detail.point || detail.point < 1">立即领取</text>
|
|
<text v-if="detail.point && detail.point > 0">立即兑换</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="detail.isReceive" class="footer-fixed">
|
|
<view class="footer-container">
|
|
<!-- 操作按钮 -->
|
|
<view class="foo-item-btn">
|
|
<view class="btn-wrapper">
|
|
<view class="btn-item btn-item-main state">
|
|
<text v-if="!detail.point || detail.point < 1">您已领取</text>
|
|
<text v-if="detail.point && detail.point > 0">您已兑换</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!--领取码 start-->
|
|
<view class="receive-pop">
|
|
<uni-popup ref="receiveCodePopup" type="dialog">
|
|
<uni-popup-dialog mode="input" v-model="receiveCode" focus="false" title="领取码" type="info" placeholder="请输入领取码" :before-close="true" @close="cancelReceive" @confirm="doReceive"></uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
<!--领取码 end-->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import jyfParser from '@/components/jyf-parser/jyf-parser'
|
|
import Shortcut from '@/components/shortcut'
|
|
import * as myCouponApi from '@/api/myCoupon'
|
|
import * as giveApi from '@/api/give'
|
|
import * as couponApi from '@/api/coupon'
|
|
import * as MessageApi from '@/api/message'
|
|
|
|
export default {
|
|
components: {
|
|
Shortcut
|
|
},
|
|
data() {
|
|
return {
|
|
// 当前会员卡券ID
|
|
userCouponId: 0,
|
|
// 卡券ID
|
|
couponId: 0,
|
|
// 加载中
|
|
isLoading: true,
|
|
// 当前卡券详情
|
|
detail: null,
|
|
qrCode: '',
|
|
receiveCode: '' // 领取码
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
this.userCouponId = options.userCouponId ? options.userCouponId : 0;
|
|
this.couponId = options.couponId ? options.couponId : 0;
|
|
this.getCouponDetail();
|
|
},
|
|
|
|
methods: {
|
|
// 获取卡券详情
|
|
getCouponDetail() {
|
|
const app = this
|
|
myCouponApi.detail(app.couponId, app.userCouponId, "")
|
|
.then(result => {
|
|
app.detail = result.data;
|
|
if (!app.couponId || app.couponId < 1) {
|
|
app.couponId = app.detail.couponId;
|
|
}
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
// 转赠
|
|
give() {
|
|
this.$refs.givePopup.open('top');
|
|
},
|
|
cancelGive() {
|
|
this.$refs.givePopup.close();
|
|
},
|
|
doGive(friendMobile) {
|
|
const app = this
|
|
if (friendMobile.length < 11) {
|
|
app.$error("请先输入好友手机号码！")
|
|
return false
|
|
} else {
|
|
app.$refs.givePopup.close()
|
|
const param = {'mobile': friendMobile, 'couponId': this.userCouponId, 'message': '转赠一张优惠券给你'}
|
|
giveApi.doGive(param)
|
|
.then(result => {
|
|
if (result.code == '200') {
|
|
uni.showModal({
|
|
title: '提示信息',
|
|
content: '恭喜，转增成功！',
|
|
showCancel: false,
|
|
success(o) {
|
|
if (o.confirm) {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
app.$error(result.message)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 取消领取码
|
|
cancelReceive() {
|
|
this.receiveCode = '';
|
|
this.$refs.receiveCodePopup.close();
|
|
},
|
|
// 确认领取码
|
|
doReceive(vCode) {
|
|
if (!vCode || vCode.length < 1) {
|
|
this.$error("请先输入领取码！");
|
|
return false;
|
|
}
|
|
this.receiveCode = vCode;
|
|
this.$refs.receiveCodePopup.close();
|
|
this.receive(this.couponId);
|
|
},
|
|
// 领取卡券
|
|
receive(couponId) {
|
|
const app = this
|
|
if (app.detail.needReceiveCode && !app.receiveCode) {
|
|
app.$refs.receiveCodePopup.open('top');
|
|
return false;
|
|
}
|
|
|
|
if (app.detail.point) {
|
|
uni.showModal({
|
|
title: "提示信息",
|
|
content: "需要"+app.detail.point+"积分兑换，您确定兑换吗?",
|
|
success({ confirm }) {
|
|
if (confirm) {
|
|
couponApi.receive({ 'couponId': couponId, 'receiveCode': app.receiveCode })
|
|
.then(result => {
|
|
app.receiveCode = '';
|
|
// 显示提示
|
|
if (parseInt(result.code) === 200) {
|
|
app.detail.isReceive = true
|
|
app.$success("兑换成功！")
|
|
// #ifdef MP-WEIXIN
|
|
MessageApi.getSubTemplate({keys: "couponArrival,couponConfirm,couponExpire"}).then(result => {
|
|
const templateIds = result.data
|
|
wx.requestSubscribeMessage({tmplIds: templateIds,
|
|
success(res) {
|
|
console.log("调用成功！")
|
|
}, fail(res) {
|
|
console.log("调用失败:", res)
|
|
}, complete() {
|
|
// empty
|
|
}
|
|
})
|
|
})
|
|
// #endif
|
|
} else {
|
|
app.$error(result.message)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
couponApi.receive({ 'couponId': couponId, 'receiveCode': app.receiveCode })
|
|
.then(result => {
|
|
app.receiveCode = '';
|
|
// 显示提示
|
|
if (parseInt(result.code) === 200) {
|
|
app.detail.isReceive = true
|
|
app.$success("领取成功！")
|
|
// #ifdef MP-WEIXIN
|
|
MessageApi.getSubTemplate({keys: "couponArrival,couponConfirm,couponExpire"}).then(result => {
|
|
const templateIds = result.data
|
|
wx.requestSubscribeMessage({tmplIds: templateIds,
|
|
success(res) {
|
|
console.log("调用成功！")
|
|
}, fail(res) {
|
|
console.log("调用失败:", res)
|
|
}, complete() {
|
|
// empty
|
|
}
|
|
})
|
|
})
|
|
// #endif
|
|
} else {
|
|
app.$error(result.message)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 分享当前页面
|
|
*/
|
|
onShareAppMessage() {
|
|
const app = this
|
|
return {
|
|
title: "卡券分享",
|
|
path: "/pages/coupon/detail?couponId=" + app.couponId
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 分享到朋友圈
|
|
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
|
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
|
*/
|
|
onShareTimeline() {
|
|
const app = this
|
|
const { page } = app
|
|
return {
|
|
title: "卡券分享",
|
|
path: "/pages/coupon/detail?couponId=" + app.couponId
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
color:#666666;
|
|
}
|
|
.base {
|
|
border: dashed 5rpx #cccccc;
|
|
padding: 30rpx;
|
|
border-radius: 10rpx;
|
|
margin: 20rpx;
|
|
display: block;
|
|
height: auto;
|
|
min-height: 420rpx;
|
|
.coupon-main {
|
|
.image {
|
|
width: 200rpx;
|
|
height: 158rpx;
|
|
border-radius: 8rpx;
|
|
border: #cccccc solid 1rpx;
|
|
}
|
|
width: 100%;
|
|
}
|
|
.item {
|
|
margin-bottom: 10rpx;
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
.label {
|
|
float: left;
|
|
}
|
|
.amount {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.coupon-qr {
|
|
border: dashed 5rpx #cccccc;
|
|
border-radius: 10rpx;
|
|
margin: 20rpx;
|
|
text-align: center;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
.image{
|
|
width: 360rpx;
|
|
height: 360rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.qr-code{
|
|
.code{
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
.tips{
|
|
font-size: 25rpx;
|
|
color:#C0C4CC;
|
|
}
|
|
}
|
|
}
|
|
.coupon-content {
|
|
padding: 30rpx;
|
|
border: dashed 5rpx #cccccc;
|
|
border-radius: 5rpx;
|
|
margin: 20rpx;
|
|
min-height: 400rpx;
|
|
.title {
|
|
margin-bottom: 15rpx;
|
|
font-weight: bold;
|
|
}
|
|
.content {
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.gift {
|
|
height: 50rpx;
|
|
width: 120rpx;
|
|
margin-top: 20rpx;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
border: 1px solid #f8df00;
|
|
border-radius: 6rpx;
|
|
color: #f86d48;
|
|
background: #f8df98;
|
|
font-size: 22rpx;
|
|
float: right;
|
|
&.state {
|
|
border: none;
|
|
color: #F5F5F5;
|
|
background: #888888;
|
|
}
|
|
}
|
|
|
|
/* 底部操作栏 */
|
|
.footer-fixed {
|
|
position: fixed;
|
|
bottom: var(--window-bottom);
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
height: 180rpx;
|
|
z-index: 11;
|
|
box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
|
|
background: #fff;
|
|
}
|
|
|
|
.footer-container {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
// 操作按钮
|
|
.foo-item-btn {
|
|
flex: 1;
|
|
.btn-wrapper {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-item {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
margin-right: 16rpx;
|
|
margin-left: 16rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
border-radius: 40rpx;
|
|
}
|
|
// 立即领取按钮
|
|
.btn-item-main {
|
|
background: linear-gradient(to right, #f9211c, #ff6335);
|
|
&.state {
|
|
border: none;
|
|
color: #cccccc;
|
|
background: #F5F5F5;
|
|
}
|
|
}
|
|
}
|
|
</style>
|