root
/
school-peisong
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
tianyi 2 days ago
parent
4e8cbfa0af
commit
85b6ac8c6f
1 changed files with 458 additions and 186 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 642
      pages/shop/shopEvaluate.vue

642
pages/shop/shopEvaluate.vue
View File

@ -1,42 +1,47 @@
<template> <template>
<view class="page1"> <view class="page1">
<view class="title"> <view class="evaluate-fixed">
<view class="title-sreach"> <view class="title">
<view class="back-btn" @tap="back"> <view class="title-sreach">
<uni-icons type="left" size="28"></uni-icons> <view class="back-btn" @tap="back">
</view> <uni-icons type="left" size="28"></uni-icons>
<view class="title-name"> </view>
商家评价 <view class="title-name">
{{isMerchant == 2 ? '配送评价' : '商家评价'}}
</view>
</view> </view>
</view> </view>
</view>
<view class="content">
<view class="shop-rate"> <view class="shop-rate">
<view class="rate-left"> <view class="rate-left">
<view class="rate-num"> <view class="rate-num">
{{shopItem.shopScore}} {{shopItem.shopScore}}
</view> </view>
<view class="rate-star"> <view class="rate-info">
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="shopItem.shopScore" /> <view class="rate-label">综合评分</view>
<view class="rate-star">
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="shopItem.shopScore" />
</view>
</view> </view>
</view> </view>
</view> </view>
<view class=""> <view class="menu-wrap">
<view class="menu-list"> <view class="menu-list">
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index" <view class="menu1" :class="{'menu1-active': item.checked}" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index">
:style="{'font-size':item.checked?'40rpx':'30rpx','color':item.checked?'rgba(0, 35, 28, 1)':'#777','width':index == 0?'160rpx':'180rpx'}"> <view class="menu-text">
<view :style="{'width':index == 0?'160rpx':'180rpx'}" style="text-align: left;">
{{item.name}} {{item.num}} {{item.name}} {{item.num}}
</view> </view>
<image v-if="item.checked" class="checked-img" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt="" />
</view> </view>
</view> </view>
</view> </view>
<scroll-view scroll-y @scrolltolower="onReachPage" style="width:100%;height: 600px;overflow: scroll;"> </view>
<view v-for="(item,index) in shopComments" :key="index"> <view class="evaluate-fixed-holder"></view>
<view class="content">
<scroll-view class="comment-scroll" scroll-y @scrolltolower="onReachPage">
<view class="comment-item" v-for="(item,index) in shopComments" :key="index">
<view class="eval-title"> <view class="eval-title">
<view class="eval-icon"> <view class="eval-icon">
<image :src="item.createByIcon" alt="" /> <image :src="item.createByIcon"
alt="" />
</view> </view>
<view class="eval-name"> <view class="eval-name">
<view class="name1"> <view class="name1">
@ -48,58 +53,73 @@
</view> </view>
</view> </view>
<view class="eval-content"> <view class="eval-content">
<view style="display: flex;height: 50rpx;line-height: 50rpx;font-size: 24rpx;"> <!-- <view class="goods-list" v-if="item.goodsList && item.goodsList.length > 0">
商品 <view class="goods-card" v-for="(goods,goodsIndex) in item.goodsList" :key="goodsIndex">
<view style="padding: 12rpx 0 0 10rpx;"> <image class="goods-img" :src="goods.productPicture" mode="aspectFill"></image>
<uni-rate :disabled="true" disabledColor="rgba(255, 184, 84, 1)" :value="item.score" size="12" /> <view class="goods-info">
<view class="goods-name">{{goods.productName}}</view>
<view class="goods-spec" v-if="goods.specs">{{goods.specs}}</view>
<view class="goods-bottom">
<text>￥{{goods.price}}</text>
<text>x{{goods.quantity}}</text>
</view>
</view>
</view> </view>
</view> -->
<view class="eval-rate-row">
<uni-rate :disabled="true" disabledColor="rgba(255, 184, 84, 1)" :value="item.score" size="12" />
</view> </view>
<view class="eval-text"> <view class="eval-text">
{{item.remark}} {{item.remark}}
</view> </view>
<view class="eval-img" v-if="item.picture"> <view class="eval-img" v-if="item.picture">
<image @tap="largeImg" :src="item.picture" alt=""> <image v-for="(pic,picIndex) in getPictureList(item.picture)" :key="picIndex"
@tap="largeImg(item.picture, picIndex)" :src="pic" mode="aspectFill"></image>
</view> </view>
<view class="reply-card" :class="{'expanded': item1.isOpen}" v-for="(item1,index1) in item.comments" :key="index1"> <view class="reply-card" v-if="item.comments && item.comments.length">
<!-- 标题行：商家回复 + 展开/收起按钮 --> <view class="reply-title">回复</view>
<view class="reply-header"> <view class="reply-list">
<!-- 回复内容区域（动态类控制展开/折叠） --> <view class="reply-content" v-for="(item1,index1) in item.comments" :key="index1" v-show="!item.isCommentFold || index1 == 0">
<view class="reply-content" :class="{ collapsed: !item1.isOpen, expanded: item1.isOpen }"> <view>
<text>{{item1.createByName}} : {{ item1.remark }}</text> <text class="reply-name">{{item1.createByName}}：</text>
<image :src="item1.picture" v-if="item1.picture" alt="" class="upload-img" style="margin-top: 10px;border-radius: 10px;"> <text>{{ item1.remark }}</text>
</view> </view>
<view class="reply-expand-btn" @click="toggleReply(index,index1)"> <view class="reply-time" v-if="item1.createTime">
<text v-if="!item1.isOpen">展开</text> {{item1.createTime | formatTime}}
<text v-else>收起</text> </view>
<image :src="item1.picture" @tap="largeImg(item1.picture)" v-if="item1.picture" class="upload-img reply-img" mode="aspectFill"></image>
</view> </view>
</view> </view>
<view class="reply-fold" v-if="item.comments.length > 1" @tap="toggleCommentFold(index)">
{{item.isCommentFold ? '展开全部 ' + item.comments.length + ' 条回复' : '收起回复'}}
</view>
</view> </view>
<view class="" v-if="isMerchant == 1"> <view class="reply-operate" v-if="(isMerchant == 1 || isMerchant == 2)">
<view @tap="changeStatus(index)" class="reply-card" v-if="!item.isReply" style="text-align: right;padding-right: 10px;color: #00BFFF;"> <view @tap="changeStatus(index)" class="reply-action" v-if="!item.isReply">
回复 回复
</view> </view>
<view class="" v-else> <view class="reply-editor" v-else>
<view class="" style="background: #f5f5f5;border-radius: 10px;border: 1px solid #777;margin-top: 10px;"> <view class="reply-editor-box">
<view class="eval-num" style="border: none;"> <view class="eval-num">
<textarea name="" v-model="replyText" id="" cols="30" rows="10" placeholder="有什么想说的吗？可以写下来，提交给我们" style="width: 100%;font-size: 28rpx;padding: 30rpx;height: 200rpx;"></textarea> <textarea name="" v-model="replyText" id="" cols="30" rows="10" placeholder="有什么想说的吗？可以写下来，提交给我们" class="reply-textarea"></textarea>
</view> </view>
<view class="eval-num" style="border: none;padding: 0 30rpx;display: flex;margin-bottom: 10px;"> <view class="reply-upload-row">
<view class="upload-img" @tap="pictureAdd()" style="background: #eee;text-align: center;line-height: 160rpx;"> <view class="upload-img upload-add" @tap="pictureAdd()">
<uni-icons type="camera" size="28" color="#777"></uni-icons> <uni-icons type="camera" size="28" color="#777"></uni-icons>
</view> </view>
<view style="flex: 1;display: flex;"> <view class="reply-preview-list">
<view v-if="replyPicture !=''" :key="index" style="width: 160rpx;height: 160rpx;margin-left: 20rpx;"> <view v-if="replyPicture !=''" :key="index" class="reply-preview">
<image :src="replyPicture" alt="" class="upload-img"> <image :src="replyPicture" alt="" class="upload-img">
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- <textarea type="text" v-model="replyText" placeholder="要说什么写下来吧" style="background: #eee;border-radius: 10px;height: 100px;margin: 10px 0;padding: 10px;" /> --> <!-- <textarea type="text" v-model="replyText" placeholder="要说什么写下来吧" style="background: #eee;border-radius: 10px;height: 100px;margin: 10px 0;padding: 10px;" /> -->
<view class="" style="display: flex;flex-direction: row-reverse;padding-right: 10px;margin-top: 10px;"> <view class="reply-buttons">
<view @tap="submit(index)" class="" style="margin-left: 20px;color: #00BFFF;"> <view @tap="submit(index)" class="reply-confirm">
确认 确认
</view> </view>
<view class="" @tap="changeStatus(index)"> <view class="reply-cancel" @tap="changeStatus(index)">
取消 取消
</view> </view>
</view> </view>
@ -107,9 +127,7 @@
</view> </view>
</view> </view>
</view> </view>
<view style="width: 100%;height: 100rpx;"></view>
</scroll-view> </scroll-view>
</view> </view>
<!-- 查看大图弹出层 --> <!-- 查看大图弹出层 -->
<uni-popup ref="imgPopup" background-color="#fff"> <uni-popup ref="imgPopup" background-color="#fff">
@ -117,6 +135,7 @@
<image :src="bigImg" alt="" style="width: 100%;height: 100%;"> <image :src="bigImg" alt="" style="width: 100%;height: 100%;">
</view> </view>
</uni-popup> </uni-popup>
<common-loading />
</view> </view>
</template> </template>
@ -127,7 +146,6 @@
replyText:'', replyText:'',
isMerchant:0, isMerchant:0,
replyPicture:"", replyPicture:"",
isExpanded: false,
isPintuan: true, isPintuan: true,
bigImg: '', bigImg: '',
shopItem:{}, shopItem:{},
@ -146,7 +164,7 @@
num: "", num: "",
checked: true checked: true
}, { }, {
name: '有图/视频', name: '有图',
num: '', num: '',
checked: false checked: false
}, { }, {
@ -161,7 +179,13 @@
}, },
filters:{ filters:{
formatTime(value) { formatTime(value) {
if (!value) return '';
const timeText = String(value).replace('T', ' ');
if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/.test(timeText)) {
return timeText.slice(0, 19);
}
const date = new Date(value); const date = new Date(value);
if (isNaN(date.getTime())) return '';
// 获取年份 // 获取年份
const year = date.getFullYear(); const year = date.getFullYear();
@ -187,7 +211,17 @@
}, },
onLoad(option) { onLoad(option) {
this.isMerchant = option.isMerchant this.isMerchant = option.isMerchant
this.shopItem = JSON.parse(option.item) if (option.item) {
try {
this.shopItem = JSON.parse(decodeURIComponent(option.item))
} catch (e) {
try {
this.shopItem = JSON.parse(option.item)
} catch (e2) {
this.shopItem = {}
}
}
}
if(option.isCha == 1){ //待回复差评进来的 if(option.isCha == 1){ //待回复差评进来的
this.searchForm.score = 1 this.searchForm.score = 1
this.searchForm.hasAnswer= 0 this.searchForm.hasAnswer= 0
@ -203,7 +237,7 @@
getshopComments(id){ getshopComments(id){
let that = this let that = this
this.searchForm.shopId = id this.searchForm.shopId = id
that.NB.sendRequest("/app/comment/getCommentList", this.searchForm, false, 'post', 'application/json').then((res) => { this.NB.sendRequest("/app/comment/getCommentList", this.searchForm, false, 'post', 'application/json').then((res) => {
if (res.code == 200) { if (res.code == 200) {
if (that.searchForm.pageNum == 1) { if (that.searchForm.pageNum == 1) {
that.shopComments = res.result.records that.shopComments = res.result.records
@ -212,10 +246,12 @@
} }
for(let i=0;i<that.shopComments.length;i++){ for(let i=0;i<that.shopComments.length;i++){
that.shopComments[i].isReply=false that.shopComments[i].isReply=false
if(that.shopComments[i].comments.length > 0){ that.shopComments[i].isCommentFold = true
for(let m=0;m<that.shopComments[i].comments.length;m++){ if(!that.shopComments[i].goodsList){
that.shopComments[i].comments[m].isOpen = false that.shopComments[i].goodsList = []
} }
if(!that.shopComments[i].comments){
that.shopComments[i].comments = []
} }
} }
that.total = res.result.pages; // pages = 总页数 that.total = res.result.pages; // pages = 总页数
@ -231,7 +267,7 @@
return return
} }
uni.hideLoading() uni.hideLoading()
}).catch((res) => {}) })
}, },
onReachPage(){ onReachPage(){
if (this.searchForm.pageNum >= this.total) return; if (this.searchForm.pageNum >= this.total) return;
@ -246,13 +282,13 @@
remark:this.replyText, remark:this.replyText,
picture:this.replyPicture, picture:this.replyPicture,
createBy:this.shopComments[v].shopId, createBy:this.shopComments[v].shopId,
createByName:'商家', createByName:this.isMerchant == 1?'商家':'配送员',
createByIcon:'https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png', createByIcon:'https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png',
orderId:this.shopComments[v].orderId, orderId:this.shopComments[v].orderId,
shopId:this.shopComments[v].shopId, shopId:this.shopComments[v].shopId,
}] }]
that.NB.sendRequest("/app/comment/save", data, false, 'post', 'application/json').then((res) => { this.NB.sendRequest("/app/comment/save", data, false, 'post', 'application/json').then((res) => {
if (res.code == 200) { if (res.code == 200) {
uni.showToast({ uni.showToast({
title: "评论成功", title: "评论成功",
@ -264,20 +300,20 @@
} else { } else {
uni.showToast({ uni.showToast({
title: res.message, title: res.message,
icon:'none' icon: 'none'
}); })
} }
uni.hideLoading() uni.hideLoading();
}).catch((res) => {}) })
},
toggleReply(i,m) {
this.shopComments[i].comments[m].isOpen = !this.shopComments[i].comments[m].isOpen;
this.$forceUpdate()
}, },
changeStatus(v){ changeStatus(v){
this.shopComments[v].isReply = !this.shopComments[v].isReply this.shopComments[v].isReply = !this.shopComments[v].isReply
this.$forceUpdate() this.$forceUpdate()
}, },
toggleCommentFold(v){
this.shopComments[v].isCommentFold = !this.shopComments[v].isCommentFold
this.$forceUpdate()
},
checkTab(index) { checkTab(index) {
for (let i = 0; i < this.menuList.length; i++) { for (let i = 0; i < this.menuList.length; i++) {
if (i == index) { if (i == index) {
@ -287,6 +323,7 @@
} }
} }
if(index == 0){ if(index == 0){
this.searchAll = true
this.searchForm.picture = 0 this.searchForm.picture = 0
this.searchForm.score = 0 this.searchForm.score = 0
}else if(index ==1){ }else if(index ==1){
@ -324,7 +361,7 @@
let that = this; let that = this;
let hiver_token = uni.getStorageSync("hiver_token") let hiver_token = uni.getStorageSync("hiver_token")
await uni.uploadFile({ await uni.uploadFile({
url: getApp().globalData.mainurl + '/upload/file', url: that.tui.interfaceUrl() + '/upload/file',
filePath: path, filePath: path,
name: 'file', name: 'file',
header: { header: {
@ -352,9 +389,18 @@
}, 1000) }, 1000)
}, },
//查看大图 //查看大图
largeImg(img) { getPictureList(picture) {
this.bigImg = 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png' if (!picture) return []
this.$refs.imgPopup.open() if (Array.isArray(picture)) return picture.filter(Boolean)
return String(picture).split(',').map(item => item.trim()).filter(Boolean)
},
largeImg(picture, currentIndex = 0) {
const urls = this.getPictureList(picture)
if (!urls.length) return
uni.previewImage({
urls,
current: urls[currentIndex] || urls[0]
})
}, },
back() { back() {
uni.navigateBack() uni.navigateBack()
@ -368,245 +414,471 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 24rpx; font-size: 24rpx;
background: #F5F8F5; background: #F7F8FA;
color: #00231C; color: #00231C;
} }
.page1 { .page1 {
width: 100%; width: 100%;
height: 100%; min-height: 100vh;
font-size: 24rpx; font-size: 24rpx;
position: relative; position: relative;
background: linear-gradient(180deg, #F2FFF8 0%, #F7F8FA 360rpx, #F7F8FA 100%);
}
.evaluate-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: linear-gradient(180deg, #EEFFF6 0%, #F7F8FA 100%);
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.05);
}
.evaluate-fixed-holder {
height: 470rpx;
} }
.title { .title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
width: 100%; width: 100%;
height: 54%; height: 210rpx;
background:
radial-gradient(circle at 16% 20%, rgba(115, 255, 199, 0.35) 0, rgba(115, 255, 199, 0) 210rpx),
linear-gradient(135deg, #F3FFF7 0%, #EAFFF4 48%, #FFF8EC 100%);
} }
.title-sreach { .title-sreach {
width: 100%; width: 100%;
display: flex; display: flex;
height: 200rpx; height: 210rpx;
position: relative; position: relative;
} }
.back-btn { .back-btn {
padding-top: 110rpx; margin: 110rpx 0 0 30rpx;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 10rpx 24rpx rgba(0, 35, 28, 0.08);
} }
.title-name { .title-name {
padding-top: 110rpx; padding-top: 110rpx;
font-size: 36rpx; font-size: 34rpx;
font-weight: 700; font-weight: 700;
flex: 1; flex: 1;
text-align: center; text-align: center;
line-height: 64rpx;
letter-spacing: 2rpx;
} }
.content { .content {
position: absolute; width: 100%;
top: 200rpx; height: calc(100vh - 470rpx);
width: 95%; box-sizing: border-box;
margin-left: 2.5%; padding: 0 24rpx;
}
.comment-scroll {
width: 100%;
height: 100%;
box-sizing: border-box;
padding-bottom: 36rpx;
margin-top:20rpx;
}
.comment-item {
padding: 28rpx;
margin-bottom: 22rpx;
border-radius: 28rpx;
background: #FFFFFF;
box-shadow: 0 16rpx 40rpx rgba(0, 35, 28, 0.06);
}
.evaluate-fixed .shop-rate,
.evaluate-fixed .menu-list {
width: calc(100% - 48rpx);
margin-left: 24rpx;
} }
.shop-rate { .shop-rate {
display: flex; display: flex;
padding-bottom: 30rpx; margin-top: 4rpx;
padding: 28rpx 30rpx;
box-sizing: border-box;
border-radius: 30rpx;
background: #FFFFFF;
box-shadow: 0 16rpx 40rpx rgba(255, 132, 34, 0.12);
} }
.rate-left { .rate-left {
display: flex; display: flex;
align-items: center;
flex: 1; flex: 1;
} }
.rate-num { .rate-num {
font-size: 86rpx; font-size: 88rpx;
line-height: 94rpx;
font-weight: 700; font-weight: 700;
background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1)); background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
-webkit-background-clip: text;
background-clip: text; background-clip: text;
color: transparent; color: transparent;
} }
.rate-right { .rate-info {
display: flex; margin-left: 24rpx;
width: 160rpx;
height: 100rpx;
line-height: 40rpx;
font-size: 36rpx;
text-align: center;
font-weight: 700;
border-left: 1px solid #eee;
} }
.rate-star { .rate-label {
height: 100rpx; margin-bottom: 12rpx;
padding: 32rpx 20rpx; font-size: 24rpx;
color: #7A8782;
font-weight: 700;
} }
.right1 { .rate-star {
margin: 20rpx 0 0 5%; line-height: 36rpx;
width: 45%;
} }
.menu-list { .menu-list {
height: 100rpx; height: 110rpx;
width: 100%;
display: flex; display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
padding-top: 30rpx;
border-top: 1px solid #eee;
} }
.checked-img { .menu1 {
width: 100%; min-width: 176rpx;
height: 20rpx; height: 64rpx;
position: absolute; margin-right: 18rpx;
bottom: 0; line-height: 64rpx;
left: 0; border-radius: 999rpx;
text-align: center;
font-size: 28rpx;
color: #6D7874;
background: rgba(255, 255, 255, 0.78);
box-shadow: inset 0 0 0 1rpx rgba(0, 35, 28, 0.06);
flex-shrink: 0;
} }
.menu1 { .menu1-active {
width: 180rpx; color: #00231C;
height: 70rpx; font-weight: 700;
position: relative; background: linear-gradient(135deg, #B5FFDD 0%, #FDF4B9 100%);
margin-right: 20rpx; box-shadow: 0 10rpx 24rpx rgba(0, 180, 126, 0.14);
line-height: 70rpx; }
flex: 1;
.menu-text {
padding: 0 24rpx;
} }
.eval-title { .eval-title {
width: 100%; width: 100%;
height: 80rpx;
display: flex; display: flex;
align-items: center;
} }
.eval-icon { .eval-icon {
height: 80rpx; height: 82rpx;
width: 80rpx; width: 82rpx;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: #EAF5EF;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.08);
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size: 100%; display: block;
} }
} }
.eval-name { .eval-name {
min-width: 0;
margin-left: 20rpx; margin-left: 20rpx;
} }
.name1 { .name1 {
font-size: 28rpx; font-size: 28rpx;
line-height: 50rpx; line-height: 42rpx;
font-weight: 700; font-weight: 700;
color: #142D26;
} }
.eval-rate { .eval-time {
margin-top: 4rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #87918E;
}
.eval-rate-row {
display: flex; display: flex;
margin: 20rpx 0 0 100rpx; align-items: center;
height: 48rpx; margin-top: 22rpx;
line-height: 40rpx;
} }
.eval-content { .eval-content {
margin-left: 100rpx; margin-left: 102rpx;
font-size: 28rpx; font-size: 28rpx;
color: #5C6662;
line-height: 46rpx;
}
.eval-text {
margin-top: 12rpx;
color: #4E5A56;
word-break: break-all;
}
.goods-list {
margin: 4rpx 0 16rpx;
}
.goods-card {
display: flex;
padding: 16rpx;
margin-bottom: 12rpx;
background: #F7F8FA;
border-radius: 16rpx;
}
.goods-img {
width: 104rpx;
height: 104rpx;
border-radius: 12rpx;
background: #eef1ee;
flex-shrink: 0;
}
.goods-info {
flex: 1;
min-width: 0;
margin-left: 16rpx;
line-height: 36rpx;
}
.goods-name {
font-size: 26rpx;
font-weight: 700;
color: #00231C;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods-spec {
margin-top: 6rpx;
font-size: 22rpx;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods-bottom {
display: flex;
justify-content: space-between;
margin-top: 8rpx;
font-size: 24rpx;
color: #777; color: #777;
line-height: 48rpx;
} }
.eval-img { .eval-img {
display: flex; display: flex;
width: 100%; width: 100%;
overflow-x: scroll; flex-wrap: wrap;
margin-top: 20rpx; margin-top: 22rpx;
gap: 16rpx;
image { image {
width: 100rpx; width: 150rpx;
height: 100rpx; height: 150rpx;
background-size: 100%; border-radius: 18rpx;
margin-right: 20rpx; background: #EEF1EE;
} }
} }
/* 卡片整体样式（可根据需要调整外间距） */
.reply-card { .reply-card {
border-radius: 12rpx; border-radius: 20rpx;
background-color: #eee; background-color: #F8FAF9;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin-top:20rpx; margin-top: 20rpx;
padding: 18rpx 20rpx;
border: 1rpx solid rgba(0, 35, 28, 0.06);
} }
/* 标题行：左标签 + 右按钮 */ .reply-title {
.reply-header { position: relative;
display: flex; padding-left: 18rpx;
justify-content: space-between; margin-bottom: 10rpx;
align-items: center; font-size: 24rpx;
margin-bottom: 16rpx; line-height: 34rpx;
color: #17352D;
font-weight: 700;
} }
.reply-label { .reply-title::before {
font-size: 28rpx; content: '';
font-weight: 500; position: absolute;
color: #333; left: 0;
top: 8rpx;
width: 6rpx;
height: 18rpx;
border-radius: 999rpx;
background: #20D38B;
} }
.reply-expand-btn { .reply-list {
font-size: 24rpx; display: flex;
padding: 4rpx 12rpx; flex-direction: column;
} }
/* 回复内容基础样式 */
.reply-content { .reply-content {
position: relative;
font-size: 26rpx; font-size: 26rpx;
color: #555; color: #5A6460;
padding: 12rpx; padding: 14rpx 0;
transition: all 1s;
height: 70rpx;
flex: 1; flex: 1;
display: block;
height: auto;
overflow: visible;
line-height: 42rpx;
} }
/* 折叠状态：单行省略 */ .reply-content + .reply-content {
.reply-content.collapsed { border-top: 1rpx solid rgba(0, 35, 28, 0.06);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
} }
/* 展开状态：固定高度100px，可滚动 */ .reply-name {
.reply-content.expanded { color: #17352D;
display: block; font-weight: 700;
height: auto;
/* 固定高度100px */
overflow-y: auto;
/* 内容超长时滚动 */
/* 重置折叠相关属性 */
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
text-overflow: clip;
padding-bottom: 10px;
} }
/* 滚动条美化（可选） */ .reply-time {
.reply-content.expanded::-webkit-scrollbar { margin-top: 4rpx;
width: 12rpx; font-size: 22rpx;
line-height: 32rpx;
color: #99A19E;
} }
.reply-content.expanded::-webkit-scrollbar-thumb { .reply-operate {
background-color: #ccc; margin-top: 18rpx;
border-radius: 20rpx; }
.reply-action {
text-align: right;
color: #00AEEF;
font-size: 26rpx;
font-weight: 700;
padding: 10rpx 0;
} }
.eval-num{
padding-bottom: 30rpx; .reply-editor-box {
border-bottom: 1px solid #eee; margin-top: 12rpx;
border-radius: 22rpx;
border: 1rpx solid rgba(0, 35, 28, 0.08);
background: #FAFBFA;
overflow: hidden;
}
.eval-num {
border-bottom: 1rpx solid rgba(0, 35, 28, 0.06);
}
.reply-textarea {
width: 100%;
height: 200rpx;
box-sizing: border-box;
padding: 26rpx;
font-size: 28rpx;
line-height: 42rpx;
color: #243832;
}
.reply-upload-row {
display: flex;
padding: 22rpx 26rpx;
} }
.upload-img { .upload-img {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
border-radius: 18rpx;
display: block;
}
.upload-add {
display: flex;
align-items: center;
justify-content: center;
background: #F0F3F2;
border: 1rpx dashed #C8D2CE;
}
.reply-preview-list {
flex: 1;
display: flex;
}
.reply-preview {
width: 160rpx;
height: 160rpx;
margin-left: 20rpx;
}
.reply-img {
margin-top: 16rpx;
}
.reply-fold {
margin-top: 8rpx;
padding-top: 12rpx;
border-top: 1rpx solid rgba(0, 35, 28, 0.06);
font-size: 24rpx;
line-height: 34rpx;
color: #00AEEF;
font-weight: 700;
text-align: right;
}
.reply-buttons {
display: flex;
flex-direction: row-reverse;
align-items: center;
margin-top: 18rpx;
}
.reply-confirm,
.reply-cancel {
min-width: 108rpx;
height: 58rpx;
line-height: 58rpx;
border-radius: 999rpx;
text-align: center;
font-size: 26rpx;
}
.reply-confirm {
margin-left: 18rpx;
color: #FFFFFF;
font-weight: 700;
background: linear-gradient(135deg, #20D38B 0%, #00BFFF 100%);
box-shadow: 0 10rpx 22rpx rgba(0, 191, 255, 0.18);
}
.reply-cancel {
color: #7A8782;
background: #F1F3F2;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save