DedeV6/src/theme/dedebiz/widget_article_feedback.htm

{dede:comment text='文档评论模块'/}
<style>.feedbacks .face{width:40px;height:40px;border-radius:50%;border:solid 1px #ccc}.feedbacks .media{border-bottom:solid 1px #ccc;padding-top:10px}.feedbacks .feedback_replies .media{border-top:solid 1px #ccc;border-bottom:0}.feedbacks .media-body{padding:0 1rem 1rem 1rem}.feedbacks .media-body small{color:#999}.feedbacks .feedback-action{float:right}.feedbacks ._feedback_reply .alert{margin-bottom:0}@media only screen and (max-width:576px){.feedbacks .feedback-action{float:none}}</style>
<div class="comment py-3">
	<h4>发表评论</h4>
	<div id="feedback-alert"></div>
	<div class="content mb-3"><textarea cols="60" id="iptMsg" name="msg" rows="5" class="form-control" placeholder="请输入..." required></textarea></div>
	<div class="post mb-3">
		<div class="dcmp-userinfo" id="_ajax_feedback">
			<div class="form-group form-row">
				<div class="col-md-6">
					<label for="iptUsername">会员名</label>
					<input type="text" class="form-control" id="iptUsername">
				</div>
				<div class="col-md-6areaValidate" style="display:none">
					<label for="iptValidate">验证码</label>
					<div class="input-group">
						<input type="text" class="form-control text-uppercase" id="iptValidate">
						<img src="{dede:global.cfg_cmspath/}/apps/vdimgck.php" id="validateimg" onclick="this.src='{dede:global.cfg_cmspath/}/apps/vdimgck.php?'+new Date().getTime()+Math.round(Math.random() * 10000)" title="验证码">
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="form-check">
					<input type="checkbox" value="1" name="notuser" id="iptAny" class="form-check-input">
					<label class="form-check-label" for="iptAny">匿名评论</label>
				</div>
			</div>
		</div>
		<div class="dcmp-submit"><button class="btn btn-success" type="button" onClick='SendFeedback()'>发表评论</button></div>
	</div>
	<div class="feedbacks">
		{dede:feedback}
		<div class="media">
			<img class="face" src="[field:face/]" class="mr-2">
			<div class="media-body">
				<div class="feedback-content">[field:msg/]</div>
				<div class="feedback-infos">
					<span class="feedback-basic">
						[field:username function="(@me=='guest' ? '游客' : @me)"/] 
						<small>[field:dtime function="MyDate('Y-m-d',@me)"/]</small>
						<a href="javascript:LoadReplyFeedbacks([field:id/])">[field:replycount/]条回复</a>
						<a href="javascript:ReplyFeedback([field:id/])" class="btn btn-success btn-sm">回复</a>
					</span>
					<div class="feedback-action"><a href="javascript:GoodFeedback([field:id/], [field:good/])"><span id="feedbackGood[field:id/]">[field:good/]</span><i class="fa fa-thumbs-up ml-1"></i></a></div>
				</div>
				<div class="_feedback_reply my-2" for="[field:id/]"></div>
				<div class="feedback_replies" for="[field:id/]"></div>
			</div>
		</div>
		{/dede:feedback}
	</div>
</div>
<script async>
	//发表评论
	function SendFeedback() {
		let feedback = {
			action: "send",
			comtype: "comments",
			aid: "{dede:field name='id'/}",
			msg: $("#iptMsg").val(),
			username: $("#iptUsername").val(),
			validate: $("#iptValidate").val(),
			notuser: $("#iptAny").is(":checked") ? "1" : "",
		};
		$.post("{dede:field name='phpurl'/}/feedback.php", feedback, function (data) {
			let result = JSON.parse(data);
			if (result.code === 200) {
				ShowAlert("#feedback-alert", result.msg, "success");
				$("#iptMsg").val("");
				$("#iptValidate").val("");
				($("#iptUsername").attr("disabled") !== "disabled") && $("#iptUsername").val("");
				$("#validateimg").attr("src", '{dede:global.cfg_cmspath/}/apps/vdimgck.php?' + new Date().getTime() + Math.round(Math.random() * 10000));
			} else {
				ShowAlert("#feedback-alert", `评论失败：${result.msg}`, "danger");
				$("#validateimg").attr("src", '{dede:global.cfg_cmspath/}/apps/vdimgck.php?' + new Date().getTime() + Math.round(Math.random() * 10000));
			}
		});
	}
	//进行回复，回复必须登录
	function SendReplyFeedback(fid) {
		let content = $(`._feedback_reply[for="${fid}"]`).find(".iptReplyContent").val();
		let reply = {
			action : "send",
			comtype : "reply",
			fid : fid,
			aid : "{dede:field name='id'/}",
			msg : content,
		}
		$.post("{dede:field name='phpurl'/}/feedback.php", reply, function (data) {
			let result = JSON.parse(data);
			if (result.code === 200) {
				ShowAlert(`._feedback_reply[for="${fid}"]`, result.msg, "success");
			} else {
				ShowAlert(`._feedback_reply[for="${fid}"]`, `评论失败：${result.msg}`, "danger");
			}
		})
		$(`._feedback_reply[for="${fid}"]`).find(".btnSend").attr("disabled", "disabled");
	}
	//回复某个评论
	function ReplyFeedback(fid) {
		let replyPannel = `<div class="form-group my-2">
			<div class="input-group">
				<input type="text" class="form-control iptReplyContent">
				<button type="button" class="btn btn-success btnSend ml-2" onClick='SendReplyFeedback(${fid})'>评论</button>
			</div>
		</div>`;
        $.get("{dede:global.cfg_cmsurl/}/user/api.php?format=json", function(result) {
            if (result.code !== 200) {
				$(`._feedback_reply`).html("");
				ShowAlert(`._feedback_reply[for="${fid}"]`, 
				'回复需要登录会员中心，您可以<a href="{dede:global.cfg_cmsurl/}/user/login.php">点击登录</a>后再来回复', 'warning', 5000);
            } else {
				$(`._feedback_reply`).html("");
				$(`._feedback_reply[for="${fid}"]`).html(replyPannel);
            }
		});
		$(`._feedback_reply[for="${fid}"]`).html('<i class="fa fa-spinner fa-spin"></i> ');
	}
	//加载回复评论
	function LoadReplyFeedbacks(fid) {
		$(`.feedback_replies[for="${fid}"]`).html('<i class="fa fa-spinner fa-spin"></i> ');

		$.get("{dede:field name='phpurl'/}/feedback.php", {
			"aid" : "{dede:field name='id'/}",
			"fid" : fid,
		}, function (data) {
			let result = JSON.parse(data);
			let tpl = `
			<div class="media">
				<img class="face" src="~face~">
				<div class="media-body">
					<div class="feedback-content">~msg~</div>
					<div class="feedback-infos">
						<span class="feedback-basic">
							~username~
							<small>~dtimestr~</small>
						</span>
						<div class="feedback-action">
							<a href="javascript:GoodFeedback(~id~, ~good~)"><span id="feedbackGood~id~">~good~</span><i class="fa fa-thumbs-up"></i></a>
						</div>
					</div>
				</div>
			</div>
			`;
			if (result.code === 200) {
				$(`.feedback_replies[for="${fid}"]`).html("");
				for (let i = 0; i < result.data.length; i++) {
					const feedback = result.data[i];
					let rs = tpl;
					for (const key in feedback) {
						if (feedback.hasOwnProperty(key)) {
							rs = rs.replace(new RegExp(`~${key}~`,"gm"), feedback[key])
						}
					}
					$(`.feedback_replies[for="${fid}"]`).append(rs);
				}
			}
		})
	}
	//赞
	function GoodFeedback(fid, g) {
		let good = {
			action : "send",
			feedbacktype : "good",
			good : g,
			fid : fid,
		}
		$.post("{dede:field name='phpurl'/}/feedback.php", good, function (data) {
			let result = JSON.parse(data);
			$(`#feedbackGood${fid}`).html(result.data);
		})
	}
</script>