395 lines
9.1 KiB
Vue
395 lines
9.1 KiB
Vue
<template>
|
|
<div style="padding-top:0.88rem">
|
|
<heads></heads>
|
|
<div class="picbox">
|
|
<img :src=" 'http://lawpro.earnest.pro' +list.data.img" alt class="toppic" />
|
|
</div>
|
|
|
|
<follow
|
|
class="follow"
|
|
:img="'http://lawpro.earnest.pro' + list.user.avatar"
|
|
:nickname="list.user.nickname"
|
|
:sole="list.user.industry_name"
|
|
:text="list.data.articlecontent"
|
|
:title="list.data.title"
|
|
:guanzhu="ifgz"
|
|
@pinglun="pinglu"
|
|
@guanzhu="gz"
|
|
></follow>
|
|
<div class="line"></div>
|
|
<!-- <follow :indexs="1" class="follow"></follow> -->
|
|
<!-- <div class="line"></div> -->
|
|
<!-- <p class="title">相关推荐</p>
|
|
<privates></privates>
|
|
<articles></articles>
|
|
|
|
<articles></articles>
|
|
|
|
<p class="title" @click="show = true">热门推荐</p>
|
|
<privatets></privatets>
|
|
<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="qshot">
|
|
<img class="qiehuan" src="./assets/qiehuan.png" alt srcset />
|
|
切换为{{shot == 0 ? '时间' : "默认"}}排序
|
|
</p>
|
|
<img class="quit" src="./assets/quit.png" alt @click="qshow" />
|
|
</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" @blur="body"></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/indexFollow1";
|
|
// 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: "ArticleDetail",
|
|
data() {
|
|
return {
|
|
show: false,
|
|
content: "",
|
|
biaoqing: false,
|
|
list: [],
|
|
plist: [],
|
|
userid: 0,
|
|
ifgz: false,
|
|
shot: 0,
|
|
msg:"",
|
|
msgs:false
|
|
};
|
|
},
|
|
components: {
|
|
follow,
|
|
// privates,
|
|
// articles,
|
|
// privatets,
|
|
heads,
|
|
comment,
|
|
Emotion
|
|
},
|
|
methods: {
|
|
body(){
|
|
// alert(1)
|
|
// let a = window.document.body.scrollTop
|
|
// window.document.body && (window.document.body.scrollTop = a);
|
|
// window.scroll(0,0);
|
|
window.$(window).scrollTop(window.$(window).scrollTop)
|
|
},
|
|
qshow(){
|
|
window.console.log(window.$(window).scrollTop(window.$(window).scrollTop),1234)
|
|
|
|
this.show = !this.show
|
|
},
|
|
qshot(){
|
|
this.shot = this.shot == 0 ? 1 : 0
|
|
},
|
|
gz(e) {
|
|
if (e == 1) {
|
|
let t = this;
|
|
this.axios
|
|
.post("http://lawpro.earnest.pro/api/login_main/plusAttention", {
|
|
token: localStorage.getItem("token"),
|
|
passivity_id: t.userid,
|
|
type: 2
|
|
})
|
|
.then(res => {
|
|
window.console.log(res);
|
|
if (res.data.code == 200) {
|
|
this.ifgz = true;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
handleEmotion(i) {
|
|
this.content += i;
|
|
},
|
|
pfb() {
|
|
// alert(window.document.body.scrollTop)
|
|
this.msg = "发布中"
|
|
this.msgs= true
|
|
window.$(window).scrollTop(window.$(window).scrollTop)
|
|
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.$route.query.id,
|
|
type: 1
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
this.pinglu(this.$route.query.id);
|
|
|
|
this.content = "";
|
|
this.msg="发布成功"
|
|
setTimeout(() => {
|
|
this.msgs = false;
|
|
}, 2000);
|
|
} else {
|
|
this.$router.push({
|
|
path: "/login"
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
pinglu() {
|
|
// this.pid = id;
|
|
|
|
this.axios
|
|
.post("http://lawpro.earnest.pro/api/login_main/CommentList", {
|
|
token: localStorage.getItem("token"),
|
|
type: 1,
|
|
type_id: this.$route.query.id,
|
|
order: this.shot
|
|
})
|
|
.then(res => {
|
|
window.console.log(res);
|
|
this.plist = res.data.data.data;
|
|
// this.list = res.data.data;
|
|
this.show = true;
|
|
// alert(window.document.body.scrollTop)
|
|
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
shot() {
|
|
this.pinglu();
|
|
}
|
|
},
|
|
mounted() {
|
|
window.console.log(window.document.body.scrollTop,123)
|
|
|
|
// window.console.log(this.$route.query.userid,7946 )
|
|
this.userid = this.$route.query.userid;
|
|
this.axios
|
|
.post("http://lawpro.earnest.pro/api/login_main/mainDetails", {
|
|
token: localStorage.getItem("token"),
|
|
id: this.$route.query.id,
|
|
type: 1
|
|
})
|
|
.then(res => {
|
|
window.console.log(res);
|
|
this.list = res.data.data;
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.follow {
|
|
padding: 23px;
|
|
}
|
|
.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;
|
|
z-index: 9999;
|
|
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 {
|
|
z-index: 9000;
|
|
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: 1rem;
|
|
width: 100%;
|
|
color: #333333;
|
|
font-size: 0.36rem;
|
|
text-indent: 0.3rem;
|
|
line-height: 1rem;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.picbox {
|
|
display: flex;
|
|
justify-content: center;
|
|
.toppic {
|
|
width: 640px;
|
|
height: 322.12px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style> |