You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
240 lines
6.7 KiB
240 lines
6.7 KiB
<template>
|
|
<view>
|
|
<view style="" v-if="list.length>0">
|
|
<fui-collapse-item v-for="(item,index) in list" :key="index" :disabled="shouldDisableItem(item)" :arrow="shouldDisableItems(item)">
|
|
<view class="fui-item__box">
|
|
<view style="display: flex;width: 100%;position: relative;">
|
|
<view class="content_img" v-if="item.headimg != 0">
|
|
<image style="width: 50rpx;height:50rpx;border-radius: 50%;" :src="item.headimg"></image>
|
|
</view>
|
|
<view class="content_img" v-else>
|
|
<image style="width: 50rpx;height: 50rpx;border-radius: 50%;" src="/static/images/home/tixing.png"></image>
|
|
</view>
|
|
<view style="padding: 5rpx 20rpx;">
|
|
{{item.content}}
|
|
</view>
|
|
<view style="position: absolute;right: 7%;top: 1%;" @click="comments(item.comment_id)">
|
|
评论
|
|
</view>
|
|
</view>
|
|
|
|
<view class="middles_con" v-if="item.imagesarr!=0" style="">
|
|
<view style="width: 32%;height: 200rpx;margin:2rpx;" v-for="(item2, index2) in item.imagesarr"
|
|
:key="index2" @click="tankuang(item2,item.imagesarr)">
|
|
<image :src="item2" style="width: 100%;height: 100%;"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<template v-slot:content>
|
|
<view class="fui-descr" v-if="item.comments_list.length>0">
|
|
<view class="flex" style="position: relative;" v-for="(item1,index1) in item.comments_list" :key="index1">
|
|
|
|
|
|
<view style="display: flex;width: 100%;position: relative;">
|
|
<view class="content_img" v-if="item1.headimg != 0">
|
|
<image style="width: 50rpx;height:50rpx;border-radius: 50%;" :src="item1.headimg"></image>
|
|
</view>
|
|
<view class="content_img" v-else>
|
|
<image style="width: 50rpx;height: 50rpx;border-radius: 50%;" src="/static/images/home/tixing.png"></image>
|
|
</view>
|
|
<view style="padding: 5rpx 20rpx;">
|
|
{{item1.content}}
|
|
</view>
|
|
</view>
|
|
<view class="middles_con" v-if="item1.imagesarr!=0" style="">
|
|
<view style="width: 32%;height: 200rpx;margin:2rpx;" v-for="(item2, index2) in item1.imagesarr"
|
|
:key="index2" @click="tankuang(item2,item1.imagesarr)">
|
|
<image :src="item2" style="width: 100%;height: 100%;"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fui-descr" v-else style="text-align: center;">
|
|
暂无子评论
|
|
</view>
|
|
</template>
|
|
</fui-collapse-item>
|
|
</view>
|
|
<view style="font-size: 40rpx;font-weight: bold;text-align: center;padding-top: 50rpx;" v-else>
|
|
来当第一个评论的人吧!
|
|
</view>
|
|
|
|
<view style="margin-top: 30rpx;width: 100%;background-color: #fff;">
|
|
<view style="width: 95%;height: 200rpx;margin: auto;">
|
|
<textarea v-model="textAreaValue" placeholder="输入内容"
|
|
:style="{ width: '100%',padding:'30rpx'}"></textarea>
|
|
</view>
|
|
<view class="fui-section__title" style="width: 95%;margin: auto;z-index: 9999;">
|
|
<fui-upload :max="3" immediate :url="url" ref="upload" @complete="complete" @success="success"
|
|
:isDel="false">
|
|
<fui-icon name="plus"></fui-icon>
|
|
</fui-upload>
|
|
</view>
|
|
|
|
<fui-button background="#00be8c" width="95%" :margin="['35rpx','0','0','35rpx']" @click="submit()">发
|
|
布</fui-button>
|
|
</view>
|
|
<view style="height: 30rpx;width: 100%;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import user from '@/api/user.js';
|
|
import fuiCollapse from "@/components/firstui/fui-collapse/fui-collapse.vue"
|
|
import fuiCollapseItem from "@/components/firstui/fui-collapse-item/fui-collapse-item.vue"
|
|
import fuiUpload from "@/components/firstui/fui-upload/fui-upload.vue"
|
|
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
|
import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
|
|
|
|
export default {
|
|
name: 'CommentList',
|
|
props: {
|
|
list: Array, // 将您的列表数据作为属性传递
|
|
actid: {
|
|
type: String,
|
|
default: '' // 在这里设置默认值
|
|
}, // 将您的列表数据作为属性传递
|
|
um_id: {
|
|
type: String,
|
|
default: '' // 在这里设置默认值
|
|
}, // 将您的列表数据作为属性传递
|
|
},
|
|
components: {
|
|
fuiCollapse,
|
|
fuiCollapseItem,
|
|
fuiUpload,
|
|
fuiIcon,
|
|
fuiButton
|
|
},
|
|
data() {
|
|
return {
|
|
url: 'http://medication.zeyan.wang/dnseyeapi/Base/upload1',
|
|
urls: [],
|
|
status: '',
|
|
textAreaValue: '',
|
|
lists: [],
|
|
listlength: ''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.actid = uni.getStorageSync('actid');
|
|
this.um_id = uni.getStorageSync('um_id');
|
|
this.fetchData(this.actid)
|
|
},
|
|
methods: {
|
|
fetchData(actid) {
|
|
user.comment_list({
|
|
act_id: actid
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.status == 200) {
|
|
this.list = res.data
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
},
|
|
onPullDownRefresh(){
|
|
this.fetchData(this.actid)
|
|
},
|
|
complete(e) {
|
|
console.log(e)
|
|
this.status = e.status
|
|
// this.urls = e.urls
|
|
if (this.status === 'success' && e.action === 'upload') {
|
|
this.fui.toast('上传完成！')
|
|
//已上传完成的图片列表 this.urls
|
|
// console.log(this.urls)
|
|
}
|
|
},
|
|
success(e) {
|
|
var responseString = e.res.data;
|
|
var cleanedString = responseString.replace('{"status":"200","msg":"文件上传成功","data":"', '').replace('"}',
|
|
'');
|
|
console.log(cleanedString)
|
|
this.urls += cleanedString + ','
|
|
},
|
|
submit() {
|
|
user.comment({
|
|
act_id: this.actid,
|
|
um_id: this.um_id,
|
|
content: this.textAreaValue,
|
|
image: this.urls,
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.status == 200) {
|
|
this.fetchData(this.actid)
|
|
this.textAreaValue = ''
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
},
|
|
tankuang(url,arr){
|
|
uni.previewImage({
|
|
current: url,
|
|
urls: arr,
|
|
loop: true,
|
|
});
|
|
},
|
|
comments(id){
|
|
uni.setStorageSync('comment_id',id);
|
|
uni.redirectTo({
|
|
url: '/pages/index/comments'
|
|
});
|
|
},
|
|
shouldDisableItem(item){
|
|
return item.comments_list.length == 0;
|
|
},
|
|
shouldDisableItems(item){
|
|
return !item.comments_list.length == 0;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.middles_con {
|
|
width: 100%;
|
|
display: flex;
|
|
margin: 20rpx 0;
|
|
font-size: 30rpx;
|
|
|
|
}
|
|
|
|
.flex {
|
|
padding: 20rpx 45rpx;
|
|
}
|
|
|
|
.fui-item__box {
|
|
width: 100%;
|
|
padding: 26rpx 32rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.fui-logo {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 24rpx;
|
|
display: block;
|
|
}
|
|
|
|
.fui-descr {
|
|
width: 100%;
|
|
padding: 32rpx;
|
|
font-size: 28rpx;
|
|
line-height: 52rpx;
|
|
color: #7F7F7F;
|
|
word-break: break-all;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|