From 3c9f0d3c5c725149f458d21b94922494e21229e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?lemon=E6=A9=AA?= <17633066053@163.com>
Date: Tue, 31 May 2022 15:42:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A2=86=E5=8A=B5=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E7=9A=84=E9=80=BB=E8=BE=91=E4=BB=A5=E5=8F=8A=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/cart/coupon/couponCenter.vue | 549 ++++++++++++++---------------
 uni.scss                           |   8 +
 2 files changed, 280 insertions(+), 277 deletions(-)

diff --git a/pages/cart/coupon/couponCenter.vue b/pages/cart/coupon/couponCenter.vue
index 0a48d22..c7f9457 100644
--- a/pages/cart/coupon/couponCenter.vue
+++ b/pages/cart/coupon/couponCenter.vue
@@ -1,299 +1,294 @@
 <template>
-  <view class="coupon-center">
-    <swiper class="swiper-box">
-      <swiper-item class="swiper-item">
-        <scroll-view class="scroll-v" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
-          <u-empty mode="coupon" 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">
-                <view class="wave" v-for="(item, index) in 12" :key="index"></view>
-              </view>
-              <view class="message">
-                <view>
-                  <!--判断当前优惠券类型  couponType  PRICE || DISCOUNT -->
-                  <span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
-                  <span v-else>{{ item.price }}元</span>
-                </view>
-                <view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
-              </view>
-              <view class="circle circle-top"></view>
-              <view class="circle circle-bottom"></view>
-            </view>
-            <view class="right">
-              <view>
-                <!-- 根据scopeType 判断是否是 平台、品类或店铺  -->
-                <view 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>
-                <view v-if="item.endTime">有效期至：{{  item.endTime.split(" ")[0] }}</view>
-              </view>
-              <view class="receive" @click="receive(item)">
-                <text>点击</text><br />
-                <text>领取</text>
-              </view>
-              <view class="bg-quan"> 券 </view>
-            </view>
-          </view>
-          <uni-load-more :status="loadStatus"></uni-load-more>
-        </scroll-view>
-      </swiper-item>
-    </swiper>
-  </view>
+	<view class="coupon-center">
+		<div class="swiper-box">
+			<div class="swiper-item">
+				<div class="scroll-v" enableBackToTop="true" scroll-y>
+					<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">
+								<view class="wave" v-for="(item, index) in 12" :key="index"></view>
+							</view>
+							<view class="message">
+								<view>
+									<!--判断当前优惠券类型  couponType  PRICE || DISCOUNT -->
+									<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
+									<span v-else>{{ item.price }}元</span>
+								</view>
+								<view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
+							</view>
+							<view class="circle circle-top"></view>
+							<view class="circle circle-bottom"></view>
+						</view>
+						<view class="right">
+							<view>
+								<!-- 根据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>
+								<view v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</view>
+							</view>
+							<view class="receive" @click="receive(item)">
+								<text>点击</text><br />
+								<text>领取</text>
+							</view>
+							<view class="bg-quan"> 券 </view>
+						</view>
+					</view>
+
+				</div>
+			</div>
+		</div>
+	</view>
 </template>
 
 <script>
