style(client): 优化我的收藏页面

src/PageMine/favourite/index copy.vue

@@ -0,0 +1,236 @@
+<template>
+  <view class="container" @click="handlerClearPop">
+    <page-navbar bgColor="#fff" title="我的收藏"></page-navbar>
+    <view class="collect-list">
+      <u-tabs
+        :list="listCollect"
+        @click="clickCollect"
+        lineWidth="30"
+        lineColor="#5992bb"
+        :activeStyle="{
+          color: '#303133',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)',
+        }"
+        :inactiveStyle="{
+          color: '#606266',
+          transform: 'scale(1)',
+        }"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+      />
+    </view>
+
+    <u-divider text="以下是您收藏的商家"></u-divider>
+
+    <view class="favoutire-box">
+      <view class="item-box" v-for="(item, index) of init_list" :key="index">
+        <view class="item-left">
+          <image src="@/static/QR57a.jpg" class="img"></image>
+        </view>
+        <view class="item-right">
+          <view class="name">{{ item.name }}</view>
+          <view class="favourite">{{ item.favouriteNumb }}人收藏</view>
+          <view class="price-box">
+            <view class="price-left">¥{{ item.price }}</view>
+            <view class="price-right" @click.stop="handlerShowPop(item, index)">
+              <u-icon name="more-dot-fill" color="#000" size="16"></u-icon>
+            </view>
+            <view class="pop-box" v-show="item.show">
+              <view class="pop-item" @click="handlerSkipShow(item, index)">进店逛逛</view>
+              <view class="pop-item" @click="handlerDeleteItem(item, index)">删除</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      listCollect: [
+        {
+          id: 1,
+          name: '商家',
+        },
+        {
+          id: 1,
+          name: '服务',
+        },
+      ],
+      init_list: [
+        {
+          name: '测试店铺1',
+          favouriteNumb: 120,
+          price: 85,
+          show: false,
+        },
+        {
+          name: '测试店铺2',
+          favouriteNumb: 5201,
+          price: 96,
+          show: false,
+        },
+        {
+          name: '测试店铺3',
+          favouriteNumb: 12,
+          price: 41,
+          show: false,
+        },
+      ],
+      indexs: 0,
+    };
+  },
+  methods: {
+    clickCollect(e) {
+      // this.init_list = []
+      this.indexs = e.index;
+      switch (e.index) {
+        case 0:
+          // this.handlerInitList()
+          break;
+        case 1:
+          // this.handlerInitGoodsList()
+          break;
+      }
+    },
+    // 点击显示
+    handlerShowPop(item, index) {
+      this.init_list.map(rs => {
+        if (rs.show) {
+          rs.show = false;
+        }
+      });
+      item.show = true;
+    },
+    // 清除showPop
+    handlerClearPop() {
+      this.init_list.map(rs => {
+        if (rs.show) {
+          rs.show = false;
+          console.log('@@@@rs', rs);
+        }
+      });
+      console.log('@@@@@@@');
+    },
+    // 进店逛逛
+    handlerSkipShow() {
+      uni.showToast({
+        title: '进店',
+        icon: 'none',
+      });
+    },
+    // 删除
+    handlerDeleteItem() {
+      uni.showToast({
+        title: '删除',
+        icon: 'none',
+      });
+    },
+  },
+};
+</script>
+
+<style lang='scss' scope>
+page {
+  background-color: #f9f9f9;
+}
+
+.container {
+  font-size: 28rpx;
+  width: 100%;
+  min-height: 100vh;
+
+  .collect-list {
+    display: flex;
+    height: 70rpx;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    margin-bottom: 40rpx;
+  }
+
+  .notic-b {
+    text-align: center;
+    margin: 24rpx 0;
+  }
+
+  .favoutire-box {
+    padding: 0 32rpx;
+    width: calc(100% - 64rpx);
+
+    .item-box {
+      display: flex;
+      background-color: #fff;
+      width: 100%;
+      margin-bottom: 24rpx;
+      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
+
+      .item-left {
+        .img {
+          width: 160rpx;
+          height: 160rpx;
+          border-radius: 16px;
+        }
+      }
+
+      .item-right {
+        width: calc(100% - 180rpx);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        .name {
+          color: #333333;
+        }
+
+        .favourite {
+          color: #999999;
+          font-size: 24rpx;
+        }
+
+        .price-box {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+
+          .price-left {
+            color: #eb3636;
+            font-weight: bold;
+          }
+
+          .price-right {
+          }
+
+          .pop-box {
+            width: 166rpx;
+            position: absolute;
+            right: -4%;
+            bottom: -340%;
+            padding: 24rpx;
+            border-radius: 16rpx;
+            background-color: #fff;
+            box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
+
+            .pop-item {
+              text-align: center;
+              margin-bottom: 16rpx;
+            }
+
+            .pop-item:last-child {
+              margin: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .item-box:last-child {
+      margin: 0;
+    }
+  }
+}
+</style>

src/PageMine/favourite/index.vue

@@ -1,48 +1,63 @@
 <template>
-  <view class="container" @click="handlerClearPop">
-    <page-navbar bgColor="#fff" title="我的收藏"></page-navbar>
-    <view class="collect-list">
-      <u-tabs
-        :list="listCollect"
-        @click="clickCollect"
-        lineWidth="30"
-        lineColor="#5992bb"
-        :activeStyle="{
-          color: '#303133',
-          fontWeight: 'bold',
-          transform: 'scale(1.05)',
-        }"
-        :inactiveStyle="{
-          color: '#606266',
-          transform: 'scale(1)',
-        }"
-        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
-      />
+  <view class="favorite">
+    <page-navbar bgColor="#fff" title="我的收藏" />
+    <view class="direction" style="background-color: #fff">
+      <base-tabs :list="listCollect" paddingLeft="30rpx" paddingRight="30rpx"></base-tabs>
+    </view>
+    <view style="margin: 24rpx 0">
+      <view class="f-s-24 text-center" style="color: #9fa0a6">以下是您收藏的商家</view>
     </view>
 
-    <u-divider text="以下是您收藏的商家"></u-divider>
-
-    <view class="favoutire-box">
-      <view class="item-box" v-for="(item, index) of init_list" :key="index">
-        <view class="item-left">
-          <image src="@/static/QR57a.jpg" class="img"></image>
+    <base-card padding="24rpx" marginBottom="24rpx">
+      <view class="fl-flex" style="position: relative">
+        <base-img
+          src="/static/img.jpg"
+          width="160rpx"
+          height="160rpx"
+          borderRadius="16rpx"
+        ></base-img>
+        <view class="merchant-list u-m-l-32">
+          <view class="f-s-30 text-primary u-m-b-14 text-bold u-m-t-8">
+            理想汽车（银泰城店）
+          </view>
+          <view class="fl-flex u-m-b-14 fl-align-center">
+            <u-rate
+              v-model="value"
+              readonly
+              gutter="0"
+              size="24"
+              activeColor="#ffa033"
+            ></u-rate>
+            <view class="f-s-26 text-999">(3.0)</view>
+          </view>
+          <view class="f-s-24 text-999">世纪城国际展览中心世纪城国际展览中心</view>
         </view>
-        <view class="item-right">
-          <view class="name">{{ item.name }}</view>
-          <view class="favourite">{{ item.favouriteNumb }}人收藏</view>
-          <view class="price-box">
-            <view class="price-left">¥{{ item.price }}</view>
-            <view class="price-right" @click.stop="handlerShowPop(item, index)">
-              <u-icon name="more-dot-fill" color="#000" size="16"></u-icon>
-            </view>
-            <view class="pop-box" v-show="item.show">
-              <view class="pop-item" @click="handlerSkipShow(item, index)">进店逛逛</view>
-              <view class="pop-item" @click="handlerDeleteItem(item, index)">删除</view>
-            </view>
+        <view style="position: absolute; right: 0; bottom: -30rpx">
+          <u-icon name="more-dot-fill" color="#333" size="28"></u-icon>
+        </view>
+      </view>
+    </base-card>
+
+    <base-card padding="24rpx" marginBottom="24rpx">
+      <view class="fl-flex" style="position: relative">
+        <base-img
+          src="/static/img.jpg"
+          width="160rpx"
+          height="160rpx"
+          borderRadius="16rpx"
+        ></base-img>
+        <view class="merchant-list u-m-l-32">
+          <view class="f-s-30 text-primary u-m-b-14 text-bold u-m-t-8">
+            驾驰腾雾金合成小保养
           </view>
+          <view class="f-s-26 u-m-b-18"> 100+收藏 </view>
+          <view class="f-s-24 text-999">世纪城国际展览中心世纪城国际展览中心</view>
+        </view>
+        <view style="position: absolute; right: 0; bottom: -30rpx">
+          <u-icon name="more-dot-fill" color="#333" size="28"></u-icon>
         </view>
       </view>
-    </view>
+    </base-card>
   </view>
 </template>
 
@@ -50,6 +65,7 @@
 export default {
   data() {
     return {
+      value: 3,
       listCollect: [
         {
           id: 1,
@@ -63,36 +79,33 @@ export default {
       init_list: [
         {
           name: '测试店铺1',
-          favouriteNumb: 120,
+          favoriteNum: 120,
           price: 85,
           show: false,
         },
         {
           name: '测试店铺2',
-          favouriteNumb: 5201,
+          favoriteNum: 5201,
           price: 96,
           show: false,
         },
         {
           name: '测试店铺3',
-          favouriteNumb: 12,
+          favoriteNum: 12,
           price: 41,
           show: false,
         },
       ],
-      indexs: 0,
+      index: 0,
     };
   },
   methods: {
     clickCollect(e) {
-      // this.init_list = []
-      this.indexs = e.index;
+      this.index = e.index;
       switch (e.index) {
         case 0:
-          // this.handlerInitList()
           break;
         case 1:
-          // this.handlerInitGoodsList()
           break;
       }
     },
@@ -110,10 +123,8 @@ export default {
       this.init_list.map(rs => {
         if (rs.show) {
           rs.show = false;
-          console.log('@@@@rs', rs);
         }
       });
-      console.log('@@@@@@@');
     },
     // 进店逛逛
     handlerSkipShow() {
@@ -134,103 +145,7 @@ export default {
 </script>
 
 <style lang='scss' scope>
-page {
-  background-color: #f9f9f9;
-}
-
-.container {
-  font-size: 28rpx;
-  width: 100%;
-  min-height: 100vh;
-
-  .collect-list {
-    display: flex;
-    height: 70rpx;
-    justify-content: center;
-    align-items: center;
-    background-color: #fff;
-    margin-bottom: 40rpx;
-  }
-
-  .notic-b {
-    text-align: center;
-    margin: 24rpx 0;
-  }
-
-  .favoutire-box {
-    padding: 0 32rpx;
-    width: calc(100% - 64rpx);
-
-    .item-box {
-      display: flex;
-      background-color: #fff;
-      width: 100%;
-      margin-bottom: 24rpx;
-      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
-
-      .item-left {
-        .img {
-          width: 160rpx;
-          height: 160rpx;
-          border-radius: 16px;
-        }
-      }
-
-      .item-right {
-        width: calc(100% - 180rpx);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-
-        .name {
-          color: #333333;
-        }
-
-        .favourite {
-          color: #999999;
-          font-size: 24rpx;
-        }
-
-        .price-box {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          position: relative;
-
-          .price-left {
-            color: #eb3636;
-            font-weight: bold;
-          }
-
-          .price-right {
-          }
-
-          .pop-box {
-            width: 166rpx;
-            position: absolute;
-            right: -4%;
-            bottom: -340%;
-            padding: 24rpx;
-            border-radius: 16rpx;
-            background-color: #fff;
-            box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
-
-            .pop-item {
-              text-align: center;
-              margin-bottom: 16rpx;
-            }
-
-            .pop-item:last-child {
-              margin: 0;
-            }
-          }
-        }
-      }
-    }
-
-    .item-box:last-child {
-      margin: 0;
-    }
-  }
+.favorite {
+  padding: 0 32rpx;
 }
 </style>