lanan-old/lanan-master-uniapp/subCouponPages/index/index.vue

<template>
	<view class="padding-top">
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabList" lineWidth="240rpx" lineColor="#242A38" :current="current" :scrollable="false"
				:activeStyle="{
			            color: '#242A38',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; width:240rpx; padding-right: 15px; height: 34px;" @change="changeTab">
			</u-tabs>
		</u-sticky>

		<view class="margin-top">
			<u-loading-page :loading="loadingShow"></u-loading-page>
			<u-radio-group placement="column">
				<view class="flex-col align-center margin-bottom" v-for="item,index in couponList" :key="index"
					:style="{'filter': gray}">
					<view class="box_1 flex-col" :style="{backgroundImage: 'url('+quanbg+')'}">
						<view class="group_1 flex-row">
							<view class="tag_1 flex-row">
								<view class="image-text_1 flex-row justify-between align-center">
									<image class="label_1" referrerpolicy="no-referrer"
										:src="imagesUrl + 'money.png'" />
									<text
										class="text-sm text-bold margin-right-sm ">{{ changeCouponType(item.couponType) }}</text>
								</view>
							</view>
						</view>
						<view class="group_2 flex-row">
							<view class="text-group_2 flex-col justify-between">
								<text class="paragraph_1">
									{{ item.title }}
								</text>
								<text class="text_6">
									{{ '有效期 '+ item.startTime + '-' + item.expirationTime }}</text>
							</view>
							<text class="text_7">￥</text>
							<text class="text_8">{{ changeDiscount(item.couponType,item.discount) }}</text>
							<!-- <u-radio size="38rpx" activeColor="#ffa229" iconColor="#ffa229"
								:customStyle="{marginBottom: '40rpx'}" :key="index" :name="item.couponId"
								@change="radioChange">
							</u-radio> -->
						</view>
					</view>
				</view>
			</u-radio-group>

			<u-loadmore :status="isLoadMore" fontSize="30rpx" iconSize="30rpx" />
			<u-gap height="30"></u-gap>

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

<script>
	export default {
		data() {
			return {
				imagesUrl: getApp().globalData.config.imagesUrl,
				baseUrl: getApp().globalData.config.baseUrl,
				quanbg: getApp().globalData.config.imagesUrl + 'quanbg.png',
				tabList: [{
					name: '待使用',
					value: 0
				}, {
					name: '已使用',
					value: 1
				}, {
					name: '已过期',
					value: 2
				}],
				current: 0,
				couponList: [],
				currCouponId: '',
				gray: '',
				isLoadMore: false, //是否加载中
				params: {
					pageSize: 10,
					pageNum: 1,
				},
				status: 'loadmore',
				loadingShow: false,

			}
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.status = 'loading';
				this.isLoadMore = true
				this.params.pageNum++
				this.getListByUserId()
			}
		},
		onShow() {
			this.getListByUserId()
			console.log(123);
		},
		methods: {
			changeTab(e) {
				this.gray = e.value ? "grayscale(1)" : ''
				this.current = e.value
				this.getListByUserId(true)
			},
			async getListByUserId(isReload) {
				if (isReload) {
					this.params.pageNum = 1
				}
				const res = await this.$request({
					url: '/system/ShopCoupon/listByUserId',
					data: {
						couponStatus: this.current,
						pageSize: this.params.pageSize,
						pageNum: this.params.pageNum
					}
				})

				if (isReload) {
					this.couponList = res.rows;

				} else {
					this.couponList = this.couponList.concat(res.rows);
				}
				console.log(res);

				if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
					this.status = 'nomore';
					this.isLoadMore = true
				} else {
					this.isLoadMore = false
				}
				this.loadingShow = false

			},
			changeCouponType(couponType) {
				return couponType == 'cash' ? '现金券' : couponType == 'offset' ? '抵消券' : null
			},
			changeDiscount(couponType, discount) {
				return couponType === "offset" ? '全额' : discount / 100;
			},
			radioChange(e) {
				this.currCouponId = e
			}

		}
	}
</script>

<style>
	.box_1 {
		height: 200rpx;
		background-size: 100% 100%;
		width: 700rpx;
	}

	.group_1 {
		width: 142rpx;
		height: 44rpx;
		margin-top: -1rpx;
	}

	.tag_1 {
		background-color: rgba(255, 179, 81, 1);
		border-radius: 24px 0px 23px 0px;
		width: 155rpx;
		height: 44rpx;
	}

	.image-text_1 {
		width: 150rpx;
		height: 46rpx;
	}

	.label_1 {
		width: 48rpx;
		height: 46rpx;
	}

	.text-group_1 {
		width: 60rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(48, 48, 48, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHei-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;

	}

	.group_2 {
		width: 638rpx;
		height: 115rpx;
		margin: 17rpx 0 21rpx 24rpx;
	}

	.text-group_2 {
		width: 351rpx;
		height: 115rpx;
	}

	.paragraph_1 {
		width: 351rpx;
		height: 65rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 38rpx;
		font-weight: 700;
		text-align: left;
		line-height: 65rpx;
	}

	.text_6 {
		width: 500rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(104, 104, 104, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_7 {
		width: 20rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(255, 134, 27, 1);
		font-size: 36rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin: 22rpx 0 0 114rpx;
	}

	.text_8 {
		min-width: 90rpx;
		height: 38rpx;
		overflow-wrap: break-word;
		color: rgba(255, 134, 27, 1);
		font-size: 50rpx;
		font-family: MicrosoftYaHei-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 12rpx 20rpx 0 10rpx;
	}

	.section_3 {
		border-radius: 50%;
		width: 38rpx;
		height: 38rpx;
		border: 2px solid rgba(255, 162, 41, 1);
		margin: 20rpx 0 0 50rpx;
	}
</style>