From 16bae845c9833a787c4f7ef8281fd24e5bf08c21 Mon Sep 17 00:00:00 2001
From: xiaoquan <838115837@qq.com>
Date: Mon, 11 May 2026 00:37:21 +0800
Subject: [PATCH] dev

---
 .../src/components/business/MerchantCard.vue  | 392 ++++++++++++------
 1 file changed, 267 insertions(+), 125 deletions(-)

diff --git a/apps/miniapp/src/components/business/MerchantCard.vue b/apps/miniapp/src/components/business/MerchantCard.vue
index e503329..902cb28 100644
--- a/apps/miniapp/src/components/business/MerchantCard.vue
+++ b/apps/miniapp/src/components/business/MerchantCard.vue
@@ -1,72 +1,99 @@
 <template>
-  <base-card class="merchant-card" :clickable="true" @click="handleClick">
-    <view class="card-content">
-      <!-- 左侧封面图 -->
-      <view class="merchant-cover">
+  <view class="merchant-card" @tap="handleClick">
+    <view class="card-container">
+      <!-- 左侧封面图区域 -->
+      <view class="card-cover">
         <image
           :src="merchant.coverImage || '/static/default-merchant.png'"
           class="cover-image"
           mode="aspectFill"
         ></image>
-        <!-- 播放按钮 -->
-        <view v-if="merchant.hasVideo" class="play-button">
-          <text class="play-icon">▶</text>
+
+        <!-- 渐变遮罩 -->
+        <view class="cover-gradient"></view>
+
+        <!-- 视频播放按钮 -->
+        <view v-if="merchant.hasVideo" class="video-badge">
+          <text class="video-icon">▶</text>
+        </view>
+
+        <!-- 类型标签 -->
+        <view v-if="merchant.type" class="type-badge">
+          <text class="type-text">{{ merchant.type }}</text>
         </view>
       </view>
 
-      <!-- 右侧信息 -->
-      <view class="merchant-info">
+      <!-- 右侧内容区域 -->
+      <view class="card-body">
         <!-- 商家名称 -->
-        <text class="merchant-name">{{ merchant.name }}</text>
-
-        <!-- 类型标签 -->
-        <text v-if="merchant.type" class="merchant-type">{{ merchant.type }}</text>
-
-        <!-- 评分和评价 -->
-        <view class="rating-row">
-          <text class="rating-score">{{ merchant.rating }}</text>
-          <text class="rating-label">{{ merchant.rating ? getRatingLabel(merchant.rating) : '' }}</text>
-          <text class="review-count">{{ merchant.reviewCount }}评价</text>
+        <view class="name-row">
+          <text class="merchant-name">{{ merchant.name }}</text>
         </view>
 
-        <!-- 距离信息 -->
-        <view v-if="merchant.distance || merchant.nearbyLandmark" class="distance-row">
-          <text class="distance-text">
-            <text v-if="merchant.distance">距你{{ formatDistance(merchant.distance) }}</text>
-            <text v-if="merchant.nearbyLandmark"> {{ merchant.nearbyLandmark }}附近</text>
-          </text>
+        <!-- 评分和评价 -->
+        <view v-if="merchant.rating" class="rating-row">
+          <view class="stars">
+            <text
+              v-for="star in 5"
+              :key="star"
+              class="star"
+              :class="{ 'star-filled': star <= Math.floor(merchant.rating) }"
+            >
+              {{ star <= Math.floor(merchant.rating) ? '★' : '☆' }}
+            </text>
+          </view>
+          <text class="rating-score">{{ merchant.rating.toFixed(1) }}</text>
+          <text class="rating-label">{{ getRatingLabel(merchant.rating) }}</text>
+          <text class="review-count">({{ merchant.reviewCount || 0 }})</text>
         </view>
 
         <!-- 设施标签 -->
         <view v-if="merchant.facilities && merchant.facilities.length > 0" class="facilities-row">
-          <text
-            v-for="(facility, index) in merchant.facilities.slice(0, 5)"
+          <view
+            v-for="(facility, index) in merchant.facilities.slice(0, 3)"
             :key="index"
-            class="facility-tag"
+            class="facility-item"
           >
-            {{ facility }}
+            <text class="facility-icon">✓</text>
+            <text class="facility-text">{{ facility }}</text>
+          </view>
+        </view>
+
+        <!-- 距离和地标 -->
+        <view v-if="merchant.distance || merchant.nearbyLandmark" class="location-row">
+          <text class="location-icon">📍</text>
+          <text class="location-text">
+            <text v-if="merchant.distance">{{ formatDistance(merchant.distance) }}</text>
+            <text v-if="merchant.distance && merchant.nearbyLandmark"> · </text>
+            <text v-if="merchant.nearbyLandmark">{{ merchant.nearbyLandmark }}</text>
           </text>
         </view>
 
         <!-- 购买提示 -->
