chuangte_bike_newxcx/page_user/zhaoshang.vue

<template>
	<view class="page">
		<u-navbar title="商家合作" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
			height='50'></u-navbar>
		<image src="https://api.ccttiot.com/smartmeter/img/static/uh2gk0yeb3YjWP1dSp7a" class="bj" mode=""></image>
		<view class="video">
			<!-- <video src="https://api.ccttiot.com/smartmeter/img/static/ubSSfeAihTk6WgtvSbLL"></video> -->
			<image src="https://api.ccttiot.com/smartmeter/img/static/ut7avxrNWB124fSVG0zz" mode=""></image>
		</view>
		<view class="box">
			<view class="one">
				<view class="name">
					1.是否接触过该项目？
				</view>
				<u-dropdown>
					<u-dropdown-item v-model="value1" :title="txt1" @change="btnsb" :options="options1"></u-dropdown-item>
				</u-dropdown>
			</view>	
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					2.您的姓名
				</view>
				<input type="text" v-model="name" placeholder="请输入您的真实姓名"/>
			</view>	
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					3.您的联系方式
				</view>
				<input type="text" v-model="tel" placeholder="请输入您的手机号"/>
			</view>	
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					4.您的意向合作城市
				</view>
				<input type="text" v-model="city" placeholder="请输入您的意向合作城市"/>
			</view>	
		    
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					5.您想了解的消息
				</view>
				<input type="text" v-model="xiaoxi" placeholder="请输入您想知道的消息"/>
			</view>	
		</view>
		<view class="bot">
			<view class="wz">
				请输入您的真实有效信息，我们将在第一时间联系您
			</view>
			<view class="anniu" @click="btnjiameng">
				马上加盟 立即赚钱
			</view>
		</view>
		<image style="margin-top: 30rpx;width: 750rpx;height: 4100rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uev4iZTDXvYTTxjFjCb5" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
               bgc: {
               	  backgroundColor: "#4297F3",
               }, 
			   txt1:'是否接触过该项目',
			   value1: '',
			   options1: [
			   		{
			   			label: '从未接触过',
			   			value: 0,
			   		},{
			   			label: '有接触过',
			   			value: 1,
			   		}
			   	],
				name:'',
				tel:'',
				xiaoxi:'',
				toufanglist:[],
				city:''
			}
		},
		onShow() {
			// this.getuserinfo()
		},
		methods: {
			// 点击加盟
			btnjiameng(){
					let data = {
						name:this.name,
						mobile:this.tel,
						content:this.xiaoxi,
						hasDevice:this.value1,
						city:this.city
					}
					console.log(data);
					this.$u.post(`/app/mchApply`,data).then(res =>{
						if(res.code == 200){
							uni.showToast({
								title: '申请成功',
								icon: 'success',
								duration:2000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration:2000
							})
						}
					})
			},
			
			// 选择使用场景
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
				this.toufanglist = e
			},
			// 选择经营模式
			btnjy(){
				this.txt2 = this.options2[this.value2].label
			},
			// 选择是否拥有设备
			btnsb(){
				console.log(this.value1);
				this.txt1 = this.options1[this.value1].label
			},
			// 获取个人信息
			getuserinfo() {
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
						
					} else {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	/deep/ .u-dropdown__content__mask{
		background: transparent !important;
	}
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		padding-bottom: 22rpx;
	}
	/deep/ .u-dropdown__menu{
		z-index: 0 !important;
	}
	/deep/ .u-dropdown__menu__item{
		background-color: #F0F0F0;
		border-radius: 10rpx;
		justify-content: end !important;
		padding: 0 48rpx;
		box-sizing: border-box;
	}
	/deep/ .u-dropdown__menu__item__text{
		width: 500rpx;
	}
	/deep/ .u-checkbox__icon-wrap--checked{
		background-color: #F0F0F0 !important;
		border-color: #F0F0F0 !important;
	}
	/deep/ .u-checkbox{
		margin-right: 30rpx;
	}
	.bot{
		margin: auto;
		margin-top: 60rpx;
		.wz{
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #2069B8;
		}
		.anniu{
			width: 676rpx;
			height: 101rpx;
			background: #4297F3;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			line-height: 101rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 20rpx;
			text-align: center;
		}
	}
	.box{
		width: 694rpx;
		max-height: 1462rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 30rpx;
		padding: 44rpx 36rpx;
		box-sizing: border-box;
		.one{
			.name{
				font-weight: 600;
				font-size: 34rpx;
				color: #3D3D3D;
				margin-bottom: 32rpx;
			}
			input{
				width: 626rpx;
				height: 90rpx;
				background: #F0F0F0;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				line-height: 90rpx;
				padding-left: 48rpx;
				box-sizing: border-box;
			}
		}
	}
	.video{
		width: 694rpx;
		height: 390rpx;
		margin: auto;
		border-radius: 20rpx;
		overflow: hidden;
		video{
			width: 694rpx;
			height: 390rpx;
		}
	}
	page {
		background: #4297F3;
		max-height: 200vh;
		overflow: scroll;
		padding-bottom: 60rpx;
		box-sizing: border-box;
		padding-top: 30rpx;
	}
</style>