第一次上传
This commit is contained in:
@@ -0,0 +1,979 @@
|
||||
<template>
|
||||
<view class="shop-page">
|
||||
<!-- 店铺详情骨架屏 -->
|
||||
<SkeletonShopDetail v-if="pageLoading" />
|
||||
|
||||
<!-- 店铺详情内容 -->
|
||||
<view v-else class="shop-container">
|
||||
|
||||
<!-- 顶部封面图 - 店铺展示 -->
|
||||
<view class="shop-header">
|
||||
<!-- 轮播图 -->
|
||||
<swiper class="cover-swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="300"
|
||||
indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#FF6B00">
|
||||
<image class="cover-image" :src="Service.GetMateUrlByImg(merchInfo.logo)" mode="aspectFill" />
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 店铺基本信息卡片 -->
|
||||
<view class="shop-info-card">
|
||||
<view class="shop-name-row">
|
||||
<text class="shop-name">{{ merchInfo.name }}</text>
|
||||
<view class="action-buttons">
|
||||
<view class="action-pill" @click="addToFavorites">
|
||||
<text :class="{ 'ri-heart-fill': isCollect,'ri-heart-line':!isCollect }" class="action-pill-icon"></text>
|
||||
<text class="action-pill-text">收藏</text>
|
||||
</view>
|
||||
<view class="action-pill primary" @click="navigateToShop()">
|
||||
<text class="ri-map-pin-line action-pill-icon"></text>
|
||||
<text class="action-pill-text">导航</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评分、销量、客单价 -->
|
||||
<view class="shop-stats">
|
||||
<view class="stat-item">
|
||||
<text class="rating-stars">
|
||||
<text v-for="(item,index) in merchInfo.score" :key="index">★</text>
|
||||
</text>
|
||||
<text class="rating-value">{{ merchInfo.score }}</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-label">月售</text>
|
||||
<text class="stat-value">{{ merchInfo.sale }}</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-label">人均</text>
|
||||
<text class="stat-value">¥{{ merchInfo.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标签 -->
|
||||
<view class="shop-tags">
|
||||
<view v-for="(coupon, idx) in tips" :key="idx" :class="getTagClass(coupon)" style="font-size: 24rpx;"
|
||||
class="shop-tag">
|
||||
{{ coupon }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab 切换栏 -->
|
||||
<view class="tab-bar">
|
||||
<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
|
||||
:class="{ active: currentTab === index }" @click="switchTab(index)">
|
||||
<text class="tab-text">{{ tab.label }}</text>
|
||||
<view v-if="currentTab === index" class="tab-indicator"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab 内容区域 -->
|
||||
<view class="tab-content">
|
||||
<!-- 商品 Tab -->
|
||||
<view v-if="currentTab === 0" class="tab-pane">
|
||||
<view v-if="recommendations.length> 0" class="products-list">
|
||||
<view v-for="product in recommendations" :key="product.goodsId" class="product-item"
|
||||
@click="viewProduct(product)">
|
||||
<image class="product-image" :src="Service.GetMateUrlByImg(product.img)" mode="aspectFill" />
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<view class="price-wrapper">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="price-value">{{ product.price }}</text>
|
||||
<!-- <text v-if="product.originalPrice"
|
||||
class="price-original">¥{{ product.originalPrice }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-state">
|
||||
<text class="ri-shopping-bag-line empty-icon"></text>
|
||||
<text class="empty-text">暂无商品</text>
|
||||
</view>
|
||||
<!-- 空状态 -->
|
||||
<up-loadmore v-if="recommendations.length> 0" :status="status" />
|
||||
</view>
|
||||
|
||||
<!-- 评价 Tab -->
|
||||
<view v-if="currentTab === 1" class="tab-pane">
|
||||
<<!-- view v-if="shop.reviews && shop.reviews.length > 0" class="reviews-list">
|
||||
<view v-for="review in shop.reviews" :key="review.id" class="review-card">
|
||||
<view class="review-header">
|
||||
<image class="reviewer-avatar" :src="review.user.avatar" mode="aspectFill" />
|
||||
<view class="reviewer-info">
|
||||
<text class="reviewer-name">{{ review.user.nickname }}</text>
|
||||
<view class="review-rating">
|
||||
<text class="rating-star" v-for="n in review.rating" :key="n">★</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="review-time">{{ formatTime(review.time) }}</text>
|
||||
</view>
|
||||
|
||||
<text class="review-content">{{ review.content }}</text>
|
||||
|
||||
<view v-if="review.images && review.images.length > 0" class="review-images">
|
||||
<image v-for="(img, idx) in review.images" :key="idx" class="review-image" :src="img"
|
||||
mode="aspectFill" @click="previewImage(review.images, idx)" />
|
||||
</view>
|
||||
|
||||
<view class="review-footer">
|
||||
<view class="like-btn">
|
||||
<text class="ri-thumb-up-line like-icon"></text>
|
||||
<text class="like-count">{{ review.likes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="empty-state">
|
||||
<text class="ri-chat-3-line empty-icon"></text>
|
||||
<text class="empty-text">暂无评价</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 资料 Tab -->
|
||||
<view v-if="currentTab === 2" class="tab-pane">
|
||||
<view class="info-section">
|
||||
<!-- 地址 -->
|
||||
<view class="info-item" @click="navigateToShop()">
|
||||
<view class="item-left">
|
||||
<text class="ri-map-pin-line item-icon" style="color: #FF6B00;"></text>
|
||||
<view class="item-content">
|
||||
<text class="item-title">店铺地址</text>
|
||||
<text class="item-desc">{{ merchInfo.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="item-distance">{{ formatDistance(distance) }}</text>
|
||||
<text class="ri-arrow-right-s-line item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 营业时间 -->
|
||||
<view class="info-item">
|
||||
<view class="item-left">
|
||||
<text class="ri-time-line item-icon" style="color: #3B82F6;"></text>
|
||||
<view class="item-content">
|
||||
<text class="item-title">营业时间</text>
|
||||
<text class="item-desc">{{ shop.businessHours }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分规则 -->
|
||||
<view v-if="shop.pointRate || shop.canUsePoint" class="info-rules">
|
||||
<view class="rules-title">
|
||||
<text class="ri-gift-line rules-icon"></text>
|
||||
<text class="rules-text">积分规则</text>
|
||||
</view>
|
||||
<view v-if="shop.pointRate" class="rule-item">
|
||||
<text class="rule-dot">•</text>
|
||||
<text class="rule-content">消费赠送 {{ shop.pointRate }}% 积分</text>
|
||||
</view>
|
||||
<view v-if="shop.canUsePoint" class="rule-item">
|
||||
<text class="rule-dot">•</text>
|
||||
<text class="rule-content">支持使用积分抵扣</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad, onReachBottom
|
||||
} from '@dcloudio/uni-app'
|
||||
import { vpMerchService, Service } from '@/Service/vp/vpMerchService'
|
||||
import SkeletonShopDetail from '../../components/skeleton/skeleton-shop-detail.vue'
|
||||
import { vpUserService } from '@/Service/vp/vpUserService'
|
||||
|
||||
// 数据
|
||||
const shop = ref<any>({})
|
||||
const currentTab = ref(0)
|
||||
|
||||
// 加载状态
|
||||
const pageLoading = ref(true)
|
||||
|
||||
// Tab 配置
|
||||
const tabs = [{
|
||||
label: '商品',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '评价',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '资料',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
let isCollect=ref(false)
|
||||
let longitude = ref(0)
|
||||
let latitude = ref(0)
|
||||
let page = ref(1)
|
||||
let status = ref('nomore')
|
||||
let recommendations = ref<Array<any>>([])
|
||||
|
||||
let distance=ref(0)
|
||||
let tips=ref<Array<any>>([])
|
||||
let merchInfo = ref<any>({})
|
||||
let communityInfo = ref<any>({})
|
||||
let merchId = ref('')
|
||||
// 页面加载
|
||||
onLoad((options : any) => {
|
||||
if (options.merchId) {
|
||||
merchId.value = options.merchId
|
||||
getLocation()
|
||||
}
|
||||
})
|
||||
|
||||
onReachBottom(()=>{
|
||||
getList()
|
||||
})
|
||||
|
||||
const getLocation = () => {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function (res) {
|
||||
longitude.value = res.longitude
|
||||
latitude.value = res.latitude
|
||||
getData()
|
||||
},
|
||||
fail: function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const getData = () => {
|
||||
status.value = 'loadmore'
|
||||
page.value = 1
|
||||
recommendations.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
if (status.value !== 'loadmore') {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
|
||||
vpMerchService.GetMerchInfo(merchId.value, longitude.value, latitude.value, page.value).then(res => {
|
||||
pageLoading.value = false
|
||||
if (res.code == 0) {
|
||||
distance.value=res.data.distance
|
||||
isCollect.value=res.data.isCollect
|
||||
merchInfo.value = res.data.merchInfo
|
||||
communityInfo.value = res.data.communityInfo
|
||||
recommendations.value = [...recommendations.value,...res.data.merchGoods]
|
||||
tips.value=res.data.tips
|
||||
status.value = res.data.merchGoods.length == 10 ? 'loadmore' : 'nomore'
|
||||
}
|
||||
|
||||
// merchInfo.value.time = !res.data.merchInfo.busTime ? '' : timeCancle(res.data.merchInfo.busTime)
|
||||
page.value++
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 切换 Tab
|
||||
const switchTab = (index : any) => {
|
||||
currentTab.value = index
|
||||
}
|
||||
|
||||
// 根据标签文本获取样式类
|
||||
const getTagClass = (tagText : string) => {
|
||||
const tagMap = {
|
||||
'可用积分': 'tag-points-available',
|
||||
'可用券': 'tag-coupon'
|
||||
}
|
||||
return tagMap[tagText] || 'tag-points'
|
||||
}
|
||||
|
||||
// 格式化距离
|
||||
const formatDistance = (distance) => {
|
||||
if (distance < 1000) {
|
||||
return `${distance}m`
|
||||
}
|
||||
return `${(distance / 1000).toFixed(1)}km`
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time) => {
|
||||
const date = new Date(time)
|
||||
const now = new Date()
|
||||
const diff = now - date
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (days === 0) {
|
||||
return '今天'
|
||||
} else if (days === 1) {
|
||||
return '昨天'
|
||||
} else if (days < 7) {
|
||||
return `${days}天前`
|
||||
} else {
|
||||
return time.split(' ')[0]
|
||||
}
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
|
||||
// 拨打电话
|
||||
const makeCall = () => {
|
||||
if (!shop.value) return
|
||||
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: shop.value.phone,
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '拨打失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 一键导航
|
||||
const navigateToShop = () => {
|
||||
uni.openLocation({
|
||||
latitude: merchInfo.value.lat,
|
||||
longitude: merchInfo.value.lon,
|
||||
name: merchInfo.value.name,
|
||||
address: merchInfo.value.address,
|
||||
scale: 15,
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '打开地图失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查看产品详情
|
||||
const viewProduct = (product) => {
|
||||
uni.showToast({
|
||||
title: `查看${product.name}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 添加收藏
|
||||
const addToFavorites = () => {
|
||||
vpUserService.CollectMerch(merchId.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
getData()
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查看评价
|
||||
const goToReviews = () => {
|
||||
uni.showToast({
|
||||
title: '查看全部评价',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
const previewImage = (images, current) => {
|
||||
uni.previewImage({
|
||||
urls: images,
|
||||
current: current
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shop-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.shop-container {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 顶部封面 */
|
||||
.shop-header {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.cover-swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 店铺信息卡片 */
|
||||
.shop-info-card {
|
||||
background: #FFFFFF;
|
||||
margin: -40rpx 20rpx 0;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx 24rpx 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.shop-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #222222;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 操作按钮组 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 32rpx;
|
||||
background: linear-gradient(135deg, #FFF4E6, #FFE0B2);
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 107, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-pill.primary {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 107, 0, 0.25);
|
||||
}
|
||||
|
||||
.action-pill:active {
|
||||
transform: scale(0.96);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.action-pill-icon {
|
||||
font-size: 28rpx;
|
||||
color: #FF6B00;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.action-pill.primary .action-pill-icon {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.action-pill-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #FF6B00;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.action-pill.primary .action-pill-text {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 统计数据 */
|
||||
.shop-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx 0;
|
||||
margin-bottom: 20rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.rating-stars {
|
||||
font-size: 24rpx;
|
||||
color: #FFB800;
|
||||
letter-spacing: -2rpx;
|
||||
}
|
||||
|
||||
.rating-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #FF6B00;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.shop-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
/* 标签元素样式 - 配合全局样式使用 */
|
||||
.shop-tags .tag-icon {
|
||||
font-size: 16rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.shop-tags .tag-text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
/* Tab 切换栏 */
|
||||
.tab-bar {
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-text {
|
||||
color: #FF6B00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
/* Tab 内容区域 */
|
||||
.tab-content {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
padding: 20rpx;
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 商品列表 - 垂直布局 */
|
||||
.products-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
margin-bottom: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.price-wrapper {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-size: 22rpx;
|
||||
color: #FF6B00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 32rpx;
|
||||
color: #FF6B00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price-original {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 120rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 96rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 资料信息区域 */
|
||||
.info-section {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
font-size: 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.item-distance {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
/* 积分规则 */
|
||||
.info-rules {
|
||||
padding: 24rpx;
|
||||
background: #FFFBF0;
|
||||
border-top: 1rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.rules-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.rules-icon {
|
||||
font-size: 28rpx;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.rules-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.rule-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.rule-dot {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rule-content {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 评价列表 */
|
||||
.reviews-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.review-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.review-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.reviewer-avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reviewer-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.reviewer-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.review-rating {
|
||||
display: flex;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.rating-star {
|
||||
font-size: 20rpx;
|
||||
color: #FFB800;
|
||||
}
|
||||
|
||||
.review-time {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.review-content {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.review-images {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.review-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.review-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.like-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.like-icon {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.like-count {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user