applet/pages/shop/index.vue

<template>
  <view>
    <uv-navbar title="店铺信息" placeholder autoBack></uv-navbar>
    <view class="top">
      <view class="shop">
        <view class="shop_l">
          <image :src="details.image" mode="" />
          <view>
            <view class="shop_l_title">{{ details.businessName }}</view>
            <view class="shop_l_rate u-flex-center-sb">
              <view class="u-flex-center">
                <rate :value="Math.round(details.average)" />
                <text class="u-font24 u-ml10">{{ details.average }}分</text>
              </view>
              <view class="shop_r" @click="goPhone()"> 售后电话 </view>
            </view>
          </view>
        </view>
      </view>
      <view class="searchBox">
        <image :src="$handleImageUrl('/common/search.png')" mode=""></image>
        <input
          @click="searchClick"
          v-model="value"
          type="text"
          placeholder-style="color:#B3B3B3;font-size:28rpx"
          placeholder="可搜索本店商品"
        />
      </view>
    </view>

    <!-- 限时秒杀 -->
    <SeckillGood />
    <!-- 拼团购 -->
    <GroupBuyingGood />

    <view class="tabsBox">
      <uv-tabs
        :list="tabList"
        keyName="categoryName"
        lineColor="#FA6138"
        activeStyle="color:#FA6138;"
        lineWidth="60rpx"
        @click="tabsClick"
      ></uv-tabs>
    </view>
    <view class="list">
      <view
        class="goodsListA_item"
        v-for="item in list"
        :key="item.id"
        @click="goDetails(item)"
      >
        <image :src="`${item.coverImage}`" mode=""></image>
        <view class="goodsListA_item_title">{{ item.title }}</view>
        <view class="goodsListA_item_pirce">
          <text v-if="item.productPaymentMode == 1" style="font-size: 22rpx"
            >{{ item.minPoints }}积分</text
          >
          <rich-text
            v-else
            :nodes="$mUtil.priceBigSmall(item.salePrice || item.minSalePrice)"
          ></rich-text>
          <view>¥ {{ item.marketPrice || item.minMarketPrice }}</view>
        </view>
        <view class="goodsListA_item_num">已售{{ item.showSales }}件</view>
      </view>
    </view>
    <view v-if="list.length <= 0" style="width: 100%">
      <noData :config="{ top: 20, content: '暂无商品~' }"></noData>
    </view>
    <uv-load-more v-else :status="status" />
  </view>
</template>

<script setup >
import {
  getBusinessInfo,
  getProductCategoryList,
  productList,
} from "@/api/shop.js";
import { ref, getCurrentInstance } from "vue";
import {
  onShow,
  onLoad,
  onPullDownRefresh,
  onReachBottom,
} from "@dcloudio/uni-app";
import SeckillGood from "./components/SeckillGood.vue"; // 限时秒杀组件
import GroupBuyingGood from "./components/GroupBuyingGood.vue"; // 拼团购组件

const details = ref({});
const value = ref("");
const status = ref("loadmore");
const list = ref([]); // 添加缺失的商品列表数据
const tabList = ref([
  {
    id: 1,
    categoryName: "全部",
    categoryId: "",
  },
  {
    id: 2,
    categoryName: "热销",
    categoryId: "hot",
  },
  {
    id: 3,
    categoryName: "新品",
    categoryId: "new",
  },
]);
const params = ref({
  pageNum: 1,
  pageSize: 10,
});


