364 lines
8.6 KiB
Vue
364 lines
8.6 KiB
Vue
<template>
|
|
<div style="padding-top:0.88rem" class="box">
|
|
<heads></heads>
|
|
<div class="line"></div>
|
|
<p class="question">{{list.data.title}}</p>
|
|
<div v-for="(item,index) in huida" :key="index">
|
|
<div class="line"></div>
|
|
<follow
|
|
@pinglu="pinglu"
|
|
:sid="item.id"
|
|
:indexs="index"
|
|
:userimg="'http://lawpro.earnest.pro' + item.avatar"
|
|
:nickname="item.nickname"
|
|
:text="item.articlecontent"
|
|
:comment="item.comment"
|
|
:num="item.islike"
|
|
></follow>
|
|
</div>
|
|
|
|
<!-- <div class="line"></div>
|
|
<follow :indexs="1"></follow>-->
|
|
<div class="line"></div>
|
|
<p class="title">相关推荐</p>
|
|
<!-- <privates></privates> -->
|
|
<articles
|
|
v-for="(item,index) in list.correlation"
|
|
:key="index"
|
|
:title="item.title"
|
|
:img="'http://lawpro.earnest.pro' +item.img"
|
|
:sid="item.id"
|
|
></articles>
|
|
|
|
<!-- <articles></articles> -->
|
|
|
|
<p class="title" @click="show = true">热门推荐</p>
|
|
<!-- <privatets></privatets> -->
|
|
<privates
|
|
v-for="(item,index) in list.correlation"
|
|
:key="index"
|
|
:title="item.title"
|
|
:sid="item.id"
|
|
></privates>
|
|
|
|
<!-- <articles></articles> -->
|
|
<!-- <articles></articles> -->
|
|
<van-popup v-model="show" position="bottom" :style="{ height: '100%' }" class="linshi">
|
|
<div class="top">
|
|
<p class="tiao">{{plist.length}}条评论</p>
|
|
<p class="qie" @click="shot = shot == 0 ? 1 : 0">
|
|
<img class="qiehuan" src="./assets/qiehuan.png" alt srcset /> 切换为{{shot == 0 ? '时间' : "默认"}}排序
|
|
</p>
|
|
<img class="quit" src="./assets/quit.png" alt @click="show = !show" />
|
|
</div>
|
|
<div class="bodys">
|
|
<comment
|
|
v-for="(item,index) in plist"
|
|
:key="index"
|
|
:img="'http://lawpro.earnest.pro/' + item.avatar"
|
|
:name="item.nickname"
|
|
:text="item.text"
|
|
></comment>
|
|
</div>
|
|
<div class="msg" v-show="msgs">{{msg}}</div>
|
|
<div class="reply">
|
|
<img @click="biaoqing = !biaoqing" src="./assets/baoqing.png" alt srcset />
|
|
<textarea placeholder="写下你的评论..." v-model="content"></textarea>
|
|
<p @click="pfb">发布</p>
|
|
<div v-show="biaoqing">
|
|
<Emotion @emotion="handleEmotion" :height="4"></Emotion>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import follow from "./components/indexFollow";
|
|
import privates from "./components/indexprivate";
|
|
import articles from "./components/indexarticle";
|
|
// import privatets from "./components/indexprivatet";
|
|
import heads from "./components/indexhead";
|
|
import comment from "./components/indexcomment";
|
|
import Emotion from "./components/Emotion/index";
|
|
export default {
|
|
name: "IndexArticleDetail",
|
|
data() {
|
|
return {
|
|
show: false,
|
|
content: "",
|
|
biaoqing: false,
|
|
list: {},
|
|
huida: [],
|
|
plist: [],
|
|
pid: 0,
|
|
msg: "发布成功",
|
|
msgs: false,
|
|
shot:0
|
|
};
|
|
},
|
|
components: {
|
|
follow,
|
|
privates,
|
|
articles,
|
|
// privatets,
|
|
heads,
|
|
comment,
|
|
Emotion
|
|
},
|
|
methods: {
|
|
pfb() {
|
|
if (localStorage.getItem("token") == "") {
|
|
this.$router.push("/login");
|
|
} else {
|
|
window.console.log(this.content);
|
|
if (this.content != "") {
|
|
this.axios
|
|
.post("http://lawpro.earnest.pro/api/login_main/appendComment", {
|
|
text: this.content,
|
|
token: localStorage.getItem("token"),
|
|
type_id: this.pid,
|
|
type: 3
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
this.pinglu(this.pid);
|
|
this.content = "";
|
|
this.msgs = true
|
|
setTimeout(()=>{
|
|
this.msgs = false
|
|
},2000)
|
|
}else{
|
|
this.$router.push({path:"/login"})
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
handleEmotion(i) {
|
|
this.content += i;
|
|
},
|
|
pinglu(id) {
|
|
this.pid = id;
|
|
this.show = true;
|
|
|
|
this.axios
|
|
.post("http://lawpro.earnest.pro/api/login_main/CommentList", {
|
|
token: localStorage.getItem("token"),
|
|
type: 3,
|
|
type_id: id,
|
|
order:this.shot
|
|
})
|
|
.then(res => {
|
|
window.console.log(res);
|
|
this.plist = res.data.data.data;
|
|
// this.list = res.data.data;
|
|
});
|
|
}
|
|
},
|
|
watch:{
|
|
shot(){
|
|
this.pinglu(this.pid)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.axios
|
|
.post("http://lawpro.earnest.pro/api/login_main/mainDetails", {
|
|
token: localStorage.getItem("token"),
|
|
type: 2,
|
|
id: this.$route.query.id
|
|
})
|
|
.then(res => {
|
|
// window.console.log(res)
|
|
this.list = res.data.data;
|
|
});
|
|
this.axios
|
|
.post("http://lawpro.earnest.pro/api/login_main/answerList", {
|
|
token: localStorage.getItem("token"),
|
|
page: 1,
|
|
article_id: this.$route.query.id
|
|
})
|
|
.then(res => {
|
|
window.console.log(res);
|
|
this.huida = res.data.data;
|
|
// this.list= res.data.data
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.box {
|
|
.linshi {
|
|
z-index: 999999 !important;
|
|
.msg {
|
|
position: absolute;
|
|
padding: 10px;
|
|
max-width: 60%;
|
|
max-height: 70px;
|
|
border-radius: 5px;
|
|
background: #666;
|
|
box-sizing: border-box;
|
|
top:50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #fff;
|
|
|
|
}
|
|
.top {
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 98px;
|
|
border-bottom: #f6f6f6 solid 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
.tiao {
|
|
font-size: 30px;
|
|
color: #000;
|
|
font-weight: 500;
|
|
margin-left: 31px;
|
|
}
|
|
.qie {
|
|
font-size: 28px;
|
|
color: #95998f;
|
|
margin-left: 208px;
|
|
padding-right: 28px;
|
|
border-right: #f6f6f6 solid 2px;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
.qiehuan {
|
|
width: 26px;
|
|
height: 22px;
|
|
display: block;
|
|
margin-right: 9px;
|
|
}
|
|
}
|
|
.quit {
|
|
width: 28px;
|
|
height: 29px;
|
|
font-size: 29px;
|
|
margin-left: 34px;
|
|
display: flex;
|
|
> img {
|
|
width: 33px;
|
|
height: 33px;
|
|
}
|
|
// background-image: url("./assets/quit.png")
|
|
}
|
|
}
|
|
.bodys {
|
|
width: 100%;
|
|
height: 100%;
|
|
// background-color: #000;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
padding: 98px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.reply {
|
|
width: 100%;
|
|
height: 98px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
> img {
|
|
width: 33px;
|
|
height: 33px;
|
|
margin-left: 30px;
|
|
}
|
|
> textarea {
|
|
margin-left: 21px;
|
|
border: none;
|
|
font-size: 30px;
|
|
height: 35px;
|
|
width: 550px;
|
|
// word-break: break-all;
|
|
// text-align: center;
|
|
}
|
|
> p {
|
|
margin-left: 30px;
|
|
font-size: 30px;
|
|
color: #6b9147;
|
|
}
|
|
> div {
|
|
position: absolute;
|
|
bottom: 98px;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.line {
|
|
height: 0.2rem;
|
|
width: 100%;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.question {
|
|
height: auto;
|
|
width: 100%;
|
|
color: #333333;
|
|
font-size: 0.36rem;
|
|
text-indent: 0.3rem;
|
|
line-height: 0.5rem;
|
|
padding: 0.25rem;
|
|
box-sizing: border-box;
|
|
font-weight: 500;
|
|
}
|
|
.title {
|
|
color: #333333;
|
|
font-size: 0.34rem;
|
|
margin-top: 0.48rem;
|
|
text-indent: 0.31rem;
|
|
}
|
|
.recommend {
|
|
width: 6.9rem;
|
|
margin-top: 0.13rem;
|
|
margin: 0 auto;
|
|
border-bottom: 0.01rem solid #95998f;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.articlename {
|
|
color: #333333;
|
|
font-size: 0.3rem;
|
|
line-height: 0.4rem;
|
|
width: 4.65rem;
|
|
margin-top: 0.4rem;
|
|
}
|
|
.articlecontent {
|
|
color: #333333;
|
|
font-size: 0.26rem;
|
|
margin-top: 0.15rem;
|
|
margin-bottom: 0.14rem;
|
|
width: 6.74rem;
|
|
}
|
|
.author {
|
|
color: #999999;
|
|
font-size: 0.22rem;
|
|
margin: 0 auto;
|
|
margin-top: 0.14rem;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
.pic {
|
|
width: 1.82rem;
|
|
height: 1.2rem;
|
|
margin: auto 0;
|
|
}
|
|
.pics {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 0.31rem;
|
|
> img {
|
|
width: 2.23rem;
|
|
height: 1.47rem;
|
|
margin-right: 0.1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |