<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"}).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"}).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>