1039 lines
21 KiB
Plaintext
1039 lines
21 KiB
Plaintext
<template>
|
|
<view class="shop-page">
|
|
<!-- 店铺详情骨架屏 -->
|
|
<SkeletonShopDetail v-if="pageLoading" />
|
|
|
|
<!-- 店铺详情内容 -->
|
|
<view v-else class="shop-container">
|
|
<!-- 沉浸式状态栏 -->
|
|
<view v-if="!isZFB" class="status-bar"></view>
|
|
|
|
<!-- 顶部导航栏 -->
|
|
<view v-if="!isZFB" class="nav-bar">
|
|
<image class="back-icon" src="/static/icons/back.svg" @click="Service.GoPageBack()" mode="aspectFit" />
|
|
<text class="nav-title">{{merchInfo.name}}</text>
|
|
<view class="nav-placeholder"></view>
|
|
</view>
|
|
<!-- 顶部封面图 - 店铺展示 -->
|
|
<view class="shop-header">
|
|
<!-- 轮播图 -->
|
|
<up-swiper height="400rpx" radius='0' :list="imgs" ></up-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">
|
|
<up-icon :name="isCollect?'heart-fill':'heart'" color="#ff4f43" size="12"></up-icon>
|
|
<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()">
|
|
<up-icon name="map" color="#fff" size="12"></up-icon>
|
|
<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">{{ Number(merchInfo.score).toFixed(1) }}</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="Service.GoPage('/pages/goods/goodsDetail?goodsId='+product.goodsId)">
|
|
<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">
|
|
<up-icon name="map" color="#FF6B00" size="16"></up-icon>
|
|
<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">{{ merchInfo.time }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 积分规则 -->
|
|
<view class="info-rules">
|
|
<view class="rules-title">
|
|
<text class="ri-gift-line rules-icon"></text>
|
|
<text class="rules-text">积分规则</text>
|
|
</view>
|
|
<view class="rule-item">
|
|
<text class="rule-dot">•</text>
|
|
<text class="rule-content">消费赠送 {{ merchData.radio*100 }}% 积分</text>
|
|
</view>
|
|
<view class="rule-item">
|
|
<text class="rule-dot">•</text>
|
|
<text class="rule-content"> {{ merchInfo.code=='Discounts'?'支持':'不支持' }}使用积分抵扣</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'
|
|
import { inject } from 'vue';
|
|
const isZFB = inject('isZFB');
|
|
|
|
// 数据
|
|
const shop = ref<any>({})
|
|
const currentTab = ref(0)
|
|
|
|
// 加载状态
|
|
const pageLoading = ref(true)
|
|
|
|
let imgs = ref<Array<any>>([])
|
|
|
|
// 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 merchData = ref<any>({})
|
|
// 营业时间处理
|
|
let weekList = ref<Array<number>>([])
|
|
let openTime = ref()
|
|
let closeTime = ref()
|
|
let timefunc = ref(-1)
|
|
|
|
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) {
|
|
imgs.value=[]
|
|
JSON.parse(res.data.merchInfo.showImg).map(item=>{
|
|
imgs.value.push(Service.GetMateUrlByImg(item))
|
|
})
|
|
distance.value = res.data.distance
|
|
isCollect.value = res.data.isCollect
|
|
merchInfo.value = res.data.merchInfo
|
|
communityInfo.value = res.data.communityInfo
|
|
merchData.value = res.data.merchData
|
|
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 : any) => {
|
|
if (distance < 1) {
|
|
return `${Number(distance*1000).toFixed(1)}m`
|
|
}
|
|
return `${(distance ).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 timeCancle = (busTime : string) => {
|
|
let data = busTime.split('_')
|
|
openTime.value = data[1].split('-')[0]
|
|
closeTime.value = data[1].split('-')[1]
|
|
let timeData = data[0].split('-')
|
|
for (let i = 0; i < timeData.length; i++) {
|
|
if (timeData[i] == '0') {
|
|
timeData[i] = '7'
|
|
}
|
|
}
|
|
let time = ''
|
|
timeData.sort((a : any, b : any) => {
|
|
return a - b
|
|
})
|
|
weekList.value=[]
|
|
timeData.map((item : any) => {
|
|
weekList.value.push(item == '7' ? (Number(6)) : Number(item - 1))
|
|
})
|
|
let timeIndex = weekList.value[0] - 0
|
|
let judgment = weekList.value.findIndex((item, index) => {
|
|
return item - index !== timeIndex
|
|
})
|
|
|
|
// 1是至 /0是全显示
|
|
if (judgment == -1) {
|
|
timefunc.value = 1
|
|
} else {
|
|
timefunc.value = 0
|
|
}
|
|
|
|
if (timefunc.value == 0) {
|
|
weekList.value.map((item) => {
|
|
time = time + '周' + chinese(item) + ' '
|
|
})
|
|
} else {
|
|
time = '周' + chinese((weekList.value[0])) + '至' + '周' + chinese((weekList.value[weekList.value.length - 1]))
|
|
}
|
|
console.log(time);
|
|
console.log(merchInfo.value.time);
|
|
time = time + ' ' + data[1]
|
|
|
|
return time
|
|
}
|
|
|
|
const chinese = (item : number) => {
|
|
if (item + 1 == 1) {
|
|
return '一'
|
|
}
|
|
if (item + 1 == 2) {
|
|
return '二'
|
|
} if (item + 1 == 3) {
|
|
return '三'
|
|
} if (item + 1 == 4) {
|
|
return '四'
|
|
} if (item + 1 == 5) {
|
|
return '五'
|
|
} if (item + 1 == 6) {
|
|
return '六'
|
|
} if (item + 1 == 7) {
|
|
return '日'
|
|
}
|
|
}
|
|
|
|
// 一键导航
|
|
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 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: 60rpx 24rpx 20rpx;
|
|
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> |