<template>
  <view class="commonProblem">
    <view class="itemWrapper">
		<view class="title">使用规则</view>
		<view class="content">
			<view @click="toDetail('使用规则', 1, 1)">余额储存在哪里？</view>
			<view @click="toDetail('使用规则',1, 2)">为什么我的余额充足却消费失败？</view>
		</view>
	</view>
	<view class="itemWrapper">
		<view class="title">充值问题</view>
		<view class="content">
			<view @click="toDetail('充值问题',2, 1)">充值失败后我的钱去哪了？</view>
			<view @click="toDetail('充值问题',2, 2)">充值的上限是多少？</view>
		</view>
	</view>
	<view class="itemWrapper">
		<view class="title">提现问题</view>
		<view class="content">
			<view @click="toDetail('提现问题',3, 1)">充值金额是否可以提现？</view>
			<view @click="toDetail('提现问题',3, 2)">提现申请成功后，多久可以到账？</view>
			<view @click="toDetail('提现问题',3, 3)">为什么线上提现会失败？</view>
		</view>
	</view>
	<view class="itemWrapper">
		<view class="title">其他问题</view>
		<view class="content">
			<view  @click="toDetail('其他问题',4, 1)">为什么电子校园卡激活收到银行的短信？</view>
			<view  @click="toDetail('其他问题',4, 2)">电子校园卡内的余额为什么会调整更新？</view>
		</view>
	</view>
  </view>
</template>

<script>
import { Dialog, Toast } from "vant";
import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue";
import cityData from "@/common/js/city.js";
var gHost = "https://" + window.location.host;
if (window.location.protocol != "https:") {
  gHost = "https://fpdev.xiaopay.net";
  // gHost = "/api";
}

export default {
  components: {
  },
  name: "commonProblem",
  data() {
    return {
	}
  },
  onLoad: function (options) {
   
  },
  created: function () {},
  mounted: function () {},
  methods: {
	// 跳转问题详情界面
    toDetail(title, parent, sub){
		uni.navigateTo({
			url: `../problemDetail/problemDetail?title=${title}&parent=${parent}&sub=${sub}`
		})
	}
  },
};
</script>

<style lang="scss">
html,
body,
page {
  width: 750rpx;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.commonProblem {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	.itemWrapper {
		width: calc(100% - 64rpx);
		margin: 30rpx 32rpx 0;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		.title {
			width: 180rpx;
			font-size: 30rpx;
			align-self: center;
			font-weight: 600;
			color: #333333;
		}
		.content {
			width: calc(100% - 200rpx);
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			color: #888888;
			line-height: 50rpx;
			margin-left: 20rpx;
		}
	}
	.itemWrapper:first-child {
		margin-top: 50rpx;
	}
}
</style>
