第一次上传
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
import { Service } from '@/Service/Service';
|
||||
/*****社区*****/
|
||||
class vpMerchService {
|
||||
private static GetMerchListPath: string = '/Merch/GetMerchList';
|
||||
/*****商家列表*****/
|
||||
static GetMerchList(assId: string,serch:string,lon:number,lat:number ,sort:number,codeSort:number ,page:number) {
|
||||
var result = Service.Request(this.GetMerchListPath, 'GET', {assId,serch,lon,lat,sort,codeSort,page});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetMerchInfoPath: string = '/Merch/GetMerchInfo';
|
||||
/*****店铺详情*****/
|
||||
static GetMerchInfo(merchId: string ,lon:number ,lat:number,page:number) {
|
||||
var result = Service.Request(this.GetMerchInfoPath, 'GET', {merchId,lon,lat,page});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetGoodsInfoPath: string = '/Merch/GetGoodsInfo';
|
||||
/*****商品详情*****/
|
||||
static GetGoodsInfo(goodsId: string,page:number) {
|
||||
var result = Service.Request(this.GetGoodsInfoPath, 'GET', {goodsId,page});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetMyMerchInfoPath: string = '/Merch/GetMyMerchInfo';
|
||||
/*****获取用户个人绑定商家*****/
|
||||
static GetMyMerchInfo() {
|
||||
var result = Service.Request(this.GetMyMerchInfoPath, 'GET', {});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static UpdateMerchPath: string = '/Merch/UpdateMerch';
|
||||
/*****修改用户个人绑定商家*****/
|
||||
static UpdateMerch( assortId:string, logo:string, comId:string,name:string,showImg:string,phone:string,price:number,province:string,city:string,county:string,address:string,lon:number,lat:number,busTime:string,tag:string) {
|
||||
var result = Service.Request(this.UpdateMerchPath, 'POST', {assortId,logo,comId,name,showImg,phone,price,province,city,county,address,lon,lat,busTime,tag});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetMerchGoodsPath: string = '/Merch/GetMerchGoods';
|
||||
/*****获取商家商品列表*****/
|
||||
static GetMerchGoods(page:number) {
|
||||
var result = Service.Request(this.GetMerchGoodsPath, 'GET', {page});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static UpdateGoodsStatusPath: string = '/Merch/UpdateGoodsStatus';
|
||||
/*****修改商品上下架*****/
|
||||
static UpdateGoodsStatus(goodsId:string) {
|
||||
var result = Service.Request(this.UpdateGoodsStatusPath, 'POST', {goodsId});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static UpdateMerchGoodsPath: string = '/Merch/UpdateMerchGoods';
|
||||
/*****修改商品*****/
|
||||
static UpdateMerchGoods(goodsId:string,name:string,img:string,price:number,brief:string,status:number) {
|
||||
var result = Service.Request(this.UpdateMerchGoodsPath, 'POST', {goodsId,name,img,price,brief,status});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static DelGoodsPath: string = '/Merch/DelGoods';
|
||||
/*****删除商品*****/
|
||||
static DelGoods(goodsId:string) {
|
||||
var result = Service.Request(this.DelGoodsPath, 'POST', {goodsId});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static GetUnitMerchInfoPath: string = '/Order/GetUnitMerchInfo';
|
||||
/*****商家详情*****/
|
||||
static GetUnitMerchInfo(merchId:string) {
|
||||
var result = Service.Request(this.GetUnitMerchInfoPath, 'GET', {merchId});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static GetMerchOrderListPath: string = '/Merch/GetMerchOrderList';
|
||||
/*****获取商家订单列表*****/
|
||||
static GetMerchOrderList(time:string,page:number) {
|
||||
var result = Service.Request(this.GetMerchOrderListPath, 'GET', {time,page});
|
||||
return result;
|
||||
}
|
||||
private static GetMerchAssortPath: string = '/Merch/GetMerchAssort';
|
||||
/*****获取商家分类*****/
|
||||
static GetMerchAssort() {
|
||||
var result = Service.Request(this.GetMerchAssortPath, 'GET', {});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
export { Service, vpMerchService };
|
||||
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<view class="promotion-page" :style="showCode?'height: 100vh; overflow: hidden;':''">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">我的推广</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<view class="stats-section">
|
||||
<view class="stats-card">
|
||||
<view @click="showCode=true" class="stat-item">
|
||||
<up-icon name="share" color="#fff" size="20"></up-icon>
|
||||
<text class="stat-label">推广码</text>
|
||||
</view>
|
||||
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ list.length }}</text>
|
||||
<text class="stat-label">推广会员</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ allAward }}</text>
|
||||
<text class="stat-label">获得积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 会员列表 -->
|
||||
<view class="content">
|
||||
<view class="list-header">
|
||||
<text class="header-title">推广会员列表</text>
|
||||
<text class="header-count">共{{ list.length }}人</text>
|
||||
</view>
|
||||
|
||||
<view v-if="list.length > 0" class="members-list">
|
||||
<view v-for="member in list" :key="member.id" class="member-card">
|
||||
<!-- 会员信息 -->
|
||||
|
||||
<view class="member-info">
|
||||
<image class="member-avatar" :src="Service.GetMateUrlByImg(member.headImg)" mode="aspectFill" />
|
||||
<view class="member-details">
|
||||
<view class="name-tag-row">
|
||||
<text class="member-name">{{ member.nick }}</text>
|
||||
</view>
|
||||
<view class="user-id-tag">
|
||||
<image :src="Service.GetIconImg('/static/iconMent/user/viptype.png')" style="width: 20rpx; height: 20rpx; margin-right: 10rpx;"></image>
|
||||
<text class="id-text">ID: {{ member.userNo }}</text>
|
||||
</view>
|
||||
<text class="register-time">注册时间：{{ Service.formatDate(member.addTime,2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分奖励 -->
|
||||
<view class="points-info">
|
||||
<text class="points-label">奖励</text>
|
||||
<text class="points-value">+{{ member.award }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else class="empty-state">
|
||||
<text class="ri-team-line empty-icon"></text>
|
||||
<text class="empty-text">暂无推广会员</text>
|
||||
<text class="empty-desc">邀请好友加入，获得积分奖励</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-popup :show="showCode" round='10' mode='center' @close="showCode=false" :closeable="true"
|
||||
:safeAreaInsetTop='true' :safeAreaInsetBottom='false' >
|
||||
<view class="" style=" margin: 0 auto; padding: 20rpx; background-color: #fff; " >
|
||||
<l-painter :board="poster" ref="posterFun">
|
||||
</l-painter>
|
||||
</view>
|
||||
<view class="" style="padding: 0 20rpx 20rpx;" >
|
||||
<up-button color='var(--nav-mian)' @click="save()" text="保存图片" ></up-button>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { vpUserService, Service } from "@/Service/vp/vpUserService"
|
||||
|
||||
let list = ref<Array<any>>([])
|
||||
let status = ref<string>('loadmore')
|
||||
let pageNo = ref<number>(1)
|
||||
|
||||
let allAward = ref<Number>(0)
|
||||
let showCode=ref(false)
|
||||
let code=ref('')
|
||||
|
||||
let url = ref<string>('')
|
||||
let imgurl = ref<string>('')
|
||||
const posterFun = ref(null)
|
||||
|
||||
const poster = ref<any>({
|
||||
css: {
|
||||
// 根节点若无尺寸，自动获取父级节点
|
||||
position: ' relative',
|
||||
borderRadius: '18rpx',
|
||||
overflow: 'hidden',
|
||||
width:'550rpx'
|
||||
},
|
||||
|
||||
views: [{
|
||||
type: 'image',
|
||||
src: 'https://vp.clouds.xypays.cn/poster/poster1.png',
|
||||
css: {
|
||||
width: '550rpx',
|
||||
margin: '0 auto',
|
||||
},
|
||||
mode: "widthFix"
|
||||
}, {
|
||||
type: 'qrcode',
|
||||
text: '',
|
||||
css: {
|
||||
width: '80rpx',
|
||||
height: '80rpx',
|
||||
position: 'absolute',
|
||||
top: '870rpx',
|
||||
left: '65rpx'
|
||||
},
|
||||
}],
|
||||
|
||||
|
||||
})
|
||||
|
||||
let picture = ref<string>('')
|
||||
|
||||
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
getData()
|
||||
getCode()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
getList()
|
||||
});
|
||||
|
||||
|
||||
const getData = () => {
|
||||
list.value = []
|
||||
status.value = 'loadmore'
|
||||
pageNo.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
|
||||
const getList = () => {
|
||||
if (status.value == 'nomore' || status.value == 'loading') {
|
||||
return
|
||||
}
|
||||
|
||||
status.value = 'loading'
|
||||
|
||||
vpUserService.GetUseRemList(pageNo.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
list.value = [...list.value, ...res.data.list]
|
||||
status.value = 10 == res.data.list.length ? 'loadmore' : 'nomore'
|
||||
allAward.value = res.data.allAward
|
||||
pageNo.value++
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getCode=()=>{
|
||||
vpUserService.GetShareEwm().then(res=>{
|
||||
if(res.code==0){
|
||||
url.value=res.data.url
|
||||
imgurl.value = res.data.bgUrl
|
||||
poster.value.views[1].text = url.value
|
||||
poster.value.views[0].src = imgurl.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
Service.GoPageBack()
|
||||
}
|
||||
|
||||
const save=()=>{
|
||||
Service.LoadClose('开始下载')
|
||||
posterFun.value.canvasToTempFilePathSync({
|
||||
fileType: 'jpg',
|
||||
pathType:'url',
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
picture.value = res.tempFilePath
|
||||
saveImage()
|
||||
},
|
||||
fail(e) {
|
||||
Service.Msg('下载失败')
|
||||
console.log('???????????', e)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
const saveImage = () => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: picture.value,
|
||||
success(res) {
|
||||
Service.Msg('保存成功！')
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log(err,'===')
|
||||
Service.Msg('保存失败')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 引入全局标签样式 */
|
||||
@import '@/styles/member-tags.scss';
|
||||
|
||||
.promotion-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.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 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;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-section {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 107, 0, 0.3);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
padding: 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
/* 列表头部 */
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.header-count {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 会员列表 */
|
||||
.members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.member-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.member-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.name-tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.user-member-tag {
|
||||
transform: scale(0.92);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.user-id-tag {
|
||||
margin-bottom: 8rpx;
|
||||
width: fit-content;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.register-time {
|
||||
font-size: 22rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
/* 积分信息 */
|
||||
.points-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 16rpx;
|
||||
background: #FFF4E6;
|
||||
border-radius: 12rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.points-label {
|
||||
font-size: 20rpx;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.points-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.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: 120rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 24rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Service } from '@/Service/Service';
|
||||
/*****用户订单*****/
|
||||
class vpOrderService {
|
||||
private static GetUserOrderListPath : string = '/Order/GetUserOrderList';
|
||||
/*****获取用户订单列表*****/
|
||||
static GetUserOrderList(page:number) {
|
||||
var result = Service.Request(this.GetUserOrderListPath, 'GET', {page});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static GetOrderInfoPath : string = '/Order/GetOrderInfo';
|
||||
/*****获取用户订单详情*****/
|
||||
static GetOrderInfo(orderId:string) {
|
||||
var result = Service.Request(this.GetOrderInfoPath, 'GET', {orderId});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
export { Service, vpOrderService };
|
||||
@@ -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