-import { receiveCoupons } from "@/api/members.js";
-import { getAllCoupons } from "@/api/promotions.js";
-export default {
-  data() {
-    return {
-      loadStatus: "more", //下拉状态
-      whetherEmpty: false, //是否为空
-      couponList: [], // 优惠券列表
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-      storeId: "", //店铺 id
-    };
-  },
-  onLoad(option) {
-    this.storeId = option.storeId;
-    this.getCoupon();
-  },
-  onPullDownRefresh() {
-    //下拉刷新
-    this.params.pageNumber = 1;
-    this.couponList = [];
-    this.getCoupon();
-  },
-  methods: {
-    /**
-     * 获取当前优惠券
-     */
-    getCoupon() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      let submitData = { ...this.params };
-      // 判断当前是否有店铺
-      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;
-              if (data.total == 0) {
-                // 当本次请求数据为空展示空信息
-                this.whetherEmpty = true;
-              } else {
-                this.couponList.push(...data.records);
-                this.loadStatus = "noMore";
-              }
-            }
-          })
-          .catch((err) => {
-            uni.hideLoading();
-          });
-    },
-    /**
-     * 领取优惠券
-     */
-    receive(item) {
-      receiveCoupons(item.id).then((res) => {
-        if (res.data.code == 200) {
-          uni.showToast({
-            title: "领取成功",
-            icon: "none",
-          });
-        } else {
-          uni.showToast({
-            title: res.data.message,
-            icon: "none",
-          });
-        }
-      });
-    },
-    /**
-     * 加载更多
-     */
-    loadMore() {
-      if (this.loadStatus != "noMore") {
-        this.params.pageNumber++;
-        this.getAllCoupons();
-      }
-    },
-  },
-  onNavigationBarButtonTap(e) {
-    uni.navigateTo({
-      url: "/pages/cart/coupon/couponIntro",
-    });
-  },
-};
+	import {
+		receiveCoupons
+	} from "@/api/members.js";
+	import {
+		getAllCoupons
+	} from "@/api/promotions.js";
+	export default {
+		data() {
+			return {
+				loadStatus: "more", //下拉状态
+				whetherEmpty: false, //是否为空
+				couponList: [], // 优惠券列表
+				params: {
+					pageNumber: 1,
+					pageSize: 10,
+				},
+				storeId: "", //店铺 id,
+				couponData: ""
+			};
+		},
+		onLoad(option) {
+			this.storeId = option.storeId;
+			this.getCoupon();
+		},
+		onReachBottom() {
+
+			this.loadMore()
+		},
+		onPullDownRefresh() {
+			//下拉刷新
+			this.params.pageNumber = 1;
+			this.couponList = [];
+			this.getCoupon();
+		},
+		methods: {
+			/**
+			 * 获取当前优惠券
+			 */
+			getCoupon() {
+				uni.showLoading({
+					title: "加载中",
+				});
+				let submitData = {
+					...this.params
+				};
+				// 判断当前是否有店铺
+				this.storeId ? (submitData = {
+						...this.params,
+						storeId: this.storeId
+					}) : "",
+					getAllCoupons(submitData)
+					.then((res) => {
+						uni.hideLoading();
+						uni.stopPullDownRefresh();
+						if (res.data.code == 200) {
+							// 如果请求成功，展示数据并进行展示
+							this.couponData = res.data.result
+							if (this.couponData.total == 0) {
+								// 当本次请求数据为空展示空信息
+								this.whetherEmpty = true;
+							} else {
+								this.couponList.push(...this.couponData.records);
+								this.loadStatus = "noMore";
+							}
+						}
+					})
+					.catch((err) => {
+						uni.hideLoading();
+					});
+			},
+			/**
+			 * 领取优惠券
+			 */
+			receive(item) {
+				receiveCoupons(item.id).then((res) => {
+					if (res.data.code == 200) {
+						uni.showToast({
+							title: "领取成功",
+							icon: "none",
+						});
+					} else {
+						uni.showToast({
+							title: res.data.message,
+							icon: "none",
+						});
+					}
+				});
+			},
+			/**
+			 * 加载更多
+			 */
+			loadMore() {
+				if (this.couponData.total > this.params.pageNumber * this.params.pageSize) {
+					this.params.pageNumber++;
+					this.getCoupon();
+				}
+			},
+		},
+		onNavigationBarButtonTap(e) {
+			uni.navigateTo({
+				url: "/pages/cart/coupon/couponIntro",
+			});
+		},
+	};
 </script>
 <style>
-page {
-  height: 100%;
-}
+	page {
+		height: 100%;
+	}
 </style>
 <style lang="scss" scoped>
