jje_uniapp/orderPages/receiveCoupons/index.vue

<template>
	<view class="page" :style="{'height':countsList.length>0?'':'100vh'}">
		<view class="flex-col" v-if="countsList.length === 0">
			<view class="flex-row justify-center">
				<image class="empty" src="/static/imageIcon/empty.png" mode="widthFix"></image>
			</view>
			<view class="emptyText flex-row justify-center">
				<text>暂无内容</text>
			</view>
		</view>
		<view v-else>
		<view  class="flex-col" v-for="(item,index) in countsList" :key="index">
			<view class="row-list flex-row justify-start">
				<view class="h-text flex-col justify-center ">
					<view class="money">
						<text>{{item.discountsPrice}}</text>
					</view>
					<view class="desc">
						<text>满{{item.reachPrice}}可用</text>
					</view>
				</view>

				<view class="h-center-content flex-col justify-around">
					<view class="h-value">
						<text>{{item.name}}</text>
					</view>
					<!--				<view class="title">-->
					<!--					使用平台：<text v-if="item.strategyType == '0'">全平台</text>-->
					<!--					<text v-else-if="item.strategyType == '1'">个人优惠卷</text>-->
					<!--				</view>-->
					<view class="title">
						使用次数：{{item.degree}}
					</view>
					<view class="title">
						领取后{{item.effectiveDays}}天内有效
					</view>
					<view class="title flex-row">
						<text @click.stop="showRemark(item)">使用规则</text>
						<u-icon v-if="item.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>
						<u-icon v-else name="play-right-fill" color="" size="12"></u-icon>
					</view>
				</view>

				<view class="h-right-content flex-col justify-center ">
					<view class="btn" @click="gotoReceiveCoupon(item)">
						<text>立即领取</text>
					</view>
				</view>
			</view>
			<view v-if="showRemarkId == item.id" class="remark" style="text-indent:unset">
        <view>
          可用门店:<text>{{item.useStoreDesc}}</text>
        </view>
        <view v-if="item.remark !=null">
          使用说明:<text>{{item.remark}}</text>
        </view>
        <text v-else class="remarkText">该优惠券暂无使用说明</text>
			</view>
		</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				countsList:[],
				showRemarkId:'',
			};
		},
		onLoad(option) {
			this.getUserDiscountsList()
		},

		methods: {


			showRemark(item){
				if (this.showRemarkId == item.id ){
					this.showRemarkId = ''

				}else {
					this.showRemarkId = item.id

				}
			},


			// 领取优惠劵
			gotoReceiveCoupon(item) {
				this.$api.claimCoupon({id:item.id}).then((res) => {
					uni.showToast({
						title: "领取成功"
					})
					// 查询可领取的优惠劵
					this.getUserDiscountsList();
				})
			},

			// 查询可领取的优惠劵
			getUserDiscountsList() {
				let that = this;
				// 用户绑定门店
				this.$api.getUserDiscountsList().then((res) => {
					console.log(res.data.data)
					this.countsList = res.data.data;
				}).catch(() => {
					uni.showToast({
						title: "操作失败"
					})
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '/common/css/common.css';
	@import './index.rpx.scss';
</style>