Applet/pages/goods/details.vue

 <template>
 	<view class="voucher-coupon-detail">
 		<image class="voucher-coupon-detail-header-img" mode="aspectFit" v-if="coupon.photo" :src="fileUrl + coupon.photo"></image>
 		<view class="voucher-coupon-detail-header">
 			<view class="voucher-coupon-detail-header-info">
 				<view class="voucher-coupon-detail-header-info-title">{{coupon.name}}</view>
 				<view class="voucher-coupon-detail-header-info-desc">剩余：{{coupon.remainCount || 0}}</view>
 				<view class="voucher-coupon-detail-header-info-time">金额：￥{{coupon.money}}</view>
 			</view>
 		</view>
 		<view class="voucher-coupon-detail-content">
 			<view class="voucher-coupon-detail-content-title">使用说明</view>
 			<view class="voucher-coupon-detail-content-desc" v-html="coupon.details"></view>
 		</view>
 		<view class="voucher-coupon-detail-footer-btn" :class="{ remainCount: coupon.remainCount == 0 }" @click="receive">立即领取</view>
		<popup ref="popup" :popupInfo="popupInfo" @confirm="popupBtnClick" @close="popupBtnClick"></popup>
 	</view>
 </template>

 <script>
	import { BASE_URL } from '../../env.js';
	import voucher from '../../api/voucher.js';
	import popup from '../../components/popup.vue'
 	export default {
		components: {
			popup
		},
 		data() {
 			return {
				fileUrl: BASE_URL.fileUrl,
 				coupon: {
 					photo: '',
 					title: '',
 					remain_count: '',
 					describe: ``,
 					money: ''
 				},
				popupInfo: {
					msgType: 'success',
					cancelText: '关闭',
					confirmText: '确认',
					title: '通知',
					content: '默认消息'
				},
 			};
 		},
		onLoad: async function(option) {
			if(option.id) this.id = option.id;
			this.query();
		},
 		methods: {
			async query() {
				const res = await voucher.getInfo(this.id);
				this.coupon = res.data;
			},
			popupBtnClick() {
				this.query();
			},
 			async receive() {
				if (this.coupon.remainCount == 0) return;
				// 领取流程
				const res = await voucher.receivevoucher(this.coupon.discountId);
				if (res.code == 200) {
					this.popupInfo.content = '领取成功'
					this.$refs.popup.open();
					this.query();
				}
 			}
 		}
 	};
 </script>

 <style>
 	.voucher-coupon-detail {
 		padding: 20rpx;
 		width: 90%;
 		margin: 0 auto;
 	}

 	.voucher-coupon-detail-header {
 		display: flex;
 		align-items: center;
 		margin-bottom: 20rpx;
 	}

 	.voucher-coupon-detail-header-img {
 		width: 100%;
 		/* height: 120rpx; */
 		/* margin-right: 20rpx; */
 	}

 	.voucher-coupon-detail-header-info {
 		flex: 1;
 	}

 	.voucher-coupon-detail-header-info-title {
 		font-size: 32rpx;
 		font-weight: bold;
 		margin-bottom: 10rpx;
 		margin-top: 30rpx;
 	}

 	.voucher-coupon-detail-header-info-desc {
 		font-size: 28rpx;
 		color: #999;
 		margin-bottom: 10rpx;
 	}

 	.voucher-coupon-detail-header-info-time {
 		font-size: 28rpx;
 		color: #999;
 	}

 	.voucher-coupon-detail-content {
 		margin-top: 30rpx;
 	}

 	.voucher-coupon-detail-content-title {
 		font-size: 32rpx;
 		font-weight: bold;
 		margin-bottom: 20rpx;
 	}

 	.voucher-coupon-detail-content-desc {
 		font-size: 28rpx;
 		color: #999;
 		line-height: 1.5;
 		margin-bottom: 20rpx;
 	}

 	.voucher-coupon-detail-footer {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		background-color: #f5f5f5;
 		padding: 20rpx;
 		border-radius: 10rpx;
 	}

 	.voucher-coupon-detail-footer-price {
 		font-size: 36rpx;
 		font-weight: bold;
 	}

 	.voucher-coupon-detail-footer-btn {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		height: 80rpx;
 		background-color: #f60;
 		color: #FFFFFF;
 		font-size: 32rpx;
 		font-weight: bold;
 		border-radius: 10rpx;
 		margin-top: 50rpx;
 	}
	.remainCount {
		background-color: #999;
	}
 </style>