bjhedasx/webcode/uni-app/pages/discount/coupon/index.vue

<template>
	<!-- 20221015 -->
	<view class="discount-coupon-index-page">

		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">

			<!-- tab栏 -->
			<view class="jc-header-title bg-main">
				<ty-tab-around :list="tabList" :list-key="tabListKey" color-type="white" color="#ffffff"
					:active.sync="tabIndex" @click="changeTabs">
				</ty-tab-around>
			</view>

			<!-- 优惠券列表 -->
			<view class="padding-top-title-header">
				<ty-list-list :status="load_status">

					<view v-for="(item,index) in list" :key="index">

						<!-- 单张优惠券显示组件 -->
						<jc-discount-coupon :data="item">

							<!-- 插槽 -->
							<!-- 免费领取优惠券 -->
							<block v-if="item.type == 1">
								<!-- 正常,可领取 -->
								<view
									class="width-100 line-height-40 radius-20 bg-main-gradient text-center text-22 text-ff"
									v-if="item.status == 1" @tap="receive(item.id,index)">
									领取
								</view>
								<!-- 已领取 -->
								<view class="" v-else-if="item.status == 2">
									<image class="status-img" src="/static/coupon/lingqu.png"></image>
								</view>
								<!-- 已抢光 -->
								<view class="" v-else-if="item.status == 3">
									<image class="status-img" src="/static/coupon/qiangguang.png"></image>
								</view>
							</block>

							<!-- 积分兑换优惠券 -->
							<block v-else-if="item.type == 7">
								<!-- 正常,可领取 -->
								<view v-if="item.status == 1">
									<view
										class="width-100 line-height-40 radius-20 bg-main-gradient text-center text-22 text-ff"
										@tap="exchange(item.id,index)">
										兑换</view>
									<view class="width-100 margin-top-5 text-center text-20 text-main text-bold">
										{{item.integral}}积分
									</view>
								</view>
								<!-- 已领取 -->
								<view class="" v-else-if="item.status == 2">
									<image class="status-img" src="/static/coupon/duihuan.png"></image>
								</view>
								<!-- 已抢光 -->
								<view class="" v-else-if="item.status == 3">
									<image class="status-img" src="/static/coupon/qiangguang.png"></image>
								</view>
							</block>
						</jc-discount-coupon>
					</view>
				</ty-list-list>
			</view>

			<!-- 底部栏 -->
			<view class="jc-footer-safe">
				<view class="margin-bottom-20 block-center width-400 line-height-70 border-ed bg-ff text-center text-22"
					@tap="clickFooter">
					查看我的优惠券
				</view>
			</view>

		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

			<!-- 登录浮层 -->
			<ty-register-login :show.sync="show" :agree.sync="agree" @login="login" @close="show = false">
				<view class="bg-ff">
					<!-- 占位 view，避免页面内容出现在状态栏 -->
					<view class="height-status-bar"></view>
				</view>
			</ty-register-login>
		</view>

	</view>
</template>

<script>
	import coupon from '../api/coupon.js'
	export default {
		data() {
			return {
				// 登录浮层是否显示 false--不显示 true--显示
				show: false,
				// 登录浮层是否同意协议 false--不选中 true--选中
				agree: false,
				// tab栏内容
				tabList: ['免费领取', '积分兑换'],
				// tab栏选中
				tabIndex: 0,
				// tab栏显示key值
				tabListKey: '',
				// 列表内容
				list: [],
				// 列表状态
				load_status: ''
			}
		},

		onReady() {
			// 加载列表
			this.loadList(0)
		},

		methods: {
			/**
			 * 点击切换标签
			 * @param {int} index tab栏选中
			 * @date 2022-10-15
			 */
			changeTabs(index) {
				// 加载列表
				this.loadList(1)
			},

			/**
			 * 免费领取优惠券
			 * @param {int} couponId 优惠券ID
			 * @param {int} index 列表第X条数据
			 * @date 2022-10-17
			 */
			receive(couponId, index) {
				// 没有登录需要先登录
				if (!this.cn.isLogin()) {
					this.show = true
					return false
				}

				// 免费领取优惠券
				coupon.insertMyCoupon(couponId).then(res => {
					if (res.code == 0) {
						// 提示框
						this.cn.toast(res.msg)

						// 加载列表
						this.loadList(1)
					}
				})
			},

			/**
			 * 积分兑换优惠券
			 * @param {int} couponId 优惠券ID
			 * @param {int} index 列表第X条数据
			 * @date 2022-10-17
			 */
			exchange(couponId, index) {
				// 没有登录需要先登录
				if (!this.cn.isLogin()) {
					this.show = true
					return false
				}

				this.cn.confirm('确认兑换优惠券?').then(res => {
					if (res.confirm) {

						// 积分兑换优惠券
						coupon.insertMyCoupon(couponId).then(res => {
							if (res.code == 0) {
								// 提示框
								this.cn.toast(res.msg)

								// 加载列表
								this.loadList(1)
							}
						})
					}
				})
			},

			/**
			 * 跳转我的优惠券
			 * @date 2022-10-15
			 */
			clickFooter() {
				// 没有登录需要先登录
				if (!this.cn.isLogin()) {
					this.show = true
					return false
				}

				// 跳转我的优惠券
				uni.navigateTo({
					url: '/pages/discount/coupon/myCouponList'
				})
			},


			/**
			 * 加载列表
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-10-17
			 */
			loadList(isFirstPage = 0) {
				let type = this.tabIndex == 0 ? 1 : 7
				// 加载优惠券
				coupon.listCoupon(this, isFirstPage, type)
			},

			/**
			 * 登录成功
			 * @date 2022-10-17
			 */
			login() {
				// 加载列表
				this.loadList(1)
			}
		}
	}
</script>

<style scoped>
	.status-img {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 100rpx;
		height: 100rpx;
	}
</style>