txCar/pages/module/usableDiscountCard.vue

<template>
	<view class="content">

		<view class="teamTop">
			<view class="sumCount">可使用优惠券</view>
		</view>

		<!-- 列表 -->
		<view class="itemContent">
			<view v-for="(item,index) in itemData" :key="index">
				<view class="item">

					<!-- 第一块 -->
					<view class="topView" @click="ckCoupon(item)">
						<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="cardName">{{item.ActName}}</view>
							<!-- 时间截取 -->
							<view class="valid">有效期：{{item.StartTime.slice(0,item.StartTime.length-8)}}至 {{item.EndTime.slice(0,item.EndTime.length-8)}}</view>
						</view>
					</view>

					<!-- 第二快 -->
					<view class="bottomView">
						<view class="shopName">适用门店：{{item.ShopName}}</view>
						<view @click="goDiscountDetail(item)">查看详情</view>
					</view>
				</view>
			</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,
				payMoney:'',
				shopId:'',
			}
		},
		onLoad(opt) {
			this.page = 1
			this.shopId = opt.shopId
			if(opt.payMoney){
				this.payMoney=opt.payMoney;
				this.myOrderCoupon()
			}
			
		},
		methods: {
			ckCoupon(item){
				console.log(item);
				uni.setStorage({
					key: 'couponData',
					data: item,
					success: function () {
						uni.navigateBack({
							delta:1
						})
					}
				}); 
			},
			myOrderCoupon(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('worldKeepCar/maintainOrder/myOrderCoupon', {
				  money:this.payMoney,
				  shopId:this.shopId,
				  page:this.page,
				  limit:10,
				 },'GET').then(res => {
					uni.hideLoading();
					var list = res.data
					
					// 处理 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 = false
					} else {
						this.noMoreShow = true
					}
				})
			},
			goDiscountDetail(item) {

				uni.navigateTo({
					
					url: '../me/discountDetail?couponId=' + item.ID,
				})
			},
			

		},

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

	}
</script>

<style scoped>
	.content {
		background: #F4F5F7;
		min-height: 100vh;

	}

	.teamTop {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		background-color: #F4F5F7;
		width: 100%;
		height: 77rpx;
	}

	.sumCount {
		padding: 20rpx 24rpx;
		color: #999999;
		font-size: 26rpx;
	}

	.itemContent {
		padding: 55rpx 20rpx 24rpx;
	}

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

	}

	.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,
	.rightView {
		margin-right: 40rpx;
		
	}

	.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;
	}

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

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