weapp-online/pages/msg_board/msg_board.vue

<template>
	<view class="board">
		<view class="tab flexS">
			<view @click="choose(0)" :class="tabType == 0 ? 'active' : ''" style="margin-right:30rpx;">精选留言</view>
			<view @click="choose(1)" :class="tabType == 1 ? 'active' : ''">{{ userInfo.type == 1 ? '全部留言' : '个人留言' }}</view>
		</view>
		<view class="board_list" v-for="(item, index) in msgList" :key="item.id">
			<view class="top">
				<view class="flexS">
					<image :src="item.get_user.avatar ? item.get_user.avatar : userInfo.avatar"></image>
					<view>
						<view class="nickname flexS">
							<text>{{ item.get_user.nickname ? item.get_user.nickname : userInfo.nickname | getName }}</text>
							<view v-if="item.is_wonderful == 1" class="best">精选</view>
							<view v-if="item.is_top == 1" class="best">置顶</view>
						</view>
						<view class="time">{{ item.created_at | timeFormat }}</view>
					</view>
				</view>
				<view class="del" @click="userInfo.type == 1 ? setMsg(item.$orig) : delMsg(item.$orig.id)">
					<text v-if="userInfo.type == 1">设置</text>
					<text v-if="userInfo.type == 0">{{ tabType == 1 ? '删除' : '' }}</text>
				</view>
			</view>
			<view class="con">{{ item.content }}</view>
			<view class="reply_btn flexB" v-if="!item.get_message_reply && userInfo.type == 1">
				<input type="text" placeholder="回复一句吧~" v-model="item.replayCon" />
				<view @click="replyMsg(item.id, item.replayCon)">回复</view>
			</view>
			<view class="bottom" v-if="item.get_message_reply">
				<image src="../../static/imgs/logo.png"></image>
				<view>
					<view class="nickname" style="color:#F44545;">大卫博士</view>
					<view>
						<view class="time">{{ item.get_message_reply.created_at | timeFormat }}</view>
						<view class="con">{{ item.get_message_reply.content }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no_msg" v-if="noMsg">
			<image src="../../static/no_msg.png"></image>
			<view>目前还没有留言哦~</view>
			<view class="go_msg" @click="goMsg" v-if="userInfo.type == 0">去留言</view>
		</view>
		<view class="msg_btn flexC" v-if="!noMsg && userInfo.type == 0"><view @click="goMsg" class="go_msg">去留言</view></view>
	</view>
</template>
<script>
import { lookMsg, putMsg, replyMsg, manageMsg, deleteMsg, wonderfulMsg, isWonderful, isTop, cancelWonderful, cancelTop } from '../../api/msg.js';
export default {
	data() {
		return {
			noMsg: false, //没有留言状态显示
			replyCon: '', //回复留言内容
			msgList: '', //留言列表
			userInfo: {},
			tabType: '', // 个人留言，精选留言切换
			timer: null, //toast定时器
			page: 1, //当前页面
			totalPage: '' //总页数
		};
	},
	onLoad(options) {
		if (options.tabType) {
			this.tabType = options.tabType;
		}
	},

	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		this.page = 1;
		this.msgState();
		this.goTop();
	},
	filters: {
		timeFormat(times) {
			var timearr = times
				.replace(' ', ':')
				.replace(/\:/g, '-')
				.split('-');
			let time = '';
			if (new Date(times).toDateString() === new Date().toDateString()) {
				time = '今天' + ' ' + timearr[3] + ':' + timearr[4];
			} else {
				time = timearr[0] + '/' + timearr[1] + '/' + timearr[2] + ' ' + timearr[3] + ':' + timearr[4];
			}
			return time;
		},
		getName(name) {
			if (name) {
				return name.length > 10 ? name.slice(0, 10) + '...' : name;
			}
			return '';
		}
	},
	beforeDestroy() {
		clearInterval(this.timer);
		this.timer = null;
	},
	onReachBottom() {
		this.getMore();
	},
	methods: {
		goTop() {
			// 一键回到顶部
			if (uni.pageScrollTo) {
				uni.pageScrollTo({
					scrollTop: 0
				});
			}
		},
		//管理员设置留言
		setMsg(item) {
			let item1 = '';
			let item2 = '';
			if (item.is_wonderful == 1) {
				item1 = '取消精选（对所有人不可见）';
			} else {
				item1 = '设为精选（对所与人可见）';
			}
			if (item.is_top == 1) {
				item2 = '取消置顶';
			} else {
				item2 = '置顶';
			}
			uni.showActionSheet({
				itemList: [item1, item2, '删除'],
				success: res => {
					if (res.tapIndex == 0) {
						let http = '';
						let hint = '';
						if (item1 == '取消精选（对所有人不可见）') {
							http = cancelWonderful;
							hint = '取消精选成功';
						} else {
							http = isWonderful;
							hint = '设为精选成功';
						}
						http({ id: item.id }).then(res => {
							console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: hint,
									icon: 'none',
									duration: 2000,
									mask: true,
									success: res => {
										this.timer = setTimeout(res => {
											this.tabType = 0;
											this.getMsg();
										}, 2000);
									}
								});
							} else {
								console.log(res);
								uni.showModal({
									content: res.message,
									showCancel: false
								});
							}
						});
						return false;
					}
					if (res.tapIndex == 1) {
						let topHttp = '';
						let hint1 = '';
						if (item2 == '取消置顶') {
							topHttp = cancelTop;
							hint1 = '取消置顶成功';
						} else {
							topHttp = isTop;
							hint1 = '留言置顶成功';
						}
						topHttp({ id: item.id }).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: hint1,
									icon: 'none'
								});
							} else {
								uni.showModal({
									content: res.message || '留言置顶失败',
									showCancel: false
								});
							}
						});
						return false;
					}
					if (res.tapIndex == 2) {
						this.delMsg(item.id);
					}
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		},
		//用户删除留言
		delMsg(id) {
			uni.showModal({
				title: '删除留言',
				content: '您确定要删除此条留言吗？',
				success: res => {
					if (res.confirm) {
						deleteMsg({ id }).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '删除留言成功',
									icon: 'none',
									duration: 2000,
									mask: true,
									success: res => {
										this.timer = setTimeout(res => {
											uni.hideToast();
											this.msgState();
										}, 2000);
									}
								});
							} else {
								uni.showModal({
									content: res.message || '删除留言失败',
									showCancel: false
								});
							}
						});
					}
				}
			});
		},
		msgState(isMore) {
			if (this.tabType == 0) {
				this.getMsg(isMore);
				return false;
			}
			if (this.tabType == 1 && this.userInfo.type == 1) {
				this.getManagMsg(isMore);
			} else {
				this.getUserMsg(isMore);
			}
		},
		getMsg(isMore) {
			wonderfulMsg({ page: this.page }).then(res => {
				if (res.code == 200) {
					this.totalPage = Math.ceil(res.data.total / 20);
					if (isMore) {
						this.msgList = this.msgList.concat(res.data.list);
					} else {
						if (res.data.list.length == 0) {
							this.msgList = '';
							this.noMsg = true;
							return false;
						}
						this.noMsg = false;
						this.msgList = res.data.list;
					}
				} else {
					uni.showModal({
						content: res.message || '获取留言失败',
						showCancel: false
					});
				}
			});
		},
		//用户看到的留言列表
		getUserMsg(isMore) {
			lookMsg({ page: this.page }).then(res => {
				if (res.code == 200) {
					this.totalPage = Math.ceil(res.data.total / 20);
					if (isMore) {
						this.msgList = this.msgList.concat(res.data.list);
					} else {
						if (res.data.list.length == 0) {
							this.msgList = '';
							this.noMsg = true;
							return false;
						}
						this.noMsg = false;
						this.msgList = res.data.list;
					}
				} else {
					uni.showModal({
						content: res.message || '获取留言失败',
						showCancel: false
					});
				}
			});
		},
		//管理员看到的留言列表
		getManagMsg(isMore) {
			manageMsg({ page: this.page }).then(res => {
				if (res.code == 200) {
					this.noMsg = false;
					this.totalPage = Math.ceil(res.data.total / 20);
					let list = res.data.list;
					if (isMore) {
						list = this.msgList.concat(res.data.list);
					} else {
						if (res.data.list.length == 0) {
							this.msgList = '';
							this.noMsg = true;
							return false;
						}
						this.noMsg = false;
						list = res.data.list;
					}
					list.map(i => {
						this.$set(i, 'inpVal', '');
					});
					this.msgList = list;
				} else {
					uni.showModal({
						content: res.message || '获取留言失败',
						showCancel: false
					});
				}
			});
		},
		//获取更多留言列表
		getMore() {
			if (this.page > this.totalPage) {
				uni.showToast({
					title: '没有更多啦~',
					icon: 'none'
				});
				return false;
			}
			this.page++;
			this.msgState(true);
		},
		/*
		 * 精选 和 个人（全部）切换
		 * type 0 精选  1 个人（全部）
		 */
		choose(cur) {
			this.msgList = [];
			this.tabType = cur;
			this.page = 1;
			let { type } = this.userInfo;
			if (cur == 0) {
				//精选接口
				this.getMsg();
				return false;
			}
			if (cur == 1 && type == 1) {
				this.getManagMsg();
				return false;
			}
			if (cur == 1 && type == 0) {
				this.getUserMsg();
			}
		},
		goMsg() {
			uni.navigateTo({
				url: '../message/message'
			});
		},
		//回复留言
		replyMsg(id, content) {
			console.log(content);
			if (!content) {
				uni.showModal({
					content: '请先输入回复内容',
					showCancel: false
				});
				return false;
			}
			replyMsg({
				id,
				content
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '回复留言成功',
						showCancel: false,
						duration: 2000,
						mask: true,
						success: res => {
							this.timer = setTimeout(res => {
								uni.hideToast();
								this.msgState();
							}, 2000);
						}
					});
					this.replyCon = '';
				} else {
					uni.showModal({
						content: res.message || '回复留言失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.board {
	width: 100%;
	min-height: 100%;
	position: relative;
	padding-bottom: 150rpx;
	.tab {
		width: 690rpx;
		margin: 30rpx auto;
		view {
			font-size: 28rpx;
			color: #999;
		}
		.active {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;

			&::after {
				content: '';
				display: block;
				margin-top: 5rpx;
				width: 42rpx;
				height: 8rpx;
				background: linear-gradient(90deg, #f97c55 0%, #f44545 100%);
				opacity: 1;
				border-radius: 4rpx;
			}
		}
	}
	.board_list {
		width: 690rpx;
		margin: 30rpx auto 0;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 24rpx;
		.nickname {
			font-size: 28rpx;
			color: #333;
		}
		.time {
			font-size: 24rpx;
			color: #999;
			margin-top: 5rpx;
		}
		.con {
			margin: 20rpx 0;
			font-size: 28rpx;
			color: #333;
		}
		.top {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			.best {
				width: 60rpx;
				text-align: center;
				height: 32rpx;
				line-height: 32rpx;
				font-size: 20rpx;
				border: 1rpx solid #f44545;
				margin-left: 15rpx;
				color: #f44545;
				border-radius: 4rpx;
			}
			image {
				width: 72rpx;
				height: 72rpx;
				margin-right: 15rpx;
				border-radius: 50%;
			}
			.del {
				font-size: 28rpx;
				color: #999;
			}
		}
		.reply_btn {
			height: 70rpx;
			margin: 30rpx 0;
			input {
				width: 80%;
				height: 100%;
				background: #f8f8f8;
				border-radius: 36rpx;
				padding-left: 25rpx;
			}
			view {
				width: 120rpx;
				text-align: center;
				height: 62rpx;
				line-height: 62rpx;
				background: linear-gradient(141deg, #f97c55 0%, #f44545 100%);
				opacity: 1;
				border-radius: 34rpx;
				color: #fff;
			}
		}
		.bottom {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			image {
				width: 48rpx;
				height: 48rpx;
				flex-shrink: 0;
				margin-right: 15rpx;
			}
			.reply {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	.no_msg {
		width: 100%;
		text-align: center;
		margin-top: 116rpx;
		image {
			width: 484rpx;
			height: 350rpx;
		}
		view:nth-child(2) {
			font-size: 28rpx;
			color: #333;
			margin: 30rpx 0 80rpx;
		}
	}
	.go_msg {
		width: 460rpx;
		margin: 0 auto;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(93deg, #f97c55 0%, #f44545 100%);
		opacity: 1;
		border-radius: 44rpx;
		color: #fff;
		font-size: 32rpx;
	}
	.msg_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 108rpx;
		background-color: #fff;
		z-index: 999;
	}
}
</style>