YGChatCS/src/pages/index/components/module/DetailCardGoodsContentList/index.vue

<template>
  <view class="container">
    <ModuleTitle title="相关商品" />

    <SwipeCards :cardsData="commodityList">
      <template #default="{ card }">
        <view class="inner-card" @click="placeOrderHandle(card)">
          <!-- 商品大图部分：自适应剩余空间 -->
          <view class="goods-image-wrapper">
            <image
              class="goods-image"
              :src="card.commodityPhoto"
              mode="aspectFill"
            ></image>
            <view class="goods-title">
              <text class="goods-text">{{ card.commodityName }}</text>
              <view class="card-price-row">
                <text class="card-price-fu">￥</text>
                <text class="card-price">{{ card.specificationPrice }}</text>
                <text class="card-unit" v-if="card.stockUnitLabel"
                  >/{{ card.stockUnitLabel }}</text
                >
              </view>
            </view>
          </view>

          <!-- 底部相册部分：固定比例或高度 -->
          <view class="album-row">
            <view
              v-for="(item, index) in normalizedAlbums(commodityList)"
              :key="index"
              class="album-item"
            >
              <view v-if="item" class="album-image-wrapper">
                <image
                  class="album-image"
                  :src="item.commodityPhoto"
                  mode="aspectFill"
                />
                <view class="album-title">{{ item.commodityName }}</view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </SwipeCards>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
import { checkToken } from "@/hooks/useGoLogin";
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import SwipeCards from "@/components/SwipeCards/index.vue";

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

// 补齐3个的
const normalizedAlbums = (list = []) => {
  const arr = list.slice(0, 3);
  while (arr.length < 3) arr.push(null);
  return arr;
};

// 去下单
const placeOrderHandle = (item) => {
  checkToken().then(() => {
    uni.navigateTo({
      url: `/pages/goods/index?commodityId=${item.commodityId}`,
    });
  });
};
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";

.inner-card {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 20px;
  flex-direction: column;
  // overflow: hidden;
}

/* 商品大图部分：撑满除相册外的空间 */
.goods-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 335 / 200;
  overflow: hidden;
}

.goods-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.goods-title {
  position: absolute;
  inset: 0;
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.goods-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-price-fu {
  color: #fff;
  font-size: 11px;
  font-weight: normal;
}

.card-price {
  color: #fff;
  font-size: $uni-font-size-lg;
  font-weight: bold;
}
.card-unit {
  font-size: 11px;
  color: #fff;
  font-weight: normal;
  margin-left: 2px;
}

.album-row {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  box-sizing: border-box;
  flex-shrink: 0;
  aspect-ratio: 335 / 84;
}

.album-item {
  width: calc((100% - 24px) / 3);
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}

.album-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.album-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>