<template>
	<view class="page">
		<u-navbar title="商家合作" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='38'></u-navbar>
			<view class="title">
				请输入您的真实有效信息，我们将在第一时间联系 您
			</view>
        <view class="box">
        	<view class="name">
        		<!-- <image src="../../../static/image/a1.png" mode=""></image> -->
				<u-icon name="account" color="#8883F0" size="40"></u-icon>
				<input type="text" placeholder="请输入您的真实姓名" v-model="name" />
        	</view>
			<view class="photo">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uyQd0mrdyjuMZFMUx4sh" mode=""></image>
				<input type="text" placeholder="微信绑定手机号" v-model="phone" />
			</view>
			<view class="photos">
				<!-- <image src="../../../static/image/a1.png" mode=""></image> -->
				<u-icon name="file-text" color="#8883F0" size="40"></u-icon>
				<textarea name="" placeholder="详细输入您想了解的信息" id="" v-model="cont" cols="30" rows="10"></textarea>
			</view>
			
			<view class="tijiao" @click="btnshenq"> 
				提交申请
			</view>
			
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                name:'',
				phone:'',
				cont:''
			}
		},
		methods: {
            btnshenq(){
				if(this.name == ''){
					uni.showToast({
						title: '真实姓名不能为空',
						icon: 'none',
						duration: 1000
					});
				}else if(this.phone == ''){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 1000
					});
				}else{
					let data = {
						name:this.name,
						mobile:this.phone,
						content:this.cont
					}
					this.$u.post("/app/mchApply/submit",data).then(res => {
						if(res.code == 401){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}else if(res.msg == '商家不允许重复申请') {
							uni.showToast({
								title: '商家不允许重复申请',
								icon: 'none',
								duration: 1000
							})
						}else if(res.code == 500){
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000
							})
						}else{
							uni.showToast({
								title: '申请成功',
								icon: 'success',
								duration: 1000
							});
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		.title{
			width: 100%;
			height: 180rpx;
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #3D3D3D;
		}
		.box{
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 50rpx 50rpx 0rpx 0rpx;
			padding: 50rpx;
			box-sizing: border-box;
			.tijiao{
				width: 676rpx;
				height: 102rpx;
				background: linear-gradient( 90deg, #8883F0 0%, #837EEB 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				margin: auto;
				text-align: center;
				line-height: 102rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				position: fixed;
				bottom:40rpx;
				left: 50%;
				transform: translateX(-50%);
			}
			.photos{
				margin-top: 32rpx;
				width: 650rpx;
				height: 358rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
				display: flex;
				border-radius: 30rpx;
				padding-top: 38rpx;
				padding-left: 42rpx;
				text{
					width: 45rpx;
					height: 45rpx;
					margin-right: 34rpx;
					margin-bottom: 30rpx;
					top: -129rpx !important;
				}
				textarea{
					font-size: 30rpx;
					color: #9F9F9F;
					padding-right: 20rpx;
				}
			}
			.photo{
				margin-top: 32rpx;
				width: 650rpx;
				height: 118rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
				display: flex;
				border-radius: 30rpx;
				padding-top: 38rpx;
				padding-left: 42rpx;
				image{
					width: 45rpx;
					height: 45rpx;
					margin-right: 34rpx;
				}
				input{
					font-size: 30rpx;
					color: #9F9F9F;
				}
			}
			.name{
				width: 650rpx;
				height: 118rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
				display: flex;
				border-radius: 30rpx;
				padding-top: 38rpx;
				padding-left: 42rpx;
				text{
					width: 45rpx;
					height: 45rpx;
					margin-right: 34rpx;
					margin-bottom: 30rpx;
				}
				input{
					font-size: 30rpx;
					color: #9F9F9F;
				}
			}
		}
	}
</style>