yicangzongtai_app_240321/pages/government/customer-center.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#333333"></navbar>
		<view class="search-page">
			<view class="headline">常见问题</view>
			<view class="problem-box" v-if="problemList&&problemList.length>0">
				<block v-for="item in problemList">
					<view class="problem-item" :key="item.id" @click="toDetails(item.id)">
						<text>{{item.problemTitle}}</text>
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</block>
				<loadMore v-if="problemList.length>0" :status="status"></loadMore>
			</view>
			<EmptyDate bgColor="#fff" v-else></EmptyDate>
			<view class="footer">
				<view class="submit-feedback" @click="goOnlineCustomer()">智能客服</view>
				<view class="submit-feedback" @click.stop="openFeedback()">提交反馈</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '客服中心',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black',
				},
				keyword: '',
				params: {
					pageNum: 1,
					pageSize: 20,
				},
				status: 'more',
				problemList: [],
			};
		},
		onShow() {},
		onLoad() {
			this.getProblemList();
		},
		onReachBottom() {
			if (this.status == 'more') {
				this.pageNum++;
				this.getProblemList();
			}
		},
		methods: {
			getProblemList() {
				this.$yghttp.get('/common/problem/page', this.params).then((res) => {
					if (res && res.code == 200) {
						this.problemList = this.problemList.concat(res.rows);
						if (this.problemList.length < res.total) {
							this.status = 'more';
						} else {
							this.status = 'noMore';
						}
					}
				});
			},
			openFeedback() {
				uni.navigateTo({
					url: '/pages/government/feedback',
				});
			},
			goOnlineCustomer(){
				let url="http://channel-poc.alixiaomi.com:8085/intl/index.htm?from=5FW0i7mBUH&locale=zh-CN#"
				uni.navigateTo({
					url: "/pages/web-view/Apps?path=" + url+'&title=咨询助手'
				})
			},
			toDetails(id) {
				uni.navigateTo({
					url: '/pages/government/problem_detail?id=' + id,
				});
			},
		},
	};
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: 150rpx;
	}

	.search-page {
		width: 100%;
		padding: 28rpx;

		.headline {
			padding: 30rpx 20px 20rpx;
			height: 80rpx;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			line-height: 80rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
		}


		.problem-box {
			width: 100%;
			padding: 0 46rpx;
			background-color: #fff;

			.problem-item {
				height: 122rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #ededed;

				.open-more {
					width: 100rpx;
					max-height: 100%;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
		}

		.submit-feedback {
			width: 300rpx;
			margin-right: 32rpx;
			border-radius: 10rpx;
			background: linear-gradient(17deg, #52d5e9 0%, #45c5da 100%) #3c66d9;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 30rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>