wxapp_shuibei/components/recommend/index.vue

<template>
  <view class="recommend">
    <view class="title acea-row row-center-wrapper">
      <text class="iconfont icon-zhuangshixian"></text>
      <text class="name">热门推荐</text>
      <text class="iconfont icon-zhuangshixian lefticon"></text>
    </view>
    <view class="recommendList acea-row row-between-wrapper">
      <view
        class="item"
        v-for="(item, index) in hostProduct"
        :key="index"
        hover-class="none"
        @tap="goDetail(item)"
      >
        <view class="pictrue">
          <image :src="item.image"></image>
        </view>
        <view class="name line1">{{ item.storeName }}</view>
        <!-- <view class='money font-color'>￥<text class='num'>{{item.price}}</text></view> -->
        <view class="bottom-row">
          <text class="price">工费: {{ item.price }}/克</text>
          <text class="sales">已售{{ item.sales || 0 }}件</text>
          <!-- <view class="txt">券</view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useAppStore } from "@/stores/app.js";
import { goShopDetail } from "@/libs/order.js";

const appStore = useAppStore();
const uid = appStore.uidComputed;

const props = defineProps({
  hostProduct: {
    type: Array,
    default: () => [],
  },
});

const goDetail = async (item) => {
  try {
    await goShopDetail(item, uid.value);
    uni.navigateTo({
      url: `/pages/goods_details/index?id=${item.id}`,
    });
  } catch (err) {
    console.error("Navigation error:", err);
  }
};
</script>

<style scoped lang="scss">
.recommend {
  background-color: #fff;

  .title {
    height: 135rpx;
    line-height: 135rpx;
    font-size: 28rpx;
    color: #282828;

    .name {
      margin: 0 28rpx;
    }

    .iconfont {
      font-size: 170rpx;
      color: #454545;
    }
    .iconfont.lefticon {
      transform: rotate(180deg);
    }
  }

  .recommendList {
    padding: 0 30rpx;
    /* #ifdef H5 */
    padding-bottom: 50rpx;
    /* #endif */

    .item {
      width: 335rpx;
      margin-bottom: 30rpx;

      .pictrue {
        position: relative;
        width: 100%;
        height: 335rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 14rpx;
        }
      }

      .name {
        font-size: 28rpx;
        color: #282828;
        margin-top: 20rpx;
      }

      .money {
        font-size: 20rpx;
        margin-top: 8rpx;
        font-weight: 600;

        .num {
          font-size: 28rpx;
        }
      }

      .price {
        color: $theme-color;
        font-weight: bold;
      }
    }
  }

  .bottom-row {
    // color: $theme-color;

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    margin: 10rpx 0 0;

    .price {
      padding-bottom: 4rpx;
      font-weight: 800;
      color: #f16327 !important;
    }

    .sales {
      color: #b4b4b4;
      font-size: 22rpx;
    }
  }
}
</style>