applet/pages/tabtar/components/GuessYouLike.vue

<template>
  <view class="guess">
    <view
      class="head-item"
      @click="goDetail('/pages/goodsType/index', false, true)"
      :style="{ backgroundImage: `url(${bgImage || ''})` }"
    >
      <view class="top-left">
        <view class="top-left-title">猜你喜欢</view>
        <view class="top-left-tip">精选好物推荐</view>
      </view>
      <view class="top-right" style="color: #75c27a">
        查看更多
        <!-- <text class="iconfont u-font24">&#xe6c7;</text> -->
        <uv-icon name="arrow-right" size="24rpx" color="#75c27a"></uv-icon>

      </view>
    </view>

    <view
      class="guess-item"
      v-if="(goodsList && goodsList.length > 0) || skeletonShow"
    >
      <view
        class="item u-skeleton-fillet"
        @click="
          goProductDetails('/pages/shop/goodsDetails?id=' + item.productId)
        "
        v-for="(item, index) in goodsList.length > 0 ? goodsList : 10"
        :key="index"
      >
        <image
          v-if="item && item.cover"
          :src="`${item.cover}?x-oss-process=style/w_350`"
          mode="aspectFill"
        ></image>
        <view style="padding-bottom: 40rpx">
          <view class="name" style="flex: 1">{{
            item.title || "加载中"
          }}</view>
          <view class="number">
            <view class="number-red">
              <rich-text
                :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
              ></rich-text>
            </view>
            <view class="number-grey"
              >￥{{ item.max_market_price || "加载中" }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <noData v-else :config="{ top: 1, content: '暂无商品~' }"></noData>
    <loadMore v-if="goodsList.length > 0" :status="status"></loadMore>
  </view>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const $mUtil = proxy.$mUtil;

const props = defineProps({
  goodsList: {
    type: Array,
    default: () => []
  },
  skeletonShow: {
    type: Boolean,
    default: false
  },
  bgImage: {
    type: String,
    default: ''
  },
  status: {
    type: String,
    default: 'more'
  }
});

const emit = defineEmits(['goDetail', 'goProductDetails']);

const goDetail = (url, isNeedLogin, tabShow) => {
  emit('goDetail', url, isNeedLogin, tabShow);
};

const goProductDetails = (url) => {
  emit('goProductDetails', url);
};
</script>

<style scoped lang="scss">
.guess {
  background-color: #dcffd5;
  box-sizing: border-box;
  border-radius: 10rpx;
  overflow: hidden;

  .guess-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx 30rpx;

    .item {
      margin-bottom: 36rpx;
      background-color: #ffffff;
      overflow: hidden;
      display: flex;
      flex-direction: column;

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

      .name {
        margin: 14rpx 20rpx 6rpx 20rpx;
        width: 296rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
      }

      .number {
        display: flex;
        align-items: flex-end;
        margin: 8rpx 20rpx 0 20rpx;

        .number-red {
          color: #00bf5a;
          font-size: 36rpx;
          font-weight: 700;
        }

        .number-grey {
          color: #999999;
          font-size: 22rpx;
          font-weight: 400;
          text-decoration: line-through;
          margin-left: 16rpx;
          padding-bottom: 4rpx;
        }
      }
    }
  }
}

.head-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 27rpx 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .top-left {
    .top-left-title {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
    }
    .top-left-tip {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      margin-top: 5rpx;
    }
  }

  .top-right {
    width: 165rpx;
    height: 67rpx;
    line-height: 67rpx;
    background: #ffffff;
    border-radius: 34rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>