saas_miniprogram/components/course/noteBox.vue

<template>
	<view>
		<view v-if="noteList.length == 0" style="text-align: center">暂无笔记</view>
		<view v-for="(item, index) in noteList" :key="index">
			<view class="dateBox">{{ $method.timestampToTime(item.dateNote) }}</view>
			<view class="noteBox">
				<view v-for="(item1, index1) in item.userNotes" :key="index1" style="margin-top: 30rpx"
					@click="jumpNote(item1)">
					<view style="display: flex">
						<view class="left_ti">
							<view>
								<image src="/static/icon/note2.png" v-if="noteId != item1.noteId"
									style="width: 39rpx; height: 39rpx; margin: 0 29rpx"></image>
								<image src="/static/icon/note1.png" v-if="noteId == item1.noteId"
									style="width: 39rpx; height: 39rpx; margin: 0 29rpx"></image>
							</view>
							<view class="title" style="width: 39rpx; height: 39rpx; margin: 0 29rpx">
								{{ $method.secondToDate(item1.noteSecond) }}
							</view>
						</view>
						<view style="margin-left: 10rpx">
							<view class="t2Content leftPadding">{{ item1.sectionName }}</view>
							<view class="tBox2">{{ item1.noteText }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="inputBottom" v-if="isShowInput" :style="{ bottom: bottomHeight + 'px' }">
			<view style="width: 10%">
				<image src="/static/icon/note3.png" style="width: 39rpx; height: 39rpx; margin: 0 29rpx"></image>
			</view>
			<view style="width: 73%; height: 100%; padding: 10rpx 0">
				<input v-model="noteValue" height="60" fixed="true" placeholder="您可以在这里输入笔记内容" type="text"
					:custom-style="inputStyle" :adjust-position="false" class="input" @focus="focusNote"
					@blur="blurNote" />
			</view>
			<view style="
          color: #007aff;
          font-size: 30rpx;
          font-weight: bold;
          width: 15%;
          text-align: center;
        " @click="postNote">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SaasMiniprogramNoteBox",
		inject: ["paramsFn"],
		data() {
			return {
				noteList: [],
				noteId: 0,
				noteValue: "",
				inputStyle: {
					background: "rgba(244, 244, 244, 0.98)",
					borderRadius: "24rpx",
					padding: "8rpx",
					marginBottom: "10rpx",
				},
				bottomHeight: 0,
			};
		},
		methods: {
			getNoteList() {
				this.$api.noteList(this.params).then((res) => {
					if (res.data.code == 200) {
						this.noteList = res.data.rows;
					}
				});
			},
			jumpNote(item) {
				this.noteId = item.noteId;
				this.$emit("jumpNote", item);
			},
			postNote() {
				let self = this;
				if (!(this.sectionId > 0)) {
					this.$u.toast("目前无播放视频");
					return;
				}
				if (!this.noteValue) {
					this.$u.toast("请输入内容");
					return;
				}
				if (!this.params.gradeId) {
					this.$u.toast("暂无班级数据");
					return;
				}
				let noteSecond = this.params.playTime;
				if (!noteSecond) {
					this.$u.toast("视频暂未开始");
					return;
				}
				let data = {
					noteText: this.noteValue,
					noteDate: this.$method.getZeroTime(),
					noteSecond: noteSecond,
					...this.params,
				};
				this.$api.postNote(data).then((res) => {
					if (res.data.code == 200) {
						this.$u.toast("发布成功");
						self.getNoteList();
						this.noteValue = "";
					}
				});
			},
			blurNote() {
				this.bottomHeight = 0;
			},
			focusNote(event) {
				this.bottomHeight = event.detail.height;
			},
		},
		computed: {
			params() {
				return this.paramsFn([
					"orderGoodsId",
					"gradeId",
					"goodsId",
					"courseId",
					"playTime",
					"isPlayRebuild",
					"moduleId",
					"chapterId",
					"sectionId"
				]);
			},
			sectionId() {
				return this.params.sectionId;
			},
			isShowInput() {
				return this.params.isPlayRebuild;
			},
		},
		watch: {
			sectionId: {
				handler(val) {
					this.getNoteList();
				},
				immediate: true,
			},
		},
	};
</script>

<style lang="scss" scoped>
	.leftPadding {
		margin-left: 8rpx;
	}

	.dateBox {
		width: 216rpx;
		height: 48rpx;
		background: #ffffff;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		line-height: 48rpx;
		margin: 16rpx 0rpx 8rpx;
	}

	.noteBox {
		width: 100%;
		background: #ffffff;
		padding: 0rpx 10rpx 20rpx;
		border-radius: 16rpx;
		overflow: hidden;

		.left_ti {
			padding-top: 14rpx;

			.title {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.t2Content {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 48rpx;
	}

	.tBox2 {
		display: flex;
		padding-top: 10rpx;
		color: #333333;
		font-size: 30rpx;
		font-weight: 400;
	}

	.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>