root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 2 months ago
parent
f0805ba09b
commit
178e4ed1ab
1 changed files with 321 additions and 122 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. 431
      package2/group/shopEvaluate.vue

431
package2/group/shopEvaluate.vue
View File

@ -16,21 +16,20 @@
<view class="rate-num"> <view class="rate-num">
{{shopItem.shopScore}} {{shopItem.shopScore}}
</view> </view>
<view class="rate-info">
<view class="rate-label">综合评分</view>
<view class="rate-star"> <view class="rate-star">
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="shopItem.shopScore" /> <uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="shopItem.shopScore" />
</view> </view>
</view> </view>
</view> </view>
<view class=""> </view>
<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>
<img 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>
@ -67,12 +66,9 @@
</view> </view>
</view> </view>
</view> --> </view> -->
<view style="display: flex;height: 50rpx;line-height: 50rpx;font-size: 24rpx;"> <view class="eval-rate-row">
<view style="padding: 12rpx 0 0 10rpx;">
<uni-rate :disabled="true" disabledColor="rgba(255, 184, 84, 1)" :value="item.score" size="12" /> <uni-rate :disabled="true" disabledColor="rgba(255, 184, 84, 1)" :value="item.score" size="12" />
</view> </view>
</view>
<view class="eval-text"> <view class="eval-text">
{{item.remark}} {{item.remark}}
</view> </view>
@ -80,42 +76,50 @@
<image v-for="(pic,picIndex) in getPictureList(item.picture)" :key="picIndex" <image v-for="(pic,picIndex) in getPictureList(item.picture)" :key="picIndex"
@tap="largeImg(item.picture, picIndex)" :src="pic" mode="aspectFill"></image> @tap="largeImg(item.picture, picIndex)" :src="pic" mode="aspectFill"></image>
</view> </view>
<view class="reply-card" v-for="(item1,index1) in item.comments" :key="index1"> <view class="reply-card" v-if="item.comments && item.comments.length">
<view class="reply-header"> <view class="reply-title">回复</view>
<view class="reply-content"> <view class="reply-list">
<text>{{item1.createByName}} : {{ item1.remark }}</text> <view class="reply-content" v-for="(item1,index1) in item.comments" :key="index1" v-show="!item.isCommentFold || index1 == 0">
<image :src="item1.picture" @tap="largeImg(item1.picture)" v-if="item1.picture" class="upload-img" mode="aspectFill" style="margin-top: 10px;border-radius: 10px;"></image> <view>
<text class="reply-name">{{item1.createByName}}：</text>
<text>{{ item1.remark }}</text>
</view> </view>
<view class="reply-time" v-if="item1.createTime">
{{item1.createTime | formatTime}}
</view> </view>
<image :src="item1.picture" @tap="largeImg(item1.picture)" v-if="item1.picture" class="upload-img reply-img" mode="aspectFill"></image>
</view> </view>
<view class="" v-if="(isMerchant == 1 || isMerchant == 2)"> </view>
<view @tap="changeStatus(index)" class="reply-card" v-if="!item.isReply" style="text-align: right;padding-right: 10px;color: #00BFFF;"> <view class="reply-fold" v-if="item.comments.length > 1" @tap="toggleCommentFold(index)">
{{item.isCommentFold ? '展开全部 ' + item.comments.length + ' 条回复' : '收起回复'}}
</view>
</view>
<view class="reply-operate" v-if="(isMerchant == 1 || isMerchant == 2)">
<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: rgba(247, 248, 248, 0.6);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()" <view class="upload-img upload-add" @tap="pictureAdd()">
style="background: rgba(247, 248, 248, 0.6);text-align: center;line-height: 160rpx;">
<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 !=''" <view v-if="replyPicture !=''" :key="index" class="reply-preview">
:key="index" style="width: 160rpx;height: 160rpx;margin-left: 20rpx;">
<img :src="replyPicture" alt="" class="upload-img"> <img :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>
@ -176,7 +180,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();
@ -238,9 +248,13 @@
} }
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
that.shopComments[i].isCommentFold = true
if(!that.shopComments[i].goodsList){ if(!that.shopComments[i].goodsList){
that.shopComments[i].goodsList = [] 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 = 总页数
that.$forceUpdate() that.$forceUpdate()
@ -292,6 +306,10 @@
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) {
@ -392,7 +410,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 24rpx; font-size: 24rpx;
background: #F5F8F5; background: #F7F8FA;
color: #00231C; color: #00231C;
} }
@ -401,6 +419,7 @@
min-height: 100vh; 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 { .evaluate-fixed {
@ -409,170 +428,212 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 1000; z-index: 1000;
background: #F5F8F5; background: linear-gradient(180deg, #EEFFF6 0%, #F7F8FA 100%);
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.05);
} }
.evaluate-fixed-holder { .evaluate-fixed-holder {
height: 450rpx; height: 470rpx;
} }
.title { .title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
width: 100%; width: 100%;
height: 200rpx; height: 210rpx;
background-size: 100% 100%; 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 {
position: absolute; position: absolute;
bottom: 0; left: 24rpx;
left: 0; 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 {
width: 95%; width: 100%;
margin-left: 2.5%; height: calc(100vh - 470rpx);
height: calc(100vh - 450rpx);
box-sizing: border-box; box-sizing: border-box;
padding: 0 24rpx;
} }
.comment-scroll { .comment-scroll {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 32rpx; padding-bottom: 36rpx;
} }
.comment-item { .comment-item {
padding: 24rpx 0; padding: 28rpx;
border-bottom: 1px solid rgba(0, 35, 28, 0.06); 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 .shop-rate,
.evaluate-fixed .menu-list { .evaluate-fixed .menu-list {
width: 95%; width: calc(100% - 48rpx);
margin-left: 2.5%; 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: 120rpx; 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);
img { img {
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: #777; color: #5C6662;
line-height: 48rpx; line-height: 46rpx;
}
.eval-text {
margin-top: 12rpx;
color: #4E5A56;
word-break: break-all;
} }
.goods-list { .goods-list {
@ -583,7 +644,7 @@
display: flex; display: flex;
padding: 16rpx; padding: 16rpx;
margin-bottom: 12rpx; margin-bottom: 12rpx;
background: rgba(247, 248, 248, 0.9); background: #F7F8FA;
border-radius: 16rpx; border-radius: 16rpx;
} }
@ -631,51 +692,189 @@
.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;
border-radius: 10rpx; border-radius: 18rpx;
margin-right: 20rpx; background: #EEF1EE;
flex-shrink: 0;
} }
} }
/* 卡片整体样式（可根据需要调整外间距） */
.reply-card { .reply-card {
border-radius: 12rpx; border-radius: 20rpx;
background-color: rgba(247, 248, 248, 0.6); 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 {
position: relative;
padding-left: 18rpx;
margin-bottom: 10rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #17352D;
font-weight: 700;
}
.reply-title::before {
content: '';
position: absolute;
left: 0;
top: 8rpx;
width: 6rpx;
height: 18rpx;
border-radius: 999rpx;
background: #20D38B;
} }
.reply-header { .reply-list {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: flex-start;
margin-bottom: 16rpx;
} }
/* 回复内容基础样式 */
.reply-content { .reply-content {
position: relative;
font-size: 26rpx; font-size: 26rpx;
color: #555; color: #5A6460;
padding: 12rpx; padding: 14rpx 0;
flex: 1; flex: 1;
display: block; display: block;
height: auto; height: auto;
padding-bottom: 10px;
overflow: visible; overflow: visible;
line-height: 42rpx;
}
.reply-content + .reply-content {
border-top: 1rpx solid rgba(0, 35, 28, 0.06);
}
.reply-name {
color: #17352D;
font-weight: 700;
}
.reply-time {
margin-top: 4rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #99A19E;
}
.reply-operate {
margin-top: 18rpx;
}
.reply-action {
text-align: right;
color: #00AEEF;
font-size: 26rpx;
font-weight: 700;
padding: 10rpx 0;
}
.reply-editor-box {
margin-top: 12rpx;
border-radius: 22rpx;
border: 1rpx solid rgba(0, 35, 28, 0.08);
background: #FAFBFA;
overflow: hidden;
} }
.eval-num { .eval-num {
padding-bottom: 30rpx; border-bottom: 1rpx solid rgba(0, 35, 28, 0.06);
border-bottom: 1px solid #eee; }
.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