zhapp/pages/tool/helpAndSupport.vue

<template>
	<view class="page">
		<view class="faqSection dis f-c mb-2">
			<text class="title ">常见问题</text>
			<view class="cellText dis f-c mt-3">
				<text class="issue">客服在线时间</text>
				<text class="content">客服在线时间为：早上8:30 至 下午6:30</text>
			</view>
			<view class="cellText mb-3 mt-3 dis f-c ">
				<text class="issue">忘记密码怎么办？</text>
				<text class="content">忘记密码可在登录时使用手机号+短信验证码登录，也可以在登录页面点击【忘记密码】使用手机号+短信验证码重新设置新的密码。</text>
			</view>
			<view class="cellText dis f-c">
				<text class="issue">如何修改密码？</text>
				<text class="content">打开APP，点击【我的】> 【设置】(我的页面下滑到底)>账号安全> 修改密码。</text>
			</view>
		</view>
		<view class="helpDesk">
			<text class="title ">电话报案</text>
			<view class="item mt-3 dis a-c  " @click="qrCodeshow=true">
				<view class="image dis a-c j-c ">
					<image src="/static/icon/my/wechatSupport.png" mode=""></image>
				</view>
				<view class="cell dis f-c ">
					<text>企业微信客服</text>
					<text>添加企业微信专属客服，解决您遇到的问题</text>
				</view>
			</view>
			<view class="item mt-3 dis a-c " @click="getWechatCustomer">
				<view class="image dis a-c j-c ">
					<image src="/static/icon/my/wechatCustomerService.png" mode=""></image>
				</view>
				<view class="cell dis f-c ">
					<text>微信客服</text>
					<text>联系微信客服，解决您出单时遇到的问题</text>
				</view>
			</view>
			<view class="item mt-3 dis a-c " @click="virtualAssistant">
				<view class="image dis a-c j-c ">
					<image src="/static/icon/my/AI.png" mode=""></image>
				</view>
				<view class="cell dis f-c ">
					<text>智能客服</text>
					<text>联系智能客服，解决您出单时遇到的问题</text>
				</view>
			</view>
		</view>
		<uni-Popup :show="qrCodeshow" @close='qrCodeshow=false' headerTitle="企业微信客服">
			<template #content>
				<view class="dis f-c a-c weComCustomerService">
					<view class="dis a-c j-c  qrcode" style="position: relative;">
						<image :src="paycodeimg" mode="widthFix"></image>
					</view>
					<view class="btn mt-4 dis a-c j-c">
						保存到相册
					</view>
				</view>

			</template>
		</uni-Popup>
	</view>
</template>

<script>
	import QR from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
				qrCodeshow: false,
				paycodeimg: "",
				supportStaffUrl: "",
			}
		},
		onShow() {

		},
		async onLoad() {
			this.paycodeimg = QR.createQrCodeImg('312232131', {
				size: parseInt(300) //二维码大小  
			})
			let res = await this.$http.get('/organization/wechat/customerService/manage/find/link')
			if (res.code == 200) {
				this.supportStaffUrl = res.data;
			}

		},
		methods: {
			//客服机器人跳转
			virtualAssistant() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			getWechatCustomer() {
				if (plus) { // 确保在App环境下
					plus.runtime.openURL(this.supportStaffUrl);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {

		background-color: #F8F8F8;

		height: 100vh;

	}

	.weComCustomerService {
		padding: 40rpx 40rpx 20rpx;
		box-sizing: border-box;

		.btn {
			width: 100%;
			height: 80rpx;
			background: #FDE935;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-size: 30rpx;
		}
	}

	.qrcode {
		width: 174px;
		height: 174px;
		padding: 10px;
		margin-top: 16px;
		border-radius: 4px;
	}

	.qrcode image {
		width: 174px;
		height: 174px;
	}


	.faqSection {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 34rpx;
			color: #333;
			font-weight: bold;
		}

		.cellText {
			border: 1rpx solid #EEEEEE;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 4rpx;

			.issue {
				font-size: 30rpx;
				color: #333;
				margin-bottom: 15rpx;
			}

			.content {
				font-size: 28rpx;
				color: #999;
			}
		}
	}

	.helpDesk {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 34rpx;
			color: #333;
			font-weight: bold;
		}

		.item {
			border: 1rpx solid #EEEEEE;
			padding: 18rpx 18rpx 18rpx 18rpx;
			box-sizing: border-box;
			border-radius: 4rpx;

			.image {
				width: 100rpx;
				height: 100rpx;
				background: rgba(253, 233, 53, 0.7);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 14rpx;

				image {
					width: 72rpx;
					height: 72rpx;

				}
			}

			.cell {
				text:first-child {
					font-size: 30rpx;
					color: #333;
					margin-bottom: 15rpx;
				}

				text:last-child {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
</style>