<!-- 详情 -->
<template>
<div class="ho-case-det">
<detailsHeader :shopData="shopInfo"></detailsHeader>
<div class="cas-details-bg">
<div class="cas-details ho-container">
<div class="text-says">
<p>
<span>{{detailsData&&detailsData.exampleName}}</span>
<img src="~/static/img/brand/br_name.png" alt="">
<span class="last">{{detailsData&&detailsData.exampleLabel}}</span>
</p>
<div class="t-say-info" v-html="detailsData&&detailsData.exampleInfo">
<img src="~/static/img/brand/pr_shang.png" class="shang consx">
<img src="~/static/img/brand/pr_xia.png" class="xia consx">
</div>
</div>
<div class="img-say">
<!--<img :src="imgUrl+(detailsData&&detailsData.examplePictureUrl)" class="example">-->
<img :src="imgUrl+(detailsData&&detailsData.jyjProductResources[0].fileShowUrl)" class="example">
<img :src="detailsData&&detailsData.companyLogo" alt="" class="logo" v-if="detailsData&&detailsData.companyLogo!=undefined">
</div>
<div class="time">
<!--<img src="~/static/img/brand/pr_time.png" alt="">-->
{{detailsData&&detailsData.createDate}}
</div>
<div class="comment ho-container">
<p class="title">
<span>评论</span>
</p>
<el-row :gutter="20" class="my-el-row">
<el-col :span="3"><div class="grid-content bg-purple">
<img :src="detailsData&&detailsData.companyLogo" alt="">
</div></el-col>
<el-col :span="18"><div class="grid-content bg-purple">
<!--<el-form ref="pageForm" :model="form" :rules="formRules">
<el-form-item>
<el-input
type="textarea"
resize="none"
:rows="3"
placeholder="说一下你的想法"
v-model="form.content">
</el-input>
</el-form-item>
</el-form>-->
<span style="position: absolute;z-index: 2;display: block; 35px;height: 29px;left:190px;top:3px;background: #fff;"></span>
<tin-edite :height="143" size-editor="msg" :value="inputContent" @editorChange="editorChange"></tin-edite>
<span v-show="hisShow">输入你的评论</span>
<div class="sub-com clearfix">
<!--<img src="../../static/img/case/cas_biaoq.png" alt="">-->
<span :loading="isSubmit" :disabled="isSubmit" @click="getAddHui">评论</span>
</div>
<ul class="com-list">
<li v-for="(item,index) in pinJiaList" :key="index">
<!--<img :src="imgUrl+item.headUrl" alt="" class="comment-avatar">-->
<img :src="item.icon" alt="" class="comment-avatar">
<div class="comment-info">
<span class="co-in-name" v-if="item.replyUserName!=undefined && item.replyUserName!=''">{{item.replyUserName}}</span>
<span class="co-in-name" v-else>jyj{{(Math.random() * Date.now() / 1000000).toFixed(0)}}</span>
<p v-html="item.text"></p>
<div class="reply-handle clearfix">
<span>{{item.createDate}}</span>
<img src="../../static/img/case/cas_gengduo.png" alt="">
<span @click="moreRepInfo(item,index)" style="cursor: pointer">{{item.replyCount}}条回复</span>
<img src="../../static/img/case/cas_xia.png" alt="" @click="moreRepInfo(item,index)">
<span @click="handleRepBor(item,index)" >回复</span>
</div>
<!--回复框-->
<div class="rep-bor repBor" style="display: none">
<el-form :model="form">
<el-form-item>
<el-input v-model="assayItemValue[index]" placeholder="写下你的回复" ref="noText"></el-input>
</el-form-item>
</el-form>
<div class="sub-btn-in">
<span @click="getRelp(item,index)">回复</span>
<span @click="handleRepBor(item,index)">取消</span>
</div>
</div>
<!--更多回复展示-->
<div class="more-rep-show moreRepShow" style="display: none">
<ul class="com-list">
<li v-for="(itemRelp,index) in item.nodes" :key="index" v-if="item&&item.replyCount>0">
<img :src="itemRelp.icon" alt="" class="comment-avatar">
<div class="comment-info" style=" 680px">
<span class="co-in-name">{{itemRelp.replyUserName}}</span>
<p>{{itemRelp.text}}</p>
<div class="reply-handle clearfix">
<span>{{itemRelp.createDate}}</span>
<!--<span>回复</span>-->
<!--<span @click="getDelRepList(itemRelp)">删除</span>-->
</div>
</div>
</li>
<li v-if="item&&item.replyCount==0">
暂无回复
</li>
</ul>
</div>
</div>
</li>
<li v-if="pinJiaListNo=='评价列表查询成功 无数据.'">
暂无评论
</li>
</ul>
</div></el-col>
<el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
</div>
</div>
</div>
</template>
<script>
import detailsHeader from '~/components/detailsHeader'
/*import reply from '~/components/case/reply'
import replyList from '~/components/case/replyList'*/
import tinEdite from '~/components/module/editor.vue'
import {findProductExampleById,saveJYJEvaluate,findJYJEvaluatePage,fiJEvaluateTree,delJYJEvaluate} from '~/api/case'
import {getShopInfoByCreateUserId} from '~/api/productCenter'
import { needLogin } from '~/api/method'
export default {
layout:'details',
validate ({ params }) {
return /^d+$/.test(params.id)
},
head () {
return {
title: this.detailsData.exampleName+'',
meta: [
{ hid: 'description', name: 'description', content: '' }
]
}
},
data (){
return {
imgUrl:this.$store.state.serFileUrl,
form:{},
hideInfo:false , //更多回复显示隐藏
hideRepBor:false , //回复框显示隐藏
detailsData:[], //
shopInfo:{}, //
formRules:{
content: [
{required: true, message: '请输入您的评论', trigger: 'blur'}
],
},
pinJiaList:[],
pinJiaListNo:'',
pinJiaListChdiren:[],
noPingjia:'',
assayItemValue:{}, //操作自己input
isSubmit: false, // 防止用户多次点击
hisShow: false, // 防止用户多次点击
inputContent:''
}
},
components:{
//reply,
detailsHeader,
//replyList
tinEdite
},
asyncData({params, error}){
return findProductExampleById(params).then((res) => {
if(res.data.code>0){
return {detailsData : res.data.data}
}
}).catch((error) => {
error({ statusCode: 500, message: '请求发生错误' })
})
},
mounted(){},
methods:{
editorChange(str) {
this.inputContent = str
},
getShopInfo () {
getShopInfoByCreateUserId({ 'userId': this.detailsData.createUserId }).then(res => {
if (res.data.code >0) {
this.shopInfo = res.data.data
}else{
this.$message.error(res.data.msg)
}
}).catch(() => {
this.$message.error('请求发生错误 -- 获取店铺菜单')
})
},
getAddHui() { //评论
this.isSubmit = true
if(this.$store.state.code!=''){
if(this.inputContent==''){
this.$message('请输入您的评论');
} else{
let param = {
evaluateContent:this.inputContent,
sonid:this.$route.params.id,
parentId:'',
sonidName:this.detailsData.exampleName,
}
saveJYJEvaluate(param).then((res) => {
this.isSubmit = false
this.inputContent = ''
this.getPinJiaList()
}).catch((error) => {
})
}
} else {
needLogin(this)
}
},
getRelp(item,index){ //回复评论
if(this.$store.state.code!=''){
console.log('sssss',this.assayItemValue[index])
if(this.assayItemValue[index] == ''||this.assayItemValue[index]==undefined){
this.$message('请输入您的回复');
} else {
let param = {
evaluateContent:this.assayItemValue[index],
sonid:this.$route.params.id,
parentId:item.id,
sonidName:this.detailsData.exampleName,
}
saveJYJEvaluate(param).then((res) => {
this.getPinJiaList()
this.assayItemValue[index] = ''
}).catch((error) => {
})
}
} else {
needLogin(this)
}
},
getPinJiaList () { //父级评价列表
let param = {
evaluatetype:'CASE',
sonid:this.$route.params.id,
node:''
}
fiJEvaluateTree(param).then((res) => {
if(res.data.code>0){
this.pinJiaList = res.data.data
this.pinJiaListNo = res.data.msg
}
}).catch((error) => {
})
},
getDelRepList (itemRelp) { //删除回复
if(this.$store.state.code!=''){
if(this.shopInfo.createUserId == this.$store.state.userInfo.chinabimUserId){
delJYJEvaluate(itemRelp.id).then((res) => {
this.getPinJiaList()
}).catch((error) => {
})
} else {
this.$message('没有权限删除');
}
} else {
needLogin(this)
}
},
async storLisr () {
await this.getPinJiaList()
},
moreRepInfo(item,index){
let sub_menu = this.$el.querySelectorAll('.moreRepShow');
for(let j = 0,len=sub_menu.length; j < len; j++){
if(index==j){
if(sub_menu[j].style.display == "none") {
sub_menu[j].style.display = "block";
} else {
sub_menu[j].style.display = "none";
}
} else if (sub_menu[j].style.display == "block"){
sub_menu[j].style.display = "none";
}
}
},
handleRepBor(item,index){
let sub_menu = this.$el.querySelectorAll('.repBor');
for(let j = 0,len=sub_menu.length; j < len; j++){
if(index==j){
if(sub_menu[j].style.display == "none") {
sub_menu[j].style.display = "block";
} else {
sub_menu[j].style.display = "none";
}
} else if (sub_menu[j].style.display == "block"){
sub_menu[j].style.display = "none";
}
}
},
},
created (){
this.storLisr()
this.getShopInfo()
console.log('22222',this.detailsData)
},
mounted(){
window.parent.scrollTo(0, 0);
}
}
</script>
<style lang="scss">
/*.head-nav{*/
/*display: none;*/
/*}*/
.ho-case-det{
border-top: 1px solid $borderGreen;
.cs-de-header{
padding: 20px 0;
.bg-purple{
img,div{
display: inline-block;
vertical-align: bottom;
}
img{
margin-right: 20px;
50px;
height: 50px;
/*border: 1px solid #ccc;*/
}
h5{
font-size: $default-font-size;
padding-bottom: 10px;
}
}
.bg-purple-light{
text-align: right;
p{
margin: 5px 10px;
}
a{
color:$orange;
}
img{
margin-right: 10px;
margin-top: -2px;
}
}
}
.del-banner{
img{
display: block;
100%;
height: 120px;
}
}
.case-nav{
background: $orange;
a{
display: inline-block;
padding: 10px 20px;
color: $white;
font-size: 16px;
}
}
.cas-details-bg{
padding-top: 10px;
background: $bgGreen;
.cas-details{
position: relative;
padding: 0 40px 0 20px;
1140px;
background: $white;
.text-says{
785px;
padding: 30px 25px 30px 20px;
background: $white;
p{
margin-bottom: 35px;
span{
font-size: 36px;
}
img{
margin: 0 10px 0 30px;
}
.last{
font-size: $mid-font-size;
}
}
.t-say-info{
position: relative;
margin-bottom: 30px;
padding-left: 30px;
/*height: 60px;*/
text-indent: 2em;
line-height: 30px;
font-size: $mid-font-size;
.consx{
position: absolute;
}
.shang{
top:0;
left: 0;
}
.xia{
bottom: -10px;
right: 0;
}
p{
img{
100%;
}
}
}
}
.img-say{
position: absolute;
right: 70px;
top:42px;
img{
display: block;
}
.example{
270px;
height: 165px;
//border:1px solid #ccc;
}
.logo{
position: relative;
top:-207px;
right: -209px;
130px;
height: 110px;
//border: 1px solid #ccc;
}
}
.sac-info-say{
padding-left: 80px;
font-size: $mid-font-size;
color: $orange;
span:nth-child(2){
margin: 0 20px;
}
}
/*.detaile-info{
padding: 35px 35px 70px 35px;
}*/
.time{
text-align: right;
padding-bottom: 30px;
}
}
.comment{
margin-top: 10px;
padding-bottom: 70px;
background: $white;
.title{
margin-bottom: 30px;
border-bottom: 1px solid $bgBorder;
span{
display: block;
80px;
height: 42px;
line-height: 42px;
text-align: center;
border-bottom: 2px solid $orange;
}
}
.my-el-row{
.el-col-3{
img{
margin-left: 40px;
display: block;
72px;
height: 72px;
border-radius: 36px;
//background: #ccc;
}
}
.el-col-18{
.sub-com{
margin-top: 20px;
margin-bottom: 20px;
span{
float: right;
display: block;
100px;
height: 30px;
text-align: center;
line-height: 30px;
background:$orange;
color: $white;
cursor: pointer;
}
}
.com-list{
padding: 0 15px;
border: 1px solid $borderGreen;
background: $bgGreen;
li{
padding: 15px 0;
border-bottom: 1px solid #e8e8e8;
.comment-avatar,.comment-info{
display: inline-block;
vertical-align: top;
}
.comment-avatar{
margin-right: 15px;
30px;
height: 30px;
border-radius: 15px;
// background: #ccc;
}
.comment-info{
770px;
.co-in-name{
margin-top: 10px;
}
p{
margin-bottom: 10px;
line-height: 24px;
}
.reply-handle{
color: $wordGreen;
span:first-child{
margin-right: 25px;
}
>span+img{
margin-top: -2px;
}
span+img+span{
margin: 0 5px;
}
span+img+span+img+span{
float: right;
cursor: pointer;
}
span+img+span+img+span:hover{
color: $orange;
}
}
.rep-bor{
margin-top: 10px;
padding: 15px 20px;
background: #f1f1f1;
.sub-btn-in{
text-align: right;
span{
display: inline-block;
margin-left: 10px;
58px;
height: 28px;
text-align: center;
line-height: 28px;
border: 1px solid $bgBorder;
cursor: pointer;
color: $wordGreen;
}
span:hover{
background:$orange ;
border: 1px solid $orange;
color: $white;
}
}
}
/*更多回复*/
.more-rep-show{
margin-top: 10px;
.com-list{
background: $white;
}
.comment-info{
735px;
}
.reply-handle{
span+span{
float: right;
margin-left: 10px;
cursor: pointer;
}
span+span:hover{
color: $orange;
}
}
}
}
}
li:last-child{
border-bottom: none;
}
}
}
}
}
}
}
</style>
