MeiMeiZhuan/pages/public/bindTel.vue

<template>
	<view class="page o-h">
		<view class="content bcf">
			<!-- logo -->
			<view class="ta-c">
				<image class="w80 h80 br5 logo" :src="img.logo" />
			</view>
			<view class="ta-c pb15 f18 fw500 pt5">龍信商城</view>
			<!-- 手机号 -->
			<view class="pl20 pr20">
				<sn-field v-model="data.phone" placeholder="请输入绑定手机号" >
					<image :src="img.user"
						class="w14 h18 mr15" slot="icon" />
				</sn-field>
			</view>
			<!-- 邀请码 -->
			<view class="pl20 pr20" v-if="app.state">
				<sn-field v-model="data.invite_code" placeholder="请输入邀请码" >
					<image :src="img.invite_code"
						class="w14 h18 mr15" slot="icon" />
				</sn-field>
			</view>
			<!-- 验证码 -->
			<view class="pl20 pr20">
				<sn-field v-model="data.verify_code" placeholder="请输入验证码" >
					<image :src="img.code"
						class="w14 h18 mr15" slot="icon" />
					<sn-get-code slot="button" @submit="getCode"></sn-get-code>
				</sn-field>
			</view>
			<!-- 服务政策，用户协议 -->
			<view class="d-f f14 agreement pt15">
				<sn-check-box class="mr10" v-model="check" />
				<view>查看并同意</view>
				<view class="money" @click="goPrivacy">《隐私政策》</view>
				<view>及</view>
				<view class="money" @click="goAgreement">《服务协议》</view>
			</view>
			<!-- 注册按钮 -->
			<view class="pl30 pr30 ml5 mr5 pt15">
				<sn-button round :color="check?'#FC5B62':'#999'" 
					size="large" @click.native="submit">绑定手机</sn-button>
			</view>
			<!-- 返回登录 -->
			<view class="pl30 pr30 ml5 mr5 pt20 pb30 ta-c f14 c3">
				<navigator open-type="navigateBack" hover-class="none">
					返回登录
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import SnGetCode from "@/components/getCode.vue"
	export default {
		onLoad(e){
			let _self = this
			_self.delta = e.delta*1
			_self.data = {invite_code:e.invite_code}
		},
		data(){
			return {
				data:{},
				img:this.Icon,
				phone:"",
				delta:1,
				check:false,
				isSubmit:false,
				app:this.$store.state.app
			}
		},
		components:{SnGetCode},
		methods: {
			//前往隐私政策
			goPrivacy(){
				// uni.navigateTo({
				// 	url:"/pages/user/privacy"
				// })
			},
			//前往用户协议
			goAgreement(){
				// uni.navigateTo({
				// 	url:"/pages/user/agreement"
				// })
			},
			getCode(d){
				let _self = this
				let data = {
					phone:_self.data.phone
				}
				d.sendCode.call(d.t,data)
			},
			submit(){
				let _self = this
				if(_self.isSubmit){
					return
				}
				let wxinfo = JSON.parse(uni.getStorageSync("wxinfo"))
				let d = _self.data
				wxinfo.userInfo.tel = d.phone
				wxinfo.userInfo.invite_code = d.invite_code
				wxinfo.userInfo.verify_code = d.verify_code
				console.log("绑定信息",JSON.stringify(wxinfo))
				if(!d.phone){
					_self.$api.msg("手机号不能为空")
					return
				}
				if(!d.verify_code){
					_self.$api.msg("验证码不能为空")
					return
				}
				_self.isSubmit = true
				let data = {wx_info:JSON.stringify(wxinfo)}
				
				_self.request({url:"/Registered/wxLogin",data})
				.then(r=>{
					console.log(r)
					//存储token
					if(r.code==200){
						uni.setStorageSync("token",r.data)
						_self.$store.commit("changeState",{
							name:"hasLogin",
							value:true
						})
						_self.showToast({
							title:r.msg,
							success(){
								let tabbar = _self.$store.state.tabbar
								tabbar.index = 0
								_self.$store.commit("changeState",{
									name:"tabbar",
									value:tabbar
								})
								setTimeout(function(){
									uni.reLaunch({url:"/pages/home/index"})
								},100)
							}
						})
					}
					_self.isSubmit = false
				})
				.catch(()=>{
					_self.isSubmit = false
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.agreement{
		justify-content: center;
	}
	.page{
		height:100vh;
		background-image:url("http://lxscimg.liuniu946.com/2019-10-30_5db8eff363eb2.png");
		background-size:cover;
		background-color:#fff;
	}
	
	.content{
		margin:200rpx 30rpx 0 30rpx;
		border-radius:20rpx;
		box-shadow:0 0 20rpx rgba(0,0,0,.1);
	}
	
	.logo{
		margin-top:-100rpx;
	}
	.money{
		color:$base-color;
	}
</style>