wechat_yxcl/pages/bindingBack/bindingBack.vue

<template>
	<div class="login-box" >
		<div>
			<div class="logo-box">
				<image src="../../static/images/logos.png" mode="aspectFit" style="width: 81upx;height: 81upx;"></image>
			</div>
			
			<h3>用户绑定</h3>
			<div>
				<div class="input-title">综管平台账号</div>
				<div class="input-content" >
					<input class="uni-input" type="text" placeholder="请输入综管平台账号" focus  @input='keydown' v-model="saveData.userPassport"/>
				</div>
				<div class="input-title">综管平台密码</div>
				
				<div class="input-content" >
					<input class="uni-input" type="password" v-model="saveData.userPassword" @input='keydown'  placeholder="请输入综管平台密码" @key.enter="nextStep">
				</div>

				<button class="login-botton" type="primary" :loading="ispost" :class="{'disabled':post1}" @tap="postRegister">确认绑定</button>

				
			</div> 
		</div>
		<!-- <div class="agreement">
			注册即代表阅读并同意<span @tap="goAgreement">服务条款</span>
		</div> -->

	</div>
</template>

<script>
import { mapGetters,mapMutations } from 'vuex'
export default {
  data () {
    return {

      moduleAuthority: [],

      ispost: false,
      post1: true,
      post2: true,

      saveData: {
			action_type: 'Registe',
			mobile: '',
			userPassport: '',
			userPassword: '',
			login_type :5
      },
		bodyWidth: '',
		bodyHeight: ''
    }
  },
	computed:{
		...mapGetters({'user':'getUser'})
	},
  onLoad(option) {
	let _this = this
     uni.getSystemInfo({
	 	success: function (res) {
			_this.bodyWidth = res.windowWidth
			_this.bodyHeight = res.screenHeight ? (res.screenHeight+ res.statusBarHeight) : (res.screenHeight + res.windowHeight+ res.windowBottom)
	 	
	 	}
	 });

  },
  methods: {
	  ...mapMutations(['setUser']),
	keydown() {
		if(this.saveData.userPassport.length>1 && this.saveData.userPassword.length>1) {
			this.post1 = false
		}else{
			this.post1 = true
		}
	},
	recordBrowsing() { // 记录用户绑定账户操作
		let _this = this 
		_this.$request.post({
			action_type:'recordUserOperate',
			operateType: 1000
		})
	},

    postRegister () {
		if(this.post1){
			return false
		}
        let _this = this
        let _data = _this.saveData
		_data.mobile = _this.user.Membership_Phone
		
		if(_data.userPassport==='' || _data.userPassword==='') {
			uni.showToast({
				title: '请输入需要绑定的综管信息',
				icon: 'none'
			})
			return false
		}
		_this.ispost= true

	   
        // uni.showLoading({title:'正在提交'})
        _this.$request.post(_data).then(res => {
			// uni.hideLoading()
            
			if (res.ResultCode==='100') {
				_this.ispost= true
				_this.recordBrowsing()
				let result = res.Data
				
				let userData = result
				_this.setUser(userData) // 存储该用户信息

				uni.reLaunch({
					url:'/pages/index/index'
				})
			}else {
				uni.showToast({
					title: res.ResultDesc,
					icon: 'none'
				})
				
			}
			_this.ispost= false
           
        })
    }
  }
}
</script>

<style scoped>
	.pagebody {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}
	.status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
	.top_view{
        height: var(--status-bar-height);
        width: 100%;
        position: fixed;
        top: 0;
		left: 0;
		background-color: #fff;
		z-index: 999;
    }
    .code-btn.disabled {
    	background-color: rgba(255, 255, 255, 0);
     
    	color: #666 ;
    }
    .login-botton.disabled {
    	background-color: #c5c5c5;
    	
    }
	.login-box {
		padding: 60upx 60upx 30upx 60upx;
		background-color: #fff;
		overflow-y: auto;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}
	page {
		overflow: hidden;
	}
	
    .logo-box {
        width: 80upx;
		height: 80upx;
        margin-bottom: 20upx;
		display: flex;
		overflow: hidden;
    }

    h3 {

        font-size: 48upx;
        margin-bottom: 40upx;
		line-height: 1.5;
    }
	.input-title {

		font-size: 24upx;
		padding-top: 40upx;
		font-weight: bold;
	}
    .input-content {
        display: flex;
        height: 100upx;
        border-bottom: 1px solid #ececec;
        align-items: center;
    }
	.uni-input{
		font-size: 28upx;
		background-color: unset;
		padding: 0;
	}
	
	.uni-input input{
        height: 80upx !important;
        line-height: 80upx !important;
    }
    input[type="password"] {
        height: 80upx !important;
        line-height: 80upx !important;
    }
    .text-b1 {
        color: #ececec
    }
    .code-btn {
        background-color: transparent;
        color: #2689ee;
        font-size: 28upx;
		padding: 0 12upx;
    }
    button::after {
        border: 0;
    }
    .login-botton {
        margin-top: 60upx;
        margin-bottom: 20upx;
        color: #fff;
        height: 80upx;
        line-height: 80upx;
        font-size: 28upx;
	
		text-align: center;
		border-radius: 8rpx;
        background-color: #2689ee !important;
    }
    .login-tab {
        text-align: center;
        margin-top: 50upx;
        color: #666;
    }
	.agreement{
		text-align: center;
		font-size: 15px;
		color: #999;
		margin-bottom: 20px;
	}
	.agreement span{
		color: #2689ee;
	}
</style>