saas_miniprogram/components/course/answerBox.vue

<template>
	<view class="Answering">
		<view v-for="(item, index) in answerList" :key="index" style="background-color: #ffffff" class="answer_item">
			<view class="chat_box" @click.stop="clearCtx">
				<view style="display: flex; flex: 1">
					<view>
						<image :src="
                item.assignUserId > 0 && !item.realname
                  ? '/static/logo_xcx.png'
                  : $method.splitImgHost(item.avatar)
              " style="width: 64rpx; height: 64rpx"></image>
					</view>
					<view style="margin-left: 15rpx">
						<view class="chat1">{{
              item.assignUserId > 0 && !item.realname
                ? "祥粤老师"
                : item.realname
            }}</view>
						<view class="chat2">{{
              $method.timestampToTime(item.createTime, false)
            }}</view>
						<view class="chat3">
							<text v-if="item.assignUserId > 0">回复</text>
							<text v-if="item.assignUserId > 0" style="color: #007aff">@{{ item.assignRealname }}</text>
							<view style="word-break: break-all">{{ item.answerText }}</view>
						</view>
					</view>
				</view>
				<view class="btnReply" @click.stop="replyContent(item)" v-if="item.userId != userId">回复</view>
				<view v-else class="btnDel" @click.stop="delAnswer(item.answerId)">删除</view>
			</view>
			<u-line color="#D6D6DB" />
		</view>
		<view v-if="answerList.length == 0" style="text-align: center">暂无记录</view>
		<view class="inputBottom" :style="{ bottom: bottomHeight + 'px' }">
			<view class="flex_auto">
				<input v-model="ctxValue" height="60" fixed="true" :focus="isFocus" :placeholder="placeholder"
					type="text" :custom-style="inputStyle" :adjust-position="false" class="input" @focus="focusNote"
					@blur="blur" />
			</view>
			<view class="btn" @click="postContent">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SaasMiniprogramAnswerBox",
		props: {
			userId: {
				type: Number,
				defaule: 0,
			},
		},
		inject: ["paramsFn"],
		data() {
			return {
				answerList: [],
				ctxValue: "",
				isFocus: false,
				placeholder: "您可以在这里输入答疑内容",
				inputStyle: {
					background: "rgba(244, 244, 244, 0.98)",
					borderRadius: "24rpx",
					padding: "8rpx",
					marginBottom: "10rpx",
				},
				bottomHeight: 0,
				assignUserId: 0,
			};
		},

		mounted() {
			this.getAnswerList();
		},

		methods: {
			postContent() {
				if (!this.ctxValue || this.ctxValue == "") {
					this.$u.toast("请输入内容");
					return;
				}
				this.postAnswer();
			},
			blur() {
				this.bottomHeight = 0;
				this.clearTimer = setTimeout(() => {
					this.ctxValue = "";
					this.isFocus = false;
					this.assignUserId = 0;
					this.placeholder = "您可以在这里输入答疑内容";
				}, 2000);
			},
			focusNote(event) {
				this.bottomHeight = event.detail.height;
			},
			getAnswerList() {
				this.$api.answerList(this.params).then((res) => {
					if (res.data.code == 200) {
						this.answerList = res.data.rows;
					}
				});
			},
			postAnswer() {
				let self = this;
				let data = {
					answerText: this.ctxValue,
					...this.params,
				};
				if (this.assignUserId > 0) {
					data.assignUserId = this.assignUserId;
				}
				this.$api.postAnswer(data).then((res) => {
					if (res.data.code == 200) {
						this.$u.toast("发布成功");
						self.getAnswerList();
						this.isFocus = false;
						this.placeholder = "您可以在这里输入答疑内容";
						this.ctxValue = "";
						this.assignUserId = 0;
					}
				});
			},
			delAnswer(answerId) {
				this.$api
					.delAnswer({
						answerId: answerId,
						status: -1,
						orderGoodsId: this.params.orderGoodsId,
					})
					.then((res) => {
						if (res.data.code == 200) {
							this.getAnswerList();
						}
					});
			},
			clearCtx() {
				this.placeholder = "您可以在这里输入答疑内容";
				this.ctxValue = "";
				this.assignUserId = 0;
			},
			replyContent(item) {
				this.isFocus = true;
				this.assignUserId = item.userId;
				this.placeholder = "@" + item.realname;
			},
		},
		computed: {
			params() {
				return this.paramsFn(["orderGoodsId", "goodsId", "courseId", "gradeId", "moduleId", "chapterId",
					"sectionId"
				])
			},
		},
	};
</script>

<style lang="scss" scoped>
	.Answering {
		.answer_item {
			&:nth-child(2) {
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}

			&:nth-last-child(1) {
				border-radius: 0rpx 0rpx 16rpx 16rpx;
			}
		}
	}

	.chat_box {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
	}

	.chat3 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 10rpx;
	}

	.chat2 {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-top: 10rpx;
	}

	.chat1 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.btnReply {
		width: 80rpx;
		height: 40rpx;
		background: #e3f0ff;
		border-radius: 16rpx;
		text-align: center;
		color: #007aff;
	}

	.btnDel {
		width: 80rpx;
		height: 40rpx;
		background: #ffedf0;
		border-radius: 16rpx;
		text-align: center;
		color: #ff2d55;
	}

	.btnReply {
		width: 80rpx;
		height: 40rpx;
		background: #e3f0ff;
		border-radius: 16rpx;
		font-size: 24rpx;
	}

	.inputBottom {
		position: fixed;
		left: 0;
		bottom: 0;
		background: #ffffff;
		height: 98rpx;
		display: flex;
		align-items: center;
		width: 100%;

		.flex_auto {
			flex: 1;
			margin-left: 10%;
			word-break: break-all;
			// .input {
			//   height: 60rpx;
			// }
		}

		.btn {
			color: #007aff;
			font-size: 30rpx;
			font-weight: bold;
			width: 15%;
			text-align: center;
		}

		.input {
			background: rgba(244, 244, 244, 0.98);
			height: 60rpx;
			border-radius: 24rpx;
			margin-top: 12rpx;
		}
	}
</style>