更新
This commit is contained in:
@@ -5,7 +5,7 @@ const config = {
|
|||||||
uploadURL: import.meta.env.VITE_UPLOAD_BASE_URL || 'http://localhost:3000/api/upload'
|
uploadURL: import.meta.env.VITE_UPLOAD_BASE_URL || 'http://localhost:3000/api/upload'
|
||||||
},
|
},
|
||||||
production: {
|
production: {
|
||||||
baseURL: window.location.origin,
|
baseURL: 'https://minio.zrbjr.com/',
|
||||||
uploadURL: import.meta.env.VITE_UPLOAD_BASE_URL || `${window.location.origin}/api/upload`
|
uploadURL: import.meta.env.VITE_UPLOAD_BASE_URL || `${window.location.origin}/api/upload`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -29,7 +29,7 @@ export const getImageUrl = (imagePath) => {
|
|||||||
if (imagePath.startsWith('/uploads')) {
|
if (imagePath.startsWith('/uploads')) {
|
||||||
const cleanBaseURL = baseURL.replace(/\/$/, '')
|
const cleanBaseURL = baseURL.replace(/\/$/, '')
|
||||||
// console.log('Image starts with /uploads, returning original path:', imagePath)
|
// console.log('Image starts with /uploads, returning original path:', imagePath)
|
||||||
return `${cleanBaseURL}/jurongquan${imagePath}`
|
return `${imagePath}`
|
||||||
}
|
}
|
||||||
|
|
||||||
// 在开发环境下,也需要根据路径前缀处理
|
// 在开发环境下,也需要根据路径前缀处理
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ const inviteLink = ref('')
|
|||||||
const generateInviteLink = () => {
|
const generateInviteLink = () => {
|
||||||
const userId = userStore.user?.id || userStore.user?.user_id || 'guest'
|
const userId = userStore.user?.id || userStore.user?.user_id || 'guest'
|
||||||
console.log(userStore.user.id,userStore.user.user_id)
|
console.log(userStore.user.id,userStore.user.user_id)
|
||||||
const baseUrl = 'http://192.168.1.124:5173'
|
const baseUrl = `${window.location.origin}/frontend`
|
||||||
return `${baseUrl}/register?inviter=${userId}`
|
return `${baseUrl}/register?inviter=${userId}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -160,10 +160,10 @@ export default {
|
|||||||
const settings = ref([
|
const settings = ref([
|
||||||
{text:'账号安全',path:'/editpasswordpage'},
|
{text:'账号安全',path:'/editpasswordpage'},
|
||||||
{text:'商户资料',path:'/editdetailspage'},
|
{text:'商户资料',path:'/editdetailspage'},
|
||||||
{text:'分销',path:'/distribution'},
|
// {text:'分销',path:'/distribution'},
|
||||||
{text:'通知设置'},
|
// {text:'通知设置'},
|
||||||
{text:'积分获取规则'},
|
// {text:'积分获取规则'},
|
||||||
{text:'隐私协议'},
|
// {text:'隐私协议'},
|
||||||
]);
|
]);
|
||||||
const functionItems = ref([
|
const functionItems = ref([
|
||||||
{ image: "/imgs/mainpage/jiaoyijilu.png", text: "购物车", path: "/cart" },
|
{ image: "/imgs/mainpage/jiaoyijilu.png", text: "购物车", path: "/cart" },
|
||||||
@@ -435,7 +435,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.personal-center {
|
.personal-center {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="payment-methods">
|
<div class="payment-methods">
|
||||||
<div class="method-item" :class="{ active: selectedMethod === 'wechat_h5' }" @click="selectedMethod = 'wechat_h5'">
|
<!-- <div class="method-item" :class="{ active: selectedMethod === 'wechat_h5' }" @click="selectedMethod = 'wechat_h5'">
|
||||||
<div class="method-icon">
|
<div class="method-icon">
|
||||||
<svg viewBox="0 0 24 24" width="24" height="24">
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||||
<path fill="#07C160" d="M8.5 6.5c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zm7 0c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.12.23-2.18.64-3.15.41-.97 1.01-1.85 1.78-2.62.77-.77 1.65-1.37 2.62-1.78C9.82 4.23 10.88 4 12 4s2.18.23 3.15.64c.97.41 1.85 1.01 2.62 1.78.77.77 1.37 1.65 1.78 2.62.41.97.64 2.03.64 3.15 0 4.41-3.59 8-8 8z"/>
|
<path fill="#07C160" d="M8.5 6.5c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zm7 0c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.12.23-2.18.64-3.15.41-.97 1.01-1.85 1.78-2.62.77-.77 1.65-1.37 2.62-1.78C9.82 4.23 10.88 4 12 4s2.18.23 3.15.64c.97.41 1.85 1.01 2.62 1.78.77.77 1.37 1.65 1.78 2.62.41.97.64 2.03.64 3.15 0 4.41-3.59 8-8 8z"/>
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
<div class="method-check" v-show="selectedMethod === 'wechat_h5'">
|
<div class="method-check" v-show="selectedMethod === 'wechat_h5'">
|
||||||
<el-icon><Check /></el-icon>
|
<el-icon><Check /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div class="method-item" :class="{ active: selectedMethod === 'alipay_wap' }" @click="selectedMethod = 'alipay_wap'">
|
<div class="method-item" :class="{ active: selectedMethod === 'alipay_wap' }" @click="selectedMethod = 'alipay_wap'">
|
||||||
<div class="method-icon">
|
<div class="method-icon">
|
||||||
@@ -78,7 +78,7 @@ const router = useRouter()
|
|||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const selectedMethod = ref('wechat_h5') // 默认选择微信支付
|
const selectedMethod = ref('alipay_wap') // 默认选择微信支付
|
||||||
const paymentLoading = ref(false)
|
const paymentLoading = ref(false)
|
||||||
const paymentStatus = ref('')
|
const paymentStatus = ref('')
|
||||||
const paymentAmount = ref(399) // 注册费用
|
const paymentAmount = ref(399) // 注册费用
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<div class="register-card">
|
<div class="register-card">
|
||||||
<div class="register-header">
|
<div class="register-header">
|
||||||
<h2>用户注册</h2>
|
<h2>用户注册</h2>
|
||||||
<p>创建你的账号,开始使用前端H5系统</p>
|
<p>创建你的账号,开始使用炬融圈</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-form
|
<el-form
|
||||||
@@ -57,51 +57,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item prop="region">
|
||||||
|
<el-cascader
|
||||||
<el-form-item prop="city">
|
v-model="registerForm.region"
|
||||||
<el-select
|
:options="regionOptions"
|
||||||
v-model="registerForm.city"
|
placeholder="请选择省市区"
|
||||||
placeholder="请选择城市"
|
|
||||||
size="large"
|
size="large"
|
||||||
clearable
|
|
||||||
@change="onCityChange"
|
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
|
:props="{ expandTrigger: 'hover', value: 'code' }"
|
||||||
|
:show-all-levels="true"
|
||||||
|
:collapse-tags="true"
|
||||||
|
:max-collapse-tags="1"
|
||||||
|
:teleported="false"
|
||||||
|
popper-class="mobile-cascader-popper"
|
||||||
|
@change="handleRegionChange"
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<el-icon><Location /></el-icon>
|
<el-icon><Location /></el-icon>
|
||||||
</template>
|
</template>
|
||||||
<el-option
|
</el-cascader>
|
||||||
v-for="city in cities"
|
|
||||||
:key="city"
|
|
||||||
:label="city"
|
|
||||||
:value="city"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item prop="district_id">
|
|
||||||
<el-select
|
|
||||||
v-model="registerForm.district_id"
|
|
||||||
placeholder="请选择区域"
|
|
||||||
size="large"
|
|
||||||
clearable
|
|
||||||
:disabled="!registerForm.city"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<el-icon><Location /></el-icon>
|
|
||||||
</template>
|
|
||||||
<el-option
|
|
||||||
v-for="district in filteredDistricts"
|
|
||||||
:key="district.id"
|
|
||||||
:label="district.district_name"
|
|
||||||
:value="district.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
|
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="registerForm.password"
|
v-model="registerForm.password"
|
||||||
@@ -144,7 +120,7 @@
|
|||||||
<el-link
|
<el-link
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="showAgreement"
|
@click="showAgreement"
|
||||||
:class="{ 'viewed': agreementViewed }"
|
:class="{ viewed: agreementViewed }"
|
||||||
>
|
>
|
||||||
《用户协议》
|
《用户协议》
|
||||||
</el-link>
|
</el-link>
|
||||||
@@ -152,7 +128,7 @@
|
|||||||
<el-link
|
<el-link
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="showPrivacy"
|
@click="showPrivacy"
|
||||||
:class="{ 'viewed': privacyViewed }"
|
:class="{ viewed: privacyViewed }"
|
||||||
>
|
>
|
||||||
《隐私政策》
|
《隐私政策》
|
||||||
</el-link>
|
</el-link>
|
||||||
@@ -184,24 +160,6 @@
|
|||||||
</el-link>
|
</el-link>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="features-preview">
|
|
||||||
<el-divider>注册后你可以</el-divider>
|
|
||||||
<div class="features-list">
|
|
||||||
<div class="feature-item">
|
|
||||||
<el-icon><User /></el-icon>
|
|
||||||
<span>个性化用户中心</span>
|
|
||||||
</div>
|
|
||||||
<div class="feature-item">
|
|
||||||
<el-icon><CreditCard /></el-icon>
|
|
||||||
<span>积分商城购物</span>
|
|
||||||
</div>
|
|
||||||
<div class="feature-item">
|
|
||||||
<el-icon><ChatDotRound /></el-icon>
|
|
||||||
<span>积分转账功能</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -216,235 +174,269 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, computed, onMounted } from 'vue'
|
import { ref, reactive, computed, onMounted } from 'vue';
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
import { useUserStore } from '@/stores/user'
|
import { useUserStore } from '@/stores/user';
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
import { User, Lock, Message, Edit, ChatDotRound, CreditCard, Location, InfoFilled } from '@element-plus/icons-vue'
|
import {
|
||||||
import Captcha from '@/components/Captcha.vue'
|
User,
|
||||||
|
Lock,
|
||||||
|
Message,
|
||||||
|
Edit,
|
||||||
|
ChatDotRound,
|
||||||
|
CreditCard,
|
||||||
|
Location,
|
||||||
|
InfoFilled,
|
||||||
|
} from '@element-plus/icons-vue';
|
||||||
|
import Captcha from '@/components/Captcha.vue';
|
||||||
|
import api from '@/utils/api'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter();
|
||||||
const route = useRoute()
|
const route = useRoute();
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore();
|
||||||
|
|
||||||
// 表单引用
|
// 表单引用
|
||||||
const registerFormRef = ref()
|
const registerFormRef = ref();
|
||||||
const captchaRef = ref()
|
const captchaRef = ref();
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
const registerForm = reactive({
|
const registerForm = reactive({
|
||||||
username: '',
|
username: '',
|
||||||
phone: '',
|
phone: '',
|
||||||
|
region: [],
|
||||||
|
province: '',
|
||||||
city: '',
|
city: '',
|
||||||
|
district: '',
|
||||||
district_id: '',
|
district_id: '',
|
||||||
password: '',
|
password: '',
|
||||||
confirmPassword: '',
|
confirmPassword: '',
|
||||||
captcha: '',
|
captcha: '',
|
||||||
smsCode: '',
|
smsCode: '',
|
||||||
agreement: false
|
agreement: false,
|
||||||
})
|
});
|
||||||
|
|
||||||
// 协议查看状态
|
// 协议查看状态
|
||||||
const agreementViewed = ref(false)
|
const agreementViewed = ref(false);
|
||||||
const privacyViewed = ref(false)
|
const privacyViewed = ref(false);
|
||||||
const canCheckAgreement = computed(() => agreementViewed.value && privacyViewed.value)
|
const canCheckAgreement = computed(
|
||||||
|
() => agreementViewed.value && privacyViewed.value
|
||||||
|
);
|
||||||
|
|
||||||
// 短信验证码相关状态
|
// 短信验证码相关状态
|
||||||
const sendingSMS = ref(false)
|
const sendingSMS = ref(false);
|
||||||
const smsCountdown = ref(0)
|
const smsCountdown = ref(0);
|
||||||
const canSendSMS = computed(() => {
|
const canSendSMS = computed(() => {
|
||||||
const phoneRegex = /^1[3-9]\d{9}$/
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||||
return phoneRegex.test(registerForm.phone)
|
return phoneRegex.test(registerForm.phone);
|
||||||
})
|
});
|
||||||
|
|
||||||
// 地区数据
|
// 地区数据
|
||||||
const regions = ref([])
|
const regions = ref([]);
|
||||||
|
const regionOptions = ref([]);
|
||||||
const cities = computed(() => {
|
const cities = computed(() => {
|
||||||
const citySet = new Set()
|
const citySet = new Set();
|
||||||
regions.value.forEach(region => {
|
regions.value.forEach((region) => {
|
||||||
if (region.city_name) {
|
if (region.city_name) {
|
||||||
citySet.add(region.city_name)
|
citySet.add(region.city_name);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
return Array.from(citySet).sort()
|
return Array.from(citySet).sort();
|
||||||
})
|
});
|
||||||
|
|
||||||
const filteredDistricts = computed(() => {
|
const filteredDistricts = computed(() => {
|
||||||
if (!registerForm.city) return []
|
if (!registerForm.city) return [];
|
||||||
return regions.value.filter(region => region.city_name === registerForm.city)
|
return regions.value.filter(
|
||||||
})
|
(region) => region.city_name === registerForm.city
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
// 自定义验证函数
|
// 自定义验证函数
|
||||||
const validateUsername = (rule, value, callback) => {
|
const validateUsername = (rule, value, callback) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
callback(new Error('请输入用户名'))
|
callback(new Error('请输入用户名'));
|
||||||
} else if (value.length < 3) {
|
} else if (value.length < 3) {
|
||||||
callback(new Error('用户名至少3个字符'))
|
callback(new Error('用户名至少3个字符'));
|
||||||
} else if (value.length > 20) {
|
} else if (value.length > 20) {
|
||||||
callback(new Error('用户名不能超过20个字符'))
|
callback(new Error('用户名不能超过20个字符'));
|
||||||
} else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
|
} else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
|
||||||
callback(new Error('用户名只能包含字母、数字、下划线和中文'))
|
callback(new Error('用户名只能包含字母、数字、下划线和中文'));
|
||||||
} else {
|
} else {
|
||||||
callback()
|
callback();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const validatePassword = (rule, value, callback) => {
|
const validatePassword = (rule, value, callback) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
callback(new Error('请输入密码'))
|
callback(new Error('请输入密码'));
|
||||||
} else if (value.length < 6) {
|
} else if (value.length < 6) {
|
||||||
callback(new Error('密码至少6个字符'))
|
callback(new Error('密码至少6个字符'));
|
||||||
} else if (value.length > 20) {
|
} else if (value.length > 20) {
|
||||||
callback(new Error('密码不能超过20个字符'))
|
callback(new Error('密码不能超过20个字符'));
|
||||||
} else if (!/(?=.*[a-zA-Z])(?=.*\d)/.test(value)) {
|
} else if (!/(?=.*[a-zA-Z])(?=.*\d)/.test(value)) {
|
||||||
callback(new Error('密码必须包含字母和数字'))
|
callback(new Error('密码必须包含字母和数字'));
|
||||||
} else {
|
} else {
|
||||||
// 如果确认密码已输入,重新验证确认密码
|
// 如果确认密码已输入,重新验证确认密码
|
||||||
if (registerForm.confirmPassword) {
|
if (registerForm.confirmPassword) {
|
||||||
registerFormRef.value?.validateField('confirmPassword')
|
registerFormRef.value?.validateField('confirmPassword');
|
||||||
}
|
}
|
||||||
callback()
|
callback();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const validateConfirmPassword = (rule, value, callback) => {
|
const validateConfirmPassword = (rule, value, callback) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
callback(new Error('请确认密码'))
|
callback(new Error('请确认密码'));
|
||||||
} else if (value !== registerForm.password) {
|
} else if (value !== registerForm.password) {
|
||||||
callback(new Error('两次输入的密码不一致'))
|
callback(new Error('两次输入的密码不一致'));
|
||||||
} else {
|
} else {
|
||||||
callback()
|
callback();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const validateAgreement = (rule, value, callback) => {
|
const validateAgreement = (rule, value, callback) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
callback(new Error('请阅读并同意用户协议和隐私政策'))
|
callback(new Error('请阅读并同意用户协议和隐私政策'));
|
||||||
} else {
|
} else {
|
||||||
callback()
|
callback();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 表单验证规则
|
// 表单验证规则
|
||||||
const registerRules = {
|
const registerRules = {
|
||||||
username: [{ validator: validateUsername, trigger: 'blur' }],
|
username: [{ validator: validateUsername, trigger: 'blur' }],
|
||||||
phone: [
|
phone: [
|
||||||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
{
|
||||||
|
pattern: /^1[3-9]\d{9}$/,
|
||||||
|
message: '请输入正确的手机号',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
smsCode: [
|
smsCode: [
|
||||||
{ required: true, message: '请输入短信验证码', trigger: 'blur' },
|
{ required: true, message: '请输入短信验证码', trigger: 'blur' },
|
||||||
{ pattern: /^\d{6}$/, message: '短信验证码为6位数字', trigger: 'blur' }
|
{ pattern: /^\d{6}$/, message: '短信验证码为6位数字', trigger: 'blur' },
|
||||||
],
|
|
||||||
city: [
|
|
||||||
{ required: true, message: '请选择城市', trigger: 'change' }
|
|
||||||
],
|
|
||||||
district_id: [
|
|
||||||
{ required: true, message: '请选择区域', trigger: 'change' }
|
|
||||||
],
|
],
|
||||||
|
region: [{ required: true, message: '请选择省市区', trigger: 'change' }],
|
||||||
password: [{ validator: validatePassword, trigger: 'blur' }],
|
password: [{ validator: validatePassword, trigger: 'blur' }],
|
||||||
confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
|
confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
|
||||||
captcha: [
|
captcha: [
|
||||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||||
{ min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' }
|
{ min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' },
|
||||||
],
|
],
|
||||||
agreement: [{ validator: validateAgreement, trigger: 'change' }]
|
agreement: [{ validator: validateAgreement, trigger: 'change' }],
|
||||||
}
|
};
|
||||||
|
|
||||||
// 发送短信验证码
|
// 发送短信验证码
|
||||||
const sendSMSCode = async () => {
|
const sendSMSCode = async () => {
|
||||||
if (!canSendSMS.value || sendingSMS.value || smsCountdown.value > 0) {
|
if (!canSendSMS.value || sendingSMS.value || smsCountdown.value > 0) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
sendingSMS.value = true
|
sendingSMS.value = true;
|
||||||
|
|
||||||
const response = await fetch('/api/sms/send', {
|
const response = await fetch('/api/sms/send', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json',
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
phone: registerForm.phone
|
phone: registerForm.phone,
|
||||||
})
|
}),
|
||||||
})
|
});
|
||||||
|
|
||||||
const result = await response.json()
|
const result = await response.json();
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
ElMessage.success('验证码发送成功,请查收短信')
|
ElMessage.success('验证码发送成功,请查收短信');
|
||||||
// 开始倒计时
|
// 开始倒计时
|
||||||
startCountdown()
|
startCountdown();
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(result.message || '发送失败,请重试')
|
ElMessage.error(result.message || '发送失败,请重试');
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('发送短信验证码失败:', error)
|
console.error('发送短信验证码失败:', error);
|
||||||
ElMessage.error('发送失败,请检查网络连接')
|
ElMessage.error('发送失败,请检查网络连接');
|
||||||
} finally {
|
} finally {
|
||||||
sendingSMS.value = false
|
sendingSMS.value = false;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 开始倒计时
|
// 开始倒计时
|
||||||
const startCountdown = () => {
|
const startCountdown = () => {
|
||||||
smsCountdown.value = 60
|
smsCountdown.value = 60;
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
smsCountdown.value--
|
smsCountdown.value--;
|
||||||
if (smsCountdown.value <= 0) {
|
if (smsCountdown.value <= 0) {
|
||||||
clearInterval(timer)
|
clearInterval(timer);
|
||||||
}
|
}
|
||||||
}, 1000)
|
}, 1000);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取地区数据
|
* 获取地区数据
|
||||||
*/
|
*/
|
||||||
const fetchRegions = async () => {
|
const fetchRegions = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/regions/zhejiang')
|
const response = await fetch('/api/regions/zhejiang');
|
||||||
const result = await response.json()
|
const result = await response.json();
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
regions.value = result.data
|
regions.value = result.data;
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error('获取地区数据失败')
|
ElMessage.error('获取地区数据失败');
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取地区数据失败:', error)
|
console.error('获取地区数据失败:', error);
|
||||||
ElMessage.error('获取地区数据失败,请刷新页面重试')
|
ElMessage.error('获取地区数据失败,请刷新页面重试');
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
|
// 加载省市区级联数据
|
||||||
|
const loadRegionOptions = async () => {
|
||||||
|
const provincesResponse = await api.get('/regions/provinces');
|
||||||
|
regionOptions.value = provincesResponse.data.data || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理级联选择器变化
|
||||||
|
const handleRegionChange = (value) => {
|
||||||
|
if (value && value.length === 3) {
|
||||||
|
registerForm.province = value[0];
|
||||||
|
registerForm.city = value[1];
|
||||||
|
registerForm.district = value[2];
|
||||||
|
registerForm.district_id = value[2];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 城市变化处理
|
* 城市变化处理
|
||||||
*/
|
*/
|
||||||
const onCityChange = () => {
|
const onCityChange = () => {
|
||||||
// 清空区域选择
|
// 清空区域选择
|
||||||
registerForm.district_id = ''
|
registerForm.district_id = '';
|
||||||
}
|
};
|
||||||
|
|
||||||
// 处理注册
|
// 处理注册
|
||||||
const handleRegister = async () => {
|
const handleRegister = async () => {
|
||||||
if (!registerFormRef.value || !captchaRef.value) return
|
if (!registerFormRef.value || !captchaRef.value) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 先验证表单
|
// 先验证表单
|
||||||
const valid = await registerFormRef.value.validate()
|
const valid = await registerFormRef.value.validate();
|
||||||
if (!valid) return
|
if (!valid) return;
|
||||||
|
|
||||||
// 验证验证码
|
// 验证验证码
|
||||||
const captchaValid = await captchaRef.value.verifyCaptcha(registerForm.captcha)
|
const captchaValid = await captchaRef.value.verifyCaptcha(
|
||||||
|
registerForm.captcha
|
||||||
|
);
|
||||||
if (!captchaValid) {
|
if (!captchaValid) {
|
||||||
registerForm.captcha = ''
|
registerForm.captcha = '';
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取验证码信息
|
// 获取验证码信息
|
||||||
const captchaInfo = captchaRef.value.getCaptchaInfo()
|
const captchaInfo = captchaRef.value.getCaptchaInfo();
|
||||||
|
|
||||||
// 提交注册请求(包含验证码信息)
|
// 提交注册请求(包含验证码信息)
|
||||||
const registerData = {
|
const registerData = {
|
||||||
@@ -455,33 +447,35 @@ const handleRegister = async () => {
|
|||||||
password: registerForm.password,
|
password: registerForm.password,
|
||||||
smsCode: registerForm.smsCode,
|
smsCode: registerForm.smsCode,
|
||||||
captchaId: captchaInfo.captchaId,
|
captchaId: captchaInfo.captchaId,
|
||||||
captchaText: captchaInfo.captchaText
|
captchaText: captchaInfo.captchaText,
|
||||||
}
|
province: registerForm.province,
|
||||||
|
};
|
||||||
const result = await userStore.register(registerData)
|
console.log(registerData,'registerData');
|
||||||
|
console.log(registerForm,'registerForm')
|
||||||
|
const result = await userStore.register(registerData);
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
// 检查是否需要支付
|
// 检查是否需要支付
|
||||||
if (result.needPayment) {
|
if (result.needPayment) {
|
||||||
ElMessage.success('用户信息创建成功,请完成支付以激活账户')
|
ElMessage.success('用户信息创建成功,请完成支付以激活账户');
|
||||||
// 跳转到支付页面
|
// 跳转到支付页面
|
||||||
router.push({
|
router.push({
|
||||||
path: '/payment',
|
path: '/payment',
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
ElMessage.success('注册成功!请登录')
|
ElMessage.success('注册成功!请登录');
|
||||||
router.push('/login')
|
router.push('/login');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('注册失败:', error)
|
console.error('注册失败:', error);
|
||||||
// 注册失败后刷新验证码
|
// 注册失败后刷新验证码
|
||||||
if (captchaRef.value) {
|
if (captchaRef.value) {
|
||||||
await captchaRef.value.refreshCaptcha()
|
await captchaRef.value.refreshCaptcha();
|
||||||
}
|
}
|
||||||
registerForm.captcha = ''
|
registerForm.captcha = '';
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 显示用户协议
|
// 显示用户协议
|
||||||
const showAgreement = () => {
|
const showAgreement = () => {
|
||||||
@@ -498,13 +492,13 @@ const showAgreement = () => {
|
|||||||
{
|
{
|
||||||
confirmButtonText: '我已了解',
|
confirmButtonText: '我已了解',
|
||||||
dangerouslyUseHTMLString: true,
|
dangerouslyUseHTMLString: true,
|
||||||
customClass: 'agreement-dialog'
|
customClass: 'agreement-dialog',
|
||||||
}
|
}
|
||||||
).then(() => {
|
).then(() => {
|
||||||
agreementViewed.value = true
|
agreementViewed.value = true;
|
||||||
ElMessage.success('已查看用户协议')
|
ElMessage.success('已查看用户协议');
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
// 显示隐私政策
|
// 显示隐私政策
|
||||||
const showPrivacy = () => {
|
const showPrivacy = () => {
|
||||||
@@ -521,47 +515,48 @@ const showPrivacy = () => {
|
|||||||
{
|
{
|
||||||
confirmButtonText: '我已了解',
|
confirmButtonText: '我已了解',
|
||||||
dangerouslyUseHTMLString: true,
|
dangerouslyUseHTMLString: true,
|
||||||
customClass: 'privacy-dialog'
|
customClass: 'privacy-dialog',
|
||||||
}
|
}
|
||||||
).then(() => {
|
).then(() => {
|
||||||
privacyViewed.value = true
|
privacyViewed.value = true;
|
||||||
ElMessage.success('已查看隐私政策')
|
ElMessage.success('已查看隐私政策');
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
// 处理协议勾选
|
// 处理协议勾选
|
||||||
const handleAgreementChange = (value) => {
|
const handleAgreementChange = (value) => {
|
||||||
if (value && !canCheckAgreement.value) {
|
if (value && !canCheckAgreement.value) {
|
||||||
registerForm.agreement = false
|
registerForm.agreement = false;
|
||||||
ElMessage.warning('请先查看用户协议和隐私政策后再勾选')
|
ElMessage.warning('请先查看用户协议和隐私政策后再勾选');
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
return true
|
return true;
|
||||||
}
|
};
|
||||||
|
|
||||||
// 图片上传成功处理
|
// 图片上传成功处理
|
||||||
const handleUploadSuccess = (response, field) => {
|
const handleUploadSuccess = (response, field) => {
|
||||||
ElMessage.success('图片上传成功')
|
ElMessage.success('图片上传成功');
|
||||||
}
|
};
|
||||||
|
|
||||||
// 图片上传失败处理
|
// 图片上传失败处理
|
||||||
const handleUploadError = (error) => {
|
const handleUploadError = (error) => {
|
||||||
ElMessage.error('图片上传失败,请重试')
|
ElMessage.error('图片上传失败,请重试');
|
||||||
}
|
};
|
||||||
|
|
||||||
// 组件挂载时的处理
|
// 组件挂载时的处理
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 如果已经登录,直接跳转
|
// 如果已经登录,直接跳转
|
||||||
if (userStore.isAuthenticated) {
|
if (userStore.isAuthenticated) {
|
||||||
const redirectPath = route.query.redirect || '/'
|
const redirectPath = route.query.redirect || '/';
|
||||||
router.push(redirectPath)
|
router.push(redirectPath);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 获取地区数据
|
// 获取地区数据
|
||||||
fetchRegions()
|
fetchRegions();
|
||||||
})
|
|
||||||
|
// 加载省市区级联数据
|
||||||
|
loadRegionOptions();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -646,16 +641,9 @@ onMounted(() => {
|
|||||||
color: #606266;
|
color: #606266;
|
||||||
}
|
}
|
||||||
|
|
||||||
.features-preview {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item {
|
.feature-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -738,7 +726,8 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes float {
|
@keyframes float {
|
||||||
0%, 100% {
|
0%,
|
||||||
|
100% {
|
||||||
transform: translateY(0px) rotate(0deg);
|
transform: translateY(0px) rotate(0deg);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user