applet/pages/tabtar/shop.vue

<template>
  <view>
    <uv-navbar title="店铺信息" placeholder></uv-navbar>
    <view class="top">
      <view class="shop">
        <view class="shop_l">
          <image :src="details.logo" mode="" />
          <view>
            <view class="shop_l_title">{{details.businessName}}</view>
            <view class="shop_l_rate">
              <rate :value="Math.round(details.average)" />
            </view>
          </view>
        </view>
        <view class="shop_r" @click="goPhone()">
          售后电话
        </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>
    <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 class="goodsListA_item" @click="goDetails()" v-for="(v,i) in 10" :key="i">
        <image src="https://jiangxishop.oss-cn-beijing.aliyuncs.com/20250920/b53b0ad4931340258ce217581c6bdcf4.png?x-oss-process=style/w_350" mode=""></image>
        <view class="goodsListA_item_title">陶瓷扒花雕刻品茗杯主人杯咖啡杯中式高档茶杯礼盒装</view>
        <view class="goodsListA_item_pirce">
          <rich-text :nodes="mUtil.priceBigSmall('133')"></rich-text>
          <view>¥ 500</view>
        </view>
        <view class="goodsListA_item_num">已售0件</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'
const { proxy } = getCurrentInstance();
const mUtil = proxy.$mUtil;
const details = ref({});
const value = ref("");
const status = ref('loadmore')
const list = ref([]) // 添加缺失的商品列表数据
const tabList = ref([
  {
    id: 1,
    categoryName: "推荐",
    categoryId: "recommend",
  },
  {
    id: 2,
    categoryName: "热销",
    categoryId: "hot",
  },
  {
    id: 3,
    categoryName: "新品",
    categoryId: "new",
  }
]);
const params = ref({
  recommendStatus: true,
  pageNum: 1,
  pageSize: 10
})
onShow(() => {
  let id = uni.getStorageSync('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 = () => {
  uni.makePhoneCall({
    phoneNumber: details.value.contactPhone
  });
}
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 (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) {
    // 推荐
    params.value.recommendStatus = true
    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.recommendStatus
    delete params.value.newStatus
  } else if (e.index === 2) {
    // 新品
    params.value.newStatus = true
    delete params.value.productCategoryId
    delete params.value.recommendStatus
    delete params.value.hot
  } else {
    // 具体分类
    params.value.productCategoryId = tabList.value[e.index].categoryId
    delete params.value.recommendStatus
    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 {
    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>