new-88live/pages/user/coupon/apply.vue

<!-- 優惠券使用 -->
<template>
	<view class="wanl-coupon">
		<view class="edgeInsetTop"></view>
		<!-- 优惠券卡片 -->
		<view class="padding-bj bg-red text-black">
			<view :class="coupon.type" class="item radius-bock" v-if="coupon">
				<image :src="couponBg" class="coupon-bg"></image>
				<image :src="couponReceived" class="coupon-sign" v-if="coupon_state"></image>
				<!-- 左侧：金额/折扣 -->
				<view class="item-left">
					<block v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
						<view class="colour">
							<text class="text-price"></text>
							<text class="price">{{ Number(coupon.price) }}</text>
						</view>
						<view class="cu-tag wanl-gray-dark radius text-sm">
							{{ $t('mall.fullReduction', [Number(coupon.limit), Number(coupon.price)]) }}
						</view>
					</block>
					<block v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
						<view class="colour">
							<text class="price">{{ Number(coupon.discount) }}</text>
							<text class="discount">{{ $t('mall.discountSuffix') }}</text>
						</view>
						<view class="cu-tag wanl-gray-dark radius text-sm">
							{{ $t('mall.fullDiscount', [Number(coupon.limit), Number(coupon.discount)]) }}
						</view>
					</block>
					<block v-if="coupon.type == 'shipping'">
						<view class="colour">
							<text class="price">{{ $t('mall.freeShipping') }}</text>
						</view>
						<view class="cu-tag wanl-gray-dark radius text-sm">
							{{ $t('mall.freeShippingFull', [Number(coupon.limit)]) }}
						</view>
					</block>
				</view>
				<!-- 右侧：名称+有效期+领取按钮 -->
				<view class="item-right padding-bj">
					<view class="title">
						<view class="cu-tag sm radius margin-right-xs tagstyle">{{ coupon.type_text }}</view>
						<text class="text-cut wanl-gray text-min">{{ coupon.name }}</text>
					</view>
					<view class="content text-min">
						<view class="wanl-gray">
							<view><text class="wlIcon-dot"></text>{{ $t('coupon.universal') }}</view>
							<block v-if="coupon.pretype == 'fixed'">
								<view><text class="wlIcon-dot"></text>{{ $t('coupon.start', [coupon.startdate]) }}</view>
								<view><text class="wlIcon-dot"></text>{{ $t('coupon.end', [coupon.enddate]) }}</view>
							</block>
							<block v-if="coupon.pretype == 'appoint'">
								<view v-if="coupon.validity == 0">
									<text class="wlIcon-dot"></text>{{ $t('coupon.permanent') }}
								</view>
								<view v-else>
									<text class="wlIcon-dot"></text>{{ $t('coupon.validDays', [coupon.validity]) }}
								</view>
							</block>
						</view>
						<!-- 未领取显示领取按钮 -->
						<view class="cu-btn sm round" @tap.stop="onReceive(coupon.id)" v-if="!coupon_state">
							{{ $t('mall.getNow') }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 可用商品列表 -->
		<view class="">
			<wanl-product :dataList="dataList" />
		</view>
		<uni-load-more :status="status" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
import { pullCouponApply, postCouponReceive } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			coupon_id: 0,
			coupon_state: false,
			coupon: null,
			dataList: [],
			reload: false,
			total: 0,
			current_page: 1,
			last_page: 1,
			status: 'more',
			couponBg: '/static/coupon/bg_coupon_3x.png',
			couponReceived: '/static/coupon/img_couponcentre_received_3x.png'
		}
	},
	onLoad(option) {
		this.coupon_id = option.id
		this.coupon_state = option.state ? true : false
		this.loadData()
	},
	onPullDownRefresh() {
		this.current_page = 1
		this.reload = true
		this.loadData()
	},
	onReachBottom() {
		if (this.current_page >= this.last_page) {
			this.status = 'noMore'
		} else {
			this.reload = false
			this.current_page++
			this.status = 'loading'
			this.loadData()
		}
	},
	methods: {
		/** 加载优惠券详情及可用商品列表 */
		async loadData() {
			try {
				const res = await pullCouponApply({ id: this.coupon_id, page: this.current_page })
				uni.stopPullDownRefresh()
				this.coupon = res.coupon
				this.dataList = this.reload ? (res.goods.data || []) : this.dataList.concat(res.goods.data || [])
				this.total = res.goods.total
				this.current_page = res.goods.current_page
				this.last_page = res.goods.last_page
				this.status = res.goods.total == 0 ? 'noMore' : 'more'
			} catch (e) {
				console.error('[coupon apply] loadData', e)
			}
		},
		/** 领取优惠券 */
		async onReceive(coupon_id) {
			try {
				const res = await postCouponReceive({ id: coupon_id })
				this.coupon_state = true
				uni.showToast({ title: typeof res === 'string' ? res : this.$t('mall.receiveSuccess'), icon: 'none' })
				this.$store.commit('statistics/dynamic', {
					coupon: this.$store.state.statistics.dynamic.coupon + 1
				})
			} catch (e) {
				uni.showToast({ title: this.$t('coupon.receiveFailed'), icon: 'none' })
			}
		}
	}
}
</script>

<style>
</style>