tmerclub-uniapp/src/package-activities/pages/my-collection/my-collection.vue

<template>
  <z-paging
    ref="pagingRef"
    v-model="prodOrShopList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    :empty-view-text="`您还没有收藏过${ navStatus === 1 ? '店铺' : '商品' }`"
    loading-more-no-more-text="没有更多了，看看别的吧"
    empty-view-img="/static/empty-img/collect-empty.png"
    @query="onQueryCollectData"
  >
    <view class="Mall4j page-my-collection">
      <!-- tab -->
      <view class="tab">
        <view
          :class="['item', navStatus === 0 ? 'active' : '']"
          @tap="onSwitchNav(0)"
        >
          商品({{ prodCollectedNum }})
        </view>
        <view
          :class="['item', navStatus === 1 ? 'active' : '']"
          @tap="onSwitchNav(1)"
        >
          店铺({{ shopCollectedNum }})
        </view>
      </view>

      <!-- 产品列表 -->
      <view
        v-if="navStatus === 0 && prodOrShopList.length > 0"
        class="line-prods"
      >
        <view
          v-for="(item,index) in prodOrShopList"
          :key="index"
          class="item"
        >
          <view
            class="img"
            @tap="onToProdDetail(item.spuId, item.status)"
          >
            <img-show
              :src="item.mainImgUrl"
              img-mode="aspectFit"
            />
          </view>
          <view class="text-box">
            <view
              class="prod-info"
              @tap="onToProdDetail(item.spuId, item.status)"
            >
              <view class="name">
                {{ item.spuName }}
              </view>
              <view class="sku">
                {{ item.sellingPoint }}
              </view>
            </view>
            <view class="price-box">
              <view
                class="price"
                @tap="onToProdDetail(item.spuId, item.status)"
              >
                <view class="symbol">
                  ￥
                </view>
                <view class="big">
                  {{ wxs.parsePrice(item.priceFee)[0] }}
                </view>
                <view class="symbol">
                  .{{ wxs.parsePrice(item.priceFee)[1] }}
                </view>
              </view>
              <view
                class="btn"
                @tap="showDelPopup(item.spuId,'prod')"
              >
                取消收藏
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 店铺列表 -->
      <view
        v-if="navStatus === 1 && prodOrShopList.length > 0"
        class="shop-list"
      >
        <view
          v-for="(item,index) in prodOrShopList"
          :key="index"
          class="item"
        >
          <view
            class="logo"
            @tap="onToShopIndex(item)"
          >
            <image
              v-if="item.shopLogo"
              :src="util.addDomain(item.shopLogo)"
              @error="prodOrShopList[index].shopLogo = ''"
            />
            <image
              v-else
              src="@/package-activities/static/images/default-shop-logo.png"
            />
          </view>
          <view
            class="text-box"
            @tap="onToShopIndex(item)"
          >
            <view class="shop-name">
              {{ item.shopName }}
            </view>
            <view class="focus">
              <view
                v-if="item.type === 1"
                class="self"
              >
                自营
              </view>
              <view class="number">
                关注人数：{{ wxs.parseCollectionNumber(item.collectionNum) }}
              </view>
            </view>
          </view>
          <view
            class="del"
            @tap="showDelPopup(item.shopId, 'shop')"
          >
            取消收藏
          </view>
        </view>
      </view>

      <!-- 取消收藏确认弹窗 -->
      <confirm-pop
        :show-pop="showPop"
        :pop-content="popContent"
        @handle-pop-cancel="onPopCancel"
        @handle-pop-confirm="onPopConfirm"
      />
    </view>
  </z-paging>
</template>

<script setup>
import util from '@/utils/util.js'

const wxs = number()

const showPop = ref(false) // 弹窗显隐
const navStatus = ref(0) // 0商品 1店铺
let selectItemId = null // 选中的item id
const popContent = reactive({
  title: '是否确认取消收藏',
  content: '商品取消收藏后将不容易被找到哦~'
})

