odd_job_applet/pages/article/comment.vue

<template>
	<view>

		<view class="cu-list menu-avatar comment solids-top">
			<block v-for="(item,index) in plist" :key="item.id">
				<view class="cu-item">
					<view class="cu-avatar round" :style="'background-image:url('+item.user.avatar+');'"></view>
					<view class="content">
						<view class="padding-bottom-sm flex justify-between">
							<view class="text-grey">{{item.user.nickname}}</view>
							<view class="text-gray">
								{{item.createtime}}
								<text class="cuIcon-comment padding-left-sm" :data-puserid="item.userid" :data-nickname="item.user.nickname" @click="replyComment"></text>
							</view>
						</view>
						<view class="text-content padding-bottom-xs">
							<text v-if="item.puserid">回复 <text class="text-red">{{item.puser.nickname}}</text>：</text> 
							{{item.details}}
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="pstatus"></uni-load-more>
		
		<view class="cu-modal bottom-modal" :class="modalname=='commentModal'?'show':''">
			<view class="cu-dialog" style="height: calc(100vh)">
				<view class="cu-bar bg-white">
					<view class="action text-grey" @tap="hideModal">取消</view>
					<view class="action text-green" @click="sendComment">发表</view>
				</view>
				<view class="padding-xl text-left">
					<textarea class="solid padding-sm" style="width: 100%;" v-show="modalname=='commentModal'?true:false" :focus="modalfocus" :fixed="true" :placeholder="placeholder" @input="bindInput" maxlength="140" :value="details"></textarea>
				</view>
			</view>
		</view>
		
		
		<view class="padding"></view>
		<view class="padding"></view>
		<view class="cu-bar input foot">
			<input :placeholder="placeholder" @tap="showModal" disabled class="solid-bottom"></input>
			<button class="cu-btn bg-blue shadow-blur" @click="sendComment">发表</button>
		</view>
		
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				isRotate: false,
				userinfo: {},
				
				articleid: 0,
				count: 0,
				
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: [],
				
				modalname: "",
				modalfocus: false,
				puserid: 0,
				placeholder: "说点什么吧...",
				details: ""
			}
		},
		onLoad: function(option) {
			_this = this;
			_this.articleid = option.articleid || 0;
			_this.modalname = option.modalname || "";
			_this.userinfo = uni.getStorageSync('userinfo');
			if (_this.articleid==0){
				uni.showModal({
					title: '信息提示',
					content: '文章资讯不存在',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
						}
					}
				});
			}else{
				_this.getMore();
			}
			if (_this.modalname!=""){
				_this.showModal();
			}
		},
		onShareAppMessage: function(res) {
			return {
				title: "文章资讯评论",
				path: "/pages/article/comment?articleid="+_this.articleid
		    }
		},
		onShow: function() {
			_this.userinfo = uni.getStorageSync('userinfo');
		},
		onPullDownRefresh: function() {
			_this.ppage = 1;
			_this.pstatus = 'more';
			_this.plist = [];
			_this.getMore();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			showModal: function() {
				_this.userinfo = _this.checkLogin("/pages/article/comment?articleid="+_this.articleid);
				if (_this.userinfo===false){
					_this.sendInitialize();
					return false;
				}
				_this.modalname = "commentModal";
				setTimeout(function (){
					_this.modalfocus = true;
				}, 500);
			},
			hideModal: function() {
				_this.sendInitialize();
			},
			bindInput: function(e) {
				_this.details = e.detail.value;
			},
			replyComment: function(e) {
				_this.puserid = e.currentTarget.dataset.puserid;
				_this.placeholder = "回复 "+e.currentTarget.dataset.nickname+"：";
				_this.showModal();
			},
			sendInitialize: function() {
				_this.modalfocus = false;
				_this.modalname = "";
				_this.puserid = 0;
				_this.placeholder = "说点什么吧...";
				_this.details = "";
			},
			sendComment: function() {
				_this.userinfo = _this.checkLogin("/pages/article/comment?articleid="+_this.articleid);
				if (_this.userinfo===false){
					return false;
				}
				if(_this.isRotate){
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "article/sendcomment",
					data: {
						userid: _this.userinfo.id || 0,
						articleid: _this.articleid,
						puserid: _this.puserid, 
						details: _this.details
					}
				}).then((data) => {
					var comment = data.comment;
					_this.plist = comment.concat(_this.plist);
					_this.sendInitialize();
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			getMore: function() {
				_this.$req.ajax({
					path: "article/listcomment",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						articleid: _this.articleid, 
						userid: _this.userinfo.id || 0
					}
				}).then((data) => {
					_this.count = data.count;
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
		}
	}
</script>

<style>
</style>