solosw
669 lines
15 KiB
Vue
669 lines
15 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="register-header">
|
||
<text class="page-title">用户注册</text>
|
||
</view>
|
||
|
||
<view class="register-form">
|
||
<!-- 基本信息 -->
|
||
<view class="section-title">基本信息</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">手机号 *</text>
|
||
<input class="form-input"
|
||
v-model="registerForm.phone"
|
||
type="number"
|
||
placeholder="请输入手机号"
|
||
maxlength="11" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">密码 *</text>
|
||
<input class="form-input"
|
||
v-model="registerForm.password"
|
||
type="password"
|
||
placeholder="请输入密码（6-20位）" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">确认密码 *</text>
|
||
<input class="form-input"
|
||
v-model="registerForm.confirmPassword"
|
||
type="password"
|
||
placeholder="请再次输入密码" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">店铺名称 *</text>
|
||
<input class="form-input"
|
||
v-model="registerForm.customer_name"
|
||
placeholder="请输入店铺名称" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">法人名称 *</text>
|
||
<input class="form-input"
|
||
v-model="registerForm.real_name"
|
||
placeholder="请输入法人名称" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">公司名称 *</text>
|
||
<input class="form-input"
|
||
v-model="registerForm.company_name"
|
||
placeholder="请输入公司名称" />
|
||
</view>
|
||
|
||
<!-- 证件上传 -->
|
||
<view class="section-title">证件信息</view>
|
||
|
||
<view class="upload-section">
|
||
<text class="upload-label">身份证正面 *</text>
|
||
<view class="upload-area" @click="chooseIdCardFront">
|
||
<image v-if="registerForm.id_card_front"
|
||
:src="getFullImageUrl(registerForm.id_card_front)"
|
||
mode="aspectFill"
|
||
class="upload-image"></image>
|
||
<view v-else class="upload-placeholder">
|
||
<uni-icons type="camera" size="30" color="#999"></uni-icons>
|
||
<text class="upload-text">点击上传身份证正面</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="upload-section">
|
||
<text class="upload-label">身份证反面 *</text>
|
||
<view class="upload-area" @click="chooseIdCardBack">
|
||
<image v-if="registerForm.id_card_back"
|
||
:src="getFullImageUrl(registerForm.id_card_back)"
|
||
mode="aspectFill"
|
||
class="upload-image"></image>
|
||
<view v-else class="upload-placeholder">
|
||
<uni-icons type="camera" size="30" color="#999"></uni-icons>
|
||
<text class="upload-text">点击上传身份证反面</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="upload-section">
|
||
<text class="upload-label">营业执照 *</text>
|
||
<view class="upload-area" @click="chooseBusinessLicense">
|
||
<image v-if="registerForm.business_license"
|
||
:src="getFullImageUrl(registerForm.business_license)"
|
||
mode="aspectFill"
|
||
class="upload-image"></image>
|
||
<view v-else class="upload-placeholder">
|
||
<uni-icons type="camera" size="30" color="#999"></uni-icons>
|
||
<text class="upload-text">点击上传营业执照</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 验证方式 -->
|
||
<view class="section-title">验证信息</view>
|
||
|
||
<!-- 短信验证码（必填） -->
|
||
<view class="verify-section">
|
||
<view class="form-item">
|
||
<text class="form-label">短信验证码 *</text>
|
||
<view class="verify-input-group">
|
||
<input class="form-input verify-input"
|
||
v-model="registerForm.sms_code"
|
||
type="number"
|
||
placeholder="请输入验证码"
|
||
maxlength="6" />
|
||
<button class="verify-btn"
|
||
@click="sendSmsCode"
|
||
:disabled="smsLoading || countdown > 0">
|
||
{{ smsLoading ? '发送中...' : countdown > 0 ? `${countdown}s` : '获取验证码' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推荐人身份码（选填） -->
|
||
<view class="form-item">
|
||
<text class="form-label">推荐人身份码</text>
|
||
<input class="form-input"
|
||
v-model="registerForm.referrer_identity_code"
|
||
placeholder="请输入推荐人身份码（选填）" />
|
||
</view>
|
||
|
||
<!-- 用户协议 -->
|
||
<view class="agreement-section">
|
||
<view class="agreement-item" @click="toggleAgreement">
|
||
<uni-icons :type="agreed ? 'checkbox-filled' : 'circle'" size="16" :color="agreed ? '#FF4444' : '#999'"></uni-icons>
|
||
<text class="agreement-text">我已阅读并同意</text>
|
||
<text class="agreement-link">《用户协议》</text>
|
||
<text class="agreement-text">和</text>
|
||
<text class="agreement-link">《隐私政策》</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 注册按钮 -->
|
||
<button class="register-btn" @click="handleRegister" :disabled="registerLoading">
|
||
{{ registerLoading ? '注册中...' : '立即注册' }}
|
||
</button>
|
||
|
||
<view class="login-link">
|
||
<text class="link-text">已有账号？</text>
|
||
<text class="link-action" @click="goToLogin">立即登录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/utils/request.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
token:'',
|
||
registerForm: {
|
||
phone: '',
|
||
password: '',
|
||
confirmPassword: '',
|
||
customer_name: '',
|
||
real_name: '',
|
||
company_name: '',
|
||
id_card_front: '',
|
||
id_card_back: '',
|
||
business_license: '',
|
||
referrer_identity_code: '',
|
||
sms_code: ''
|
||
},
|
||
agreed: false,
|
||
registerLoading: false,
|
||
smsLoading: false,
|
||
countdown: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.token=uni.getStorageSync('token')
|
||
},
|
||
methods: {
|
||
// 获取完整的图片URL
|
||
getFullImageUrl(url) {
|
||
return request.getImageUrl(url)
|
||
},
|
||
|
||
// 选择身份证正面
|
||
chooseIdCardFront() {
|
||
this.chooseImage('id_card_front')
|
||
},
|
||
|
||
// 选择身份证反面
|
||
chooseIdCardBack() {
|
||
this.chooseImage('id_card_back')
|
||
},
|
||
|
||
// 选择营业执照
|
||
chooseBusinessLicense() {
|
||
this.chooseImage('business_license')
|
||
},
|
||
|
||
// 选择图片并上传
|
||
chooseImage(field) {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['camera', 'album'],
|
||
success: (res) => {
|
||
const tempFilePath = res.tempFilePaths[0]
|
||
this.uploadImage(tempFilePath, field)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 上传图片
|
||
async uploadImage(filePath, field) {
|
||
uni.showLoading({
|
||
title: '上传中...'
|
||
})
|
||
|
||
try {
|
||
const res = await request.upload("/back/upload", filePath, {
|
||
token: this.token
|
||
})
|
||
|
||
if (res.success) {
|
||
this.registerForm[field] = res.data.url
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message || '上传失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
// uni.uploadFile({
|
||
// url: request.config.baseURL + '/back/upload',
|
||
// filePath: filePath,
|
||
// name: 'file',
|
||
// header: {
|
||
// 'token': token
|
||
// },
|
||
// success: (uploadRes) => {
|
||
// try {
|
||
// const result = JSON.parse(uploadRes.data)
|
||
// if (result.success) {
|
||
// this.registerForm[field] = result.data.url
|
||
// uni.showToast({
|
||
// title: '上传成功',
|
||
// icon: 'success'
|
||
// })
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: result.message || '上传失败',
|
||
// icon: 'none'
|
||
// })
|
||
// }
|
||
// } catch (e) {
|
||
// uni.showToast({
|
||
// title: '上传失败',
|
||
// icon: 'none'
|
||
// })
|
||
// }
|
||
// },
|
||
// fail: (err) => {
|
||
// console.log(err)
|
||
// uni.showToast({
|
||
// title: '上传失败',
|
||
// icon: 'none'
|
||
// })
|
||
// },
|
||
// complete: () => {
|
||
// uni.hideLoading()
|
||
// }
|
||
// })
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
})
|
||
console.log(error)
|
||
}
|
||
},
|
||
|
||
// 发送短信验证码
|
||
async sendSmsCode() {
|
||
if (!this.registerForm.phone) {
|
||
uni.showToast({
|
||
title: '请先输入手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!/^1[3-9]\d{9}$/.test(this.registerForm.phone)) {
|
||
uni.showToast({
|
||
title: '手机号格式不正确',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.smsLoading = true
|
||
|
||
try {
|
||
const res = await request.post('/back/auth/send-sms', {
|
||
phone: this.registerForm.phone
|
||
})
|
||
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: '验证码发送成功',
|
||
icon: 'success'
|
||
})
|
||
|
||
// 开始倒计时
|
||
this.startCountdown()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message || '发送失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: '发送失败',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
this.smsLoading = false
|
||
}
|
||
},
|
||
|
||
// 开始倒计时
|
||
startCountdown() {
|
||
this.countdown = 60
|
||
const timer = setInterval(() => {
|
||
this.countdown--
|
||
if (this.countdown <= 0) {
|
||
clearInterval(timer)
|
||
}
|
||
}, 1000)
|
||
},
|
||
|
||
// 切换协议同意状态
|
||
toggleAgreement() {
|
||
this.agreed = !this.agreed
|
||
},
|
||
|
||
// 表单验证
|
||
validateForm() {
|
||
if (!this.registerForm.phone) {
|
||
uni.showToast({ title: '请输入手机号', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!/^1[3-9]\d{9}$/.test(this.registerForm.phone)) {
|
||
uni.showToast({ title: '手机号格式不正确', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.registerForm.password) {
|
||
uni.showToast({ title: '请输入密码', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (this.registerForm.password.length < 6 || this.registerForm.password.length > 20) {
|
||
uni.showToast({ title: '密码长度为6-20位', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (this.registerForm.password !== this.registerForm.confirmPassword) {
|
||
uni.showToast({ title: '两次密码输入不一致', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.registerForm.customer_name) {
|
||
uni.showToast({ title: '请输入店铺名称', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.registerForm.real_name) {
|
||
uni.showToast({ title: '请输入法人名称', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.registerForm.company_name) {
|
||
uni.showToast({ title: '请输入公司名称', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.registerForm.id_card_front) {
|
||
uni.showToast({ title: '请上传身份证正面', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.registerForm.id_card_back) {
|
||
uni.showToast({ title: '请上传身份证反面', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.registerForm.business_license) {
|
||
uni.showToast({ title: '请上传营业执照', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.registerForm.sms_code) {
|
||
uni.showToast({ title: '请输入短信验证码', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
if (!this.agreed) {
|
||
uni.showToast({ title: '请先同意用户协议', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
return true
|
||
},
|
||
|
||
// 处理注册
|
||
async handleRegister() {
|
||
if (!this.validateForm()) {
|
||
return
|
||
}
|
||
|
||
this.registerLoading = true
|
||
|
||
try {
|
||
// 准备注册数据
|
||
const registerData = {
|
||
phone: this.registerForm.phone,
|
||
password: this.registerForm.password,
|
||
customer_name: this.registerForm.customer_name,
|
||
real_name: this.registerForm.real_name,
|
||
company_name: this.registerForm.company_name,
|
||
business_license_image: this.registerForm.business_license,
|
||
id_card_front_image: this.registerForm.id_card_front,
|
||
id_card_back_image: this.registerForm.id_card_back
|
||
}
|
||
|
||
// 添加验证信息（验证码必填，身份码选填）
|
||
registerData.sms_code = this.registerForm.sms_code
|
||
if (this.registerForm.referrer_identity_code) {
|
||
registerData.referrer_identity_code = this.registerForm.referrer_identity_code
|
||
}
|
||
|
||
const res = await request.post('/back/auth/register', registerData)
|
||
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: '注册成功',
|
||
icon: 'success'
|
||
})
|
||
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message || '注册失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('注册失败：', error)
|
||
uni.showToast({
|
||
title: '网络错误，请稍后重试',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
this.registerLoading = false
|
||
}
|
||
},
|
||
|
||
// 跳转到登录页面
|
||
goToLogin() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.register-header {
|
||
background: linear-gradient(135deg, #FF4444 0%, #FF6666 100%);
|
||
padding: 40rpx 30rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.register-form {
|
||
padding: 40rpx 30rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin: 40rpx 0 30rpx 0;
|
||
}
|
||
|
||
.form-item {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
/* 上传区域 */
|
||
.upload-section {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.upload-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.upload-area {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
height: 200rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx dashed #ddd;
|
||
}
|
||
|
||
.upload-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.upload-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #999;
|
||
}
|
||
|
||
.upload-placeholder uni-icons {
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* 验证码输入组 */
|
||
.verify-section {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.verify-input-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.verify-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.verify-btn {
|
||
background-color: #FF4444;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx 30rpx;
|
||
font-size: 24rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.verify-btn:disabled {
|
||
background-color: #ccc;
|
||
}
|
||
|
||
/* 用户协议 */
|
||
.agreement-section {
|
||
margin: 40rpx 0;
|
||
}
|
||
|
||
.agreement-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.agreement-item uni-icons {
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.agreement-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.agreement-link {
|
||
font-size: 24rpx;
|
||
color: #FF4444;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 注册按钮 */
|
||
.register-btn {
|
||
background-color: #FF4444;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
height: 100rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin: 40rpx 0;
|
||
border: none;
|
||
}
|
||
|
||
.register-btn:disabled {
|
||
background-color: #ccc;
|
||
}
|
||
|
||
/* 登录链接 */
|
||
.login-link {
|
||
text-align: center;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.link-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.link-action {
|
||
font-size: 28rpx;
|
||
color: #FF4444;
|
||
text-decoration: underline;
|
||
}
|
||
</style> |