✨ 我的收藏：接入完成

pages/user/goods-collect.vue

@@ -1,12 +1,11 @@
+<!-- 我的商品收藏 -->
 <template>
   <s-layout title="商品收藏">
     <view class="cart-box ss-flex ss-flex-col ss-row-between">
       <!-- 头部 -->
       <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
         <view class="header-left ss-flex ss-col-center ss-font-26">
-          共
+          共 <text class="goods-number ui-TC-Main ss-flex">{{ state.pagination.total }}</text> 件商品
-          <text class="goods-number ui-TC-Main ss-flex">{{ state.pagination.total }}</text>
-          件商品
         </view>
         <view class="header-right">
           <button
@@ -20,15 +19,16 @@
             v-if="!state.editMode && state.pagination.total"
             class="ss-reset-button ui-TC-Main"
             @tap="state.editMode = true"
-            >编辑</button
           >
+            编辑
+          </button>
         </view>
       </view>
       <!-- 内容 -->
       <view class="cart-content">
         <view
           class="goods-box ss-r-10 ss-m-b-14"
-          v-for="item in state.pagination.data"
+          v-for="item in state.pagination.list"
           :key="item.id"
         >
           <view class="ss-flex ss-col-center">
@@ -44,12 +44,10 @@
                 @tap.stop="onSelect(item.spuId)"
               />
             </label>
-			  <!-- :skuText="item.goods.subtitle" -->
             <s-goods-item
               :title="item.spuName"
               :img="item.picUrl"
               :price="item.price"
-            
               priceColor="#FF3000"
               :titleWidth="400"
               @tap="
@@ -57,11 +55,11 @@
                   id: item.spuId,
                 })
               "
-            >
+            />
-            </s-goods-item>
           </view>
         </view>
       </view>
+
       <!-- 底部 -->
       <su-fixed bottom :val="0" placeholder v-show="state.editMode">
         <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
@@ -79,9 +77,9 @@
           <view class="footer-right">
             <button
               class="ss-reset-button ui-BG-Main-Gradient pay-btn ss-font-28 ui-Shadow-Main"
-              @tap="onCancel"
+              @tap="onCancel">
-              >取消收藏</button
+              取消收藏
-            >
+            </button>
           </view>
         </view>
       </su-fixed>
@@ -92,7 +90,7 @@
       :content-text="{
         contentdown: '上拉加载更多',
       }"
-      @tap="loadmore"
+      @tap="loadMore"
     />
     <s-empty v-if="state.pagination.total === 0" text="暂无收藏" icon="/static/collect-empty.png" />
   </s-layout>
@@ -103,98 +101,89 @@
   import { reactive } from 'vue';
   import { onLoad, onReachBottom } from '@dcloudio/uni-app';
   import _ from 'lodash';
+  import FavoriteApi from '@/sheep/api/product/favorite';
+  import { resetPagination } from '@/sheep/util';
 
   const sys_navBar = sheep.$platform.navbar;
-  const pagination = {
+
-    data: [],
-    current_page: 1,
-    total: 1,
-    last_page: 1,
-  };
   const state = reactive({
     pagination: {
-      data: [],
+      list: [],
-      current_page: 1,
+      total: 0,
-      total: 1,
+      pageNo: 1,
-      last_page: 1,
+      pageSize: 6,
     },
     loadStatus: '',
+
     editMode: false,
-    selectedCollectList: [],
+    selectedCollectList: [], // 选中的 SPU 数组
     selectAll: false,
   });
 
