zx_flk_app/pages/phoneLogin/phoneLogin.vue

<template>
	<view class="container">
		<view class="content-top">
			<img src="https://qiniu.bms16.com/FikV2SyfTEYQCgXjObAwwtkK27Hk" />
			<view>欢迎来到{{appConfig.app_name}}</view>
		</view>
		<view class="content-input flex-row flex-between">
			<input type="number" name="phone" @input="inputPhone" placeholder="请输入手机号" placeholder-style="color:#CBD1DD" />
			<view @tap="bindGetVerifyCode" class="send-code">
				<text v-if="codeGetting" class="g-text">重新获取 ·{{curTime}}S </text>
				<text v-else class="b-text">获取验证码</text>
			</view>
		</view>
		<view class="content-input">
			<input type="number" name="verify_code" @input="inputVerifyCode" placeholder="请输入验证码" placeholder-style="color:#CBD1DD" />
		</view>
		<view v-if="contract_id==1&&phone.length==11&&verify_code.length==4" @tap="bindLoginSubmit" class="submit-btn">登录</view>
		<view v-else class="disable-btn">登录</view>
		
		<view class="contract-item flex-row">
			<view @tap="bindContractInfo">
				<img class="check-icon" :src="contract_id==1?'https://qiniu.bms16.com/FjLudtM29xwqgJh5kUKR9kyhK0Lu':'https://qiniu.bms16.com/FuQZipm9g7wX6CyGQBCjK2RTXfbW'" />
			</view>
			<view @tap="bindContractInfo" style="padding-left: 8rpx;">已阅读并同意 
				<text style="color:#0074FF" @click.native.stop="bindContractToAgreement">{{'《' + appConfig.app_name + '电动车租赁用户协议》'}}</text>和
				<text style="color:#0074FF" @click.native.stop="bindContractToPrivacy">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	var config = require('../../common/config.js');
	var common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	export default {
		data() {
			return {
				codeGetting: false,
				curTime: 60,
				phone: '',
				verify_code: '',
				timer: null,
				contract_id: 0,
				accountsData: {},
				app_name: '',
				appConfig: null,
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			
		},
		
		onUnload: function () {
			clearInterval(this.timer)
		},
		
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			const me = this
			let appConfig = storage.getAppConfig()
			me.setData({
				appConfig: appConfig
			})
		},
		computed: {
			// 计算属性用于判断是否可以登录
			canLogin() {
				return this.phone.length === 11 && this.verify_code.length === 4;
			}
		},
		methods: {
			inputPhone(e) {
				this.phone = e.detail.value
			},
			
			bindGetVerifyCode(e) {
				if (this.codeGetting) {
					return
				}
				if (!this.phone) {
					common.simpleToast('请输入手机号码');
					return;
				}
				if (!common.isPhone(this.phone)) {
					common.simpleToast('请检测您的手机号码是否正确');
					return;
				}
				this.setData({
					codeGetting: true
				})
				const me = this
				me.timer = setInterval(function () {
					let curTime = me.curTime - 1
					if (curTime === 0) {
						clearTimeout(me.timer);
						me.setData({
							codeGetting: false,
							curTime: 60
						})
					} else {
						me.setData({
							curTime: curTime
						})
					}
				}, 1000)
				const accountInfo = wx.getAccountInfoSync()
				http.getApi(config.API_USER_VERIFY_CODE, {
					appid: accountInfo.miniProgram.appId,
					phone: this.phone
				}, function (resp) {
					if (resp.data.code === 200) {
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},
			
			inputVerifyCode(e) {
				this.verify_code = e.detail.value
			},
			
			bindContractInfo(e) {
				if (this.contract_id == 1) {
					this.setData({
						contract_id: 0
					})
				} else {
					this.setData({
						contract_id: 1
					})
				}
			},
			
			bindContractToAgreement() {
				uni.navigateTo({
					url: '/pages/contract/contract?contract_id=270',
					success: function (res) {},
					fail: function (res) {},
					complete: function (res) {},
				})
			},
			
			bindContractToPrivacy() {
				uni.navigateTo({
					url: '/pages/contract/contract?contract_id=102',
					success: function (res) {},
					fail: function (res) {},
					complete: function (res) {},
				})
			},
			
			bindLoginSubmit: function (e) {
				const phone = this.phone
				const verify_code = this.verify_code
				const me = this
				common.loading()
				uni.login({
					success: function (res) {
						const accountInfo = uni.getAccountInfoSync()
						var postData = {
						  code: res.code,
						  appid: accountInfo.miniProgram.appId,
						  phone: phone,
						  verify_code: verify_code,
						}
						http.getApi(
						//#ifdef APP-PLUS
						config.API_USER_LOGIN_V2,
						//#endif
						//#ifdef MP-WEIXIN
						config.API_USER_LOGIN_V2,
						//#endif
						//#ifdef MP-ALIPAY
						config.API_USER_LOGIN_ALI,
						//#endif
						postData, function (resp) {
							uni.hideLoading()
							if (resp.data.code === 200) {
								me.headimg = resp.data.data.baseInfo.headimg;
								me.user_name = resp.data.data.baseInfo.user_name;
								const accountsData2 = {
									code: res.code,
									appid: accountInfo.miniProgram.appId,
									verify_code: verify_code,
									headimg: me.headimg,
									user_name: me.user_name,
									phone: phone,
								}
				
								storage.setUserToken(resp.data.data.baseInfo.token)
								common.simpleToast('登录成功')
								uni.reLaunch({
									url: '/pages/index/index',
								})
								const app = getApp();
								let accounts = app.globalData.accountManagement
								accounts.push(accountsData2)
								if (accounts.length >0) {
									accounts= accounts.filter((item,index,arr) => arr.findIndex(p => p.phone === item.phone)===index)
									uni.setStorage({
										key: "accountManagement",
										data: accounts
									})
								}
							} else {
								common.simpleToast(resp.data.msg)
							}
						}, function (error) {
							uni.hideLoading()
						})
					},
				})
			},
			
		}
	};
</script>

<style>
	@import './phoneLogin.css';
</style>