falvpingtai/src/IndexArticleDetail.vue
2019-12-04 11:39:27 +08:00

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>