onLoad(() => {
  onGetNumberOfProdCollected()
  onGetNumberOfShopCollected()
})

/**
 * 切换nav
 */
const onSwitchNav = (nav) => {
  navStatus.value = nav
  popContent.content = nav === 0 ? '商品取消收藏后将不容易被找到哦~' : '店铺取消收藏后将不容易被找到哦~'
  pagingRef.value.reload()
}

/**
 * 获取商品收藏数量
 */
const prodCollectedNum = ref(0)
const onGetNumberOfProdCollected = () => {
  http.request({
    url: '/tmerclub_product/spu_collection/count',
    method: 'GET'
  }).then(res => {
    prodCollectedNum.value = res
  })
}

/**
 * 获取店铺收藏数量
 */
const shopCollectedNum = ref(0)
const onGetNumberOfShopCollected = () => {
  http.request({
    url: '/tmerclub_admin/user_collection_shop/count',
    method: 'GET'
  }).then(res => {
    shopCollectedNum.value = res
  })
}

/**
 * 请求 商品/店铺 收藏列表
 */
const pagingRef = ref(null)
const prodOrShopList = ref([])
const onQueryCollectData = (pageNum, pageSize) => {
  let url = ''
  if (navStatus.value === 0) {
    url = '/tmerclub_product/spu_collection/page'
  } else if (navStatus.value === 1) {
    url = '/tmerclub_admin/user_collection_shop/page'
  }
  http.request({
    url,
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      needActivity: 1 // 是否需要活动信息 1：需要 0：不需要
    }
  }).then(res => {
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list)
  })
}

/**
 * 取消收藏
 */
const onCancelCollect = () => {
  let url = ''
  selectItemId = String(selectItemId)
  if (navStatus.value === 0) {
    url = '/tmerclub_product/spu_collection/add_or_cancel'
  } else if (navStatus.value === 1) {
    url = '/tmerclub_admin/user_collection_shop/add_or_cancel'
  }
  http.request({
    url,
    method: 'POST',
    data: selectItemId
  }).then(() => {
    showPop.value = false
    pagingRef.value.reload()
    onGetNumberOfProdCollected()
    onGetNumberOfShopCollected()
  })
}

// 显示删除弹窗
const showDelPopup = (id) => {
  selectItemId = id
  showPop.value = true
}

/**
 * 弹窗确认
 */
const onPopConfirm = () => {
  onCancelCollect()
}

/**
 * 弹窗取消事件
 */
const onPopCancel = () => {
  showPop.value = false
}

/**
 * 跳转到店铺首页
 */
const onToShopIndex = (shopInfo) => {
  // shopStatus 店铺状态(-1:未开通 0: 停业中 1:营业中 2:平台下线 3:平台下线待审核)
  if (shopInfo.shopStatus !== 1) {
    uni.showToast({
      title: '该店铺暂时无法访问',
      icon: 'none'
    })
    return
  }
  let url
  if (shopInfo.renovationId) {
    url = '/package-shop/shop-page/feature-index/feature-index?shopId=' + shopInfo.shopId + '&renovationId=' + shopInfo.renovationId
  } else {
    url = '/package-shop/shop-page/shop-index/shop-index?shopId=' + shopInfo.shopId
  }
  uni.navigateTo({
    url
  })
}

/**
 * 跳转到商品详情页
 */
const onToProdDetail = (spuId, status) => {
  // status 商品状态 1:enable, 0:disable, -1:deleted
  if (status === -1) {
    uni.showToast({
      title: '商品不存在',
      icon: 'none'
    })
    return
  }
  if (status === 0) {
    uni.showToast({
      title: '商品已被下架',
      icon: 'none'
    })
    return
  }
  uni.navigateTo({
    url: '/pages/detail/detail?spuId=' + spuId
  })
}
</script>

<style lang="scss" scoped>
@use "./my-collection.scss";
</style>