|
|
<template>
|
|
|
<view class="register-container" v-if="formData">
|
|
|
<view class="main">
|
|
|
<!-- 标题 -->
|
|
|
<view class="title">
|
|
|
<view class="title-main">用户注册</view>
|
|
|
<view class="title-sub">创建您的个人账户</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 表单 -->
|
|
|
<form @submit="onSubmit">
|
|
|
<!-- 手机号 -->
|
|
|
<view class="form-item">
|
|
|
<text class="label">手机号</text>
|
|
|
<input class="input" type="tel" placeholder="请输入手机号" v-model="formData.tel" maxlength="11" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 密码 -->
|
|
|
<view class="form-item">
|
|
|
<text class="label">密码</text>
|
|
|
<input class="input" type="password" placeholder="请输入密码" v-model="formData.password" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 确认密码 -->
|
|
|
<view class="form-item">
|
|
|
<text class="label">确认密码</text>
|
|
|
<input class="input" type="password" placeholder="请再次输入密码" v-model="formData.confirmPassword" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 真实姓名 -->
|
|
|
<view class="form-item">
|
|
|
<text class="label">真实姓名</text>
|
|
|
<input class="input" type="text" placeholder="请输入真实姓名" v-model="formData.name" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 身份证号 -->
|
|
|
<view class="form-item">
|
|
|
<text class="label">身份证号</text>
|
|
|
<input class="input" type="text" placeholder="请输入身份证号" v-model="formData.sfz" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 银行卡号 -->
|
|
|
<view class="form-item">
|
|
|
<text class="label">银行卡号</text>
|
|
|
<input class="input" type="text" placeholder="请输入银行卡号" v-model="formData.card_number" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 银行名称 -->
|
|
|
<view class="form-item">
|
|
|
<text class="label">银行名称</text>
|
|
|
<input class="input" type="text" placeholder="请输入银行名称" v-model="formData.bank_name" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 上传收款信息图片 -->
|
|
|
<view class="form-item upload-item">
|
|
|
<text class="label">上传收款信息图片</text>
|
|
|
<view class="upload-box" @click="chooseImage">
|
|
|
<image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image>
|
|
|
<span v-else>
|
|
|
<text class="upload-text">点击上传图片</text>
|
|
|
<text class="upload-tip">支持JPG、PNG格式</text>
|
|
|
</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 短信验证码 -->
|
|
|
<view class="form-item">
|
|
|
<text class="label">短信验证码</text>
|
|
|
<view class="code-input">
|
|
|
<input class="input-short" type="number" placeholder="请输入验证码" v-model="formData.verifyCode"
|
|
|
maxlength="6" />
|
|
|
<button class="send-btn" :disabled="sending" @click="sendVerifyCode">
|
|
|
{{ sending ? '发送中...' : '发送验证码' }}
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 注册按钮 -->
|
|
|
<button class="register-btn" @click="onSubmit()">注册</button>
|
|
|
|
|
|
<!-- 登录跳转 -->
|
|
|
<view class="login-link">
|
|
|
<text>已有账号？</text>
|
|
|
<text class="link" @click="gotoLogin">立即登录</text>
|
|
|
</view>
|
|
|
</form>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
ref
|
|
|
} from "vue"
|
|
|
import {
|
|
|
MemberRegister,
|
|
|
UpFileNoLogin,
|
|
|
GetBaseUrl,SmsSendCode
|
|
|
} from "@/api"
|
|
|
import {
|
|
|
onShow
|
|
|
} from "@dcloudio/uni-app"
|
|
|
let formData = ref({
|
|
|
tel: '',
|
|
|
password: '',
|
|
|
confirmPassword: '',
|
|
|
name: '',
|
|
|
sfz: '',
|
|
|
card_number: '',
|
|
|
bank_name: '',
|
|
|
verifyCode: '',
|
|
|
res_bank_img: ''
|
|
|
})
|
|
|
let sending = ref(false)
|
|
|
let imageUrl = ref('') // 上传图片路径
|
|
|
|
|
|
// 上传图片
|
|
|
const chooseImage = () => {
|
|
|
uni.chooseImage({
|
|
|
count: 1,
|
|
|
sizeType: ['compressed'],
|
|
|
sourceType: ['album', 'camera'],
|
|
|
success: (res) => {
|
|
|
const tempFilePath = res.tempFilePaths[0];
|
|
|
// imageUrl.value = tempFilePath;
|
|
|
// 这里可以上传到服务器
|
|
|
console.log('上传图片:', tempFilePath);
|
|
|
uni.showLoading({
|
|
|
title: ''
|
|
|
})
|
|
|
uni.uploadFile({
|
|
|
url: UpFileNoLogin(), // 替换为你的后端接口地址
|
|
|
filePath: tempFilePath,
|
|
|
name: 'file', // 后端接收字段名，通常叫 file、image、avatar 等
|
|
|
success: (uploadRes) => {
|
|
|
uni.hideLoading()
|
|
|
console.log('上传成功:', uploadRes);
|
|
|
const data = JSON.parse(uploadRes.data); // 注意：uploadRes.data 是字符串
|
|
|
// 假设后端返回 { url: "https://xxx.jpg" }
|
|
|
|
|
|
if (data.status === true && data.data) {
|
|
|
imageUrl.value = GetBaseUrl() + data.data; // 使用服务器返回的真实 URL
|
|
|
formData.value.res_bank_img = data.data
|
|
|
}
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
uni.hideLoading()
|
|
|
console.error('上传失败:', err);
|
|
|
uni.showToast({
|
|
|
title: '上传失败',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 发送验证码
|
|
|
const sendVerifyCode = () => {
|
|
|
if (!formData.value.tel) {
|
|
|
uni.showToast({
|
|
|
title: '请输入手机号',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
sending.value = true;
|
|
|
// 模拟发送验证码
|
|
|
SmsSendCode({
|
|
|
tel: formData.value.tel
|
|
|
}).then(res => {
|
|
|
sending.value = false;
|
|
|
if (res.status) {
|
|
|
|
|
|
uni.showToast({
|
|
|
title: '验证码已发送',
|
|
|
icon: 'success'
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// 提交注册
|
|
|
const onSubmit = () => {
|
|
|
|
|
|
// 基本验证
|
|
|
if (!formData.value.tel) {
|
|
|
uni.showToast({
|
|
|
title: '请输入手机号',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!formData.value.password) {
|
|
|
uni.showToast({
|
|
|
title: '请输入密码',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (formData.value.password !== formData.value.confirmPassword) {
|
|
|
uni.showToast({
|
|
|
title: '两次密码不一致',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!formData.value.name) {
|
|
|
uni.showToast({
|
|
|
title: '请输入真实姓名',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!formData.value.sfz) {
|
|
|
uni.showToast({
|
|
|
title: '请输入身份证号',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!formData.value.card_number) {
|
|
|
uni.showToast({
|
|
|
title: '请输入银行卡号',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!formData.value.bank_name) {
|
|
|
uni.showToast({
|
|
|
title: '请输入银行名称',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!formData.value.verifyCode) {
|
|
|
uni.showToast({
|
|
|
title: '请输入验证码',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 此处可调用接口提交数据
|
|
|
console.log('注册数据:', formData.value);
|
|
|
MemberRegister({
|
|
|
info: formData.value
|
|
|
}).then(res => {
|
|
|
if (res.status) {
|
|
|
uni.showToast({
|
|
|
title: '注册成功',
|
|
|
icon: 'success'
|
|
|
});
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/login'
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// 跳转登录页
|
|
|
const gotoLogin = () => {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/login/login'
|
|
|
});
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.register-container {
|
|
|
background: linear-gradient(135deg, #E1EBFB, #f0f9ff);
|
|
|
padding-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
padding: 40rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
width: 80%;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
text-align: center;
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
.title-main {
|
|
|
font-size: 40rpx;
|
|
|
font-weight: bold;
|
|
|
color: #1a56db;
|
|
|
}
|
|
|
|
|
|
.title-sub {
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-item {
|
|
|
margin-bottom: 32rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.label {
|
|
|
display: block;
|
|
|
font-size: 26rpx;
|
|
|
color: #333;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
.input {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
border: 1px solid #ddd;
|
|
|
border-radius: 8rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 28rpx;
|
|
|
line-height: 80rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.input-short {
|
|
|
width: 360rpx;
|
|
|
height: 80rpx;
|
|
|
border: 1px solid #ddd;
|
|
|
border-radius: 8rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 28rpx;
|
|
|
line-height: 60rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.code-input {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.send-btn {
|
|
|
width: 200rpx;
|
|
|
height: 60rpx;
|
|
|
background-color: #0047e5;
|
|
|
color: white;
|
|
|
border-radius: 8rpx;
|
|
|
font-size: 26rpx;
|
|
|
line-height: 60rpx;
|
|
|
border: none;
|
|
|
margin-left: 20rpx;
|
|
|
background-color: #0047e5;
|
|
|
color: white;
|
|
|
font-size: 26rpx;
|
|
|
border: none;
|
|
|
border-radius: 8rpx;
|
|
|
transition: background-color 0.3s;
|
|
|
}
|
|
|
|
|
|
.send-btn:disabled {
|
|
|
background-color: #ccc;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
.upload-box {
|
|
|
width: 100%;
|
|
|
height: 160rpx;
|
|
|
border: 2rpx dashed #ddd;
|
|
|
border-radius: 8rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
color: #999;
|
|
|
font-size: 26rpx;
|
|
|
background-color: #f9f9f9;
|
|
|
}
|
|
|
|
|
|
.upload-icon1 {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.upload-text {
|
|
|
font-size: 28rpx;
|
|
|
margin-bottom: 6rpx;
|
|
|
}
|
|
|
|
|
|
.upload-tip {
|
|
|
font-size: 22rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.register-btn {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
background-color: #0047e5;
|
|
|
color: white;
|
|
|
border-radius: 8rpx;
|
|
|
font-size: 30rpx;
|
|
|
line-height: 80rpx;
|
|
|
margin: 30rpx 0;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.login-link {
|
|
|
text-align: center;
|
|
|
font-size: 24rpx;
|
|
|
color: #666;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.login-link .link {
|
|
|
color: #0047e5;
|
|
|
font-weight: bold;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
</style> |