634 lines
15 KiB
Vue
634 lines
15 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<!-- <image src="/static/common/img/16530269846087107196.png" class="image" /> -->
|
||
<u-navbar title="注册"></u-navbar>
|
||
<view class="flex-col group">
|
||
<text class="text">手机号注册</text>
|
||
<view class="flex-col group_7">
|
||
<view class="flex-col">
|
||
<!-- <text class="text_1">手机号</text> -->
|
||
<view class="text-wrapper flex-row view" style="padding: 0">
|
||
<u-input type="number" v-model="userName" placeholder="请输入手机号" maxlength="11" :disabled="disabled" />
|
||
|
||
</view>
|
||
</view>
|
||
<view class="flex-col group_6" v-show="showCap">
|
||
<view class="text-wrapper flex-row view" style="padding: 0">
|
||
<u-input type="text" v-model="captchaCode" placeholder="请输入图形验证码" />
|
||
<image :src="captchaImg" class="captcha-img" @click="refreshCaptcha" />
|
||
</view>
|
||
</view>
|
||
<view class="flex-col group_6">
|
||
<!-- <text class="text_1">短信验证码</text> -->
|
||
<view class="text-wrapper flex-row view" style="padding: 0">
|
||
<u-input type="text" v-model="passWord" placeholder="请输入短信验证码" />
|
||
<u-button style='background:transparent;' class="custom-style" :disabled="!(send == '获取验证码')" @click="sendCode">{{ send }}
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-button class="flex-col items-center text-wrapper_1" throttle-time="1000" type="primary" shape="circle"
|
||
@click="login"><text class="text_7">注册</text></u-button>
|
||
<view class="justify-center group_1">
|
||
<text class="text_8">已有账号</text>
|
||
<navigator class="text_9" url="/pages/login/login/login">立即登录</navigator>
|
||
</view>
|
||
<!-- <view class="flex-row group_2">
|
||
<u-checkbox-group class="section_1" :size="34">
|
||
<u-checkbox v-model="agreement"> </u-checkbox>
|
||
</u-checkbox-group>
|
||
<view class="group_3">
|
||
<text class="text_10">已阅读并同意</text>
|
||
<text class="text_11">《用户服务协议》</text>
|
||
<text class="text_12">＆</text>
|
||
<text class="text_13">《用户隐私保护政策》</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import md5 from "js-md5";
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
userName: "",
|
||
passWord: "",
|
||
agreement: false,
|
||
send: "获取验证码",
|
||
disabled: false,
|
||
captchaCode: "", // 图形验证码
|
||
captchaImg: "", // 验证码图片
|
||
captchaId: "", // 验证码ID
|
||
showCap: false,
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
// this.refreshCaptcha();
|
||
},
|
||
methods: {
|
||
// 刷新验证码
|
||
refreshCaptcha() {
|
||
const timestamp = Date.now();
|
||
this.captchaId = timestamp;
|
||
uni.request({
|
||
url: 'http://sl.vrgon.com:8003/api/Token/Captcha?id=' + timestamp,
|
||
method: 'GET',
|
||
responseType: 'arraybuffer',
|
||
headers: {
|
||
'Accept': '*/*',
|
||
},
|
||
success: (res) => {
|
||
if (res.statusCode === 200 && res.data) {
|
||
// res.data 是 ArrayBuffer 类型，将其转换为 Blob
|
||
const blob = new Blob([res.data], { type: 'image/gif' }); // 根据实际图片类型调整
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
// 将 Blob 读取为 Data URL (Base64 编码的图片)
|
||
this.captchaImg = reader.result;
|
||
};
|
||
reader.onerror = (e) => {
|
||
console.error("FileReader error:", e);
|
||
this.$refs.uToast.show({
|
||
title: '图片转换失败',
|
||
type: "error",
|
||
});
|
||
};
|
||
reader.readAsDataURL(blob);
|
||
} else {
|
||
console.error('获取验证码失败，状态码或数据异常:', res);
|
||
this.$refs.uToast.show({
|
||
title: '获取验证码失败',
|
||
type: "error",
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('验证码请求失败:', err);
|
||
this.$refs.uToast.show({
|
||
title: '获取验证码失败，请检查网络或CORS设置',
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 获取验证码
|
||
sendCode() {
|
||
var reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$", "g"); //手机号
|
||
if (this.userName === "" || !reg.test(this.userName)) {
|
||
this.$refs.uToast.show({
|
||
title: "请输入正确的手机号码",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// if (!this.captchaCode) {
|
||
// this.$refs.uToast.show({
|
||
// title: "请输入图形验证码",
|
||
// type: "error",
|
||
// });
|
||
// return;
|
||
// }
|
||
|
||
// 生成13位时间戳
|
||
const timestamp = Date.now();
|
||
// 生成签名
|
||
const base64Key = btoa('xiaoyout!#@12345');
|
||
const signStr = this.userName + timestamp + base64Key;
|
||
const sign = md5(signStr);
|
||
|
||
this.$u.apiList.GetPhoneValidateCode({
|
||
phone: this.userName,
|
||
t: timestamp.toString(),
|
||
sign: sign,
|
||
captchaCode: this.showCap ? this.captchaCode : '' ,
|
||
captchaId: this.showCap ? this.captchaId.toString() : ''
|
||
}).then((res)=>{
|
||
//中间数字加密
|
||
// let result =this.userName.replace(this.userName.substring(3,7),"****")
|
||
// this.userName = result
|
||
this.disabled = true
|
||
// this.$tips("发送成功");
|
||
this.$refs.uToast.show({
|
||
title: "发送成功",
|
||
type: "success",
|
||
});
|
||
var second = 60;
|
||
this.send = second + "秒后重试";
|
||
var time = setInterval(() => {
|
||
this.send = second + "秒后重试";
|
||
second--;
|
||
if (second <= 0) {
|
||
this.disabled = false
|
||
this.send = "获取验证码";
|
||
clearInterval(time);
|
||
}
|
||
}, 1000);
|
||
})
|
||
.catch((err)=>{
|
||
console.log('err-----',err)
|
||
if(err?.data?.needcap && !this.showCap) {
|
||
this.showCap = true
|
||
this.$refs.uToast.show({
|
||
title: '请输入图形验证码',
|
||
type: "error",
|
||
});
|
||
this.refreshCaptcha()
|
||
return
|
||
}
|
||
this.$refs.uToast.show({
|
||
title: err.error,
|
||
type: "error",
|
||
});
|
||
this.refreshCaptcha()
|
||
})
|
||
},
|
||
|
||
login() {
|
||
// uni.navigateTo({
|
||
// url: "/pages/login/confirmPwd/confirmPwd?phone="+this.userName,
|
||
// });
|
||
// return
|
||
var reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
|
||
if (this.userName === "" || !reg.test(this.userName)) {
|
||
// this.$tips("请输入正确的手机号码", "error");
|
||
this.$refs.uToast.show({
|
||
title: "请输入正确的手机号码",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
if (this.passWord === "") {
|
||
// return this.$tips("请输入验证码", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请输入验证码",
|
||
type: "error",
|
||
});
|
||
}
|
||
// if (!this.agreement) {
|
||
// return this.$tips("请同意用户服务协议及用户隐私保护政策", "error");
|
||
// }
|
||
const data = {
|
||
phone:this.userName,
|
||
code : this.passWord
|
||
}
|
||
this.$u.apiList.IsPhoneCode(data).then((res)=>{
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: "/pages/login/confirmPwd/confirmPwd?phone="+this.userName+"&code="+this.passWord,
|
||
});
|
||
}, 1000);
|
||
})
|
||
.catch((err)=>{
|
||
// this.$tips(err.error, "error");
|
||
this.$refs.uToast.show({
|
||
title: err.error,
|
||
type: "error",
|
||
});
|
||
})
|
||
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.custom-style {
|
||
color: #3CB5FB !important;
|
||
padding: 0 !important;
|
||
height: 70rpx !important;
|
||
line-height: 60rpx !important;
|
||
}
|
||
|
||
.custom-style::after {
|
||
border: none;
|
||
}
|
||
|
||
.page {
|
||
padding-bottom: 0.015rem;
|
||
background-color: rgb(255, 255, 255);
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
|
||
.image {
|
||
flex-shrink: 0;
|
||
align-self: flex-start;
|
||
width: 102%;
|
||
}
|
||
|
||
.group {
|
||
padding: 0.7rem 0.29rem;
|
||
|
||
.text {
|
||
align-self: left;
|
||
// color: rgb(46, 155, 255);
|
||
color: #000;
|
||
font-size: 0.22rem;
|
||
font-family: PingFang;
|
||
line-height: 0.17rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.group_7 {
|
||
margin-top: 0.29rem;
|
||
|
||
.text-wrapper {
|
||
border: solid 2rpx #dcdfe6;
|
||
border-radius: 100rpx;
|
||
background: #f6f8fa;
|
||
}
|
||
|
||
.group_6 {
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.text_1 {
|
||
margin-left: 0.01rem;
|
||
align-self: flex-start;
|
||
color: rgb(51, 51, 51);
|
||
font-size: 0.15rem;
|
||
font-family: PingFang;
|
||
line-height: 0.14rem;
|
||
}
|
||
|
||
.view {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 50rpx !important;
|
||
}
|
||
}
|
||
|
||
.text_6 {
|
||
margin-left: 0.01rem;
|
||
margin-top: 0.13rem;
|
||
align-self: flex-start;
|
||
color: rgb(25, 140, 255);
|
||
font-size: 0.13rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
|
||
.text-wrapper_1 {
|
||
margin: 50rpx 0rpx 40rpx;
|
||
padding: 50rpx 0 50rpx;
|
||
// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
|
||
background: #3cb4fb;
|
||
box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
|
||
border-radius: 100rpx;
|
||
|
||
.text_7 {
|
||
color: rgb(255, 255, 255);
|
||
font-size: 32rpx;
|
||
font-family: PingFang;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.group_1 {
|
||
margin-top: 0.12rem;
|
||
|
||
.text_8 {
|
||
color: rgb(102, 102, 102);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
|
||
.text_9 {
|
||
margin-left: 0.035rem;
|
||
color: rgb(25, 140, 255);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
}
|
||
|
||
.group_2 {
|
||
margin-top: 0.36rem;
|
||
justify-content: center;
|
||
|
||
.section_1 {
|
||
flex-shrink: 0;
|
||
width: 0.17rem;
|
||
}
|
||
|
||
.group_3 {
|
||
margin-left: 0.11rem;
|
||
height: 0.18rem;
|
||
line-height: 0.18rem;
|
||
font-size: 0;
|
||
|
||
.text_10 {
|
||
color: rgb(153, 153, 153);
|
||
font-size: 0.11rem;
|
||
font-family: PingFang;
|
||
}
|
||
|
||
.text_11 {
|
||
color: rgb(25, 140, 255);
|
||
font-size: 0.11rem;
|
||
font-family: PingFang;
|
||
}
|
||
|
||
.text_12 {
|
||
color: rgb(102, 102, 102);
|
||
font-size: 0.11rem;
|
||
font-family: PingFang;
|
||
}
|
||
|
||
.text_13 {
|
||
color: rgb(25, 140, 255);
|
||
font-size: 0.11rem;
|
||
font-family: PingFang;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.captcha-img {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
<!-- <template>
|
||
<view class="flex-col page">
|
||
<view class="flex-col group">
|
||
<text class="text">注册账号</text>
|
||
<view class="flex-col group_1">
|
||
<view class="flex-col group_2">
|
||
<u-select
|
||
@click="show = true"
|
||
:mode="'single-column'"
|
||
v-model="show"
|
||
:list="shoolList"
|
||
@confirm="confirm"
|
||
@cancel="cancel"
|
||
></u-select>
|
||
<view class="justify-between section_1" @click="show = true">
|
||
<text
|
||
:style="{ color: this.shoolname !== '' ? '#000' : '#c1c4cc' }"
|
||
>{{ this.shoolname != "" ? this.shoolname : "请选择学校" }}</text
|
||
>
|
||
<image
|
||
src="/static/common/img/select.png"
|
||
class="image_1"
|
||
/>
|
||
</view>
|
||
<view class="text-wrapper flex-col">
|
||
<u-input
|
||
v-model="userName"
|
||
type="text"
|
||
placeholder="请输入用户名"
|
||
/>
|
||
</view>
|
||
<view class="text-wrapper flex-col view_1">
|
||
<u-input
|
||
v-model="passWord"
|
||
type="password"
|
||
placeholder="请输入密码"
|
||
/>
|
||
</view>
|
||
<view class="text-wrapper flex-col">
|
||
<u-input
|
||
v-model="twopassWord"
|
||
type="password"
|
||
placeholder="请确认密码"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row group_3">
|
||
<view class="flex-col text-wrapper_1">
|
||
<u-input
|
||
v-model="Code"
|
||
type="text"
|
||
placeholder="请输入验证码"
|
||
/>
|
||
<text class="text_6"></text>
|
||
</view>
|
||
<view class="flex-col items-end text-wrapper_2">
|
||
<text>6789</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<u-button class="flex-col items-center text-wrapper_3" @click="register" :throttle-time='1000'>注册</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
userName: "",
|
||
passWord: "",
|
||
twopassWord: "",
|
||
Code: "",
|
||
shoolname: "",
|
||
shoolList: [
|
||
{
|
||
value: "1",
|
||
label: "学校一",
|
||
},
|
||
{
|
||
value: "2",
|
||
label: "学校二",
|
||
},
|
||
{
|
||
value: "3",
|
||
label: "学校三",
|
||
},
|
||
{
|
||
value: "4",
|
||
label: "学校四",
|
||
}
|
||
],
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
;
|
||
},
|
||
methods: {
|
||
confirm(e) {
|
||
this.shoolname = "";
|
||
e.map((val, index) => {
|
||
this.shoolname += this.shoolname == "" ? val.label : "-" + val.label;
|
||
});
|
||
},
|
||
cancel(e) {
|
||
;
|
||
},
|
||
register(){
|
||
uni.showLoading({
|
||
title: '注册中'
|
||
});
|
||
|
||
setTimeout(()=>{
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '注册成功',
|
||
duration: 2000
|
||
});
|
||
},1000)
|
||
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="css">
|
||
.text-wrapper {
|
||
margin-top: 0.095rem;
|
||
padding: 0.03rem 0.17rem;
|
||
background-color: rgb(246, 247, 250);
|
||
border-radius: 0.1rem;
|
||
}
|
||
.text_2 {
|
||
margin-left: 0.17rem;
|
||
}
|
||
.page {
|
||
padding: 0.045rem 0 1.5rem;
|
||
background-color: rgb(255, 255, 255);
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
.image {
|
||
margin-left: 0.26rem;
|
||
margin-right: 0.23rem;
|
||
width: 3.27rem;
|
||
height: 0.09rem;
|
||
}
|
||
.group {
|
||
margin-top: 0.72rem;
|
||
padding-left: 0.34rem;
|
||
padding-right: 0.31rem;
|
||
}
|
||
.text {
|
||
margin-left: 0.045rem;
|
||
color: rgb(0, 0, 0);
|
||
font-size: 0.24rem;
|
||
line-height: 0.23rem;
|
||
letter-spacing: 0.024rem;
|
||
white-space: nowrap;
|
||
}
|
||
.group_1 {
|
||
margin-top: 0.67rem;
|
||
}
|
||
.text-wrapper_3 {
|
||
margin-top: 0.54rem;
|
||
padding: 0.13rem 0;
|
||
color: rgb(255, 255, 255);
|
||
font-size: 0.15rem;
|
||
line-height: 0.14rem;
|
||
letter-spacing: 0.03rem;
|
||
white-space: nowrap;
|
||
background-color: rgba(46, 155, 255, 0.5);
|
||
border-radius: 0.1rem;
|
||
}
|
||
.group_2 {
|
||
color: rgb(193, 196, 204);
|
||
font-size: 0.15rem;
|
||
line-height: 0.14rem;
|
||
white-space: nowrap;
|
||
}
|
||
.group_3 {
|
||
margin-top: 0.08rem;
|
||
}
|
||
.section_1 {
|
||
padding: 0.13rem 0.17rem;
|
||
background-color: rgb(246, 247, 250);
|
||
border-radius: 0.1rem;
|
||
}
|
||
.view_1 {
|
||
margin-top: 0.09rem;
|
||
}
|
||
.text-wrapper_1 {
|
||
padding: 0 0.17rem;
|
||
flex: 1 1 auto;
|
||
color: rgb(193, 196, 204);
|
||
font-size: 0.15rem;
|
||
line-height: 0.14rem;
|
||
white-space: nowrap;
|
||
background-color: rgb(246, 247, 250);
|
||
border-radius: 0.1rem;
|
||
height: 0.4rem;
|
||
}
|
||
.text-wrapper_2 {
|
||
margin-left: 0.08rem;
|
||
padding: 0.14rem 0.1rem ;
|
||
color: rgb(106, 134, 241);
|
||
font-size: 0.18rem;
|
||
line-height: 0.14rem;
|
||
letter-spacing: 0.036rem;
|
||
white-space: nowrap;
|
||
background-color: rgba(211, 220, 255, 0.5);
|
||
border-radius: 0.1rem;
|
||
height: 0.4rem;
|
||
}
|
||
.image_1 {
|
||
margin-right: 0.035rem;
|
||
margin-top: 0.05rem;
|
||
width: 0.14rem;
|
||
height: 0.09rem;
|
||
}
|
||
.text_6 {
|
||
margin-left: 0.17rem;
|
||
}
|
||
</style> -->
|