dati/components/question-liuyan/question-liuyan.vue

<template>
	<view>
		<view class="questionBankAnswer-bottom-flex" @tap="jiucuo">
			<!-- <view class="iconfont icon-sousuo1" style="font-weight: bold;"></view> -->
			<image src="../../static/icon/liuyan.png"  mode="" style="width: 44rpx;height: 44rpx;" ></image>
			<view>留言</view>
		</view>
		<uni-popup ref="popup" type="bottom" radius="12rpx" background-color="#8c8989" color="#5A5B5C" width="90%">
			<view class="jiucuo">
				<view class="popup-content">
					<text class="text">留言</text>
					<view class="iconfont icon-cuo1" @tap="hide"></view>
				</view>
				<view class="" style="line-height: 200rpx;text-align: center;font-size: 32rpx;" v-if="loaded && liuyanList.length == 0">
					暂无留言
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;" v-else @scrolltolower="getLiuyan">
					<view v-for="item in liuyanList" class="liuyan-wrap">
						<view class="user-info">
							<image :src="item.user.avatar" mode="" class="info-logo"></image>
							<view class="info-info">
								<view class="name">
									{{item.user.nickname}}
								</view>
								<view class="time">
									{{$myUtils.$common.formatDate(item.createtime * 1000,"Y-M-D h:m:s")}}
								</view>
								<view class="content">
									{{item.content}}
								</view>
							</view>
						</view>
					</view>
					
				</scroll-view>
				<view class="jiucuo-content">
					<textarea :value="content" placeholder="说说你的看法" @input="setContent" class="popup-textarea" />
					<button type="primary" :loading="isSubmit" @tap="submit" class="popup-button">提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			current_timu: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				isSubmit: false,
				page: 1,
				limit: 20,
				loaded: false,
				loadingType: 'more',
				liuyanList: [],
				arr: [],
				content: '',
				analysis: '',
				
			}
		},
		methods: {
			async submit() {
				if (this.content == '' ) return
				if (this.isSubmit) return
				this.isSubmit = true
				let res = await this.$myHttp.post({
					url: 'api/yexam/Tag/add_msg',
					data: {
						question_id: this.current_timu.id,
						content: this.content,
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.isSubmit = false
					uni.showToast({
						title: '提交成功'
					})
					this.$refs.popup.close()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.isSubmit = false
				}
			},
			show() {
				this.$refs.popup.open('bottom')
				this.arr = []
				this.content = ''
				this.page = 1
				this.liuyanList = []
				this.loadingType = 'more'
				this.loaded = false
				this.getLiuyan()
			},
			hide() {
				this.$refs.popup.close()
			},
			setContent(e) {
				this.content = e.detail.value
			},
			jiucuo() {
				if (this.current_timu.id != '' && this.current_timu.id != undefined) {
					this.show()
				}
			},
			async getLiuyan() {
				let that = this
				if(that.loadingType == 'loading' || that.loadingType == 'noMore') {
					return
				}
				that.loadingType = 'loading'
				let res = await that.$myHttp.post({
					url: 'api/yexam/Question/guestbook',
					data: {
						id: that.current_timu.id,
						page: that.page,
						limit: that.limit
					},
					needLogin: true
				});
							
				if (res.code == 1) {
					that.liuyanList = that.liuyanList.concat(res.data.list)
					if(res.data.list.length == that.limit) {
						that.loadingType = 'more'
						that.page++
					}else {
						that.loadingType = 'noMore'
					}
					that.loaded = true
				}
			}
		}
	}
</script>

<style lang="scss">
	.popup-content {
		position: relative;
		background: #fff;
		z-index: 111;
		width: 100%;
		border-radius: 12px 12px 0 0;
		height: 42px;
		border-bottom: solid 1px #f1f1f1;
		text-align: center;
		line-height: 42px;
		color: #313131;
		font-size: 15px;
	}

	.jiucuo {
		position: relative;
		background: #fff;
		border-radius: 12rpx 12rpx 0 0;
		max-height: 80vh;
		overflow-y: auto;
	}

	.jiucuo-content {
		font-size: 13px;
		padding: 9px 9px 0;
	}

	.jiucuo-xuan {
		background: #fff;
		padding: 7px 2px;
		margin: 12px 0;
		border-radius: 4px;
	}

	.jiucuo-checkbox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.jiucuo-checkbox label {
		flex: 0 0 30%;
		display: flex;
		align-items: center;
	}

	.popup-textarea {
		width: 92%;
		margin: 0;
		font-size: 13px;
		background: #fff;
		padding: 11px;
		height: 72px;
		margin-bottom: 12px;
		background: #f7f7f7;
	}

	.popup-button {
		background: #3c7bfc !important;
		color: #fff;
		padding: 2px;
		margin: 0 auto 11px;
		border-radius: 43px;
		font-size: 16px;
		display: block !important;
		width: 95%;
	}

	.icon-cuo1 {
		position: absolute;
		color: #ccc;
		top: 0;
		right: 12px;
	}
	.user-info {
		display: flex;
		.info-logo {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right:10rpx;
			background-color: #f7f7f7;
		}
	}
	.liuyan-wrap {
		padding: 20rpx;
	}
	.name {
		font-size: 26rpx;
		font-weight: bold;
	}
	.time {
		color: #666;
		font-size: 22rpx;
	}
	.content {
		padding-top: 10rpx;
	}
</style>