onLoad((options) => {
  let id = options.businessId;
  if (id) {
    params.value.businessId = id;
    getDetails();
    getTabs();
  }
});
// 下拉刷新
onPullDownRefresh(() => {
  params.value.pageNum = 1;
  getProductList();
});
// 上拉加载更多
onReachBottom(() => {
  if (status.value == "loadmore") {
    params.value.pageNum++;
    getProductList();
  }
});
const goBack = () => {
  // uni.navigateBack()
  uni.navigateTo({ url: "/pages/index/index" });
};
const getTabs = () => {
  getProductCategoryList({ businessId: params.value.businessId }).then(
    (res) => {
      tabList.value = [...tabList.value, ...res.data];
    }
  );
};
// 商家电话
const goPhone = () => {
  if (details.value.customerServicePhone) {
    uni.makePhoneCall({
      phoneNumber: details.value.customerServicePhone,
    });
  } else {
    uni.showToast({
      title: "暂无商家电话",
      icon: "none",
    });
  }
};
const getDetails = () => {
  getBusinessInfo({ businessId: params.value.businessId }).then((res) => {
    details.value = res.data;
    getProductList();
  });
};
// 获取商品分页列表
const getProductList = () => {
  status.value = "loading";
  productList(params.value)
    .then((res) => {
      if (!res.rows) return;
      if (params.value.pageNum == 1) {
        list.value = res.rows;
      } else {
        list.value = [...list.value, ...res.rows];
      }
      if (list.value.length < res.total) {
        status.value = "loadmore";
      } else {
        status.value = "noMore";
      }
      uni.stopPullDownRefresh();
    })
    .catch((e) => {
      uni.stopPullDownRefresh();
      status.value = "loadmore";
    });
};
const goDetails = (item) => {
  uni.navigateTo({
    url: `/pages/shop/goodsDetails?id=${item.productId}`,
  });
};
const searchClick = () => {
  uni.navigateTo({
    url: "/pages/shop/goodSearch",
  });
};
const tabsClick = (e) => {
  // 重置分页参数
  params.value.pageNum = 1;
  // 根据选中的标签设置不同的查询参数
  if (e.index === 0) {
    // 全部
    delete params.value.productCategoryId;
    delete params.value.hot;
    delete params.value.newStatus;
  } else if (e.index === 1) {
    // 热销
    params.value.hot = true;
    delete params.value.productCategoryId;
    delete params.value.newStatus;
  } else if (e.index === 2) {
    // 新品
    params.value.newStatus = true;
    delete params.value.productCategoryId;
    delete params.value.hot;
  } else {
    // 具体分类
    params.value.productCategoryId = tabList.value[e.index].categoryId;
    delete params.value.hot;
    delete params.value.newStatus;
  }
  // 重新获取商品列表
  getProductList();
};
</script>

<style lang="scss" scoped>
.top {
  width: 720rpx;
  padding: 30rpx;
  box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
  background: #ffffff;
  border-radius: 20rpx;
  margin: auto;
  box-sizing: border-box;
}
.shop {
  display: flex;
  align-items: center;
  position: relative;
  .shop_l {
    width: 100%;
    display: flex;
    align-items: center;
    image {
      width: 124rpx;
      height: 124rpx;
      border-radius: 20rpx;
    }
    > view {
      flex: 1;
      margin-left: 20rpx;
      .shop_l_title {
        font-size: 32rpx;
        color: #333333;
        font-weight: 700;
      }
      .shop_l_rate {
        margin-top: 10rpx;
      }
    }
  }
  .shop_r {
    width: 150rpx;
    margin-left: auto;
    padding: 6rpx 0rpx;
    text-align: center;
    color: #666;
    border-radius: 25rpx;
    background-color: #fff;
    border: 1rpx solid #666;
    // position: absolute;
    // right: 30rpx;
    // bottom: 25rpx;
    // font-size: 28rpx;
  }
}
.searchBox {
  display: flex;
  padding: 10rpx 35rpx;
  border: 1rpx solid #cccccc;
  border-radius: 36rpx;
  margin: 30rpx 0 0;
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  background: #fff;

  image {
    width: 35rpx;
    height: 35rpx;
    margin-right: 15rpx;
    flex-shrink: 0;
  }

  input {
    text-align: left;
  }
}

.tabsBox {
  margin-bottom: 20rpx;
  padding: 0 30rpx;
}
.list {
  padding: 0 30rpx;
  display: flex;
  flex-wrap: wrap;

  .goodsListA_item {
    width: 336rpx;
    box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
    border-radius: 18rpx;
    margin-left: 18rpx;
    margin-bottom: 30rpx;

    &:nth-child(2n-1) {
      margin-left: 0 !important;
    }

    image {
      width: 336rpx;
      height: 336rpx;
      border-radius: 18rpx 18rpx 0 0;
    }

    > view {
      padding: 0 20rpx;
    }

    .goodsListA_item_title {
      font-size: 28rpx;
      color: #181818;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .goodsListA_item_pirce {
      display: flex;
      // align-items: flex-end;
      align-items: baseline;
      font-size: 20rpx;
      color: #ff6600;
      font-weight: 700;

      text {
        font-size: 36rpx;
        font-weight: 500;
        display: inline-block;
        // position: relative;
        // top: 4rpx;
      }

      > view {
        font-size: 24rpx;
        color: #cccccc;
        margin-left: 30rpx;
        text-decoration: line-through;
        font-weight: normal;
      }
    }

    .goodsListA_item_num {
      font-size: 22rpx;
      color: #999999;
      margin-top: 10rpx;
      padding-bottom: 20rpx;
    }
  }
}
</style>