h5短信相关功能开发

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages.json

@@ -75,13 +75,13 @@
 				"disableScroll": true
 			}
 		},
-		// {
-		// 	"path": "pages/firstLogin",
-		// 	"style": {
-		// 		"navigationBarTitleText": "首次登录",
-		// 		"disableScroll": true
-		// 	}
-		// },
+		{
+			"path": "pages/firstLogin",
+			"style": {
+				"navigationBarTitleText": "首次登录",
+				"disableScroll": true
+			}
+		},
 
 		// 消息（tabBar #2）
 		{
@@ -175,6 +175,20 @@
 				"backgroundColor": "#FFFFFF"
 			}
 		},
+		{
+			"path": "pages/my/changePhone",
+			"style": {
+				"navigationBarTitleText": "修改手机号",
+				"backgroundColor": "#FFFFFF"
+			}
+		},
+		{
+			"path": "pages/my/unboundwx",
+			"style": {
+				"navigationBarTitleText": "解绑微信",
+				"backgroundColor": "#FFFFFF"
+			}
+		},
 
 		// 通用页面
 		{

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/firstLogin.vue

@@ -0,0 +1,118 @@
+<template>
+	<view class="page">
+		<view class="content">
+			<l-input v-model="phone" placeholder="请输入手机号" left :disabled="type != 'sendCode'">
+				<l-icon slot="title" type="phone" />
+			</l-input>
+			<view class="inputBtn">
+				<l-input v-model="verifycode" placeholder="请输入验证码" left password>
+					<l-icon slot="title" type="lock" />
+				</l-input>
+				<view class="btn" style="margin: 0 0;" @click="sendCode" v-if="type == 'sendCode'">
+					发送验证码
+				</view>
+				<view class="btn" @click="()=>{time==0&&sendCode()}" v-if="type != 'sendCode'" :style="{opacity:time==0?1:0.5}">
+					<text>重新发送{{time?'( '+time+ 's'+' )' :''}}</text>
+				</view>
+			</view>
+			<view class="btn" style="width: 100%;margin-top: 24px;" @click="checkverifycode">登录</view>
+		</view>
+	</view>
+</template>
+
+<script>
+// import moment from 'moment';
+export default{
+	data() {
+		return {
+			type:'sendCode',
+			phone:'',
+			verifycode:'',
+			time: 0,
+			timeT: '',
+			
+			codeType:'firstlogin',
+		}
+	},
+	destroyed() {
+		this.timeT && clearInterval(this.timeT)
+	},
+	methods:{
+		// 发送验证码
+		sendCode(){
+			if(!this.phone){
+				this.TOAST('请输入手机号！')
+				return
+			}else if(!/^1[0-9]{10}$/.test(this.phone)){
+				this.TOAST('手机号格式不正确！')
+				return
+			}
+			this.LOADING()
+			this.HTTP_POST('learun/adms/usernologin/sendcode',{username:this.phone,codeType:this.codeType}).then(res=>{
+				this.HIDE_LOADING()
+				if(!res){
+					return
+				}
+				this.type = 'checkCode'
+				
+				this.time = 60
+				this.timeT = setInterval(() => {
+					this.time--
+					if (this.time == 0) {
+						this.type = 'sendCode'
+						clearInterval(this.timeT)
+						this.timeT = ''
+						return
+					}
+				}, 1000);
+			})
+		},
+		// 验证码校验
+		async checkverifycode() {
+			if(!this.phone){
+				this.TOAST('请输入手机号！')
+				return
+			}else if(!/^1[0-9]{10}$/.test(this.phone)){
+				this.TOAST('手机号格式不正确！')
+				return
+			}
+			if (!this.verifycode) {
+				this.TOAST('请输入验证码');
+				return
+			}
+			this.LOADING('正在校验...')
+			let codeResult = await this.HTTP_POST('learun/adms/usernologin/logincodeverify', {
+				mobile: this.phone,
+				verifycode: this.verifycode,
+				codeType: this.codeType
+			})
+			this.HIDE_LOADING()
+			if(!codeResult)return
+			// 登录
+			let result = await this.HTTP_POST('learun/adms/user/loginByMobile',{username:this.phone})
+			if(!result)return
+			this.SET_STORAGE("token",result.baseinfo.token)
+			location.href = "http://" + window.location.host
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.page {
+	    height: 100vh;
+	    width: 100%;
+	    display: flex;
+	    justify-content: center;
+	    align-items: center;
+	}
+	.content{
+		width: 80%;
+		padding-bottom: 60px;
+	}
+	.inputBtn{
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+	}
+</style>

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/my.vue

@@ -33,10 +33,14 @@
         <l-icon type="edit" color="blue" />
         修改密码
       </l-list-item>
-	  <l-list-item @click="unbound" arrow>
+	  <l-list-item @click="goTo('unboundwx')" arrow>
 		  <image src="@/static/unbound.png" mode="" style="color: #0081ff;width: 14px;height: 14px;margin: 0 10px 0 5px;"></image>
 		解绑微信
 	  </l-list-item>
+	  <l-list-item @click="goTo('changePhone')" arrow>
+		<l-icon type="edit" color="blue" />
+		修改手机号
+	  </l-list-item>
     </l-list>
 
     <!-- 关于菜单 -->

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/my/changePhone.vue

@@ -0,0 +1,114 @@
+<template>
+	<view class="page">
+		<view class="content" v-if="type == 'sendCode'">
+			<l-input v-model="phone" placeholder="请输入手机号" left>
+				<l-icon slot="title" type="phone" />
+			</l-input>
+			<view class="btn" @click="sendCode">发送验证码</view>
+		</view>
+		<view class="content" v-if="type == 'checkCode'">
+			<l-input v-model="phone" placeholder="请输入手机号" left disabled>
+				<l-icon slot="title" type="phone" />
+			</l-input>
+			<l-input v-model="verifycode" placeholder="请输入验证码" left password>
+				<l-icon slot="title" type="lock" />
+			</l-input>
+			<view style="margin-top: 4px;color: color: #606266;">
+				未收到验证码？<text :style="{color:time==0?'#409EFF':'#999'}" @click="()=>{if(time==0)type='sendCode'}">重新发送</text>
+				{{time?'( '+time+ 's'+' )' :''}}
+			</view>
+			<view class="btn" @click="checkverifycode">下一步</view>
+		</view>
+	</view>
+</template>
+
+<script>
+// import moment from 'moment';
+export default{
+	data() {
+		return {
+			type:'sendCode',
+			phone:'',
+			verifycode:'',
+			time: 0,
+			timeT: '',
+			
+			form:{
+				newpassword:'',
+				newpassword1:'',
+			},
+			codeType:'modifymobile',
+		}
+	},
+	destroyed() {
+		this.timeT && clearInterval(this.timeT)
+	},
+	methods:{
+		// 发送验证码
+		sendCode(){
+			if(!this.phone){
+				this.TOAST('请输入手机号！')
+				return
+			}else if(!/^1[0-9]{10}$/.test(this.phone)){
+				this.TOAST('手机号格式不正确！')
+				return
+			}
+			this.LOADING()
+			this.HTTP_POST('learun/adms/user/sendcode',{username:this.phone,codeType:this.codeType}).then(res=>{
+				this.HIDE_LOADING()
+				if(!res){
+					return
+				}
+				this.type = 'checkCode'
+				
+				this.time = 60
+				this.timeT = setInterval(() => {
+					this.time--
+					if (this.time == 0) {
+						clearInterval(this.timeT)
+						this.timeT = ''
+						return
+					}
+				}, 1000);
+			})
+		},
+		// 验证码校验
+		async checkverifycode() {
+			if (!this.verifycode) {
+				this.TOAST('请输入验证码');
+				return
+			}
+			this.LOADING('正在校验...')
+			let codeResult = await this.HTTP_POST('learun/adms/user/logincodeverify', {
+				mobile: this.phone,
+				verifycode: this.verifycode,
+				codeType: this.codeType
+			})
+			this.HIDE_LOADING()
+			if(!codeResult)return
+			// this.type = 'modifymobile'
+			let result = await this.HTTP_POST('learun/adms/user/updateMobile?data='+this.phone)
+			if(!result)return
+			this.TOAST('修改成功')
+			setTimeout(()=>{
+				this.CLEAR_STORAGE()
+				this.NAV_TO('/pages/login')
+			},500)
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.page {
+	    height: 100vh;
+	    width: 100%;
+	    display: flex;
+	    justify-content: center;
+	    align-items: center;
+	}
+	.content{
+		width: 80%;
+		padding-bottom: 60px;
+	}
+</style>

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/my/unboundwx.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="page">
+		<view class="content" v-if="type == 'sendCode'">
+			<l-input v-model="phone" placeholder="请输入手机号" left>
+				<l-icon slot="title" type="phone" />
+			</l-input>
+			<view class="btn" @click="sendCode">发送验证码</view>
+		</view>
+		<view class="content" v-if="type == 'checkCode'">
+			<l-input v-model="phone" placeholder="请输入手机号" left disabled>
+				<l-icon slot="title" type="phone" />
+			</l-input>
+			<l-input v-model="verifycode" placeholder="请输入验证码" left password>
+				<l-icon slot="title" type="lock" />
+			</l-input>
+			<view style="margin-top: 4px;color: color: #606266;">
+				未收到验证码？<text :style="{color:time==0?'#409EFF':'#999'}" @click="()=>{if(time==0)type='sendCode'}">重新发送</text>
+				{{time?'( '+time+ 's'+' )' :''}}
+			</view>
+			<view class="btn" @click="checkverifycode">解绑微信</view>
+		</view>
+	</view>
+</template>
+
+<script>
+// import moment from 'moment';
+export default{
+	data() {
+		return {
+			type:'sendCode',
+			phone:'',
+			verifycode:'',
+			time: 0,
+			timeT: '',
+			
+			form:{
+				newpassword:'',
+				newpassword1:'',
+			},
+			codeType:'unbindwx',
+		}
+	},
+	destroyed() {
+		this.timeT && clearInterval(this.timeT)
+	},
+	methods:{
+		// 发送验证码
+		sendCode(){
+			if(!this.phone){
+				this.TOAST('请输入手机号！')
+				return
+			}else if(!/^1[0-9]{10}$/.test(this.phone)){
+				this.TOAST('手机号格式不正确！')
+				return
+			}
+			this.LOADING()
+			this.HTTP_POST('learun/adms/user/sendcode',{username:this.phone,codeType:this.codeType}).then(res=>{
+				this.HIDE_LOADING()
+				if(!res){
+					return
+				}
+				this.type = 'checkCode'
+				
+				this.time = 60
+				this.timeT = setInterval(() => {
+					this.time--
+					if (this.time == 0) {
+						clearInterval(this.timeT)
+						this.timeT = ''
+						return
+					}
+				}, 1000);
+			})
+		},
+		// 验证码校验
+		async checkverifycode() {
+			if (!this.verifycode) {
+				this.TOAST('请输入验证码');
+				return
+			}
+			this.LOADING('正在校验...')
+			let codeResult = await this.HTTP_POST('learun/adms/user/logincodeverify', {
+				mobile: this.phone,
+				verifycode: this.verifycode,
+				codeType: this.codeType
+			})
+			this.HIDE_LOADING()
+			if(!codeResult)return
+			this.unbound()
+		},
+		// 解绑微信
+		unbound(){
+			this.CONFIRM('提示', '确定要解绑微信账号？', true).then(res => {
+				if (res) {
+					this.LOADING('正在解绑…');
+					this.HTTP_POST('learun/adms/user/unbundWeiXin', null, '解绑失败').then(success => {
+						this.HIDE_LOADING();
+						if (!success) {
+							return
+						}
+						this.TOAST("解绑成功")
+						setTimeout(()=>{
+							this.CLEAR_GLOBAL()
+							this.RELAUNCH_TO('/pages/login')
+						},1000)
+					});
+				}
+			});
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.page {
+	    height: 100vh;
+	    width: 100%;
+	    display: flex;
+	    justify-content: center;
+	    align-items: center;
+	}
+	.content{
+		width: 80%;
+		padding-bottom: 60px;
+	}
+</style>

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/wxLogin.vue

@@ -31,6 +31,9 @@
       <l-input v-if="ready" v-model="password" placeholder="密码" password left>
         <l-icon slot="title" type="lock" />
       </l-input>
+	  <l-input v-if="ready" v-model="verifycode" placeholder="请输入验证码" left password>
+	  	<l-icon slot="title" type="lock" />
+	  </l-input>
       <l-button v-if="ready" @click="loginClick(null)" size="lg" color="blue" class="margin-top-sm block" block>确 认</l-button>
 	  <view class="otherLogin">
 	  	<navigator url="/pages/login" class="textBtn">常规登陆</text></navigator>
@@ -74,10 +77,11 @@ export default {
     return {
       username: '',
       password: '',
+	  verifycode:'',
 	  
 	  code:'',
 
-      ready: false,
+      ready: true,
       showApiRootSelector: false,
 
       currentApiRoot: '',
@@ -158,7 +162,7 @@ export default {
 				if(!success){
 					return
 				}
-				window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + success.appid + "&redirect_uri=" + encodeURIComponent('http://' + window.location.host + '/#/pages/wxLogin') + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
+				// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + success.appid + "&redirect_uri=" + encodeURIComponent('http://' + window.location.host + '/#/pages/wxLogin') + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
 			})
 		}
 	},