349 lines
9.6 KiB
Vue
349 lines
9.6 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar title="评论详细">
|
|
<template #right
|
|
><view style="width: 50rpx; font-size: 32rpx">
|
|
<!-- <u-icon name="star" v-if="true"></u-icon> -->
|
|
<!-- <u-icon style="font-size:0.22rem;color:#ffc300" v-else name="star-fill"></u-icon> -->
|
|
</view>
|
|
</template>
|
|
</u-navbar>
|
|
<!-- 评论 -->
|
|
<view class="comment">
|
|
<view class="flex-col section_4">
|
|
<view class="justify-between group_8">
|
|
<text class="text_22">回复 {{total}}</text>
|
|
</view>
|
|
<view class="flex-col group_27">
|
|
<view class="flex-col group">
|
|
<view class="justify-between group_6">
|
|
<view class="flex-row">
|
|
<image
|
|
:src="$u.http.config.imgUrl + headData.userHead"
|
|
class="image image_6"
|
|
/>
|
|
<text class="text_24">{{headData.userName}}</text>
|
|
<text class="text_27">{{headData.creationTime}}</text>
|
|
</view>
|
|
<view class="flex-row group_12">
|
|
<text class="text_25">{{headData.likesCount}}</text>
|
|
<image
|
|
src="/static/common/img/homepage/like.png"
|
|
class="image_8"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col">
|
|
<text class="text_26" @click="onreply">{{headData.content}}</text>
|
|
<!-- <view class="justify-evenly section_5">
|
|
<text class="text_42">{{total}}回复</text>
|
|
<image
|
|
src="/static/common/img/16486282410596443868.png"
|
|
class="image_12"
|
|
/>
|
|
</view> -->
|
|
<!-- <text class="text_27">{{headData.creationTime}}</text> -->
|
|
</view>
|
|
<view class="flex-col items-start group_9" v-for="(i,index) in commonData" :key="index">
|
|
<view class="flex-row group_13">
|
|
<image
|
|
:src="$u.http.config.imgUrl + i.userHead"
|
|
class="image image_9"
|
|
/>
|
|
<view class="group_14">
|
|
<text class="text_28">{{i.userName}}</text>
|
|
<text class="text_30">{{i.creationTime}}</text>
|
|
<view class="flex-col items-start group_15">
|
|
<text class="text_29">{{i.content}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-mask :show="show" @click="isMask">
|
|
<msgbox @onsend="onSend" @onmsgShow="onMsgShow" ref="msg" :placeholder="placeholder"></msgbox>
|
|
</u-mask>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import msgbox from "../../../components/messageBox.vue";
|
|
export default {
|
|
data(){
|
|
return {
|
|
data : {
|
|
PageIndex:1,
|
|
PageSize:10,
|
|
Title:"",
|
|
Keyword:"",
|
|
id:"",
|
|
},
|
|
show:false,
|
|
headData:{},
|
|
commonData:[],
|
|
placeholder:"",
|
|
total:0,
|
|
}
|
|
},
|
|
onLoad(e){
|
|
this.headData = JSON.parse(e.head)
|
|
this.data = JSON.parse(e.data)
|
|
this.data.PageIndex = 1
|
|
this.data.PageSize = 10
|
|
},
|
|
created(){
|
|
this.getComment()
|
|
},
|
|
methods:{
|
|
getComment(){
|
|
this.$u.apiList.GetComment(this.data).then((res)=>{
|
|
this.commonData = res.items
|
|
this.total = res.items.length
|
|
})
|
|
},
|
|
onreply(){
|
|
this.show = true
|
|
this.placeholder = '回复'+this.headData.userName
|
|
this.$refs.msg.placeholder = this.placeholder
|
|
},
|
|
isMask(){
|
|
this.show =false
|
|
},
|
|
onSend(msg){
|
|
const data = {
|
|
commendId:this.headData.commendId,
|
|
articleId:this.headData.articleId,
|
|
userId:this.vuex_user.id,
|
|
replyUserId:this.headData.userId,
|
|
content:msg,
|
|
level:1,
|
|
type:this.headData.type
|
|
}
|
|
this.$u.apiList.InsertComment(data).then((res)=>{
|
|
this.getComment()
|
|
})
|
|
},
|
|
onMsgShow(val){
|
|
this.isMsgShow = val
|
|
this.show = val
|
|
},
|
|
},
|
|
components: {
|
|
msgbox: msgbox,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.comment {
|
|
.section_4 {
|
|
padding: 0.26rem 0.14rem 0.61rem 0.16rem;
|
|
background-color: rgb(255, 255, 255);
|
|
// margin-top:0.1rem;
|
|
.section_5 {
|
|
margin-top: 0.13rem;
|
|
padding: 0.04rem 0.05rem 0.05rem 0.095rem;
|
|
background-color: rgb(246, 247, 250);
|
|
border-radius: 0.1rem;
|
|
width: 0.6rem;
|
|
.text_42 {
|
|
color: rgb(2, 2, 2);
|
|
font-size: 0.12rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.11rem;
|
|
}
|
|
.image_12 {
|
|
margin-top: 0.015rem;
|
|
width: 0.05rem;
|
|
height: 0.09rem;
|
|
}
|
|
}
|
|
.group_8 {
|
|
margin-left: 0.025rem;
|
|
.text_22 {
|
|
margin-bottom: 0.02rem;
|
|
color: rgb(2, 2, 2);
|
|
font-size: 0.15rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.14rem;
|
|
}
|
|
.text_23 {
|
|
color: rgb(180, 182, 189);
|
|
font-size: 0.15rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.17rem;
|
|
}
|
|
}
|
|
.group_27 {
|
|
margin-top: 0.25rem;
|
|
.group {
|
|
padding: 0 0.005rem;
|
|
.group_6 {
|
|
margin-right: 0.02rem;
|
|
.group_12 {
|
|
margin-top: 0.04rem;
|
|
.text_25 {
|
|
margin-top: 0.04rem;
|
|
color: rgb(2, 2, 2);
|
|
font-size: 0.15rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.12rem;
|
|
}
|
|
.image_8 {
|
|
margin-left: 0.045rem;
|
|
flex-shrink: 0;
|
|
width: 0.16rem;
|
|
height: 0.15rem;
|
|
transform: translateY(0.02rem);
|
|
}
|
|
}
|
|
|
|
.image_6 {
|
|
flex-shrink: 0;
|
|
}
|
|
.text_24 {
|
|
margin-left: 0.13rem;
|
|
margin-top: 0.07rem;
|
|
color: rgb(2, 2, 2);
|
|
font-size: 0.13rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.13rem;
|
|
}
|
|
|
|
.text_27 {
|
|
margin-left: 0.13rem;
|
|
margin-top: 0.07rem;
|
|
align-self: flex-start;
|
|
color: rgb(180, 182, 189);
|
|
font-size: 0.12rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.12rem;
|
|
}
|
|
}
|
|
.text_26 {
|
|
width: 100%;
|
|
padding-left: 0.4rem;
|
|
margin-top: 0.075rem;
|
|
align-self: center;
|
|
color: rgb(55, 59, 72);
|
|
font-size: 0.15rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.14rem;
|
|
}
|
|
}
|
|
.group_9 {
|
|
margin-top: 0.14rem;
|
|
padding: 0 0.38rem;
|
|
.group_13 {
|
|
margin-left: 0.035rem;
|
|
.image_9 {
|
|
flex-shrink: 0;
|
|
}
|
|
.group_14 {
|
|
margin-left: 0.18rem;
|
|
margin-top: 0.05rem;
|
|
flex: 1 1 auto;
|
|
.text_28 {
|
|
align-self: flex-start;
|
|
color: rgb(2, 2, 2);
|
|
font-size: 0.13rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.13rem;
|
|
}
|
|
.text_30 {
|
|
margin-left: 0.13rem;
|
|
margin-top: 0.045rem;
|
|
color: rgb(180, 182, 189);
|
|
font-size: 0.12rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.12rem;
|
|
}
|
|
.group_15 {
|
|
margin-top: 0.12rem;
|
|
.text_29 {
|
|
color: rgb(55, 59, 72);
|
|
font-size: 0.15rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.14rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.group_16 {
|
|
margin-left: 0.035rem;
|
|
margin-top: 0.11rem;
|
|
width: 1.09rem;
|
|
.group_17 {
|
|
margin-top: 0.075rem;
|
|
.text_31 {
|
|
align-self: flex-start;
|
|
color: rgb(2, 2, 2);
|
|
font-size: 0.13rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.1rem;
|
|
}
|
|
.group_18 {
|
|
margin-top: 0.14rem;
|
|
padding-left: 0.015rem;
|
|
.text_32 {
|
|
color: rgb(55, 59, 72);
|
|
font-size: 0.15rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.14rem;
|
|
}
|
|
.text_33 {
|
|
margin-top: 0.03rem;
|
|
color: rgb(180, 182, 189);
|
|
font-size: 0.12rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.12rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.group_19 {
|
|
margin-left: 0.05rem;
|
|
margin-top: 0.12rem;
|
|
width: 1.07rem;
|
|
.group_20 {
|
|
margin-top: 0.07rem;
|
|
.text_34 {
|
|
align-self: flex-start;
|
|
color: rgb(2, 2, 2);
|
|
font-size: 0.13rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.12rem;
|
|
}
|
|
.group_21 {
|
|
margin-top: 0.14rem;
|
|
.text_35 {
|
|
color: rgb(55, 59, 72);
|
|
font-size: 0.15rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.14rem;
|
|
}
|
|
.text_36 {
|
|
margin-left: 0.01rem;
|
|
margin-top: 0.03rem;
|
|
color: rgb(180, 182, 189);
|
|
font-size: 0.12rem;
|
|
font-family: Adobe Heiti Std;
|
|
line-height: 0.12rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.image {
|
|
width: 0.3rem;
|
|
height: 0.3rem;
|
|
border-radius:50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |