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

<template>
	<!-- 20221018 -->
	<view class="discount-coupon-my-coupon-list-page">

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

			<!-- tabs标签栏 -->
			<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">
				<view v-for="(item,index) in list" :key="index">
					<!-- 单张优惠券组件 -->
					<jc-discount-coupon :data="item">
						<!-- 插槽 -->
						<view class="width-100 text-right" v-if="item.is_able == 1" @tap="choose(item.id,index)">
							<text
								:class="item.id != chooseCouponId ? 'tyIcon-quan text-34 text-cc' : 'tyIcon-xuanzhong1 text-40 text-main'"></text>
						</view>
						
						<!-- 底部插槽 -->
						<template v-slot:bottom>
							<view class="line-height-45 flex align-center justify-center text-ff"
								style="background: #FF8A8A;" v-if="item.is_able == 0">
								<text class="tyIcon-guanyu text-22"></text>
								<text class="margin-left-5 text-20">{{item.unable_reason}}</text>
							</view>
						</template>
						
					</jc-discount-coupon>
				</view>

				<view class="margin-top-20 flex justify-center" v-if="list.length == 0">
					<text class="text-30 text-4d">暂无优惠券~</text>
				</view>
			</view>

			<!-- 底部栏 -->
			<view class="jc-footer-safe" v-if="tabIndex == 0">
				<view class="margin-bottom-20 margin-lr-30 line-height-80 radius-40 bg-main text-center text-30 text-ff"
					@tap="confirm">
					确定
				</view>
			</view>
		</view>

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

		</view>
	</view>
</template>

<script>
	import coupon from '../api/coupon.js'
	export default {
		data() {
			return {
				// tab栏内容
				tabList: ['可使用优惠券', '不可使用优惠券'],
				// tab栏选中
				tabIndex: 0,
				// tab栏显示key值
				tabListKey: '',
				// 订单总价钱（不含运费）
				price: 0,
				// 选中优惠券ID
				chooseCouponId: '',
				// 展示优惠券列表
				list: [],
				// 可使用优惠券列表
				ableList: [],
				// 不可使用优惠券列表
				unableList: []
			}
		},

		onLoad(options) {
			// 选中优惠券ID
			this.chooseCouponId = options.coupon_id || 0
			// 订单总价钱（不含运费）
			this.price = options.price || 0
		},

		onReady() {
			// 加载可使用/不可使用优惠券列表
			this.loadData()
		},

		methods: {
			/**
			 * 切换标签
			 * @date 2022-10-18
			 */
			changeTabs() {
				// 切换展示优惠券列表
				this.loadCouponData()
			},

			/**
			 * 选择优惠券
			 * @param {int} couponId 优惠券ID
			 * @param {int} index
			 */
			choose(couponId, index) {
				// 选中时点击为取消选中
				if (couponId == this.chooseCouponId) {
					this.chooseCouponId = 0
				} else { //选中其他优惠券
					this.chooseCouponId = couponId
				}
			},

			/** 
			 * 确认选择优惠券
			 * @date 2022-10-18
			 */
			confirm() {
				// 已经手动选择过优惠券
				getApp().globalData.order.isHasChooseCoupon = 1

				// 没有选中优惠券
				if (!this.chooseCouponId) {
					getApp().globalData.order.myCouponId = ''
					// 有选中优惠券
				} else {
					this.ableList.forEach((value)=>{
						if(value.id == this.chooseCouponId){
							getApp().globalData.order.myCouponId = value.id
						}
					})
				}

				// 返回上一页
				uni.navigateBack({
					delta: 1
				})
			},

			/**
			 * 加载可使用/不可使用优惠券列表
			 * @date 2022-10-18
			 */
			loadData() {
				coupon.listChooseCoupon(this.price).then(res => {
					if (res.code == 0) {

						// 更改tab栏文案
						this.tabList = ['可使用优惠券(' + res.data.able_list.length + ')', '不可使用优惠券(' + res.data
							.unable_list.length + ')'
						]

						// 可使用优惠券列表
						this.ableList = res.data.able_list
						// 不可使用优惠券列表
						this.unableList = res.data.unable_list

						this.loadCouponData()
					}
				})
			},

			/**
			 * 切换展示优惠券列表
			 * @date 2022-10-18
			 */
			loadCouponData() {
				if (this.tabIndex == 0) {
					// 可使用优惠券列表
					this.list = this.ableList
				} else if (this.tabIndex == 1) {
					// 不可使用优惠券列表
					this.list = this.unableList
				}
			}

		}
	}
</script>

<style scoped>

</style>