wxapp_shuibei/pages/users/user_goods_collection/index.vue

<template>
  <view>
    <view class="hdbj"></view>
    <view class='collectionGoods' v-if="collectProductList.length">
      <!-- #ifdef  H5 || MP-->
      <view class='nav acea-row row-between-wrapper'>
        <view>当前共 <text class='num font-color'>{{ totals }}</text>件商品</view>
        <view class='administrate acea-row row-center-wrapper' @click='manage'>{{ footerswitch ? '管理' : '取消'}}
        </view>
      </view>
      <!-- #endif -->
      <view class="list">
        <checkbox-group @change="checkboxChange" class="centent" activeColor="#ffe079">
          <view v-for="(item,index) in collectProductList" :key="index" class='item acea-row row-middle'>
            <checkbox :value="item.id.toString()" :checked="item.checked" v-if="!footerswitch"
                      style="margin-right: 10rpx;" activeColor="#ffe079" />
            <navigator :url='"/pages/goods_details/index?id="+item.productId' hover-class='none'
                       class="acea-row">
              <view class='pictrue'>
                <image :src="item.image" mode="aspectFill"></image>
              </view>
              <view>
                <view class='name line1'>{{item.storeName}}</view>
                <view class='money font-color'>￥{{item.price}}</view>
              </view>
            </navigator>
          </view>
        </checkbox-group>
      </view>
      <view class='loadingicon acea-row row-center-wrapper'>
        <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
      </view>
      <view v-if="!footerswitch" class='footer acea-row row-between-wrapper'>
        <view>
          <checkbox-group @change="checkboxAllChange">
            <checkbox value="all" :checked="!!isAllSelect" />
            <text class='checkAll'>全选</text>
          </checkbox-group>
        </view>
        <view class='button acea-row row-middle'>
          <form @submit="delCollectionAll" report-submit='true'>
            <button class='bnt cart-color' formType="submit">取消收藏</button>
          </form>
        </view>
      </view>
    </view>
    <view class='noCommodity' v-else-if="!collectProductList.length && page > 1">
      <view class='pictrue'>
        <image :src="HTTP_REQUEST_URL_IMG+'noCollection.png'"></image>
      </view>
      <recommend :hostProduct="hostProduct"></recommend>
    </view>

    <home></home>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onActivated } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import { useAppStore } from "@/stores/app.js";
import { HTTP_REQUEST_URL_IMG } from "@/config/app";
import { getCollectUserList, getProductHot, collectDelete } from '@/api/store.js';
import { toLogin } from "@/libs/login.js";
import recommend from '@/components/recommend';

import home from '@/components/home';
import Util from '@/utils/util';

// Store
const appStore = useAppStore();
const isLogin = appStore.isLogin;

// 响应式数据
const footerswitch = ref(true);
const hostProduct = ref([]);
const loadTitle = ref('加载更多');
const loading = ref(false);
const loadend = ref(false);
const collectProductList = ref([]);
const limit = 8;
const page = ref(1);
const isAuto = ref(false);
const isShowAuth = ref(false);
const hotScroll = ref(false);
const hotPage = ref(1);
const hotLimit = 10;
const isAllSelect = ref(false);
const selectValue = ref([]);
const delBtnWidth = 80;
const totals = ref(0);
const startX = ref(0);

// #ifdef MP
// 触摸开始
const drawStart = (e) => {
  const touch = e.touches[0];
  startX.value = touch.clientX;
};

// 触摸滑动
const drawMove = (e) => {
  const touch = e.touches[0];
  const index = e.currentTarget.dataset.index;
  const disX = startX.value - touch.clientX;

  if (disX >= 20) {
    if (disX > delBtnWidth) {
      collectProductList.value[index].right = delBtnWidth;
    } else {
      collectProductList.value[index].right = disX;
    }
  } else {
    collectProductList.value[index].right = 0;
  }
};

// 触摸滑动结束
const drawEnd = (e) => {
  const index = e.currentTarget.dataset.index;
  const item = collectProductList.value[index];

  if (item.right >= delBtnWidth / 2) {
    item.right = delBtnWidth;
  } else {
    item.right = 0;
  }
};
// #endif

// 管理切换
const manage = () => {
  footerswitch.value = !footerswitch.value;
};

// 多选框变化
const checkboxChange = (event) => {
  const values = event.detail.value;

  collectProductList.value.forEach(item => {
    item.checked = values.includes(item.id.toString());
  });

  selectValue.value = values.toString();
  isAllSelect.value = collectProductList.value.length === values.length;
};

// 全选变化
const checkboxAllChange = (event) => {
  if (event.detail.value.length > 0) {
    setAllSelectValue(1);
  } else {
    setAllSelectValue(0);
  }
};

// 设置全选状态
const setAllSelectValue = (status) => {
  const selectValues = [];

  collectProductList.value.forEach(item => {
    if (status) {
      item.checked = true;
      selectValues.push(item.id);
      isAllSelect.value = true;
    } else {
      item.checked = false;
      isAllSelect.value = false;
    }
  });

  selectValue.value = selectValues.toString();
};

// 授权回调
const onLoadFun = () => {
  get_user_collect_product();
  get_host_product();
};

// 授权关闭
const authColse = (e) => {
  isShowAuth.value = e;
};

