From a8836744f6849885e84cda55b8eba1fa760a8f08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?lemon=E6=A9=AA?= <17633066053@163.com>
Date: Fri, 24 Dec 2021 16:22:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E6=94=B6=E8=97=8F=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json               |   1 +
 pages/mine/myCollect.vue | 862 ++++++++++++++++++++-------------------
 2 files changed, 441 insertions(+), 422 deletions(-)

diff --git a/pages.json b/pages.json
index b5b5604..f776bdf 100644
--- a/pages.json
+++ b/pages.json
@@ -93,6 +93,7 @@
 					"style": {
 						"navigationBarTitleText": "收藏",
 						"enablePullDownRefresh": true, //下拉刷新
+						"navigationStyle": "custom",
 						"app-plus": {
 							"scrollIndicator": "none"
 						}
diff --git a/pages/mine/myCollect.vue b/pages/mine/myCollect.vue
index 1f359de..18ee619 100644
--- a/pages/mine/myCollect.vue
+++ b/pages/mine/myCollect.vue
@@ -1,422 +1,440 @@
-<template>
-  <view class="content">
-    <view class="navbar">
-      <!-- 循环出顶部nav栏 -->
-      <view v-for="(item, index) in navList" :key="index" class="nav-item" @click="tabClick(index)">
-        <text :class="{current: tabCurrentIndex === index}">{{item.text}}</text>
-      </view>
-    </view>
-    <view class="swiper-box">
-      <!-- 显示商品栏 -->
-      <view v-if="tabCurrentIndex == 0" class="tab-content">
-        <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
-          <!-- 空白页 -->
-          <u-empty style="margin-top:40rpx;" text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
-          <!-- 商品展示数据 -->
-          <u-swipe-action @open="openLeftChange(item,index,'goods')" :show="item.selected" btn-width="180"
-            :options="LeftOptions" v-else v-for="(item,index) in goodList" @click="clickGoodsSwiperAction(item,index)"
-            :index="index" :key="index">
-            <view class="goods" @click="goGoodsDetail(item)">
-              <u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
-                <u-loading slot="loading"></u-loading>
-              </u-image>
-              <view class="goods-intro">
-                <view>{{item.goodsName}}</view>
-                <view class="goods-sn">{{item.goods_sn}}</view>
-                <view>￥{{item.price | unitPrice}}</view>
-              </view>
-            </view>
-          </u-swipe-action>
-
-          <uni-load-more :status="goodsLoad"></uni-load-more>
-        </scroll-view>
-      </view>
-      <!-- 显示收藏的店铺栏 -->
-      <view v-else class="tab-content">
-        <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
-          <!-- 空白页 -->
-          <u-empty style="margin-top:40rpx;" text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
-          <!-- 店铺展示数据 -->
-          <u-swipe-action @open="openLeftChange(item,'store')" :show="item.selected" btn-width="180"
-            :options="LeftOptions" v-else v-for="(item,index) in storeList" :key="index"
-            @click="clickstoreSwiperAction(item)">
-            <view class="store" @click="gostoreMainPage(item.id)">
-              <view class="intro">
-                <view class="store-logo">
-                  <u-image width="102rpx" height="102rpx" :src="item.storeLogo" :alt="item.storeName" mode="aspectFit">
-                    <u-loading slot="loading"></u-loading>
-                  </u-image>
-                </view>
-                <view class="store-name">
-                  <view>{{item.storeName}}</view>
-                  <u-tag size="mini" type="error" :color="$mainColor" v-if="item.selfOperated" text="自营" mode="plain"
-                    shape="circle" />
-                </view>
-                <view class="store-collect">
-                  <view>进店逛逛</view>
-                </view>
-              </view>
-            </view>
-          </u-swipe-action>
-          <uni-load-more :status="storeLoad"></uni-load-more>
-        </scroll-view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-import {
-  getGoodsCollection,
-  deleteGoodsCollection,
-  deleteStoreCollection,
-} from "@/api/members.js";
-export default {
-  data() {
-    return {
-      // 商品左滑侧边栏
-      LeftOptions: [
-        {
-          text: "取消",
-          style: {
-            backgroundColor: this.$lightColor,
-          },
-        },
-      ],
-      tabCurrentIndex: 0, //tab的下标默认为0，也就是说会默认请求商品
-      navList: [
-        //tab显示数据
-        {
-          text: "商品(0)",
-          loadingType: "more",
-          params: {
-            pageNumber: 1,
-            pageSize: 10,
-          },
-        },
-        {
-          text: "店铺(0)",
-          loadingType: "more",
-          params: {
-            pageNumber: 1,
-            pageSize: 10,
-          },
-        },
-      ],
-      goodsLoad: "more", //商品加载
-      storeLoad: "more", //店铺加载
-      goodsEmpty: false, //商品数据是否为空
-      storeEmpty: false, //店铺数据是否为空
-      goodList: [], //商品集合
-      storeList: [], //店铺集合
-    };
-  },
-  onLoad() {
-    this.getGoodList();
-    this.getStoreList();
-  },
-
-  methods: {
-    /**
-     * 打开商品左侧取消收藏
-     */
-    openLeftChange(val, type) {
-      const { goodList, storeList } = this;
-      let way;
-      type == "goods" ? (way = goodList) : (way = storeList);
-      way.forEach((item) => {
-        this.$set(item, "selected", false);
-      });
-      this.$set(val, "selected", false);
-      val.selected = true;
-    },
-
-    /**
-     * 点击商品左侧取消收藏
-     */
-    clickGoodsSwiperAction(val) {
-      deleteGoodsCollection(val.skuId).then((res) => {
-        if (res.statusCode == 200) {
-          this.storeList = [];
-          this.goodList = [];
-          this.getGoodList();
-        }
-      });
-    },
-
-    /**
-     * 点击店铺左侧取消收藏
-     */
-    clickstoreSwiperAction(val) {
-      deleteStoreCollection(val.storeId).then((res) => {
-        if (res.statusCode == 200) {
-          this.storeList = [];
-          this.getStoreList();
-        }
-      });
-    },
-
-    /**
-     * 顶部tab点击
-     */
-    tabClick(index) {
-      this.tabCurrentIndex = index;
-    },
-
-    /**
-     * 查看商品详情
-     */
-    goGoodsDetail(val) {
-      //商品详情
-      uni.navigateTo({
-        url: "/pages/product/goods?id=" + val.skuId + "&goodsId=" + val.goodsId,
-      });
-    },
-
-    /**
-     * 查看店铺详情
-     */
-    gostoreMainPage(id) {
-      //店铺主页
-      uni.navigateTo({
-        url: "/pages/product/shopPage?id=" + id,
-      });
-    },
-
-    /**
-     * 获取商品集合
-     */
-    getGoodList() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getGoodsCollection(this.navList[0].params, "GOODS").then((res) => {
-        uni.hideLoading();
-        uni.stopPullDownRefresh();
-        if (res.data.success) {
-          let data = res.data.result;
-          data.selected = false;
-          this.navList[0].text = `商品(${data.total})`;
-          if (data.total == 0) {
-            this.goodsEmpty = true;
-          } else if (data.total < 10) {
-            this.goodsLoad = "noMore";
-            this.goodList.push(...data.records);
-          } else {
-            this.goodList.push(...data.records);
-            if (data.total.length < 10) this.goodsLoad = "noMore";
-          }
-        }
-      });
-    },
-
-    /**
-     * 获取店铺集合
-     */
-    getStoreList() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getGoodsCollection(this.navList[1].params, "store").then((res) => {
-        uni.hideLoading();
-        uni.stopPullDownRefresh();
-        if (res.data.success) {
-          let data = res.data.result;
-          data.selected = false;
-          this.navList[1].text = `店铺(${data.total})`;
-          if (data.total == 0) {
-            this.storeEmpty = true;
-          } else if (data.total < 10) {
-            this.storeLoad = "noMore";
-            this.storeList.push(...data.records);
-          } else {
-            this.storeList.push(...data.records);
-            if (data.total.length < 10) this.storeLoad = "noMore";
-          }
-        }
-      });
-    },
-
-    /**
-     * 底部加载更多
-     */
-    loadMore() {
-      if (this.tabCurrentIndex == 0) {
-        this.navList[0].params.pageNumber++;
-        this.getGoodList();
-      } else {
-        this.navList[1].params.pageNumber++;
-        this.getStoreList();
-      }
-    },
-  },
-
-  /**
-   * 下拉刷新时
-   */
-  onPullDownRefresh() {
-    if (this.tabCurrentIndex == 0) {
-      this.navList[0].params.pageNumber = 1;
-      this.goodList = [];
-      this.getGoodList();
-    } else {
-      this.navList[1].params.pageNumber = 1;
-      this.storeList = [];
-      this.getStoreList();
-    }
-  },
-};
-</script>
-
-<style lang="scss">
-page,
-.content {
-  background: $page-color-base;
-  height: 100%;
-}
-.content {
-  width: 100%;
-  overflow: hidden;
-}
-.swiper-box {
-  overflow-y: auto;
-}
-
-.list-scroll-content {
-  height: 100%;
-  width: 100%;
-}
-
-/deep/ .u-swipe-content {
-  overflow: hidden;
-}
-.goods {
-  background-color: #fff;
-  border-bottom: 1px solid $border-color-light;
-  height: 190rpx;
-  display: flex;
-  align-items: center;
-  padding: 30rpx 20rpx;
-  margin-top: 20rpx;
-  image {
-    width: 131rpx;
-    height: 131rpx;
-    border-radius: 10rpx;
-  }
-  .goods-intro {
-    flex: 1;
-    font-size: $font-base;
-    line-height: 48rpx;
-    margin-left: 30rpx;
-
-    view:nth-child(1) {
-      line-height: 1.4em;
-      font-size: 24rpx;
-      max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
-      overflow: hidden;
-      color: #666;
-    }
-    view:nth-child(2) {
-      color: #cccccc;
-      font-size: 24rpx;
-    }
-    view:nth-child(3) {
-      color: $light-color;
-    }
-  }
-  button {
-    color: $main-color;
-    height: 50rpx;
-    width: 120rpx;
-    font-size: $font-sm;
-    padding: 0;
-    line-height: 50rpx;
-    background-color: #ffffff;
-    margin-top: 80rpx;
-    &::after {
-      border-color: $main-color;
-    }
-  }
-}
-.store {
-  background-color: #fff;
-  border: 1px solid $border-color-light;
-  border-radius: 16rpx;
-  margin: 20rpx 10rpx;
-  .intro {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 30rpx 0 40rpx;
-    height: 170rpx;
-
-    .store-logo {
-      width: 102rpx;
-      height: 102rpx;
-      border-radius: 50%;
-      overflow: hidden;
-      image {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
-    }
-    .store-name {
-      flex: 1;
-      margin-left: 30rpx;
-      line-height: 2em;
-      :first-child {
-        font-size: $font-base;
-      }
-      :last-child {
-        font-size: $font-sm;
-        color: #999;
-      }
-    }
-    .store-collect {
-      border-left: 1px solid $border-color-light;
-      padding-left: 20rpx;
-      text-align: center;
-      :last-child {
-        color: #999;
-        font-size: $font-sm;
-      }
-    }
-  }
-}
-.navbar {
-  display: flex;
-  height: 40px;
-  padding: 0 5px;
-  background: #fff;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
-  position: relative;
-  z-index: 10;
-  .nav-item {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    font-size: 26rpx;
-
-    text {
-      position: relative;
-    }
-    text.current {
-      color: $light-color;
-      font-weight: bold;
-      font-size: 28rpx;
-      &::after {
-        content: "";
-        position: absolute;
-        left: 20rpx;
-        bottom: -10rpx;
-        width: 30rpx;
-        height: 0;
-        border-bottom: 2px solid $light-color;
-      }
-    }
-  }
-}
-</style>
+<template>
+	<view class="content">
+		<u-navbar>
+			<u-tabs :active-color="lightColor"  class="slot-wrap" :list="navList" count="count" :is-scroll="true" :current="tabCurrentIndex" @change="tabClick"></u-tabs>
+		</u-navbar>
+		<view class="swiper-box">
+			<!-- 显示商品栏 -->
+			<view v-if="tabCurrentIndex == 0" class="tab-content">
+				<scroll-view class="list-scroll-content" scroll-y>
+					<!-- 空白页 -->
+					<u-empty style="margin-top: 40rpx" text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
+					<!-- 商品展示数据 -->
+					<u-swipe-action @open="openLeftChange(item, index, 'goods')" :show="item.selected" btn-width="180"
+						:options="LeftOptions" v-else v-for="(item, index) in goodList"
+						@click="clickGoodsSwiperAction(item, index)" :index="index" :key="index">
+						<view class="goods" @click="goGoodsDetail(item)">
+							<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
+								<u-loading slot="loading"></u-loading>
+							</u-image>
+							<view class="goods-intro">
+								<view>{{ item.goodsName }}</view>
+								<view class="goods-sn">{{ item.goods_sn }}</view>
+								<view>￥{{ item.price | unitPrice }}</view>
+							</view>
+						</view>
+					</u-swipe-action>
+
+				</scroll-view>
+			</view>
+			<!-- 显示收藏的店铺栏 -->
+			<view v-else class="tab-content">
+				<scroll-view class="list-scroll-content" scroll-y>
+					<!-- 空白页 -->
+					<u-empty style="margin-top: 40rpx" text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
+					<!-- 店铺展示数据 -->
+					<u-swipe-action @open="openLeftChange(item, 'store')" :show="item.selected" btn-width="180"
+						:options="LeftOptions" v-else v-for="(item, index) in storeList" :key="index"
+						@click="clickStoreSwiperAction(item)">
+						<view class="store" @click="goStoreMainPage(item.id)">
+							<view class="intro">
+								<view class="store-logo">
+									<u-image width="102rpx" height="102rpx" :src="item.storeLogo" :alt="item.storeName"
+										mode="aspectFit">
+										<u-loading slot="loading"></u-loading>
+									</u-image>
+								</view>
+								<view class="store-name">
+									<view>{{ item.storeName }}</view>
+									<u-tag size="mini" type="error" :color="$mainColor" v-if="item.selfOperated"
+										text="自营" mode="plain" shape="circle" />
+								</view>
+								<view class="store-collect">
+									<view>进店逛逛</view>
+								</view>
+							</view>
+						</view>
+					</u-swipe-action>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getGoodsCollection,
+		deleteGoodsCollection,
+		deleteStoreCollection,
+	} from "@/api/members.js";
+	export default {
+		data() {
+			return {
+        lightColor:this.$lightColor,
+				// 商品左滑侧边栏
+				LeftOptions: [{
+					text: "取消",
+					style: {
+						backgroundColor: this.$lightColor,
+					},
+				}, ],
+				tabCurrentIndex: 0, //tab的下标默认为0，也就是说会默认请求商品
+				navList: [
+					//tab显示数据
+					{
+						name: "商品(0)",
+					
+						params: {
+							pageNumber: 1,
+							pageSize: 10,
+						},
+					},
+					{
+						name: "店铺(0)",
+					
+						params: {
+							pageNumber: 1,
+							pageSize: 10,
+						},
+					},
+				],
+			
+				goodsEmpty: false, //商品数据是否为空
+				storeEmpty: false, //店铺数据是否为空
+				goodList: [], //商品集合
+				storeList: [], //店铺集合
+			};
+		},
+		onLoad() {
+			this.getGoodList();
+			this.getStoreList();
+		},
+		onReachBottom() {
+			if (this.tabCurrentIndex == 0) {
+				this.navList[0].params.pageNumber++;
+				this.getGoodList();
+			} else {
+				this.navList[1].params.pageNumber++;
+				this.getStoreList();
+			}
+		},
+
+		methods: {
+			/**
+			 * 打开商品左侧取消收藏
+			 */
+			openLeftChange(val, type) {
+				const {
+					goodList,
+					storeList
+				} = this;
+				let way;
+				type == "goods" ? (way = goodList) : (way = storeList);
+				way.forEach((item) => {
+					this.$set(item, "selected", false);
+				});
+				this.$set(val, "selected", false);
+				val.selected = true;
+			},
+
+			/**
+			 * 点击商品左侧取消收藏
+			 */
+			clickGoodsSwiperAction(val) {
+				deleteGoodsCollection(val.skuId).then((res) => {
+					if (res.statusCode == 200) {
+						this.storeList = [];
+						this.goodList = [];
+						this.getGoodList();
+					}
+				});
+			},
+
+			/**
+			 * 点击店铺左侧取消收藏
+			 */
+			clickStoreSwiperAction(val) {
+				deleteStoreCollection(val.storeId).then((res) => {
+					if (res.statusCode == 200) {
+						this.storeList = [];
+						this.getStoreList();
+					}
+				});
+			},
+
+			/**
+			 * 顶部tab点击
+			 */
+			tabClick(index) {
+				this.tabCurrentIndex = index;
+			},
+
+			/**
+			 * 查看商品详情
+			 */
+			goGoodsDetail(val) {
+				//商品详情
+				uni.navigateTo({
+					url: "/pages/product/goods?id=" + val.skuId + "&goodsId=" + val.goodsId,
+				});
+			},
+
+			/**
+			 * 查看店铺详情
+			 */
+			goStoreMainPage(id) {
+				//店铺主页
+				uni.navigateTo({
+					url: "/pages/product/shopPage?id=" + id,
+				});
+			},
+
+			/**
+			 * 获取商品集合
+			 */
+			getGoodList() {
+				uni.showLoading({
+					title: "加载中",
+				});
+				getGoodsCollection(this.navList[0].params, "GOODS").then((res) => {
+					uni.hideLoading();
+					uni.stopPullDownRefresh();
+					if (res.data.success) {
+						let data = res.data.result;
+						data.selected = false;
+						  this.navList[0].name = `商品(${data.total})`;
+          
+						if (data.total == 0) {
+							this.goodsEmpty = true;
+						} else if (data.total < 10) {
+							this.goodsLoad = "noMore";
+							this.goodList.push(...data.records);
+						} else {
+							this.goodList.push(...data.records);
+							if (data.total.length < 10) this.goodsLoad = "noMore";
+						}
+					}
+				});
+			},
+
+			/**
+			 * 获取店铺集合
+			 */
+			getStoreList() {
+				uni.showLoading({
+					title: "加载中",
+				});
+				getGoodsCollection(this.navList[1].params, "store").then((res) => {
+					uni.hideLoading();
+					uni.stopPullDownRefresh();
+					if (res.data.success) {
+						let data = res.data.result;
+						data.selected = false;
+						 this.navList[1].name = `店铺(${data.total})`;
+						if (data.total == 0) {
+							this.storeEmpty = true;
+						} else if (data.total < 10) {
+						
+							this.storeList.push(...data.records);
+						} 
+					}
+				});
+			},
+		},
+
+		/**
+		 * 下拉刷新时
+		 */
+		onPullDownRefresh() {
+			if (this.tabCurrentIndex == 0) {
+				this.navList[0].params.pageNumber = 1;
+				this.goodList = [];
+				this.getGoodList();
+			} else {
+				this.navList[1].params.pageNumber = 1;
+				this.storeList = [];
+				this.getStoreList();
+			}
+		},
+	};
+</script>
+
+<style lang="scss">
+	page,
+	.content {
+		background: $page-color-base;
+		height: 100%;
+	}
+
+  .slot-wrap{
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    padding-right: 72rpx;
+  }
+
+	.content {
+		width: 100%;
+	}
+
+	.swiper-box {
+		overflow-y: auto;
+	}
+
+	.list-scroll-content {
+		height: 100%;
+		width: 100%;
+	}
+
+	/deep/ .u-swipe-content {
+		overflow: hidden;
+	}
+
+	.goods {
+		background-color: #fff;
+		border-bottom: 1px solid $border-color-light;
+		height: 190rpx;
+		display: flex;
+		align-items: center;
+		padding: 30rpx 20rpx;
+		margin-top: 20rpx;
+
+		image {
+			width: 131rpx;
+			height: 131rpx;
+			border-radius: 10rpx;
+		}
+
+		.goods-intro {
+			flex: 1;
+			font-size: $font-base;
+			line-height: 48rpx;
+			margin-left: 30rpx;
+
+			view:nth-child(1) {
+				line-height: 1.4em;
+				font-size: 24rpx;
+				max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
+				overflow: hidden;
+				color: #666;
+			}
+
+			view:nth-child(2) {
+				color: #cccccc;
+				font-size: 24rpx;
+			}
+
+			view:nth-child(3) {
+				color: $light-color;
+			}
+		}
+
+		button {
+			color: $main-color;
+			height: 50rpx;
+			width: 120rpx;
+			font-size: $font-sm;
+			padding: 0;
+			line-height: 50rpx;
+			background-color: #ffffff;
+			margin-top: 80rpx;
+
+			&::after {
+				border-color: $main-color;
+			}
+		}
+	}
+
+	.store {
+		background-color: #fff;
+		border: 1px solid $border-color-light;
+		border-radius: 16rpx;
+		margin: 20rpx 10rpx;
+
+		.intro {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 30rpx 0 40rpx;
+			height: 170rpx;
+
+			.store-logo {
+				width: 102rpx;
+				height: 102rpx;
+				border-radius: 50%;
+				overflow: hidden;
+
+				image {
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+				}
+			}
+
+			.store-name {
+				flex: 1;
+				margin-left: 30rpx;
+				line-height: 2em;
+
+				:first-child {
+					font-size: $font-base;
+				}
+
+				:last-child {
+					font-size: $font-sm;
+					color: #999;
+				}
+			}
+
+			.store-collect {
+				border-left: 1px solid $border-color-light;
+				padding-left: 20rpx;
+				text-align: center;
+
+				:last-child {
+					color: #999;
+					font-size: $font-sm;
+				}
+			}
+		}
+	}
+
+	.navbar {
+		display: flex;
+		height: 40px;
+		padding: 0 5px;
+		background: #fff;
+		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+		position: relative;
+		z-index: 10;
+
+		.nav-item {
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			font-size: 26rpx;
+
+			text {
+				position: relative;
+			}
+
+			text.current {
+				color: $light-color;
+				font-weight: bold;
+				font-size: 28rpx;
+
+				&::after {
+					content: "";
+					position: absolute;
+					left: 20rpx;
+					bottom: -10rpx;
+					width: 30rpx;
+					height: 0;
+					border-bottom: 2px solid $light-color;
+				}
+			}
+		}
+	}
+</style>