feat: 相关商品交互调整

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

@@ -2,57 +2,12 @@
   <view class="container">
     <ModuleTitle title="相关商品" />
 
-    <SwipeCards :cardsData="commodityList">
-      <template #default="{ card }">
-        <view
-          class="inner-card overflow-hidden"
-          @click.stop.prevent.capture="placeOrderHandle(card)"
-        >
-          <!-- 商品大图部分：自适应剩余空间 -->
-          <view class="goods-image-wrapper">
-            <image
-              class="goods-image"
-              :src="card.commodityPhoto"
-              mode="aspectFill"
-            />
-            <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 card.commodityPhotoList"
-              :key="index"
-              class="album-item"
-            >
-              <view v-if="item" class="album-image-wrapper">
-                <image
-                  class="album-image"
-                  :src="item.photoUrl"
-                  mode="aspectFill"
-                />
-                <view class="album-title">{{ item.photoName }}</view>
-              </view>
-            </view>
-          </view>
-        </view>
-      </template>
-    </SwipeCards>
+    <SwipeCards :cardsData="commodityList" />
   </view>
 </template>
 
 <script setup>
-import { defineProps, computed } from "vue";
-import { checkToken } from "@/hooks/useGoLogin";
+import { defineProps } from "vue";
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import SwipeCards from "@/components/SwipeCards/index.vue";
 
@@ -62,129 +17,8 @@ const props = defineProps({
     default: [],
   },
 });
-
-// 去下单
-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>