-        <text v-if="merchant.recentPurchase" class="purchase-tip">{{ merchant.recentPurchase }}</text>
+        <view v-if="merchant.recentPurchase" class="purchase-row">
+          <text class="purchase-icon">🔥</text>
+          <text class="purchase-text">{{ merchant.recentPurchase }}</text>
+        </view>
 
-        <!-- 价格区域 -->
-        <view class="price-section">
-          <view class="price-info">
-            <text v-if="merchant.originalPrice" class="original-price">¥{{ merchant.originalPrice }}</text>
-            <text class="current-price">¥{{ merchant.minPrice }}</text>
+        <!-- 价格和按钮 -->
+        <view class="price-row">
+          <view class="price-left">
+            <text class="price-label">低至</text>
+            <text class="price-symbol">¥</text>
+            <text class="price-value">{{ merchant.minPrice }}</text>
+            <text v-if="merchant.originalPrice" class="price-original">¥{{ merchant.originalPrice }}</text>
+          </view>
+          <!-- 促销标签 -->
+          <view v-if="merchant.promotion" class="promotion-badge">
+            <text class="promotion-text">{{ merchant.promotion }}</text>
           </view>
-          <text v-if="merchant.promotion" class="promotion-text">{{ merchant.promotion }}</text>
         </view>
       </view>
     </view>
-  </base-card>
+  </view>
 </template>
 
 <script setup lang="ts">