// 获取收藏产品
const get_user_collect_product = async () => {
  if (loading.value || loadend.value) return;

  loading.value = true;
  loadTitle.value = '';

  try {
    const res = await getCollectUserList({
      page: page.value,
      limit: limit
    });

    res.data.list.forEach(item => {
      item.right = 0;
    });

    totals.value = res.data.total;
    const collectProductListData = res.data.list;
    const isLoadend = collectProductListData.length < limit;

    collectProductList.value = Util.SplitArray(collectProductListData, collectProductList.value);

    if (collectProductList.value.length === 0) {
      get_host_product();
    }

    loadend.value = isLoadend;
    loadTitle.value = isLoadend ? '已全部加载' : '加载更多';
    page.value++;
  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
    loadTitle.value = '加载更多';
  }
};

// 取消收藏单个
const delCollection = (id, index) => {
  selectValue.value = id;
  del({ ids: selectValue.value.toString() });
};

// 取消收藏多个
const delCollectionAll = () => {
  if (!selectValue.value || selectValue.value.length === 0) {
    uni.showToast({ title: '请选择商品',icon:none });
  }

  del({ ids: selectValue.value });
};

// 删除操作
const del = async (data) => {
  try {
    await collectDelete(data);
    uni.showToast({ title: '取消收藏成功', icon: 'success' });

    collectProductList.value = [];
    loadend.value = false;
    page.value = 1;
    get_user_collect_product();
  } catch (err) {
    uni.showToast({ title: err.message || '操作失败' });
  }
};

// 获取热门商品
const get_host_product = async () => {
  if (hotScroll.value) return;

  try {
    const res = await getProductHot(hotPage.value, hotLimit);
    hotPage.value++;
    hotScroll.value = res.data.list.length < hotLimit;
    hostProduct.value = hostProduct.value.concat(res.data.list);
  } catch (err) {
    console.error(err);
  }
};

// 页面加载
onLoad(() => {
  if (isLogin) {
    loadend.value = false;
    page.value = 1;
    collectProductList.value = [];
    get_user_collect_product();
  } else {
    toLogin();
  }
});

// 页面显示
onShow(() => {
  loadend.value = false;
  page.value = 1;
  collectProductList.value = [];
  get_user_collect_product();
});

// 页面上拉触底
onReachBottom(() => {
  get_user_collect_product();
  get_host_product();
});
</script>

<style scoped lang="scss">
/* 样式部分保持不变 */
.hdbj {
  width: 100%;
  height: 30rpx;
  background-color: #f5f5f5;
  z-index: 999999;
  position: fixed;
  top: 0;
}

.order-item {
  width: 100%;
  display: flex;
  position: relative;
  align-items: right;
  flex-direction: row;
}

.remove {
  width: 120rpx;
  height: 100%;
  background-color: $theme-color;
  color: white;
  position: absolute;
  top: 0;
  right: -160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
}

.collectionGoods {
  .nav {
    width: 92%;
    height: 90rpx;
    background-color: #fff;
    padding: 0 24rpx;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #282828;
    position: fixed;
    left: 30rpx;
    z-index: 5;
    top: 30rpx;
    border-bottom: 1px solid #EEEEEE;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;
  }

  .list {
    padding: 30rpx;
    margin-top: 90rpx;

    .name {
      width: 434rpx;
      margin-bottom: 56rpx;
    }
  }

  .centent {
    /* #ifdef H5 || MP */
    background-color: #fff;
    /* #endif */
    border-bottom-left-radius: 14rpx;
    border-bottom-right-radius: 14rpx;
  }
}

.collectionGoods .item {
  background-color: #fff;
  padding-left: 24rpx;
  height: 180rpx;
  margin-bottom: 15rpx;
  border-radius: 14rpx;
}

.collectionGoods .item .pictrue {
  width: 130rpx;
  height: 130rpx;
  margin-right: 20rpx;
}

.collectionGoods .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 14rpx;
}

.collectionGoods .item .text {
  width: 535rpx;
  height: 130rpx;
  font-size: 28rpx;
  color: #282828;
}

.collectionGoods .item .text .name {
  width: 100%;
}

.collectionGoods .item .text .money {
  font-size: 26rpx;
}

.collectionGoods .item .text .delete {
  font-size: 26rpx;
  color: #282828;
  width: 144rpx;
  height: 46rpx;
  border: 1px solid #bbb;
  border-radius: 4rpx;
  text-align: center;
  line-height: 46rpx;
}

.noCommodity {
  background-color: #fff;
  padding-top: 1rpx;
  border-top: 0;
}

.footer {
  z-index: 9;
  width: 100%;
  height: 96rpx;
  background-color: #fff;
  position: fixed;
  padding: 0 30rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #eee;
  border-bottom: 1px solid #EEEEEE;
  /* #ifdef H5 || MP */
  bottom: 0rpx;
  /* #endif */
  /* #ifndef MP */
  // bottom: 98rpx;
  // bottom: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  // bottom: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  /* #endif */
  .checkAll {
    font-size: 28rpx;
    color: #282828;
    margin-left: 16rpx;
  }

  .button .bnt {
    font-size: 28rpx;
    color: #999;
    border-radius: 30rpx;
    border: 1px solid #999;
    width: 160rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
  }
}
</style>