dev
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user