-import BaseCard from '../base/BaseCard.vue'
-
 interface Merchant {
   id: number
   name: string
@@ -121,25 +148,35 @@ const handleClick = () => {
 @import '@/static/styles/mixins.scss';
 
 .merchant-card {
-  overflow: visible;
-  margin-bottom: 25rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  margin-bottom: 24rpx;
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  }
 }
 
-.card-content {
+// 容器：左右布局
+.card-container {
   display: flex;
   flex-direction: row;
-  gap: $spacing-lg;
+  padding: 20rpx;
+  gap: 20rpx;
 }
 
-// 左侧封面图
-.merchant-cover {
+// 左侧封面图区域
+.card-cover {
   position: relative;
   width: 240rpx;
   height: 240rpx;
   flex-shrink: 0;
-  border-radius: $radius-lg;
+  border-radius: 12rpx;
   overflow: hidden;
-  background: $bg-page;
 
   .cover-image {
     width: 100%;
@@ -147,143 +184,248 @@ const handleClick = () => {
     object-fit: cover;
   }
 
-  .play-button {
+  // 底部渐变遮罩
+  .cover-gradient {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80rpx;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
+    pointer-events: none;
+  }
+
+  // 视频徽章
+  .video-badge {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 64rpx;
-    height: 64rpx;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
+    width: 56rpx;
+    height: 56rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    backdrop-filter: blur(4rpx);
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(10rpx);
+    border-radius: 50%;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
 
-    .play-icon {
+    .video-icon {
       color: #fff;
-      font-size: 28rpx;
-      margin-left: 6rpx;
+      font-size: 24rpx;
+      margin-left: 4rpx;
+    }
+  }
+
+  // 类型标签
+  .type-badge {
+    position: absolute;
+    top: 12rpx;
+    left: 12rpx;
+    padding: 6rpx 12rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 12rpx;
+    box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4);
+
+    .type-text {
+      color: #fff;
+      font-size: 20rpx;
+      font-weight: 600;
+      letter-spacing: 0.5rpx;
     }
   }
 }
 
-// 右侧信息
-.merchant-info {
+// 右侧内容区域
+.card-body {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  gap: 12rpx;
   min-width: 0;
 }
 
-.merchant-name {
-  font-size: 32rpx;
-  font-weight: $font-bold;
-  color: $text-primary;
-  line-height: 1.3;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 4rpx;
-}
-
-.merchant-type {
-  font-size: 24rpx;
-  color: $text-tertiary;
-  margin-bottom: 4rpx;
+// 商家名称
+.name-row {
+  .merchant-name {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: #1a1a1a;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
+// 评分行
 .rating-row {
   display: flex;
-  align-items: baseline;
-  gap: 8rpx;
-  margin-bottom: 4rpx;
+  align-items: center;
+  gap: 6rpx;
+  flex-wrap: wrap;
+
+  .stars {
+    display: flex;
+    gap: 2rpx;
+
+    .star {
+      font-size: 24rpx;
+      color: #ddd;
+      line-height: 1;
+
+      &.star-filled {
+        color: #ffa940;
+      }
+    }
+  }
 
   .rating-score {
-    font-size: 40rpx;
-    font-weight: $font-bold;
-    color: #1890FF;
-    line-height: 1;
+    font-size: 26rpx;
+    font-weight: 700;
+    color: #ffa940;
+    margin-left: 2rpx;
   }
 
   .rating-label {
-    font-size: 28rpx;
-    color: #1890FF;
-    font-weight: $font-medium;
+    font-size: 22rpx;
+    font-weight: 500;
+    color: #ffa940;
   }
 
   .review-count {
-    font-size: 24rpx;
-    color: $text-tertiary;
-  }
-}
-
-.distance-row {
-  margin-bottom: 8rpx;
-
-  .distance-text {
-    font-size: 24rpx;
-    color: $text-tertiary;
-    line-height: 1.4;
+    font-size: 22rpx;
+    color: #999;
   }
 }
 
+// 设施标签
 .facilities-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8rpx;
-  margin-bottom: 8rpx;
 
-  .facility-tag {
+  .facility-item {
+    display: flex;
+    align-items: center;
+    gap: 4rpx;
     padding: 6rpx 12rpx;
-    background: $gray-100;
-    border-radius: $radius-sm;
-    font-size: 22rpx;
-    color: $text-secondary;
-    line-height: 1;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
+    border-radius: 12rpx;
+    border: 1rpx solid #e8ecf1;
+
+    .facility-icon {
+      font-size: 18rpx;
+      color: #52c41a;
+      font-weight: 700;
+    }
+
+    .facility-text {
+      font-size: 20rpx;
+      color: #666;
+      font-weight: 500;
+    }
   }
 }
 
-.purchase-tip {
-  font-size: 22rpx;
-  color: #FF6B6B;
-  margin-bottom: 8rpx;
+// 位置行
+.location-row {
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+
+  .location-icon {
+    font-size: 20rpx;
+    line-height: 1;
+  }
+
+  .location-text {
+    font-size: 22rpx;
+    color: #666;
+    line-height: 1.4;
+  }
 }
 
-.price-section {
+// 购买提示
+.purchase-row {
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+  padding: 8rpx 12rpx;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
+  border-radius: 8rpx;
+  border: 1rpx solid #ffccc7;
+
+  .purchase-icon {
+    font-size: 20rpx;
+    line-height: 1;
+  }
+
+  .purchase-text {
+    font-size: 22rpx;
+    color: #ff4d4f;
+    font-weight: 500;
+  }
+}
+
+// 价格行
+.price-row {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-top: auto;
+  padding-top: 8rpx;
 
-  .price-info {
+  .price-left {
     display: flex;
     align-items: baseline;
-    gap: 12rpx;
+    gap: 4rpx;
 
-    .original-price {
-      font-size: 24rpx;
-      color: $text-tertiary;
-      text-decoration: line-through;
+    .price-label {
+      font-size: 20rpx;
+      color: #999;
+      font-weight: 500;
     }
 
-    .current-price {
-      font-size: 48rpx;
-      font-weight: $font-bold;
-      color: #FF4D4F;
+    .price-symbol {
+      font-size: 24rpx;
+      font-weight: 700;
+      color: #ff4d4f;
       line-height: 1;
     }
+
+    .price-value {
+      font-size: 40rpx;
+      font-weight: 800;
+      color: #ff4d4f;
+      line-height: 1;
+      letter-spacing: -1rpx;
+    }
+
+    .price-original {
+      font-size: 22rpx;
+      color: #bbb;
+      text-decoration: line-through;
+      margin-left: 6rpx;
+    }
   }
 
-  .promotion-text {
-    font-size: 20rpx;
-    color: #FF4D4F;
-    padding: 4rpx 8rpx;
-    background: rgba(255, 77, 79, 0.1);
-    border-radius: $radius-sm;
-    white-space: nowrap;
+  // 促销标签
+  .promotion-badge {
+    padding: 6rpx 12rpx;
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    border-radius: 12rpx;
+    box-shadow: 0 2rpx 8rpx rgba(245, 87, 108, 0.3);
+
+    .promotion-text {
+      color: #fff;
+      font-size: 20rpx;
+      font-weight: 600;
+    }
   }
 }
 </style>