<template>
<view class="help">
	<view class="helpContent">
		<view class="helpTitle">帮助中心</view>
		<view class="helpItem" v-for="(item,index) in itemList" :key="index">
			<view class="helpMain">
				<u-icon name="arrow-left" class="zhishi" color="#dfdbdb" size="28"></u-icon>
				<image :src="item.icon" class="titleIcon" mode="widthFix"></image>
				<view class="mainText">
					<text>{{item.title}}</text>
					<u-icon name="arrow-right" v-if="item.title!=''" color="#8B8B8B" size="22"></u-icon>
				</view>
			</view>
			<view class="mainItem">
				<view class="itemText"  v-for="(p,i) in item.children" :key="i">{{p}}</view>
				<!-- <view class="itemText">如何申请换货</view>
				<view class="itemText">退换货地址如何查看1111111</view>
				<view class="itemText">退换货地址如何查看45643567543567</view> -->
			</view>
		</view>
	</view>
	<view class="footer">
		<view class="btn">
			<image src="/static/news1/n7.png" mode="widthFix"></image>
			<text>在线客服（9:00-22:00）</text>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [
					{
						title:'物流问题',
						icon:'/static/news1/n1.png',
						children:['发货失效','发货时间','催促物流','修改收货地址']
					},
					{
						title:'',
						icon:'',
						children:['延迟发货','物流状态不更新','商品验货与签收','配送快递']
					},
					{
						title:'售后问题',
						icon:'/static/news1/n2.png',
						children:['如何申请退货','如何申请换货','退换货运费政策','退换货何时退款']
					},
					{
						title:'',
						icon:'',
						children:['退换货政策','极速售后服务','维修政策','退换货地址如何查看']
					},
					{
						title:'订单问题',
						icon:'/static/news1/n3.png',
						children:['修改订单','取消订单','价格保护','发票服务']
					},
					{
						title:'',
						icon:'',
						children:['商城理的商品1234567','商城实物与图片3456768','违规订单处理123456','话费充值说明']
					},
					{
						title:'活动问题',
						icon:'/static/news1/n4.png',
						children:['余额','秒杀说明','预售说明','积分规则']
					},
					{
						title:'',
						icon:'',
						children:['红包说明','plus会员','分销员','团购说明']
					},
					{
						title:'风控规则',
						icon:'/static/news1/n5.png',
						children:['风控规则','','','']
					},
					{
						title:'服务政策',
						icon:'/static/news1/n6.png',
						children:['隐私政策','商务合作','会员协议','分销协议']
					},
					{
						title:'',
						icon:'',
						children:['常见问题','','退换货细则','争议处理判定标准']
					},
				],
				
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	min-height:100%;
	padding-bottom: 120upx;
}
.help{
	
	height: 100%;
	
	.helpContent{
		margin: 20upx;
		background: #fff;
		border-radius: 20upx;
		overflow: hidden;
		padding:20upx;
		.helpTitle{
			font-size: 32upx;
			color:#000000;
			padding: 20upx 0;
			// border-bottom: 3upx solid #dfdbdb;
		}
		.helpItem{
			display: flex;
			color: #333333;
			font-size: 28upx;
			border-top:1px solid #dfdbdb;
		
			.helpMain{
				width: 180upx;
				height:180upx;
				border-right:1px solid #dfdbdb;
				flex-shrink:0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: relative;
				
				.titleIcon{
					width: 50upx;
					height:auto;
				}
				.mainText{
					margin-top:8upx;
					text{
						color: #333333;
						font-size: 28upx;
						margin-left:5upx;
					}
				}
				.zhishi{
					position: absolute;
					right: -5px;
					background: #fff;
					top: 50%;
					transform: translateY(-50%);
					
				}
			}
			.mainItem{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				width: calc(100% - 90px);
				.itemText{
					width: 50%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					text-align: center;
					// padding: 24upx 16upx;
					height: 90upx;
					line-height: 90upx;
					padding:0 10upx;
				}
				:nth-child(2n){
					// border-bottom:1px solid #dfdbdb;
					border-left:1px solid #dfdbdb;
					// border-right:1px solid #dfdbdb;
				}
				:last-child{
					border-top:1px solid #dfdbdb;
					// border-left:1px solid #dfdbdb;
				}
				:nth-child(3){
					border-top:1px solid #dfdbdb;
				}
			}
		}
	}
	.footer{
		position: fixed;
		z-index:9;
		bottom:0;
		width: 100%;
		background-color: #fff;
		.btn{
			height: 100upx;
			margin:10upx 30upx;
			background: #FE6048;
			border-radius: 28px 28px 28px 28px;
			opacity: 1;
			display: flex;
			align-items: center;
			
			justify-content: center;
			image{
				width:54upx;
				height:auto;
			}
			text{
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				margin-left:100upx;
				
			}
		}
	}
}
</style>