goufangtong3/pagesA/index/wenda-list.vue

<template>
	<view class="wenda-list">
		<view class="fangchan-wenda" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
			<view class="wenda-box">
				<view class="box-top u-flex u-row-between">
					<text class="text1">问</text>
					<image class="img" :src="item.user_headimg" mode=""></image>
					<text class="text2">{{item.user_name}}</text>
					<!-- <text class="admin">管理员</text>
					<text class="yewu">业务人员</text> -->
					<text class="text3 u-flex-1">{{item.create_time}}</text>
				</view>
				<view class="table-header u-flex u-row-center" v-if="item.quiz_type == 2">
					<input type="text" placeholder="请输入" class="u-flex-1" :value="JSON.parse(item.content).title" :disabled="true">
				</view>
				<scroll-view v-if="item.quiz_type == 2" scroll-y="true" enable-flex scroll-x="true" class="wenda-table">
					<view class="table-row" v-for="(a,b) in JSON.parse(item.content).list" :key="b">
						<view class="table-col u-line-1" v-for="(c,d) in a" :key="d">{{c.value}}</view>
					</view>
				</scroll-view>
				<view class="wenda-text" v-if="item.quiz_type == 1">
					{{item.content}}
				</view>
			</view>
			<view class="wenda-box" v-if="item.apply_info">
				<view class="box-top u-flex u-row-between">
					<text class="text1" style="background-color: #04B578;">答</text>
					<image class="img" :src="item.apply_info.user_headimg" mode=""></image>
					<text class="text2">{{item.apply_info.user_name}}</text>
					<text class="admin" v-if="item.apply_info.reply_type == 2">管理员</text>
					<text class="yewu" v-if="item.apply_info.reply_type == 3">业务人员</text>
					<text class="text3 u-flex-1">{{item.apply_info.create_time}}</text>
				</view>
				<view class="wenda-text">
					{{item.apply_info.content}}
				</view>
			</view>
			<view class="wenda-more">
				{{item.apply_num}}人参与回复
			</view>
		</view>
		<view class="not-wenda u-flex-col u-col-center u-row-center" v-if="list.length == 0">
			<image class="img" src="../../static/images/not-wenda.png" mode=""></image>
			<text class="text1">当前楼房还没有问答？</text>
			<text class="text2">请您提出的您的问题</text>
		</view>
		<view class="" style="height: 170rpx;"></view>
		<view class="houses-btn u-flex u-row-between">
			<view class="btn-left u-flex u-row-center" @click="opentiwen">
				<image src="../../static/images/tiwen.png" mode=""></image>
				<text>立即提问</text>
			</view>
			<view class="btn-right" @click="tochat">在线咨询</view>
		</view>
		<u-popup v-model="showlogin" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">你目前处于未登录状态请前往登录</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showlogin = false">取消</text>
					<text @click="tologin">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showtiwen" mode="center" border-radius="20">
			<view class="tiwen-popup">
				<view class="tiwen-zhiding u-flex" v-if="quiz_type == 2 && is_allow == 1">
					<text class="text">置顶</text>
					<u-switch v-model="checked"></u-switch>
				</view>
				<view class="table-header u-flex u-row-center" v-if="quiz_type == 2">
					<input type="text" placeholder="请输入" class="u-flex-1" v-model="tabletitle">
				</view>
				<scroll-view v-if="quiz_type == 2" scroll-x="true" scroll-y="true" :enhanced="false" class="wenda-table1">
					<view class="table-row" v-for="(a,b) in table" :key="b">
						<input type="text" placeholder="请输入" class="table-col" v-for="(c,d) in a" :key="d" v-model="c.value">
					</view>
				</scroll-view>
				<view v-if="quiz_type == 1" class="textarea">
					<textarea placeholder="请输入提问内容" v-model="content"></textarea>
				</view>
				<view class="tiwen-btn u-flex u-row-between">
					<view v-if="is_allow == 1" class="u-flex u-row-center tiwen-btn-item u-flex-1" style="background: #1677FF;" @click="showtable = true">
						<image src="../../static/images/table.png" mode=""></image>
						<text>添加表格</text>
					</view>
					<view class="u-flex u-row-center tiwen-btn-item u-flex-1" style="background: #FFA120;" @click="totiwen">
						<image src="../../static/images/tiwen.png" mode=""></image>
						<text>提问</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showtable" mode="center" border-radius="20">
			<view class="table-popup">
				<view class="table-header">
					表格属性
				</view>
				<view class="table-row-col u-flex u-row-between">
					<view class="row-col-item u-flex-col">
						<text>行数</text>
						<input type="number" placeholder="请输入" v-model="row">
					</view>
					<view class="row-col-item u-flex-col">
						<text>列数</text>
						<input type="number" placeholder="请输入" v-model="col">
					</view>
				</view>
				<!-- <view class="table-title u-flex-col">
					<text>标题</text>
					<input type="text" placeholder="请输入">
				</view>
				<view class="table-title u-flex-col">
					<text>摘要</text>
					<input type="text" placeholder="请输入">
				</view> -->
				<view class="add-table-btn u-flex u-row-between">
					<text @click="showtable = false">取消</text>
					<text @click="createtable">确定</text>
				</view>
			</view>
		</u-popup>
		<gf-chat ref="chatlist" @over="getuser"></gf-chat>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showtiwen: false,
				showlogin: false,
				showtable: false,
				checked: false,
				page: 1,
				list: [],
				detail: {},
				quiz_type: 1,
				content: '',
				table: [],
				tabletitle: '',
				is_allow: 0,
				row: '',
				col: '',
				worker_id: 0,
				worker_phone: '',
				worker_hx_username: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getlist()
			this.getlou()
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.getuser()
			}
		},
		methods: {
			totiwen() {
				if (this.quiz_type == 1) {
					if (!this.content) {
						this.$u.toast("请输入问答内容")
						return
					}
				} else {
					if (!this.tabletitle) {
						this.$u.toast("请输入表格标题")
						return
					}
					for (let i = 0; i < this.table.length; i++) {
						for (let j = 0; j < this.table[i].length; j++) {
							if (!this.table[i][j].value) {
								this.$u.toast("请完善表格")
								return
							}
						}
					}
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				this.$u.post('/api/Comment/submit_comment', {
					id: this.id,
					type: this.quiz_type,
					is_top: this.value ? 1 : 0,
					content: this.quiz_type == 1 ? this.content : JSON.stringify({ list: this.table, title: this.tabletitle })
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						this.row = ''
						this.col = ''
						this.content = ''
						this.table = []
						this.tabletitle = ''
						this.showtiwen = false
						setTimeout(() => {
							this.page = 1
							this.list = []
							this.getlist()
						}, 800)
					}
				})
			},
			createtable() {
				if (!this.row || this.row == 0) {
					this.$u.toast("请输入行数")
					return
				}
				if (!this.col || this.col == 0) {
					this.$u.toast("请输入列数")
					return
				}
				this.quiz_type = 2
				this.showtable = false
				this.table = []
				for (let i = 0; i < this.row; i++) {
					var arr = []
					for (let j = 0; j < this.col; j++) {
						arr.push({
							value: ''
						})
					}
					this.table.push(arr)
				}
			},
			opentiwen() {
				if (uni.getStorageSync("token")) {
					this.quiz_type = 1
					this.showtiwen = true
				} else {
					this.showlogin = true
				}
			},
			getuser() {
				this.$u.post('/api/Member/member_info').then(res => {
					this.is_allow = res.data.is_allow
					this.worker_id = res.data.worker_id
					this.worker_phone = res.data.worker_phone
					this.worker_hx_username = res.data.worker_hx_username
				})
			},
			getlist() {
				this.$u.post('/api/Comment/consult_comment_list', {
					id: this.id,
					page: this.page
				}).then(res => {
					if (res.code == 1) {
						this.list = this.list.concat(res.data)
					}
				})
			},
			getlou() {
				this.$u.post('/api/Property/property_detail', {
					id: this.id
				}).then(res => {
					this.detail = res.data
				})
			},
			toinfo(item) {
				uni.navigateTo({
					url: "/pagesA/index/wenda-info?id=" + item.id + "&louid=" + this.id
				})
			},
			tologin() {
				this.showlogin = false
				uni.navigateTo({
					url: "/pages/mine/login"
				})
			},
			tochat() {
				if (uni.getStorageSync("token")) {
					if (this.worker_id == 0) {
						this.$refs.chatlist.open(this.id)
					} else {
						this.$u.post('/api/Member/consult_record', {
							type: 2
						})
						uni.navigateTo({
							url: "/pages/index/chat?hx_username=" + this.worker_hx_username + "&worker_id=" + this.worker_id
						})
					}
				} else {
					this.showlogin = true
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.wenda-list {
		.not-wenda {
			height: 80vh;

			.img {
				width: 178rpx;
				height: 178rpx;
				margin-bottom: 20rpx;
			}

			.text1 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CCCCCC;
				margin-bottom: 10rpx;
			}

			.text2 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CCCCCC;
			}
		}

		.table-popup {
			width: 650rpx;

			.add-table-btn {
				padding: 40rpx 24rpx;

				text:first-child {
					width: 284rpx;
					line-height: 88rpx;
					background: #CCCCCC;
					border-radius: 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				text:last-child {
					width: 284rpx;
					line-height: 88rpx;
					background: #1677FF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.table-title {
				margin-bottom: 20rpx;
				padding: 0 24rpx;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-bottom: 20rpx;
				}

				input {
					width: 100%;
					height: 88rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #E5E5E5;
					padding: 0 24rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.table-row-col {
				padding: 0 24rpx;
				margin-bottom: 20rpx;

				.row-col-item {
					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 20rpx;
					}

					input {
						width: 284rpx;
						height: 88rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						border: 2rpx solid #E5E5E5;
						padding: 0 24rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}

			.table-header {
				margin-bottom: 40rpx;
				line-height: 88rpx;
				border-bottom: 2rpx solid #E5E5E5;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding: 0 24rpx;
			}
		}

		.tiwen-popup {
			width: 650rpx;
			padding: 24rpx;

			.tiwen-zhiding {
				margin-bottom: 20rpx;

				.text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-right: 16rpx;
				}
			}

			.table-header {
				width: 600rpx;
				height: 94rpx;
				border: 2rpx solid #F0F0F0;

				input {
					text-align: center;
					color: red;
				}
			}

			.wenda-table1 {
				width: 600rpx;
				max-height: 378rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.table-row {
					white-space: nowrap;
					height: 94rpx;

					.table-col {
						width: 150rpx;
						height: 94rpx;
						border-bottom: 2rpx solid #F0F0F0;
						border-left: 2rpx solid #F0F0F0;
						padding: 0 16rpx;
						display: inline-block;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(102, 102, 102, 0.88);
						box-sizing: border-box;
					}

					.table-col:last-child {
						border-right: 2rpx solid #F0F0F0;

					}
				}

				.table-row:last-child {
					.table-col {
						// border-bottom: 2rpx solid #F0F0F0;
					}
				}
			}

			.tiwen-btn {
				.tiwen-btn-item {

					height: 88rpx;
					border-radius: 20rpx;
					margin: 0 10rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.textarea {
				height: 326rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #CCCCCC;
				padding: 20rpx;
				margin-bottom: 24rpx;

				textarea {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tocall-box {
			position: relative;

			.tocall-img {
				width: 650rpx;
				height: 476rpx;
			}

			.tocall-btn {
				position: absolute;
				bottom: 70rpx;
				left: 0;
				width: 100%;
				padding: 0 48rpx;

				text:first-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #FFA120;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				text:last-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #1F7EFF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.tocall-text {
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				position: absolute;
				top: 244rpx;
				left: 0;
				z-index: 10;
				width: 100%;
			}
		}

		.houses-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 0 24rpx 54rpx 24rpx;
			z-index: 1;

			.btn-left {
				width: 338rpx;
				height: 84rpx;
				background: #FFA120;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.btn-right {
				width: 338rpx;
				line-height: 84rpx;
				background: #1F7EFF;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.fangchan-wenda {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 24rpx 24rpx 20rpx 24rpx;

			.wenda-more {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding: 0 20rpx;
			}

			.wenda-box {
				padding: 0 20rpx;

				.table-header {
					width: 620rpx;
					height: 94rpx;
					border: 2rpx solid #F0F0F0;

					input {
						text-align: center;
						color: red;
					}
				}

				.wenda-table {
					width: 620rpx;
					max-height: 378rpx;
					border-radius: 16rpx;
					margin-bottom: 20rpx;

					.table-row {
						white-space: nowrap;
						height: 94rpx;

						.table-col {
							width: 155rpx;
							line-height: 94rpx;
							height: 94rpx;
							border-bottom: 2rpx solid #F0F0F0;
							border-left: 2rpx solid #F0F0F0;
							padding: 0 16rpx;
							display: inline-block;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(102, 102, 102, 0.88);
						}

						.table-col:last-child {
							border-right: 2rpx solid #F0F0F0;

						}
					}

					.table-row:last-child {
						.table-col {
							// border-bottom: 2rpx solid #F0F0F0;
						}
					}
				}

				.wenda-text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-bottom: 20rpx;
				}

				.box-top {
					margin-bottom: 20rpx;

					.yewu {
						width: 118rpx;
						line-height: 36rpx;
						border-radius: 8rpx;
						border: 2rpx solid #1677FF;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1677FF;
					}

					.admin {
						width: 118rpx;
						line-height: 36rpx;
						border-radius: 8rpx;
						border: 2rpx solid #FF9F18;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF9F18;
					}

					.text2 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-right: 20rpx;
					}

					.text3 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						text-align: right;
					}

					.img {
						width: 36rpx;
						height: 36rpx;
						border-radius: 100rpx;
						margin: 0 20rpx;
					}

					.text1 {
						width: 36rpx;
						line-height: 36rpx;
						background: #1677FF;
						border-radius: 8rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>