-  async function getData(page = 1, list_rows = 6) {
+  async function getData() {
     state.loadStatus = 'loading';
-    let res = await sheep.$api.user.favorite.list({
+    const { code, data } = await FavoriteApi.getFavoritePage({
-      pageSize:list_rows,
+      pageNo: state.pagination.pageNo,
-      pageNo:page,
+      pageSize: state.pagination.pageSize,
     });
-    if (res.code === 0) {
+    if (code !== 0) {
-		console.log('yudao收藏列表',res)
+      return;
-      let orderList = _.concat(state.pagination.data, res.data.list);
-      state.pagination = {
-        ...res.data,
-        data: orderList,
-      };
-	  // 没有原接口文档不太理解这字段意思
-      if (state.pagination.current_page < state.pagination.last_page) {
-        state.loadStatus = 'more';
-      } else {
-        state.loadStatus = 'noMore';
-      }
     }
-  }
+    state.pagination.list = _.concat(state.pagination.list, data.list)
-  // 格式化价格
+    state.pagination.total = data.total;
-  function formatPrice(e) {
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
-    return e.length === 1 ? e[0] : e.join('~');
   }
 
   // 单选选中
-  const onSelect = (id) => {
+  const onSelect = (spuId) => {
-    if (!state.selectedCollectList.includes(id)) {
+    if (!state.selectedCollectList.includes(spuId)) {
-      state.selectedCollectList.push(id);
+      state.selectedCollectList.push(spuId);
     } else {
-      state.selectedCollectList.splice(state.selectedCollectList.indexOf(id), 1);
+      state.selectedCollectList.splice(state.selectedCollectList.indexOf(spuId), 1);
     }
-    state.selectAll = state.selectedCollectList.length === state.pagination.data.length;
+    state.selectAll = state.selectedCollectList.length === state.pagination.list.length;
   };
+
   // 全选
   const onSelectAll = () => {
     state.selectAll = !state.selectAll;
     if (!state.selectAll) {
       state.selectedCollectList = [];
     } else {
-      state.pagination.data.forEach((item) => {
+      state.selectedCollectList = state.pagination.list.map((item) => item.spuId);
-        if (state.selectedCollectList.includes(item.goods_id)) {
-          state.selectedCollectList.splice(state.selectedCollectList.indexOf(item.goods_id), 1);
-        }
-        state.selectedCollectList.push(item.goods_id);
-      });
     }
   };
+
   async function onCancel() {
-    if (state.selectedCollectList) {
+    if (!state.selectedCollectList) {
-      state.selectedCollectList = state.selectedCollectList.toString();
+      return;
-      const { code } = await sheep.$api.user.favorite.cancel(state.selectedCollectList);
-      if (code === 0) {
-        state.editMode = false;
-        state.selectedCollectList = [];
-        state.selectAll = false;
-        state.pagination = pagination;
-        getData();
-      }
     }
+    // 取消收藏
+    for (const spuId of state.selectedCollectList) {
+      await FavoriteApi.deleteFavorite(spuId);
+    }
+
+    // 清空选择 + 重新加载
+    state.editMode = false;
+    state.selectedCollectList = [];
+    state.selectAll = false;
+    resetPagination(state.pagination);
+    await getData();
   }
+
   // 加载更多
-  function loadmore() {
+  function loadMore() {
-    if (state.loadStatus !== 'noMore') {
+    if (state.loadStatus === 'noMore') {
-      getData(state.pagination.current_page + 1);
+      return
     }
+    state.pagination.pageNo++;
+    getData();
   }
+
   onReachBottom(() => {
-    loadmore();
+    loadMore();
   });
+
   onLoad(() => {
     getData();
   });

sheep/api/product/favorite.js

@@ -0,0 +1,24 @@
+import request from '@/sheep/request';
+
+const FavoriteApi = {
+  // 获得商品收藏分页
+  getFavoritePage: (data) => {
+    return request({
+      url: '/app-api/product/favorite/page',
+      method: 'GET',
+      params: data
+    });
+  },
+  // 取消商品收藏
+  deleteFavorite: (spuId) => {
+    return request({
+      url: '/app-api/product/favorite/delete',
+      method: 'DELETE',
+      data: {
+        spuId
+      }
+    });
+  }
+};
+
+export default FavoriteApi;

sheep/components/s-goods-item/s-goods-item.vue

@@ -26,7 +26,7 @@
               :style="[{ color: priceColor }]"
               v-if="price && Number(price) > 0"
             >
-              ￥{{ price }}
+              ￥{{ fen2yuan(price) }}
             </view>
             <view v-if="score && Number(price) > 0">+</view>
             <view class="price-text ss-flex ss-col-center" v-if="score">
@@ -54,6 +54,7 @@
 <script setup>
   import sheep from '@/sheep';
   import { computed } from 'vue';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
   /**
    * 订单卡片
    *

sheep/util/index.js

@@ -100,3 +100,16 @@ export function handleTree(data, id = 'id', parentId = 'parentId', children = 'c
   });
   return treeData !== '' ? treeData : data;
 }
+
+/**
+ * 重置分页对象
+ *
+ * TODO 芋艿：需要处理其它页面
+ *
+ * @param pagination 分页对象
+ */
+export function resetPagination(pagination) {
+  pagination.list = [];
+  pagination.total = 0;
+  pagination.pageNo = 1;
+}