txCar/pages/homePage/allDiscountCard.vue

<template>
	<view class="content">

		<!-- 列表 -->
		<view class="itemContent">
			<view v-for="(item,index) in itemData" :key="index">
				<view class="item">
					<image src="../../static/img/table_lingqu.png" mode="" class="stateImg" v-if="item.pickNum>0">

						<!-- 第一块 -->
						<view class="topView">
							<view class="leftView">
								<view class="moneyView">
									<view>￥</view>
									<view class="money">{{item.ActMoney}}</view>
								</view>
								<view class="condition" v-if="item.WhereMoney != 0">满{{item.WhereMoney}}元可用</view>
								<view class="condition" v-else>满任意金额可用</view>
							</view>

							<view class="rightView">
								<view class="firstView">
									<view class="cardName">{{item.ActName}}</view>
									<view class="rightBtn" v-if="item.pickNum<=0" @click="lingqu(item, index)">立即领取
									</view>
								</view>
								<!-- 时间截取 -->
								<view class="valid" v-if="item.EndOffsetDays == -1">
									{{item.StartTime.slice(0,item.StartTime.length-8)}}至
									{{item.EndTime.slice(0,item.EndTime.length-8)}}
								</view>
								<view class="valid" v-else>领取后 {{item.EndOffsetDays}} 天有效</view>
							</view>


						</view>

						<!-- 第二快 -->
						<view class="bottomView">
							<view class="shopName" v-if="item.shopNames">适用门店：{{item.shopNames}}</view>
							<view class="shopName" v-else>适用门店：全部</view>
							<view @click="goDiscountDetail(item)">查看详情</view>
						</view>
				</view>
			</view>
		</view>

		<view class="bottomViewBtn" v-if="itemData.length!=0">
			<view class="saveCar" @click="alllingqu" v-if="allHave==false">一键领取</view>
			<view class="saveCar" style="background-color: #FF9566;" v-else>已全部领取</view>
		</view>

		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow">没有更多数据</view>
		<!-- 无数据空白页 -->
		<nodata v-if="itemData.length==0"></nodata>

	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},
		data() {
			return {
				itemData: [],
				page: 1,
				noMoreShow: false,
				allHave: true,
			}
		},
		onLoad(opt) {
			this.page = 1
			this.myOrderCoupon()

		},
		methods: {

			lingqu(item, index) {
				uni.showLoading({
					title: '领取中'
				})
				this.$http('worldKeepCar/keepCarMy/pickTCoupon', {
					couponID: item.ID,
				}, 'POST').then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						var itemData = this.itemData[index]
						itemData.pickNum = 1
						console.log('itemData.pickNum', itemData.pickNum);
						uni.showToast({
							title: '领取成功',
							icon: 'success',
							duration: 2000
						});
					}
				})
			},
			alllingqu() {
				uni.showLoading({
					title: '领取中'
				})
				this.$http('worldKeepCar/keepCarMy/pickTCouponAll', {

				}, 'POST').then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.myOrderCoupon()
						this.allHave = true
						uni.showToast({
							title: '领取成功',
							icon: 'success',
							duration: 2000
						});
					}
				})
			},
			myOrderCoupon() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('worldKeepCar/keepCarMy/listTCouponPage', {

					page: this.page,
					limit: 10,
				}, 'GET').then(res => {
					uni.hideLoading();
					var list = res.data.Items

					// 处理 undefined和null转为空白字符串
					list.forEach((item, index) => {
						for (const key in item) {
							item[key] = this.$praseStrEmpty(item[key])
						}
					})

					if (this.page == 1) {
						this.itemData = list
					} else {
						this.itemData = this.itemData.concat(list)
					}

					if (list.length < 10) {
						this.noMoreShow = true
					} else {
						this.noMoreShow = false
					}

					if (this.itemData.length != 0) {
						this.itemData.forEach((item, index) => {
							if (item.pickNum <= 0) {
								this.allHave = false
							}
						})
					}



				})
			},
			goDiscountDetail(item) {

				uni.navigateTo({

					url: 'allCardDetail?couponId=' + item.ID,
				})
			},


		},

		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			this.page = 1
			this.myOrderCoupon()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.page++;
			this.myOrderCoupon()
		},

	}
</script>

<style scoped>
	.content {
		background: #F4F5F7;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}



	.itemContent {
		padding: 20rpx 24rpx;

	}

	.item {
		margin: 20rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.stateImg {
		width: 118rpx;
		height: 86rpx;
		position: absolute;
		right: 20rpx;
		margin-right: 20rpx;
	}

	.topView {
		display: flex;
		justify-content: flex-start;
		padding: 22rpx 0rpx;
		margin-left: 22rpx;
		margin-right: 22rpx;
		border-bottom: 1rpx #CCCCCC dashed;
		align-items: center;
	}

	.leftView {
		margin-right: 40rpx;

	}

	.rightView {
		flex-grow: 1;
	}

	.firstView {
		display: flex;
		justify-content: space-between;
	}

	.moneyView {
		display: flex;
		justify-content: flex-start;
		color: #FF4F00;
		align-items: baseline;
	}

	.money {
		font-size: 56rpx;
	}

	.condition {
		font-size: 22rpx;
		color: #999999;
	}

	.cardName {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 10rpx;
		margin-bottom: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.valid {
		font-size: 26rpx;
		color: #999999;
	}

	.rightBtn {
		width: 153rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: linear-gradient(137deg, #FF630F 0%, #FF450F 100%);
		border-radius: 32rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;

	}

	.bottomView {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.shopName {

		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bottomViewBtn {
		background-color: #FFFFFF;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.saveCar {

		background-color: #FF4F00;
		margin: 23rpx 30rpx;
		height: 74rpx;
		line-height: 74rpx;
		border-radius: 37rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;

	}

	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
</style>