qjd-shell-uniapp/pagesMain/couponList.vue

<template>
	<view class="container">
		<view class="coupon-title">
			<view class="title-text">已发放的优惠卷</view>
		</view>
		<view class="coupon-row" v-for="(item, index) in couponList" :key="index">
			<view class="coupon-left">
				<view class="coupon-left-price"><text style="font-size: 16px;">￥</text>{{item.discountAmount}}</view>
				<view class="coupon-left-text">满减金额</view>
			</view>
			<view class="coupon-info">
				<view class="coupon-text1">{{item.couponName}}</view>
				<view class="coupon-text1" style="margin-bottom: 4px;">满{{item.fullAmount}}减{{item.discountAmount}}</view>
				<view class="coupon-text2">{{'仅限用于' + item.name + '的店铺'}}</view>
				<view class="coupon-text2" style="color: #999999;">有效期：{{item.publishStartTime}}~{{item.useEndTime}}</view>
			</view>
		</view>
		<u-divider :color="isOver ? '#909399' : '#51A539'" :border-color="isOver ? '#909399' : '#51A539'" @click="handleLoadMore()">
			<u-loading mode="circle" v-if="loadingData"></u-loading>{{loadingData ? '加载中' : (isOver ? '没有更多了' : '点击加载更多')}}
		</u-divider>
		<view class="form-handle">
			<u-button type="success" shape="circle" :ripple="true" @click="addCoupon" class="handle-custom">发放优惠卷</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				pageIndex: 1,
				isOver: false,
				loadingData: false,
				couponList: [],
			}
		},
		onShow() {
			this.pageIndex = 1
			this.isOver = false
			this.loadingData = false
			this.couponList = []
			this.getList()
		},
		methods: {
			//  新增优惠券
			addCoupon() {
				uni.navigateTo({
					url: '/pagesMain/couponForm'
				});
			},
			//  懒加载
			handleLoadMore() {
				if (!this.isOver) {
					this.pageIndex++
					this.getList()
				}
			},
			//  获取列表数据
			getList() {
				this.loadingData = true
				NET.request(API.getCouponList, {
					pageIndex: this.pageIndex,
					pageSize: 10,
				}, 'GET').then(res => {
					this.loadingData = false
					this.isOver = res.data.pageInfoResVo.list.length != 10
					this.couponList = this.couponList.concat(res.data.pageInfoResVo.list)
				}).catch(error => {
					this.loadingData = false
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		box-sizing: border-box;
		padding-top: 55px;
		padding-bottom: 60px;
		background-color: #f7f7f7;
		overflow-y: auto;
		position: relative;

		.coupon-title {
			width: 100%;
			height: 45px;
			float: left;
			position: absolute;
			top: 0;
			box-sizing: border-box;
			padding: 13px 15px;
			background-color: #FFFFFF;
			margin-bottom: 16px;

			.title-text {
				width: 100%;
				height: 100%;
				float: left;
				font-size: 15px;
				font-family: PingFang SC;
				color: #333333;
				line-height: 18px;
				box-sizing: border-box;
				padding-left: 6px;
				border-left: 2px solid #52A63A;
			}
		}

		.coupon-row {
			width: calc(100% - 32px);
			height: 105px;
			float: left;
			margin: 0 16px 10px 16px;
			border-radius: 10px;
			background: #FFFFFF;
			box-shadow: 0px 0px 10px 0px rgba(103, 103, 103, 0.3);
			overflow: hidden;

			.coupon-left {
				width: 107px;
				height: 105px;
				box-sizing: border-box;
				padding-right: 10px;
				float: left;
				background-size: 107px 105px;
				background-position: center;
				background-repeat: no-repeat;
				background-image: url(@/static/images/couponHead.png);

				.coupon-left-price {
					width: 100%;
					height: 24px;
					float: left;
					margin: 28px 0 12px 0;
					font-size: 24px;
					font-family: PingFang SC;
					color: #FFFFFF;
					line-height: 24px;
					text-align: center;
				}

				.coupon-left-text {
					width: 100%;
					height: 20px;
					float: left;
					color: #FFFFFF;
					font-size: 12px;
					font-family: PingFang SC;
					line-height: 20px;
					text-align: center;
				}
			}

			.coupon-info {
				width: calc(100% - 115px);
				height: 100%;
				float: right;
				box-sizing: border-box;
				padding: 12px 0 12px 0;

				.coupon-text1 {
					width: 100%;
					height: 22px;
					float: right;
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 22px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.coupon-text2 {
					width: 100%;
					height: 18px;
					float: right;
					font-size: 13px;
					font-family: PingFang SC;
					color: #EB5F2F;
					line-height: 18px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
		/deep/.u-divider{
			background-color: transparent!important;
		}
		.form-handle {
			width: 100%;
			height: 60px;
			position: absolute;
			z-index: 10;
			padding: 10px 15px 20px 15px;
			box-sizing: border-box;
			bottom: 0;
			background-color: #FFFFFF;
			border-top: 1px solid #EEEEEE;

			.handle-custom {
				background-color: #51A539;
			}
		}
	}
</style>