<template>
	<view class="page">
		<u-navbar title="加盟合作" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <image src="https://api.ccttiot.com/smartmeter/img/static/ua5pSrMa5JltazPSEOdI" mode="aspectFill" class="imgbj"></image>
        <view class="body">
        	<view class="name">
        		<text>* </text>  您的姓名 <input type="text" v-model="name" placeholder="请输入您的真实姓名"/>
        	</view>
			<view class="name">
				<text>* </text> 您的手机号 <input style="margin-left: 28rpx;" v-model="tel" type="text" placeholder="请输入您的手机号"/>
			</view>
			<view class="name">
				<text>* </text> 了解信息 <input type="text" v-model="xx" placeholder="请输入您想了解的信息"/>
			</view>
			<view class="shuom" style="margin-top: 80rpx;">* 请输入您的真实有效信息，我们将在第一时间联系您</view>
			<view class="shuom">* 如需及时了解，请直接电话咨询，客服人员将第一时 间解答</view>
			<view class="anniu">
				<view class="tijiao" @click="btntj">提交申请</view>
				<view class="telzixun" @click="btntel">电话咨询</view>
			</view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "",
                },
				name:'',
				tel:'',
				xx:''
			}
		},
		onLoad() {

		},
		methods: {
			// 点击拨打电话
			btntel(){
				uni.makePhoneCall({
					phoneNumber: '13774775741',
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
						uni.showToast({
							title: '取消拨打电话',
							icon: 'none'
						})
					}
				})
			},
			// 点击提交申请
			btntj(){
				if(this.name == ''){
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none',
						duration: 2000
					})
				}else if(this.tel == ''){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 2000
					})
				}else if(this.xx == ''){
					uni.showToast({
						title: '了解信息不能为空',
						icon: 'none',
						duration: 2000
					})
				}else{
					let data = {
						phone:this.tel,
						name:this.name,
						reserveInfo:this.xx
					}
					this.$u.post(`/app/intention`,data).then(res => {
						if(res.code == 200){
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		.body{
			width: 750rpx;
			height: 894rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0 0;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 20rpx 68rpx;
			box-sizing: border-box;
			.anniu{
				display: flex;
				justify-content: space-between;
				margin-top: 86rpx;
				view{
					width: 290rpx;
					height: 88rpx;
					background: #48893B;
					border-radius: 54rpx 54rpx 54rpx 54rpx;
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 88rpx;
				}
			}
			.shuom{
				font-size: 26rpx;
				color: #48893B;
				margin-top: 22rpx;
			}
			.name{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #3D3D3D;
				margin-top: 44rpx;
				text{
					color: red;
				}
				input{
					width: 400rpx;
					height: 78rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 2rpx solid #979797;
					line-height: 78rpx;
					padding-left: 20rpx; 
					box-sizing: border-box;
					margin-left: 58rpx;
				}
			}
		}
		.imgbj{
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

</style>