<template>
	<view class="CommonProblem container">
		<view class="questionbox">
			<view class="questionList" v-for="(item,index) in questionList" :key="index"
				@tap="jumpClick(item.jumurl,item.jumtype)">
				<view class="line1">
					<view class="lable">
						<text>{{item.alable}}</text>
					</view>
					<view class="content">
						{{(index+1)+'.'+item.question}}
					</view>
				</view>
				<view class="line2">
					<view class="lable">
						<text>{{item.qlable}}</text>
					</view>
					<view class="content">
						<text>{{item.answer}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CommonProblem",
		data() {
			return {
				ImgUrl2: this.$ImgUrl + 'xzfalipay/',
				"questionList": [{
						"jumurl": "",
						"jumtype": "1",
						"qlable": "问",
						"alable": "答",
						"question": "学生在校外刷脸，会扣家长的钱么? ",
						"answer": "一脸通行服务仅限校园内使用。在不同的学校使用刷脸服务需要用户分别去开通。"
					},
					{
						"jumurl": "",
						"jumtype": "1",
						"qlable": "问",
						"alable": "答",
						"question": "学生刷脸的照片或信息会泄露么? ",
						"answer": "一脸通行集成了支付宝刷脸算法和支付能力，具有金融级准确性和安全性。人脸数据由支付宝管理，用户可以随时关闭刷脸服务。"
					},
					{
						"jumurl": "",
						"jumtype": "1",
						"qlable": "问",
						"alable": "答",
						"question": "孩子可以正常刷脸取餐，为什么会产生欠费? ",
						"answer": "校园刷脸采用“先取餐后扣费”的模式，账户余额不足就会产生欠费订单。请及时偿还，否则无法继续刷脸吃饭。"
					},
					{
						"jumurl": "",
						"jumtype": "1",
						"qlable": "问",
						"alable": "答",
						"question": "为什么有订单刷脸时间和扣款时间不一致? ",
						"answer": "为保障孩子及时就餐，只要账户未欠款，孩子刷脸成功后就可以先取餐，由于学校网络原因，扣款时间可能晚于刷脸时间。"
					},
					{
						"jumurl": "",
						"jumtype": "1",
						"qlable": "问",
						"alable": "答",
						"question": "开通刷脸时，提示“相同名称的孩子已存在”怎么办？",
						"answer": "平台安全合规限制，一个支付宝账号，不能绑定重名的孩子。出现该情况的原因是，您的支付宝账号使用其他证件号绑定了同名孩子，需要在刷脸服务管理中，关闭之前的开通记录，才能使用新的证件号进行开通刷脸服务。"
					},
					{
						"jumurl": "",
						"jumtype": "1",
						"qlable": "问",
						"alable": "答",
						"question": "跳转到一脸通行小程序采脸时，为什么会提示：ISV操作学校水平受限？",
						"answer": "您在开通时刷脸服务时，选择输入的学校未配置支付宝一脸通行服务，请检查选择的学校信息是否正确，或者联系学校工作人员修改学校配置信息。"
					},
					{
						"jumurl": "",
						"jumtype": "1",
						"qlable": "问",
						"alable": "答",
						"question": "一脸通行刷脸支付支持信用卡和花呗支付吗？",
						"answer": "因支付宝平台安全合规限制，不支持信用卡与花呗。"
					}
				]
			};
		},
		onLoad: function() {
			this.GetQuestionList()
		},
		methods: {
			// 获取问题列表
			async GetQuestionList() {
				try {
					uni.showLoading({
						title: "请稍后",
						// #ifndef MP-ALIPAY
						mask: true,
						// #endif
					})
					const [err, data] = await uni.request({
						url: this.ImgUrl2 + 'question.json',
					})
					console.warn(data)
					if (Array.isArray(data.questionList)) {
						this.questionList = data.questionList
					}
					uni.hideLoading()
				} catch (error) {
					console.warn(error)
					uni.showToast({
						icon: "error",
						title: error.message
					})
				}
			},
			// 扩展跳转
			jumpClick(jumurl, jumtype) {
				if (!jumurl) {
					return
				}
				switch (jumtype) {
					case '1':
						uni.navigateTo({
							url: jumurl,
							fail: () => {
								uni.switchTab({
									url: jumurl
								})
							}
						})
						break;
					case '2':
						uni.navigateTo({
							url: '/pages_subpack/pages/ClsWeekReport/main?ExternalLink=' +
								encodeURIComponent(
									jumurl)
						});
						break;
					case '3':
						uni.navigateToMiniProgram({
							appId: jumurl
						});
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background: #F3F3F3;
	}

	.CommonProblem {
		padding-top: 24rpx;
		padding-bottom: 100rpx;

		.questionbox {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			margin: 0 auto;

			.questionList {
				padding-left: 32rpx;
				padding-top: 39rpx;
				border-bottom: 2rpx solid #E4E4E4;
				padding-bottom: 40rpx;

				.lable {
					width: 44rpx;
					height: 44rpx;


					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 44rpx;
					text-align: center;
				}

				.line1 {
					display: flex;
					// justify-content: space-between;

					.lable {
						background: #04B871;
					}

					.content {
						// height: 40rpx;
						width: 572rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						margin-right: 32rpx;
						margin-left: 22rpx;
					}
				}

				.line2 {
					display: flex;
					margin-top: 17rpx;
					// justify-content: space-between;

					.lable {
						background: #F9BA0C;
					}

					.content {
						width: 572rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						margin-right: 32rpx;
						margin-left: 22rpx;

					}
				}

			}
		}
	}
</style>