maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加点评部分的图片和视频的显示

Browse Source
This commit is contained in:
赵毅 2025-08-07 16:55:37 +08:00
parent 8f3af9a2aa
commit 1c332efdc0
4 changed files with 96 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/localLife/UserComment/index.css
View File

@ -56,6 +56,26 @@ image {
margin-top: 30rpx; margin-top: 30rpx;
} }
.Msg_con_img {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 15rpx;
gap: 15rpx;
}
.Msg_con_img image {
width: calc(33.33% - 11rpx);
height: 225rpx;
flex-shrink: 0;
}
.Msg_con_video{
width: calc(33.33% - 11rpx);
height: 225rpx;
flex-shrink: 0;
}
.Msg_iconList_leftIcon { .Msg_iconList_leftIcon {
display: flex; display: flex;
align-items: center; align-items: center;
@ -117,9 +137,11 @@ image {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.comment_con input { .comment_con input {
flex: 1; flex: 1;
} }
.comment_con image { .comment_con image {
width: 28.3rpx; width: 28.3rpx;
height: 28rpx; height: 28rpx;

33
packages/localLife/UserComment/index.vue
View File

@ -3,13 +3,14 @@
<div class="Msg"> <div class="Msg">
<div class="Msg_Tit"> <div class="Msg_Tit">
<div class="Msg_Tit_left"> <div class="Msg_Tit_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!info.user.avatar" mode="aspectFill"> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png"
v-if="!info.user.avatar" mode="aspectFill">
</image> </image>
<image :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image> <image :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image>
{{ info.user.nick_name }} {{ info.user.nick_name }}
</div> </div>
<div class="Msg_Tit_right"> <div class="Msg_Tit_right">
<image v-for="indez in 5" <image v-for="(item, index) in 5" :key="index"
:src="indez < info.satisfaction ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'" :src="indez < info.satisfaction ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'"
mode="aspectFill"></image> mode="aspectFill"></image>
</div> </div>
@ -17,35 +18,46 @@
<div class="Msg_con"> <div class="Msg_con">
{{ info.comment }} {{ info.comment }}
<div class="Msg_con_img" v-if="info.image_url">
<image v-for="(img, index) in info.image_url.split(',')" :key="index" :src="picUrl + img"
mode="aspectFill"></image>
<video class="Msg_con_video" v-if="info.video_url" :src="picUrl + info.video_url" controls></video>
</div>
</div> </div>
<div class="Msg_iconList"> <div class="Msg_iconList">
<div class="Msg_iconList_left"> <div class="Msg_iconList_left">
<div class="Msg_iconList_leftIcon"> <div class="Msg_iconList_leftIcon">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="widthFix"></image> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
mode="widthFix"></image>
{{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }} {{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }}
</div> </div>
<div class="Msg_iconList_leftIcon"> <div class="Msg_iconList_leftIcon">
<image v-if="info.is_like == 2" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="widthFix" <image v-if="info.is_like == 2"
@click="like(info)"></image> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png"
<image v-if="info.is_like == 1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon2.png" mode="widthFix" @click="like(info)"></image>
<image v-if="info.is_like == 1"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon2.png"
mode="widthFix" @click="unlike(info)"></image> mode="widthFix" @click="unlike(info)"></image>
{{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }} {{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }}
</div> </div>
</div> </div>
<div class="Msg_iconList_right"> <div class="Msg_iconList_right">
<div class="Msg_iconList_leftIcon" @click="deletes" v-if="isDelte"> <div class="Msg_iconList_leftIcon" @click="deletes" v-if="isDelte">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_del.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_del.png"
mode="widthFix"></image>
</div> </div>
</div> </div>
</div> </div>
<!-- 回复列表 --> <!-- 回复列表 -->
<div class="reply" v-for="item in replyList"> <div class="reply" v-for="(item, index) in replyList" :key="index">
<div class="reply_tit"> <div class="reply_tit">
<div class="reply_tit_left"> <div class="reply_tit_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png"
v-if="!item.user.avatar" mode="aspectFill">
</image> </image>
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image> <image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
{{ item.user.nick_name }} {{ item.user.nick_name }}
@ -58,7 +70,8 @@
<div class="comment"> <div class="comment">
<div class="comment_con"> <div class="comment_con">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_send.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_send.png"
mode="aspectFill"></image>
<input type="text" v-model="reply_content" placeholder="说点什么"> <input type="text" v-model="reply_content" placeholder="说点什么">
<button id="send" @click="sendComment">发送</button> <button id="send" @click="sendComment">发送</button>

20
packages/localLife/detail/index.css
View File

@ -179,6 +179,26 @@ page {
margin-top: 30rpx; margin-top: 30rpx;
} }
.Msg_con_img {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 15rpx;
gap: 15rpx;
}
.Msg_con_img image {
width: calc(33.33% - 11rpx);
height: 225rpx;
flex-shrink: 0;
}
.Msg_con_video{
width: calc(33.33% - 11rpx);
height: 225rpx;
flex-shrink: 0;
}
.Msg_iconList_leftIcon { .Msg_iconList_leftIcon {
display: flex; display: flex;
align-items: center; align-items: center;

32
packages/localLife/detail/index.vue
View File

@ -46,33 +46,42 @@
<div class="Msg"> <div class="Msg">
<div class="Msg_Tit"> <div class="Msg_Tit">
<div class="Msg_Tit_left"> <div class="Msg_Tit_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png"
v-if="!item.user.avatar" mode="aspectFill"></image>
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image> <image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
{{ item.user.nick_name }} {{ item.user.nick_name }}
</div> </div>
<div class="Msg_Tit_right"> <div class="Msg_Tit_right">
<image v-for="indez in 5" <image v-for="indez in 5" :key="indez"
:key="indez" :src="indez < item.satisfaction ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'" :src="indez < item.satisfaction ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'"
mode="aspectFill"></image> mode="aspectFill"></image>
</div> </div>
</div> </div>
<div class="Msg_con"> <div class="Msg_con">
{{ item.comment }} {{ item.comment }}
<div class="Msg_con_img" v-if="item.image_url">
<image v-for="(img, index) in item.image_url.split(',')" :key="index" :src="picUrl + img" mode="aspectFill">
</image>
<video class="Msg_con_video" v-if="item.video_url" :src="picUrl + item.video_url" controls></video>
</div>
</div> </div>
<div class="Msg_iconList"> <div class="Msg_iconList">
<div class="Msg_iconList_left"> <div class="Msg_iconList_left">
<div class="Msg_iconList_leftIcon"> <div class="Msg_iconList_leftIcon">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
mode="widthFix"></image>
{{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }} {{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }}
</div> </div>
<div class="Msg_iconList_leftIcon"> <div class="Msg_iconList_leftIcon">
<image v-if="item.is_like == 2" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="widthFix" <image v-if="item.is_like == 2"
@click="like(item)"></image> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png"
<image v-if="item.is_like == 1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon2.png" mode="widthFix" mode="widthFix" @click="like(item)"></image>
@click="unlike(item)"></image> <image v-if="item.is_like == 1"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon2.png"
mode="widthFix" @click="unlike(item)"></image>
{{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }} {{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
</div> </div>
</div> </div>
@ -89,11 +98,14 @@
<view>导航</view> <view>导航</view>
</view> </view>
<view class="left_label" @click="handlePhoneClick"> <view class="left_label" @click="handlePhoneClick">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_detail_Frame.png" mode="" /> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_detail_Frame.png"
mode="" />
<view>电话</view> <view>电话</view>
</view> </view>
<view class="left_label" @click="handleDiscussClick"> <view class="left_label" @click="handleDiscussClick">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_shopList_Group_1334.png" mode="" /> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_shopList_Group_1334.png"
mode="" />
<view>点评</view> <view>点评</view>
</view> </view>
</view> </view>