-.coupon-center {
-  height: 100%;
+	.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;
+		.swiper-box {
+			.coupon-item {
+				display: flex;
+				align-items: center;
+				height: 220rpx;
+				margin: 20rpx;
 
-    .tab-item {
-      width: 160rpx;
-      height: 80rpx;
-      line-height: 60rpx;
-      text-align: center;
-      display: inline-block;
-    }
+				.left {
+					height: 100%;
+					width: 260rpx;
+					background-color: $light-color;
+					position: relative;
 
-    .active {
-      border-bottom: 2px solid #ffffff;
-      broder-width: 60rpx;
-      font-size: 30rpx;
-      font-weight: 700;
-      padding-bottom: 4rpx;
-    }
-  }
+					.message {
+						color: $font-color-white;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						flex-direction: column;
+						margin-top: 40rpx;
 
-  .swiper-box {
-    height: 100%;
+						view:nth-child(1) {
+							font-weight: bold;
+							font-size: 60rpx;
+						}
 
-    .scroll-v {
-      height: 100%;
-    }
+						view:nth-child(2) {
+							font-size: $font-sm;
+						}
+					}
 
-    .coupon-item {
-      display: flex;
-      align-items: center;
-      height: 220rpx;
-      margin: 20rpx;
+					.wave-line {
+						height: 220rpx;
+						width: 8rpx;
+						position: absolute;
+						top: 0;
+						left: 0;
+						background-color: $light-color;
+						overflow: hidden;
 
-      .left {
-        height: 100%;
-        width: 260rpx;
-        background-color: $light-color;
-        position: relative;
-        .message {
-          color: $font-color-white;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
-          margin-top: 40rpx;
+						.wave {
+							width: 8rpx;
+							height: 16rpx;
+							background-color: #ffffff;
+							border-radius: 0 16rpx 16rpx 0;
+							margin-top: 4rpx;
+						}
+					}
 
-          view:nth-child(1) {
-            font-weight: bold;
-            font-size: 60rpx;
-          }
+					.circle {
+						width: 40rpx;
+						height: 40rpx;
+						background-color: $bg-color;
+						position: absolute;
+						border-radius: 50%;
+						z-index: 111;
+					}
 
-          view:nth-child(2) {
-            font-size: $font-sm;
-          }
-        }
+					.circle-top {
+						top: -20rpx;
+						right: -20rpx;
+					}
 
-        .wave-line {
-          height: 220rpx;
-          width: 8rpx;
-          position: absolute;
-          top: 0;
-          left: 0;
-          background-color: $light-color;
-          overflow: hidden;
+					.circle-bottom {
+						bottom: -20rpx;
+						right: -20rpx;
+					}
+				}
 
-          .wave {
-            width: 8rpx;
-            height: 16rpx;
-            background-color: #ffffff;
-            border-radius: 0 16rpx 16rpx 0;
-            margin-top: 4rpx;
-          }
-        }
-        .circle {
-          width: 40rpx;
-          height: 40rpx;
-          background-color: $bg-color;
-          position: absolute;
-          border-radius: 50%;
-          z-index: 111;
-        }
-        .circle-top {
-          top: -20rpx;
-          right: -20rpx;
-        }
-        .circle-bottom {
-          bottom: -20rpx;
-          right: -20rpx;
-        }
-      }
+				.right {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					width: 450rpx;
+					font-size: $font-sm;
+					height: 100%;
+					background-color: #ffffff;
+					overflow: hidden;
+					position: relative;
 
-      .right {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 450rpx;
-        font-size: $font-sm;
-        height: 100%;
-        background-color: #ffffff;
-        overflow: hidden;
-        position: relative;
-        > view:nth-child(1) {
-          color: #666666;
-          margin-left: 20rpx;
-          line-height: 3em;
-          > view:nth-child(1) {
-            color: #ff6262;
-            font-size: 30rpx;
-          }
-        }
+					>view:nth-child(1) {
+						color: #666666;
+						margin-left: 20rpx;
+						display: flex;
+						height: 100%;
+						flex-direction: column;
+						justify-content: space-around;
 
-        .receive {
-          color: #ffffff;
-          background-color: $main-color;
-          border-radius: 50%;
-          width: 86rpx;
-          height: 86rpx;
-          text-align: center;
-          margin-right: 30rpx;
-          vertical-align: middle;
-          padding-top: 8rpx;
-          position: relative;
-          z-index: 2;
-        }
+						>view:nth-child(1) {
+							color: #ff6262;
+							font-size: 30rpx;
+						}
+					}
 
-        .bg-quan {
-          width: 244rpx;
-          height: 244rpx;
-          border: 6rpx solid $main-color;
-          border-radius: 50%;
-          opacity: 0.1;
-          color: $main-color;
-          text-align: center;
-          padding-top: 30rpx;
-          font-size: 130rpx;
-          position: absolute;
-          right: -54rpx;
-          bottom: -60rpx;
-        }
-      }
-    }
-  }
-}
-</style>
+					.receive {
+						color: #ffffff;
+						background-color: $main-color;
+						border-radius: 50%;
+						width: 86rpx;
+						height: 86rpx;
+						text-align: center;
+						margin-right: 30rpx;
+						vertical-align: middle;
+						padding-top: 8rpx;
+						position: relative;
+						z-index: 2;
+					}
+
+					.bg-quan {
+						width: 244rpx;
+						height: 244rpx;
+						border: 6rpx solid $main-color;
+						border-radius: 50%;
+						opacity: 0.1;
+						color: $main-color;
+						text-align: center;
+						padding-top: 30rpx;
+						font-size: 130rpx;
+						position: absolute;
+						right: -54rpx;
+						bottom: -60rpx;
+					}
+				}
+			}
+		}
+	}
+
+	.coupon-title {
+		width: 260rpx;
+
+	}
+</style>
diff --git a/uni.scss b/uni.scss
index 7fe2f11..20c6fca 100644
--- a/uni.scss
+++ b/uni.scss
@@ -168,4 +168,12 @@ $font-weight: 400;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 2;
 	overflow: hidden;
+}
+
+.wes-3 {
+	/* 适用于webkit内核和移动端 */
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
 }