8 changed files with 214 additions and 14 deletions
@ -0,0 +1,18 @@ |
|||
<template> |
|||
<view> |
|||
<web-view class="webview" src="https://www.yuque.com/docs/share/2de362e1-33fb-460a-92ca-5e8ef57f6d59?# 《时物链条用户协议》"></web-view> |
|||
<!-- <u-modal title="时物链条用户协议" v-model="showAgreement" show-cancel-button @confirm="$emit('confirm')" @cancel="$emit('cancel')"> |
|||
<iframe |
|||
src="https://www.yuque.com/docs/share/2de362e1-33fb-460a-92ca-5e8ef57f6d59?# 《时物链条用户协议》" |
|||
frameborder="0" |
|||
scrolling="no" |
|||
style="width: 100%;height: 100%" |
|||
></iframe> |
|||
</u-modal> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -1,8 +1,159 @@ |
|||
<template> |
|||
</template> |
|||
<template> |
|||
<view class="u-p-l-50 u-p-r-50 u-p-t-30"> |
|||
<u-form :model="form" ref="signUpForm" :error-type="['message']"> |
|||
<u-form-item label="手机号码" prop="phone" label-width="160"> |
|||
<u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input> |
|||
</u-form-item> |
|||
|
|||
<script> |
|||
</script> |
|||
<u-form-item label="图形验证码" prop="verificationCodeValue" label-width="160"> |
|||
<u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input> |
|||
<image slot="right" :src="renderData.imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image> |
|||
</u-form-item> |
|||
|
|||
<u-form-item label="验证码" prop="smsCode" label-width="160"> |
|||
<u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input> |
|||
<u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="mixinInit.setCode" class="u-m-r-20">粘贴</u-button> |
|||
<u-button slot="right" size="mini" v-if="mixinInit.dataObj.showInterval">{{ mixinInit.dataObj.interval }}</u-button> |
|||
</u-form-item> |
|||
|
|||
<u-form-item label="用户名" prop="account" label-width="160"> |
|||
<u-input placeholder="请输入用户名" v-model="form.account" type="text"></u-input> |
|||
</u-form-item> |
|||
|
|||
<u-form-item label="密码" prop="password" label-width="160"> |
|||
<u-input :password-icon="true" type="password" v-model="form.password" placeholder="请输入密码"></u-input> |
|||
</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 flex-direction u-m-t-30"> |
|||
<view class="flex flex-nowrap u-m-b-20"> |
|||
<u-checkbox v-model="renderData.checked" @change="changeChecked"></u-checkbox> |
|||
<view class="agreement-text"> |
|||
已阅读并同意使用 |
|||
<span class="text-blue" @click="openPage('/pages/user/agreement')">《时物链条用户协议》</span> |
|||
</view> |
|||
</view> |
|||
<p class="text-blue u-m-l-70">没有套路，真实需求</p> |
|||
</view> |
|||
|
|||
<view class="flex flex-nowrap"> |
|||
<view class="flex-1"></view> |
|||
<view class="u-m-t-60 text-blue" @click="openPage('/pages/user/accountLogin')">已有账号，去登录</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, reactive } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { onReady } from '@dcloudio/uni-app'; |
|||
import userMixin from '@/hooks/user/userMixin' |
|||
|
|||
const store = useStore(); |
|||
const mixinInit = userMixin(); |
|||
const signUpForm = ref(null); |
|||
|
|||
const form = reactive({ |
|||
phone: '', |
|||
verificationCodeValue: '', // 图形验证码值 |
|||
smsCode: '', |
|||
account: '', |
|||
password: '' |
|||
}) |
|||
const renderData = reactive({ |
|||
verificationCodeId: '', // 图形验证码id |
|||
imageBase64: '', // 图形验证码图片 |
|||
checked: false |
|||
}) |
|||
|
|||
onReady(() => { |
|||
signUpForm.value.setRules(mixinInit.rules); |
|||
}); |
|||
|
|||
getImageCode(); // 获取图形验证码 |
|||
|
|||
const submit = () => { |
|||
signUpForm.value.validate(valid => { |
|||
if (valid) { |
|||
signUp() |
|||
} |
|||
}); |
|||
} |
|||
|
|||
async function signUp() { |
|||
uni.$ui.showLoading(); |
|||
try { |
|||
if (!renderData.checked) { |
|||
uni.$ui.showToast('请阅读并同意使用用户协议'); |
|||
return; |
|||
} |
|||
|
|||
const params = { |
|||
account: form.account, |
|||
password: form.password, |
|||
phone: form.phone, |
|||
smsCode: form.smsCode |
|||
}; |
|||
|
|||
let res = await uni.$u.api.signup(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); |
|||
} |
|||
} |
|||
|
|||
// 获取图形验证码 |
|||
async function getImageCode() { |
|||
uni.$ui.showLoading(); |
|||
try { |
|||
const data = await uni.$u.api.getImageCode(); |
|||
renderData.imageBase64 = data.imageBase64 || ''; |
|||
renderData.verificationCodeId = data.verificationCodeId || ''; |
|||
uni.$ui.hideLoading(); |
|||
} catch (error) { |
|||
uni.$ui.hideLoading(); |
|||
uni.$ui.showToast(error); |
|||
} |
|||
} |
|||
|
|||
// 改变用户协议选中状态 |
|||
function changeChecked() { |
|||
renderData.checked = !renderData.checked; |
|||
} |
|||
|
|||
function openPage(url) { |
|||
uni.navigateTo({ |
|||
url: url |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.code-image { |
|||
width: 200rpx; |
|||
height: 70rpx; |
|||
} |
|||
|
|||
.text-blue { |
|||
color: #0081ff; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue