385 lines
8.3 KiB
Vue
385 lines
8.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="title">
|
|||
|
|
{{noticeInfo.title}}
|
|||
|
|
</view>
|
|||
|
|
<view class="label">
|
|||
|
|
{{noticeInfo.label}}
|
|||
|
|
</view>
|
|||
|
|
<view class="author-and-time">
|
|||
|
|
<view class="author" @tap="goToUserInfo(noticeInfo)" style="padding: 0;">
|
|||
|
|
{{noticeInfo.author_name}}
|
|||
|
|
</view>
|
|||
|
|
<view class="time">
|
|||
|
|
{{noticeInfo.create_time}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
<textarea placeholder="请输入文章内容"
|
|||
|
|
v-model="noticeInfo.content"
|
|||
|
|
auto-height="true"
|
|||
|
|
disabled="true"
|
|||
|
|
></textarea>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="feedback">
|
|||
|
|
<view class="reading-volume">
|
|||
|
|
阅读 {{noticeInfo.read_number}}
|
|||
|
|
</view>
|
|||
|
|
<view class="fabulous">
|
|||
|
|
<uni-fav :checked="noticeInfo.isCollection === 0 ? false : true"
|
|||
|
|
:class="noticeInfo.isCollection === 0 ? 'grey' : 'blue'"
|
|||
|
|
class="favBtn"
|
|||
|
|
circle="true"
|
|||
|
|
bg-color="#FFFFFF"
|
|||
|
|
bg-color-checked="#1296DB"
|
|||
|
|
@tap="collection(noticeInfo.isCollection)"></uni-fav>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="no-message" v-if="isMessage === true && noMessage === true" @tap="addMessage">
|
|||
|
|
写留言
|
|||
|
|
</view>
|
|||
|
|
<view class="leave-message" v-if="noMessage === false">
|
|||
|
|
<view class="message-title">
|
|||
|
|
<view class="left">
|
|||
|
|
精选留言
|
|||
|
|
</view>
|
|||
|
|
<view class="right" @tap="addMessage">
|
|||
|
|
写留言
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="one-message" v-for="(item,index) in messageList" :key="index">
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="header-photo">
|
|||
|
|
<avatar :userName="item.real_name" size="50"></avatar>
|
|||
|
|
</view>
|
|||
|
|
<view class="message">
|
|||
|
|
<view class="name">
|
|||
|
|
{{item.real_name}}
|
|||
|
|
</view>
|
|||
|
|
<view class="message-content">
|
|||
|
|
{{item.content}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cu-modal" :class="messageDialog ? 'show' : ''" :style="[{'margin-top': -InputBottom/2+'px'}]">
|
|||
|
|
<view class="cu-dialog">
|
|||
|
|
<view class="cu-bar bg-white justify-end">
|
|||
|
|
<view class="title-content bg-white">留言</view>
|
|||
|
|
<view class="action" @tap="hideModal">
|
|||
|
|
<text class="cuIcon-close text-red"></text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="padding-xl">
|
|||
|
|
<input type="text" :adjust-position="false"
|
|||
|
|
:focus="false"
|
|||
|
|
v-model="messageContent"
|
|||
|
|
@focus="InputFocus"
|
|||
|
|
@blur="InputBlur"
|
|||
|
|
placeholder="请输入留言"/>
|
|||
|
|
</view>
|
|||
|
|
<view class="cu-bar bg-white justify-end">
|
|||
|
|
<view class="action">
|
|||
|
|
<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
|
|||
|
|
<button class="cu-btn bg-blue margin-left" @tap="clickPromptConfirm">确定</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '@/util/request.js';
|
|||
|
|
import uniFav from '@/components/uni-fav/uni-fav.vue';
|
|||
|
|
import avatar from "@/pages/components/avatar/avatar.vue";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
avatar,
|
|||
|
|
uniFav
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
//键盘高度
|
|||
|
|
InputBottom: 0,
|
|||
|
|
//文章信息
|
|||
|
|
noticeInfo: {},
|
|||
|
|
//文章ID
|
|||
|
|
noticeId: '',
|
|||
|
|
//有无留言
|
|||
|
|
noMessage: false,
|
|||
|
|
//留言列表
|
|||
|
|
messageList: [],
|
|||
|
|
//留言窗口
|
|||
|
|
messageDialog: false,
|
|||
|
|
//留言内容
|
|||
|
|
messageContent: '',
|
|||
|
|
//是否有留言功能
|
|||
|
|
isMessage: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.noticeId = option.noticeId;
|
|||
|
|
this.isMessage = option.isMessage || true;
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
async mounted() {
|
|||
|
|
await this.getMessageList();
|
|||
|
|
await this.updateReadNumber();
|
|||
|
|
},
|
|||
|
|
onPullDownRefresh () {
|
|||
|
|
uni.startPullDownRefresh();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* 浏览量+1
|
|||
|
|
*/
|
|||
|
|
updateReadNumber() {
|
|||
|
|
request.post("/hs/updateReadNumber",{
|
|||
|
|
noticeId: this.noticeInfo.id,
|
|||
|
|
number: Number(this.noticeInfo.read_number)+1
|
|||
|
|
}).then(res=>{
|
|||
|
|
console.log("浏览量+1",res);
|
|||
|
|
if (res.data > 0) {
|
|||
|
|
this.getMessageList()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: "none",
|
|||
|
|
title: "服务器出了小差，请稍后再试"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},err => {
|
|||
|
|
console.log("err",err)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 收藏
|
|||
|
|
*/
|
|||
|
|
collection(option) {
|
|||
|
|
const URL = {
|
|||
|
|
"0": "/hs/addCollection",
|
|||
|
|
"1": "/hs/cancelCollection",
|
|||
|
|
}
|
|||
|
|
request.post(URL[option],{
|
|||
|
|
noticeId: this.noticeInfo.id,
|
|||
|
|
userId: uni.getStorageSync("userInfo").user_id,
|
|||
|
|
}).then(res=>{
|
|||
|
|
console.log("收藏/取消收藏",res);
|
|||
|
|
if (res.data > 0) {
|
|||
|
|
this.getMessageList()
|
|||
|
|
}
|
|||
|
|
},err => {
|
|||
|
|
console.log("err",err)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 调整弹框高度
|
|||
|
|
*/
|
|||
|
|
InputFocus(e) {
|
|||
|
|
this.InputBottom = e.detail.height
|
|||
|
|
},
|
|||
|
|
InputBlur(e) {
|
|||
|
|
this.InputBottom = 0
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 关闭留言窗口
|
|||
|
|
*/
|
|||
|
|
hideModal() {
|
|||
|
|
this.messageDialog = false;
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 跳转人员页面
|
|||
|
|
* @param {Object} item
|
|||
|
|
*/
|
|||
|
|
goToUserInfo(item) {
|
|||
|
|
if (item.author_id === uni.getStorageSync("userInfo").user_id) {
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/tabbar/my/my'
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/person-info-page/person-info-page?userId=${item.author_id}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 点击留言弹出输入框确定
|
|||
|
|
*/
|
|||
|
|
clickPromptConfirm() {
|
|||
|
|
if (this.messageContent === '') {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '请输入留言，亲'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
request.post('/hs/addMessage',{
|
|||
|
|
noticeId: this.noticeInfo.id,
|
|||
|
|
userId: uni.getStorageSync("userInfo").user_id,
|
|||
|
|
content: this.messageContent
|
|||
|
|
}).then(res=>{
|
|||
|
|
console.log("新增留言结果",res);
|
|||
|
|
if (res.data === 1) {
|
|||
|
|
this.messageDialog = false;
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'loading',
|
|||
|
|
title: '留言成功',
|
|||
|
|
});
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
this.getMessageList();
|
|||
|
|
},1000);
|
|||
|
|
}
|
|||
|
|
},err=>{
|
|||
|
|
console.log("err",err);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 获取留言
|
|||
|
|
*/
|
|||
|
|
getMessageList() {
|
|||
|
|
return request.post('/hs/getOneContent',{
|
|||
|
|
id: this.noticeId,
|
|||
|
|
userId: uni.getStorageSync("userInfo").user_id
|
|||
|
|
}).then(res=>{
|
|||
|
|
this.noMessage = res.data.message.length === 0 ? true : false;
|
|||
|
|
this.noticeInfo = res.data.content;
|
|||
|
|
this.messageList = res.data.message;
|
|||
|
|
console.log("一条数据数据",res);
|
|||
|
|
},err=>{
|
|||
|
|
console.log("err",err);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 新增留言（打开弹框）
|
|||
|
|
*/
|
|||
|
|
addMessage() {
|
|||
|
|
this.messageDialog = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.blue{
|
|||
|
|
border: 1rpx solid #1296DB!important;
|
|||
|
|
}
|
|||
|
|
.grey{
|
|||
|
|
border: 1rpx solid #989898!important;
|
|||
|
|
}
|
|||
|
|
.title-content{
|
|||
|
|
width: calc(100% - 200rpx);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.padding-xl input{
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
.one-message{
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
.page .top, .one-message{
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
background-color: #F1F1F1;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
textarea{
|
|||
|
|
text-indent: 32rpx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.message-title .left{
|
|||
|
|
color: #a7a7a7;
|
|||
|
|
}
|
|||
|
|
.message-title .right{
|
|||
|
|
color: #1296DB;
|
|||
|
|
}
|
|||
|
|
.message-title{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.message .name{
|
|||
|
|
color: #a7a7a7;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
.left .message{
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
}
|
|||
|
|
.one-message .left{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.one-message{
|
|||
|
|
display: flex;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.no-message{
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
.reading-volume, .fabulous, .no-message, .message-fabulous{
|
|||
|
|
color: #1296DB;
|
|||
|
|
}
|
|||
|
|
.fabulous image, .message-fabulous image{
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.label{
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
width: 4rem;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ff9041;
|
|||
|
|
border: 1rpx solid #ff9041;
|
|||
|
|
}
|
|||
|
|
.content{
|
|||
|
|
padding: 20rpx!important;
|
|||
|
|
}
|
|||
|
|
.feedback{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
.author-and-time, .feedback{
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.author{
|
|||
|
|
color: #08ACEE;
|
|||
|
|
}
|
|||
|
|
.time{
|
|||
|
|
color: #a5a5a5;
|
|||
|
|
}
|
|||
|
|
.author, .time, .reading-volume, .fabulous{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|