VAVABUY/pages/index/components/shop_list.vue

<template>
  <view class="_list" @click="listClick">
    <view class="_list_top">
      <image
        :src="item.pic_url"
        lazy-load
        :draggable="false"
        mode="scaleToFill"
        class="img"
      ></image>
    </view>
    <view class="_list_bottom">
      <view class="_title">{{ item.title }}</view>
      <view class="_price">
        <rich-text
          class="texts"
          :nodes="MoneyAbouthtml(item.price, true)"
        ></rich-text>
      </view>
    </view>
    <view class="collect" @click.stop="startClick">
      <i
        class="icon-font"
        :class="item.isCollect ? 'icon-collected' : 'icon-not-collected'"
      ></i>
    </view>
  </view>
</template>
<script setup>
import { Moneyhtml, MoneyAbouthtml } from "@/utils";
import { useSystemStore } from "@/store";
import { computed } from "vue";

const useSystem = useSystemStore();
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  channel: {
    type: [String, Number],
    default: 0,
  },
  search: {
    type: String,
    default: "",
  },
  isFree: {
    type: [String, Number],
    default: 0,
  },
});
const emit = defineEmits(["listClick", "collect"]);
const symbol = computed(() => useSystem.getSymbol);

const listClick = () => {
  uni.navigateTo({
    url: `/pages/shop/productDetail?channel=${props.channel}&goods_id=${props.item.num_iid}&search=${props.search}&isFree=${props.isFree}`,
  });
};

const startClick = () => {
  emit("collect", props.item);
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

._list {
  overflow: hidden;
  border-radius: 20rpx;
  background-color: var(--inputBg);
  width: 100%;
  .flex();
  flex-direction: column;
  position: relative;

  .collect {
    top: 24rpx;
    right: 24rpx;
    position: absolute;
    width: 64rpx;
    height: 64rpx;
    background-color: #dfe3eb;
    border-radius: 4px;
    box-shadow: 0 0.8px 8px #0000001a;
    opacity: 0.8;
    .flex_center();

    .icon-font {
      .size(20px);
      color: var(--primary);
    }
  }

  &_top {
    width: 100%;

    .img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 1 / 1;
      // border-radius: 8rpx;
      display: block;
    }
  }

  &_bottom {
    padding: 16rpx;

    ._title {
      .size(24rpx);
      line-height: 32rpx;
      .ellipsis(1);
    }

    ._price {
      .ver(flex-end);
      color: var(--red);
      .size(32rpx);
      font-weight: 700;
      margin-top: 8rpx;
      font-family: "HarmonyOS_Sans";

      .icon {
        margin-right: 8rpx;
      }

      .icon2 {
        margin: 0 8rpx;
      }

      .texts {
        /deep/ div {
          .ver(baseline);

          .price {
          }

          .decimal {
            .size(24rpx);
          }
        }
      }
    }
  }
}
</style>