yusheng-h5/pages/feedback/help.vue

<template>
<view class="view-page" :style="{backgroundImage : `url('${ThemeData?.app_bg ?? 'https://vespa.qxmier.com/image/bg.png'}')`}">
		<!-- <headerHeight /> -->
		<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}" :navTitle="'帮助与反馈'" :emitBack="true" @backEvent="back">
		</navBar>
		<view class="content">
			<view class="top-tip flex-line flex-spaceB">
				<view class="">
					<view class="tip">
						Hi，有什么可以帮你
					</view>
					<view class="color-6 font-24 font-w400">
						尽全力，帮助你
					</view>
				</view>
				<view class="kefu-icon">
					<img src="@/static/image/help/kefu.png" alt="" />
				</view>
			</view>
			<view class="problem-view">
				<view class="problem-box" v-for="(item,index) in problemList" :key="index">
					<view class="box-title color-0 font-w500 font-32">
						{{!item.id ? item.title : `${typeData?.type_name}相关问题`}}
					</view>
					<view class="box-content" v-if="item.list && item.list.length !== 0">
						<template v-if="item.id">
							<view class="flex-line box-line box-lines" v-for="(ele,eleIndex) in item.list"
								@click="jumpPage(ele)">
								<view class="title">
									<template v-if="item.id">
										{{ele.title}}
									</template>
								</view>
								<view class="">
									<uni-icons v-if="item.id" type="right" size="14"
										color="rgb(153, 153, 153)"></uni-icons>
								</view>
							</view>
						</template>
						<uni-data-select class="box-line" v-else v-model="typeId" :clear="false" :localdata="item.list"
							@change="changeType"></uni-data-select>
					</view>
					<view v-else class="">
						<uni-load-more status="noMore"></uni-load-more>
					</view>
				</view>
			</view>
		</view>
		<view class="footer flex-line">
			<view class="footer-button flex-line" @click="operate(index)" v-for="(item,index) in footerList"
				:key="index">
				<view class="icon">
					<img :src="item.icon" alt="" />
				</view>
				<view class="title ml-6 color-3 font-28 font-w400">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerHeight from '@/component/headerHeight.vue';
	import navBar from '@/component/nav.vue';
	import http from '@/until/http.js';
	import keFuImg from '@/static/image/help/Headphone.png';
	import fkImg from '@/static/image/help/fankui.png';
	export default {
		components: {
			headerHeight,
			navBar
		},
		data() {
			return {
				statusBarHeight:0,
				problemList: [{
						title: '问题分类',
						id: 0,
						list: [{
							title: '全部问题'
						}]
					},
					{
						title: '常见问题',
						id: 1,
						list: []
					}
				],
				footerList: [{
						title: '在线客服',
						icon: keFuImg
					},
					{
						title: '意见反馈',
						icon: fkImg
					}
				],
				page: 1,
				limit: 10,
				typeData: null,
				typeId: null,
				ThemeData:null
			}
		},
		onLoad(options) {
			const {
				id,h
			} = options
			uni.setStorageSync('token', id)
			if (uni.getStorageSync('token')) this.getHelpList()
			this.statusBarHeight = h
			uni.setStorageSync('BarHeight', h)
			if(uni.getStorageSync('Theme_Data')) {
				this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
			}
		},
		methods: {
			async getHelpList() {
				http.get('/api/Help/help_type', {
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					const {
						data,
						code
					} = response
					if (code) {
						this.problemList[0].list = data.map(ele => {
							return {
								...ele,
								text: `${ele.type_name}的相关问题`,
								value: ele.id
							}
						})
						this.typeId = data.length ? data[0].id : null
						this.typeData = data.length ? data[0] : null
					}
					this.$nextTick(() => {
						this.getProblemList(this.typeId)
					})
					this.errorPage = false
				}).catch(error => {
					this.errorPage = true
				});
			},
			async getProblemList(id) {
				http.get('/api/Help/help_list', {
					token: uni.getStorageSync('token') ?? '',
					type: id,
					page: this.page,
					page_limit: this.limit
				}).then(response => {
					const {
						data,
						code
					} = response
					if (code) {
						this.problemList[1].list = data
					}
				})
			},
			changeType(ele) {
				// console.log(ele)
				this.typeId = ele
				this.typeData = this.problemList[0].list.filter(ele => {return this.typeId === ele.id})[0]
				this.getProblemList(this.typeId)
				this.problemList[1].list = []
			},
			jumpPage(data) {
				uni.navigateTo({
					url: `/pages/feedback/problemDetail?id=${data.id}`
				});
			},
			operate(index) {
				if (index) {
					// 意见反馈
					uni.navigateTo({
						url: `/pages/feedback/feedback?id=${uni.getStorageSync('token')}`
					});
				} else {
					// 在线客服
					const platform = uni.getSystemInfoSync().platform;
					// console.log(platform, '打印设备参数')
					if (platform === 'ios') {
						console.log('调用iOS原生方法')
						// 通过 messageHandlers 调用 iOS 原生方法
						window.webkit.messageHandlers.nativeHandler.postMessage({
							'action': 'customerService'
						});
					} else if (platform === 'android') {
						console.log('调用Android原生方法')
						// 调用 Android 原生方法
						window.Android.customerService();

					}
				}
			},
			back() {
				this.closeWeb()
			},
			closeWeb() {
				// 关闭页面
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'ios') {
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'closeWeb'
					});
				} else if (platform === 'android') {
					window.Android.closeWeb();

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select {
		border: 0 !important;
		padding: 0;
	}

	.view-page {
		// padding: 32rpx;
		width: 100vw;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% 100%;


		.top-tip {
			font-family: Source Han Sans CN, Source Han Sans CN;
			margin: 36rpx 0;
			padding: 32rpx;
			width: calc(100% - 64rpx);

			.tip {
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;

			}

			.kefu-icon {
				width: 218rpx;
				height: 218rpx;
			}
		}

		.problem-view {
			padding: 0 24rpx;

			.problem-box {
				font-family: Source Han Sans CN, Source Han Sans CN;

				.box-title {
					padding: 24rpx 0;
				}

				.box-content {

					.box-line,
					.box-lines {
						// width: calc(100% - 48rpx);
						width: 100%;
						padding: 18rpx 24rpx;
						background-color: #fff;
						border-radius: 14rpx;
						margin-bottom: 24rpx;
						justify-content: space-between;

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

					.box-lines {
						width: calc(100% - 48rpx);
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(222, 222, 222, 0.25);
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			justify-content: space-around;

			.footer-button {
				.icon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>