9 changed files with 362 additions and 102 deletions
@ -0,0 +1,8 @@ |
|||||
|
<template> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -1,8 +1,132 @@ |
|||||
<template> |
<template> |
||||
|
<view class="u-p-l-50 u-p-r-50 u-p-t-30"> |
||||
|
<u-form :model="form" ref="loginForm" :error-type="['message']"> |
||||
|
<u-form-item label="手机号码" prop="phone" label-width="150"> |
||||
|
<u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<u-form-item label="图形验证码" prop="verificationCodeValue" label-width="150"> |
||||
|
<u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input> |
||||
|
<image slot="right" :src="imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<u-form-item label="验证码" prop="smsCode" label-width="150"> |
||||
|
<u-input @focus="mixinInit.hasvalue(form)" placeholder="请输入验证码" v-model="form.smsCode" type="text"> </u-input> |
||||
|
<u-button slot="right" type="primary" size="mini" v-show="mixinInit.showPaste" @click="mixinInit.setCode" class="u-m-r-20">粘贴</u-button> |
||||
|
<u-button slot="right" size="mini" v-if="mixinInit.showInterval">{{ mixinInit.interval }}</u-button> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<view class="flex flex-nowrap"> |
||||
|
<view class="flex-sub"></view> |
||||
|
<view class="u-m-t-30 u-font-12 text-gray-400" @click="openPage('/pages/user/forgetPassword')">忘记密码</view> |
||||
|
</view> |
||||
|
</u-form> |
||||
|
|
||||
|
<view class="u-m-t-50"> |
||||
|
<u-button @click="submit" type="primary">立即登录</u-button> |
||||
|
</view> |
||||
|
|
||||
|
<view class="flex justify-between"> |
||||
|
<view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/rigister')">新用户注册</view> |
||||
|
<view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/accountLogin')">用户名登录</view> |
||||
|
</view> |
||||
|
|
||||
|
<view style="margin-top: 200rpx;text-align: center; color: #999999;font-size: 35rpx;"> |
||||
|
快速登录 |
||||
|
</view> |
||||
|
<view style="text-align: center; margin-top: 20rpx;" @click="mixinInit.handleWxLogin"> |
||||
|
<image src="/common/img/weixinIcon.png" mode="" style="width: 85rpx;height: 85rpx;"></image> |
||||
|
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script setup> |
||||
|
import { ref, computed, reactive } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { onLoad, onReady } from '@dcloudio/uni-app'; |
||||
|
import userMixin from '@/hooks/user/userMixin' |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const mixinInit = userMixin(); |
||||
|
const loginForm = ref(null); |
||||
|
|
||||
|
const form = reactive({ |
||||
|
phone: '', |
||||
|
verificationCodeValue: '', |
||||
|
smsCode: '' |
||||
|
}); |
||||
|
const imageBase64 = ref(null); // 图形验证码图片 |
||||
|
const verificationCodeId = ref(null); // 图形验证码id |
||||
|
const data = {}; |
||||
|
const treeId = ref(null); |
||||
|
|
||||
|
getImageCode(); |
||||
|
|
||||
|
onReady(() => { |
||||
|
loginForm.value.setRules(mixinInit.rules); |
||||
|
}); |
||||
|
|
||||
|
const submit = () => { |
||||
|
loginForm.value.validate(valid => { |
||||
|
if (valid) { |
||||
|
login() |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 获取图形验证码 |
||||
|
async function getImageCode() { |
||||
|
uni.$ui.showLoading(); |
||||
|
try { |
||||
|
const data = await uni.$u.api.getImageCode(); |
||||
|
imageBase64.value = data.imageBase64 || ''; |
||||
|
verificationCodeId.value = data.verificationCodeId || ''; |
||||
|
uni.$ui.hideLoading(); |
||||
|
} catch (error) { |
||||
|
uni.$ui.hideLoading(); |
||||
|
uni.$ui.showToast(error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function login() { |
||||
|
uni.$ui.showLoading(); |
||||
|
try { |
||||
|
const params = reactive({ |
||||
|
client: 1, |
||||
|
data: { |
||||
|
identifier: form.phone, |
||||
|
credential: form.smsCode, |
||||
|
}, |
||||
|
type: 1, |
||||
|
}); |
||||
|
|
||||
|
let res = await uni.$u.api.signin(params); |
||||
|
store.commit('user/setToken', res.token); |
||||
|
store.commit('user/setUser', res); |
||||
|
uni.$storage.setStorageSync('anyringToken', res.token || ''); |
||||
|
uni.$storage.setStorageSync('user', JSON.stringify(res)); |
||||
|
|
||||
|
uni.$ui.hideLoading(); |
||||
|
|
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/index/index' |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
uni.$ui.hideLoading(); |
||||
|
uni.$ui.showToast(error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function openPage(url) { |
||||
|
uni.navigateTo({ |
||||
|
url: url |
||||
|
}) |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style lang="scss" scoped> |
||||
|
.code-image { |
||||
|
width: 200rpx; |
||||
|
height: 70rpx; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,8 @@ |
|||||
|
<template> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
Loading…
Reference in new issue