You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
511 lines
10 KiB
511 lines
10 KiB
<template>
|
|
<view class="">
|
|
<view class="ketangDetails">
|
|
<u-navbar class="navbar" bgColor="#fff" :autoBack="true" :placeholder="true">
|
|
<view class="u-nav-slot titleContent" slot="left">
|
|
<u-icon class="icon" name="arrow-left" :color="'#000'" size="20" style="margin-top:10rpx;"></u-icon>
|
|
<view class="navBarContent">
|
|
<image :src="picUrl+userInfo.avatar" mode=""></image>
|
|
<text class="nickname">{{userInfo.nickname}}</text>
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="simpleIntro">
|
|
<u-swiper :list="list1" height="180"></u-swiper>
|
|
<!-- <image src="../static/images/img/youquan.png" mode="heightFix"></image> -->
|
|
<view class="detailsText">
|
|
<u-parse :content="content"></u-parse>
|
|
</view>
|
|
</view>
|
|
<view class="bottomContent">
|
|
<view class="inputNumContent">
|
|
<u-input placeholder="说点什么" border="bottom" v-model="text" shape="circle">
|
|
<template slot="prefix">
|
|
<u-icon name="edit-pen" color="#999999" size="24"></u-icon>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
<view class="commentList">
|
|
<view class="commentItem">
|
|
<view class="mainComment" v-for="(item,index) in 6" :key="index">
|
|
<image src="../static/images/img/userBg.png" mode=""></image>
|
|
<view class="content">
|
|
<view class="nickname">可以叫我鱼大人</view>
|
|
<view class="mainCommentText">我家猫咪最喜欢的就是晒太阳了~</view>
|
|
<view class="revertBtn" @click="revertTalkHandle">
|
|
回复
|
|
</view>
|
|
<view class="childList">
|
|
<image src="../static/images/img/userBg.png" mode=""></image>
|
|
<view>
|
|
<view class="childnickname">bu可爱</view>
|
|
<view class="childCommentText">
|
|
<view class="text">
|
|
我家猫咪也是的
|
|
</view>
|
|
<view class="childRevert" @click="revertTalkHandle">
|
|
回复
|
|
</view>
|
|
</view>
|
|
<view class="expandBtn">
|
|
展开18条回复
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="toolBox">
|
|
<view class="tooItem" v-if="currentUser.id==userInfo.id" @click="deleteHandle()">
|
|
<u-icon class="icon" name="trash" :color="'#222'" size="22"></u-icon>
|
|
<text>删除</text>
|
|
</view>
|
|
<view class="tooItem">
|
|
<u-icon class="icon" name="share-square" :color="'#222'" size="22"></u-icon>
|
|
<text>{{numContent.shares}}</text>
|
|
</view>
|
|
<view class="tooItem">
|
|
<u-icon class="icon" name="chat" :color="'#222'" size="18"></u-icon>
|
|
<text>{{numContent.comments}}</text>
|
|
</view>
|
|
<view class="tooItem" @click="likeHandle">
|
|
<!-- <u-icon class="icon" name="thumb-up" :color="'#222'" size="18" v-if="isLike==0"></u-icon> -->
|
|
<!-- <u-icon class="icon" name="thumb-up" :color="'#EB6100'" size="18" v-if="isLike==1"></u-icon> -->
|
|
<image src="../static/images/img/dianzan.png" mode="widthFix" v-if="isLike==0"></image>
|
|
<image src="../static/images/img/dianzan1.png" mode="widthFix" v-if="isLike==1"></image>
|
|
<text>{{numContent.likes}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-popup :show="repayShow" @close="close" mode="bottom">
|
|
<view class="popupContent">
|
|
<u-input
|
|
placeholder="请输入内容"
|
|
border="surround"
|
|
ref="inputRetalk"
|
|
v-model="repayText"
|
|
:focus="true"
|
|
>
|
|
<template slot="suffix">
|
|
<text class="send" @click="sendHandle">发送</text>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from 'vuex';
|
|
export default{
|
|
|
|
data(){
|
|
return{
|
|
currentUser:{id:null},
|
|
list1:[],
|
|
repayText:'',
|
|
title:'',
|
|
list:[
|
|
{name:'课程表',id:0},
|
|
{name:'评论',id:1},
|
|
],
|
|
path:this.path,
|
|
videoSrc:'',
|
|
activeIndex:0,
|
|
sectionList:[
|
|
{
|
|
name:'第一章',
|
|
list:[
|
|
{name:'春眠不觉晓'},
|
|
{name:'锄禾日当午'}
|
|
]
|
|
},
|
|
{
|
|
name:'第二章',
|
|
list:[
|
|
{name:'春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓'},
|
|
{name:'锄禾日当午'}
|
|
]
|
|
},
|
|
{
|
|
name:'第二章',
|
|
list:[
|
|
{name:'春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓'},
|
|
{name:'锄禾日当午'}
|
|
]
|
|
},
|
|
{
|
|
name:'第二章',
|
|
list:[
|
|
{name:'春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓'},
|
|
{name:'锄禾日当午'}
|
|
]
|
|
},
|
|
{
|
|
name:'第二章',
|
|
list:[
|
|
{name:'春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓'},
|
|
{name:'锄禾日当午'}
|
|
]
|
|
},
|
|
],
|
|
text:'',
|
|
repayShow:false,
|
|
userInfo:{
|
|
avatar: "",
|
|
id: null,
|
|
nickname: "",
|
|
url: "",
|
|
username: ""
|
|
},
|
|
numContent:{
|
|
shares:0,
|
|
comments:0,
|
|
likes:0,
|
|
},
|
|
id:null,
|
|
resource:'',
|
|
picUrl:'',
|
|
isFollow:0,
|
|
isLike:0,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['common'])
|
|
},
|
|
methods:{
|
|
// 点赞
|
|
likeHandle(item){
|
|
|
|
uni.request({
|
|
url: '/wanlshop/find/user/setFindUser',
|
|
method:"POST",
|
|
data:{
|
|
"id":this.id,
|
|
"type":"likes"
|
|
},
|
|
success: res => {
|
|
this.isLike = res.data.data;
|
|
}
|
|
})
|
|
},
|
|
revertTalkHandle(){
|
|
this.repayText = ""
|
|
this.repayShow = true;
|
|
// this.$nextTick(()=>{
|
|
// this.$refs.inputRetalk.focus()
|
|
// })
|
|
|
|
setTimeout(()=>{
|
|
this.$refs.inputRetalk.focus()
|
|
},1000)
|
|
},
|
|
sendHandle(){
|
|
this.repayShow = false;
|
|
},
|
|
close(){
|
|
this.repayShow = false;
|
|
},
|
|
getabItem(val){
|
|
|
|
this.activeIndex = val.id
|
|
},
|
|
getDetails(id){
|
|
uni.request({
|
|
url: '/wanlshop/find/find/getDetails',
|
|
method:'post',
|
|
data:{
|
|
id:id,
|
|
|
|
},
|
|
success: res => {
|
|
console.log(res,"mnb")
|
|
this.list1 = res.data.images.map(item=>{
|
|
return this.common.uploaddata.cdnurl+item
|
|
})
|
|
this.userInfo = res.data.user;
|
|
this.numContent={
|
|
shares: res.data.shares,
|
|
comments: res.data.comments,
|
|
likes: res.data.likes,
|
|
}
|
|
this.id = res.data.id;
|
|
this.isLike = res.data.isLike;
|
|
this.isFollow = res.data.isFollow;
|
|
|
|
// this.title = res.data.class_name;
|
|
// this.videoSrc = res.data.video_url
|
|
}
|
|
});
|
|
},
|
|
deleteHandle(){
|
|
uni.showModal({
|
|
content: '确定要删除此作品？',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
|
|
uni.request({
|
|
url: '/wanlshop/find/find/delData',
|
|
method: 'POST',
|
|
data: {
|
|
id: this.id
|
|
},
|
|
success: res => {
|
|
if(this.resource = 'user'){
|
|
uni.navigateTo({
|
|
url:"/pages/apps/find/user"
|
|
})
|
|
}else{
|
|
uni.reLaunch({
|
|
url:"/pages/youquan"
|
|
})
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
expandHandle(item){
|
|
if(!item.expand){
|
|
this.$set(item,'expand',true)
|
|
}else{
|
|
this.$set(item,'expand',false)
|
|
}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.resource = option.resource;
|
|
console.log(option,"9999")
|
|
this.currentUser = uni.getStorageSync("wanlshop:user")
|
|
this.picUrl = this.$picUrl;
|
|
this.getDetails(option.id)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ketangDetails{
|
|
background-color: #F2F3F4;
|
|
height: calc(100vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.navBarContent{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 50rpx;
|
|
&>image{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.nickname{
|
|
margin-left:12rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.simpleIntro{
|
|
background: #FFFFFF;
|
|
&>image{
|
|
height:360rpx;
|
|
width:100%;
|
|
}
|
|
.detailsText{
|
|
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 44rpx;
|
|
padding:23rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.bottomContent{
|
|
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding:0 24rpx;
|
|
background: #fff;
|
|
margin: 24rpx;
|
|
border-radius: 20rpx;
|
|
|
|
// 评论
|
|
.inputNumContent{
|
|
|
|
padding-top: 20rpx;
|
|
::v-deep .u-input{
|
|
background: #F3F4F5;
|
|
}
|
|
::v-deep .u-input__content{
|
|
height: 60rpx;
|
|
}
|
|
|
|
|
|
}
|
|
.commentList{
|
|
/* flex: 1; */
|
|
height: calc(100% - 120rpx);
|
|
overflow: auto;
|
|
.commentItem{
|
|
|
|
|
|
.mainComment{
|
|
display: flex;
|
|
margin-top: 40rpx;
|
|
|
|
&>image{
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
}
|
|
.content{
|
|
margin-left:20rpx;
|
|
flex:1;
|
|
.nickname{
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
.mainCommentText{
|
|
margin-top:15rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
.revertBtn{
|
|
margin-top:15rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #3382EE;
|
|
}
|
|
.childList{
|
|
display: flex;
|
|
margin-top:30rpx;
|
|
&>image{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
}
|
|
&>view{
|
|
flex:1;
|
|
margin-left:12rpx;
|
|
|
|
.childnickname{
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
.childCommentText{
|
|
margin-top:15rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.text{
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
.childRevert{
|
|
margin-left:30rpx;
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #3382EE;
|
|
}
|
|
}
|
|
}
|
|
.expandBtn{
|
|
margin-top:30rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #3382EE;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.toolBox{
|
|
display: flex;
|
|
padding:30rpx 20rpx;
|
|
background: #fff;
|
|
.tooItem{
|
|
flex:1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
&>image{
|
|
width: 28rpx;
|
|
height:auto;
|
|
}
|
|
text{
|
|
margin-left:11rpx;
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.popupContent{
|
|
margin:30rpx 20rpx;
|
|
.send{
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #3382EE;
|
|
}
|
|
|
|
}
|
|
::v-deep .u-navbar__content__left{
|
|
width:100%;
|
|
}
|
|
.titleContent{
|
|
|
|
width: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
text{
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #000;
|
|
}
|
|
::v-deep .u-icon{
|
|
position: absolute;
|
|
left:0;
|
|
top:0;
|
|
}
|
|
}
|
|
</style> |