优化领劵中心的逻辑以及页面

pages/cart/coupon/couponCenter.vue

@@ -1,9 +1,9 @@
 <template>
 	<view class="coupon-center">
-    <swiper class="swiper-box">
+		<div class="swiper-box">
-      <swiper-item class="swiper-item">
+			<div class="swiper-item">
-        <scroll-view class="scroll-v" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
+				<div class="scroll-v" enableBackToTop="true" scroll-y>
-          <u-empty mode="coupon" text="没有优惠券了" v-if="whetherEmpty"></u-empty>
+					<u-empty mode="coupon" style='margin-top: 20%;' text="没有优惠券了" v-if="whetherEmpty"></u-empty>
 					<view v-else class="coupon-item" v-for="(item, index) in couponList" :key="index">
 						<view class="left">
 							<view class="wave-line">
@@ -23,10 +23,11 @@
 						<view class="right">
 							<view>
 								<!-- 根据scopeType 判断是否是 平台、品类或店铺  -->
-                <view v-if="item.scopeType">
+								<view class="coupon-title wes-3" v-if="item.scopeType">
 									<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
 									<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
-                  <view v-else>{{  item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
+									<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用
+									</view>
 								</view>
 								<view v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</view>
 							</view>
@@ -37,16 +38,20 @@
 							<view class="bg-quan"> 券 </view>
 						</view>
 					</view>
-          <uni-load-more :status="loadStatus"></uni-load-more>
+
-        </scroll-view>
+				</div>
-      </swiper-item>
+			</div>
-    </swiper>
+		</div>
 	</view>
 </template>
 
 <script>
-import { receiveCoupons } from "@/api/members.js";
+	import {
-import { getAllCoupons } from "@/api/promotions.js";
+		receiveCoupons
+	} from "@/api/members.js";
+	import {
+		getAllCoupons
+	} from "@/api/promotions.js";
 	export default {
 		data() {
 			return {
@@ -57,13 +62,18 @@ export default {
 					pageNumber: 1,
 					pageSize: 10,
 				},
-      storeId: "", //店铺 id
+				storeId: "", //店铺 id,
+				couponData: ""
 			};
 		},
 		onLoad(option) {
 			this.storeId = option.storeId;
 			this.getCoupon();
 		},
+		onReachBottom() {
+
+			this.loadMore()
+		},
 		onPullDownRefresh() {
 			//下拉刷新
 			this.params.pageNumber = 1;
@@ -78,21 +88,26 @@ export default {
 				uni.showLoading({
 					title: "加载中",
 				});
-      let submitData = { ...this.params };
+				let submitData = {
+					...this.params
+				};
 				// 判断当前是否有店铺
-      this.storeId ? (submitData = { ...this.params, storeId: this.storeId }): "",
+				this.storeId ? (submitData = {
+						...this.params,
+						storeId: this.storeId
+					}) : "",
 					getAllCoupons(submitData)
 					.then((res) => {
 						uni.hideLoading();
 						uni.stopPullDownRefresh();
 						if (res.data.code == 200) {
 							// 如果请求成功，展示数据并进行展示
-              let data = res.data.result;
+							this.couponData = res.data.result
-              if (data.total == 0) {
+							if (this.couponData.total == 0) {
 								// 当本次请求数据为空展示空信息
 								this.whetherEmpty = true;
 							} else {
-                this.couponList.push(...data.records);
+								this.couponList.push(...this.couponData.records);
 								this.loadStatus = "noMore";
 							}
 						}
@@ -123,9 +138,9 @@ export default {
 			 * 加载更多
 			 */
 			loadMore() {
-      if (this.loadStatus != "noMore") {
+				if (this.couponData.total > this.params.pageNumber * this.params.pageSize) {
 					this.params.pageNumber++;
-        this.getAllCoupons();
+					this.getCoupon();
 				}
 			},
 		},
@@ -145,41 +160,7 @@ page {
 	.coupon-center {
 		height: 100%;
 
-  .couponList-scroll-content {
-    position: relative;
-    width: 100%;
-    display: flex;
-    white-space: nowrap;
-    align-items: center;
-    justify-content: space-between;
-    align-items: center;
-    background-color: $main-color;
-    color: #ffffff;
-
-    .tab-item {
-      width: 160rpx;
-      height: 80rpx;
-      line-height: 60rpx;
-      text-align: center;
-      display: inline-block;
-    }
-
-    .active {
-      border-bottom: 2px solid #ffffff;
-      broder-width: 60rpx;
-      font-size: 30rpx;
-      font-weight: 700;
-      padding-bottom: 4rpx;
-    }
-  }
-
 		.swiper-box {
-    height: 100%;
-
-    .scroll-v {
-      height: 100%;
-    }
-
 			.coupon-item {
 				display: flex;
 				align-items: center;
@@ -191,6 +172,7 @@ page {
 					width: 260rpx;
 					background-color: $light-color;
 					position: relative;
+
 					.message {
 						color: $font-color-white;
 						display: flex;
@@ -226,6 +208,7 @@ page {
 							margin-top: 4rpx;
 						}
 					}
+
 					.circle {
 						width: 40rpx;
 						height: 40rpx;
@@ -234,10 +217,12 @@ page {
 						border-radius: 50%;
 						z-index: 111;
 					}
+
 					.circle-top {
 						top: -20rpx;
 						right: -20rpx;
 					}
+
 					.circle-bottom {
 						bottom: -20rpx;
 						right: -20rpx;
@@ -254,10 +239,15 @@ page {
 					background-color: #ffffff;
 					overflow: hidden;
 					position: relative;
+
 					>view:nth-child(1) {
 						color: #666666;
 						margin-left: 20rpx;
-          line-height: 3em;
+						display: flex;
+						height: 100%;
+						flex-direction: column;
+						justify-content: space-around;
+
 						>view:nth-child(1) {
 							color: #ff6262;
 							font-size: 30rpx;
@@ -296,4 +286,9 @@ page {
 			}
 		}
 	}
+
+	.coupon-title {
+		width: 260rpx;
+
+	}
 </style>

uni.scss

@@ -169,3 +169,11 @@ $font-weight: 400;
 	-webkit-line-clamp: 2;
 	overflow: hidden;
 }
+
+.wes-3 {
+	/* 适用于webkit内核和移动端 */
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}