<template>
	<view class="pages" :style="containerStyle">
		<u-navbar title="商家合作" :border-bottom="false" :background="bgc" back-icon-color="#3D3D3D" title-color='#3D3D3D'
			title-size='36' height='44'></u-navbar>

		<view class="addmeng" :id="type == 1 ? 'active' : ''">
			<view class="addname">
				<view class="">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uduwg26lodmeSs8K4AF3" mode=""></image>
					您的姓名
				</view>
				<input type="text" placeholder="请输入您的真实姓名" @focus="focusone" @blur="blurone" v-model="name"/>
			</view>
			<view class="addname">
				<view class="">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uduwg26lodmeSs8K4AF3" mode=""></image>
					您的手机号
				</view>
				<input type="text" placeholder="请输入您的手机号" @focus="focustwo" @blur="blurtwo" v-model="tel"/>
			</view>
			<view class="addname">
				<view class="">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uduwg26lodmeSs8K4AF3" mode=""></image>
					了解信息
				</view>
				<input type="text" placeholder="请输入您想了解的信息" @focus="focusthr" @blur="blurthr" v-model="msg"/>
			</view>
			<view class="tit">
				请输入您的真实有效信息，我们将在第一时间联系您
			</view>
			<view class="button" v-if="tjflag" @click="btntj">
				马上加盟  立即赚钱
			</view>
			<view class="button" v-else>
				马上加盟  立即赚钱
			</view>
			<view class="botwz" @click="btnxq">
			     《商家合作角色权益与职责》
			</view>
		</view>


		<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
			<image style="width: 100%;height: 100vh;"
				src="https://api.ccttiot.com/smartmeter/img/static/ufnAAnuAD7GhhA1EFXXL" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					// backgroundColor: "#8883f0",
				},
				name:'',
				tel:'',
				msg:'',
				tjflag:true,
				type:'',
			}
		},
		onLoad() { 
           this.getuserinfo()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		methods: {	
			focusone(){
				this.type = 1
			},
			blurone(){
				this.type = ''
			},
			focustwo(){
				this.type = 1
			},
			blurtwo(){
				this.type = ''
			},
			focusthr(){
				this.type = 1
			},
			blurthr(){
				this.type = ''
			},
			
			
			btnxq(){
				uni.navigateTo({
					url:'/page_fenbao/sjhzxq'
				})
			},
			
			getuserinfo() {
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
					
					} else if(res.code == 401){
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				})
			},
             btntj(){
				this.tjflag = false
				if(this.name == ''){
					uni.showToast({
						title: '真实姓名不能为空',
						icon: 'none',
						duration: 1000
					})
					this.tjflag = true
				}else if(this.tel == ''){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 1000
					})
					this.tjflag = true
				}else if(this.msg == ''){
					uni.showToast({
						title: '了解信息不能为空',
						icon: 'none',
						duration: 1000
					})
					this.tjflag = true
				}else{
					let data = {
						name:this.name,
						mobile:this.tel,
						content:this.msg
					}
					this.$u.post("/app/mchApply/submit",data).then(res => {
						 if(res.code == 200){
							 uni.showToast({
							 	title: '申请成功',
							 	icon: 'success',
							 	duration: 1000
							 })
							 setTimeout(()=>{
							 	this.tjflag = true
							 	uni.navigateBack()
							 },1000)
						 }else{
							 uni.showToast({
							 	title: res.msg,
							 	icon: 'none',
							 	duration: 1000
							 })
							 this.tjflag = true
						 }
					})
				}
			 }

		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-title {
		padding-bottom: 15rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}

	page {
		background-color: #F7FAFE;
	}
	.botwz{
		margin-top: 20rpx;
		color: #8883F0;
		font-size: 32rpx;
		width: 100%;
		text-align: center;
	}
	#active{
		position: fixed;
		bottom: 300rpx !important;
		left: 50%;
		transform: translateX(-50%);
	}
    .addmeng{
		width: 750rpx;
		height: 715rpx;
		background: #F9FEFF;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 30rpx 30rpx 0 0;
		padding: 16rpx 40rpx;
		box-sizing: border-box;
		.tit{
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #8883F0;
			margin-top: 50rpx;
		}
		.button{
			width: 676rpx;
			height: 102rpx;
			background: #A3A0FF;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			font-size: 40rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 102rpx;
			margin-top: 48rpx;
		}
		.addname{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 36rpx;
			view{
				font-size: 32rpx;
				color: #3D3D3D;
			}
			input{
				width: 400rpx;
				height: 78rpx;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				border: 2rpx solid #979797;
				padding-left: 20rpx;
			}
			image{
				width: 14rpx;
				height: 14rpx;
				vertical-align:baseline;
				margin-right: 14rpx;
				margin-bottom: 4rpx;
			}
		}
	}
	.pages {
		width: 750rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}
</style>