kaiguan-zfb/page_fenbao/statulist/merchant/index.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>
			<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/uWvCbMLwjsdweRjOO1ZW" 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="50"></u-icon>
				<textarea name="" placeholder="详细输入您想了解的信息" id="" v-model="cont" cols="30" rows="10"></textarea>
			</view>
			<view class="" style="width: 100%;text-align: center;color: red;font-size: 28rpx;margin-top: 20rpx;">
				<!-- 请填写真实信息，感谢您的配合！ -->
			</view>
			<!-- <view class="" style="width: 100%;color: red;font-size: 28rpx;margin-top: 20rpx;">
				审核通过后，即可创建店铺，店铺中的设备可在地图中被发现！
			</view> -->
			<view class="tijiao" v-if="tjflag" @click="btnshenq"> 
				提交申请
			</view>
			<view class="tijiao" v-else>
				提交申请
			</view>
			
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                name:'',
				phone:'',
				cont:'',
				tjflag:true
			}
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		onShow() {
			this.getuserinfo()
		},
		methods: {
			getuserinfo() {
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
						
					} else {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},
			
            btnshenq(){
				if(this.name == ''){
					uni.showToast({
						title: '真实姓名不能为空',
						icon: 'none',
						duration: 1000
					});
				}else if(this.phone == ''){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 1000
					});
				}else{
					this.tjflag = false
					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.reLaunch({
								url:'/pages/login/login'
							})
							this.tjflag = true
						}else if(res.msg == '商家不允许重复申请') {
							uni.showToast({
								title: '商家不允许重复申请',
								icon: 'none',
								duration: 1000
							})
							setTimeout(()=>{
								this.tjflag = true
							},1000)
						}else if(res.code == 500){
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000
							})
							this.tjflag = true
						}else{
							uni.showToast({
								title: '申请成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(()=>{
								this.tjflag = true
								uni.navigateBack()
							},1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		padding-bottom: 22rpx;
	}
	
	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: 120rpx;
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #fff;
		}
		.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: #333;
					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: #333;
				}
			}
			.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: #333;
				}
			}
		}
	}
</style>