YingXingAI/pages/login/register/register.vue

634 lines
15 KiB
Vue
Raw Normal View History

2025-06-30 14:43:02 +08:00
<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> -->