<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color" ></navigationStyle>
	<view class="yijian">
		<view class="top">

		</view>
		<view class="inp">
			<textarea class="le" cols="30" rows="10" placeholder="您填写的信息越全，问题越可有效的解决哟~" v-model="yijian"></textarea>
		<!-- 	<view class="box">
				<img class="i" src="https://www.jiubaotongxue.love/image/demo79.png" alt="" />
			</view> -->
		</view>
		<view class="inp2">
			<input class="io" type="text" name="" id="" placeholder="请填写您的手机号,方便工作人员与你反馈" v-model="tel" maxlength=11 >
		</view>
		<view class="btnSumit" @click="btnSumit">
			提交
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import{getAdd} from '../../api/api'
	const titles = ref('意见反馈')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const yijian = ref("")
	const tel = ref("")
	
	const btnSumit = ()=>{
		let phoneNumberPattern = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
		if(tel.value.match(phoneNumberPattern)){
			getAdd({phoneNumber:tel.value,recommendation:yijian.value}).then(res=>{
				console.log(res);
				if(res.code===200){
					uni.showToast({
						icon:"none",
						title:"提交成功",
						duration:1000,
						success: (result) => {
							uni.navigateTo({
								url:"/pages/my/my"
							})
						}
					})
				}
			})
		}else{
			uni.showToast({
				icon:"none",
				title:"请输入正确的手机号码",
				duration:1000
			})
		}
		
	}
</script>

<style lang="scss">
	.yijian {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f1f4fb;

		.top {
			width: 100%;
			height: 11%;
			position: relative;
		}

		.inp {
			width: 690rpx;
			height: 572rpx;
			background: #FFFFFF;
			transform: translateX(-50%);
			margin-left: 50%;
			margin-top: 24rpx;
			border-radius: 20rpx;

			.le {
				display: block;
				width: 100%;
				height: 372rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding: 20rpx;
				font-size: 30rpx;

			}

			.box {
				width: 136rpx;
				height: 136rpx;
				position: relative;
				margin-top: 30rpx;
				border: 1rpx solid #eee;
				margin-left: 30rpx;
				border-radius: 10rpx;

				.i {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 50;
				}
			}
		}
		.inp2{
			width: 690rpx;
			height: 100rpx;
			background: #FFFFFF;
			transform: translateX(-50%);
			margin-left: 50%;
			margin-top: 30rpx;
			border-radius: 20rpx;
			.io{
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding-left: 30rpx;
				font-size: 30rpx;
			}
		}
		.btnSumit{
			width: 80%;
			height: 100rpx;
			background: linear-gradient(276deg, #1C9FF7 0%, #1275F7 100%);
			box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(5, 128, 255, 0.2);
			border-radius: 30rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			color: white;
			margin-top: 260rpx;
			transform: translateX(-50%);
			margin-left: 50%;

		}
	}
</style>