413 lines
8.7 KiB
Vue
413 lines
8.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="header">
|
|||
|
|
<view class="title">跑腿注册</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form">
|
|||
|
|
<view class="input-group" v-for="(field, index) in fields" :key="index">
|
|||
|
|
<view class="label">{{ field.label }}</view>
|
|||
|
|
<view class="input">
|
|||
|
|
<!-- 修改后的性别字段处理 -->
|
|||
|
|
<template v-if="field.model === 'gender'">
|
|||
|
|
<radio-group :value="formData.gender" @change="handleGenderChange" class="radio-group">
|
|||
|
|
<label class="radio-label">
|
|||
|
|
<view class="radio-wrapper">
|
|||
|
|
<radio value="男" color="#5e7dec" />
|
|||
|
|
</view>
|
|||
|
|
男
|
|||
|
|
</label>
|
|||
|
|
<label class="radio-label">
|
|||
|
|
<view class="radio-wrapper">
|
|||
|
|
<radio value="女" color="#5e7dec" />
|
|||
|
|
</view>
|
|||
|
|
女
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
</radio-group>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 配送范围字段 -->
|
|||
|
|
<template v-else-if="field.model === 'distributionScope'">
|
|||
|
|
<uni-data-select v-model="formData.distributionScope" :localdata="range" :clear="false"
|
|||
|
|
class="distribution-select"></uni-data-select>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 其他字段保持原样 -->
|
|||
|
|
<input v-else v-model="formData[field.model]" :placeholder="field.placeholder"
|
|||
|
|
class="styled-input" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="button">
|
|||
|
|
<button @click="saveAddress" class="styled-button">点击注册</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
apiImageUrl
|
|||
|
|
} from '../../API/api';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formData: {
|
|||
|
|
checkPassword: '',
|
|||
|
|
distributionScope: '',
|
|||
|
|
errandName: '',
|
|||
|
|
errandPhone: '',
|
|||
|
|
gender: '',
|
|||
|
|
userAccount: '',
|
|||
|
|
userPassword: ''
|
|||
|
|
},
|
|||
|
|
range: [{
|
|||
|
|
value: '1公寓',
|
|||
|
|
text: '1公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '2公寓',
|
|||
|
|
text: '2公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '3公寓',
|
|||
|
|
text: '3公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '4公寓',
|
|||
|
|
text: '4公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '5公寓',
|
|||
|
|
text: '5公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '6公寓',
|
|||
|
|
text: '6公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '7公寓',
|
|||
|
|
text: '7公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '8公寓',
|
|||
|
|
text: '8公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '9公寓',
|
|||
|
|
text: '9公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '10公寓',
|
|||
|
|
text: '10公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '11公寓',
|
|||
|
|
text: '11公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '12公寓',
|
|||
|
|
text: '12公寓'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '育才大厦',
|
|||
|
|
text: '育才大厦'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
fields: [{
|
|||
|
|
label: '账户',
|
|||
|
|
model: 'userAccount',
|
|||
|
|
placeholder: '请输入账户'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '密码',
|
|||
|
|
model: 'userPassword',
|
|||
|
|
placeholder: '请输入密码'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '确认密码',
|
|||
|
|
model: 'checkPassword',
|
|||
|
|
placeholder: '请再次输入密码'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '用户名称',
|
|||
|
|
model: 'errandName',
|
|||
|
|
placeholder: '请输入用户名称'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '手机号',
|
|||
|
|
model: 'errandPhone',
|
|||
|
|
placeholder: '请输入手机号'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '性别',
|
|||
|
|
model: 'gender',
|
|||
|
|
placeholder: '请选择性别'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '配送范围',
|
|||
|
|
model: 'distributionScope',
|
|||
|
|
placeholder: '请选择配送范围'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleGenderChange(e) {
|
|||
|
|
// 将性别转换为数字
|
|||
|
|
this.formData.gender = e.detail.value === '男' ? 0 : 1;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
saveAddress() {
|
|||
|
|
// 验证表单数据
|
|||
|
|
if (!this.validateForm()) {
|
|||
|
|
return; // validateForm内部已处理提示
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const url = apiImageUrl + '/api/errand/add';
|
|||
|
|
const data = {
|
|||
|
|
checkPassword: this.formData.checkPassword,
|
|||
|
|
distributionScope: this.formData.distributionScope,
|
|||
|
|
errandName: this.formData.errandName,
|
|||
|
|
errandPhone: this.formData.errandPhone,
|
|||
|
|
gender: this.formData.gender,
|
|||
|
|
userAccount: this.formData.userAccount,
|
|||
|
|
userPassword: this.formData.userPassword
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
uni.request({
|
|||
|
|
url,
|
|||
|
|
method: 'POST',
|
|||
|
|
data,
|
|||
|
|
header: {
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
},
|
|||
|
|
success(res) {
|
|||
|
|
console.log(res.data);
|
|||
|
|
if (res.data.code === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '注册成功！',
|
|||
|
|
duration: 2000,
|
|||
|
|
icon: "success"
|
|||
|
|
})
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/login/login'
|
|||
|
|
})
|
|||
|
|
} else if (res.data.code === 40000) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.data.description,
|
|||
|
|
duration: 2000,
|
|||
|
|
icon: "fail"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
console.error(err);
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '注册失败', //提示标题
|
|||
|
|
content: '请重新输入', //提示内容
|
|||
|
|
//showCancel: true, //是否显示取消按钮
|
|||
|
|
// success: function (res) {
|
|||
|
|
// if (res.confirm) { //confirm为ture，代表用户点击确定
|
|||
|
|
// console.log('点击了确定按钮');
|
|||
|
|
// } else if (res.cancel) { //cancel为ture，代表用户点击取消
|
|||
|
|
// console.log('点击了取消按钮');
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
validateForm() {
|
|||
|
|
// 逐个字段校验并给出具体提示
|
|||
|
|
if (!this.formData.userAccount) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入账户',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!this.formData.userPassword) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入密码',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.formData.userPassword.length < 8) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '密码过短，至少8位',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!this.formData.checkPassword) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入确认密码',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.formData.userPassword !== this.formData.checkPassword) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '两次密码不一致',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!this.formData.errandName) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入用户名称',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!this.formData.errandPhone) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入手机号',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!this.formData.gender) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择性别',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!this.formData.distributionScope) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择配送范围',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.container {
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form {
|
|||
|
|
.input-group {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
flex: 3;
|
|||
|
|
|
|||
|
|
.styled-input {
|
|||
|
|
font-size: 14px;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: rgba(255, 235, 59, 0.6);
|
|||
|
|
/* 淡黄色并带有透明度 */
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
/* 圆角 */
|
|||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|||
|
|
/* 添加阴影以创建立体效果 */
|
|||
|
|
outline: none;
|
|||
|
|
transition: all 0.2s ease-in-out;
|
|||
|
|
|
|||
|
|
&:focus {
|
|||
|
|
background-color: rgba(255, 235, 59, 0.8);
|
|||
|
|
/* 增加透明度 */
|
|||
|
|
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
/* 更强的阴影 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
|
|||
|
|
.styled-button {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #5e7dec;
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: inherit;
|
|||
|
|
transition: background-color 0.2s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #5e7dec;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 新增radio样式 */
|
|||
|
|
.radio-group {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.radio-label {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 30px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
|
|||
|
|
/* 移除直接对radio的样式操作 */
|
|||
|
|
/* 改为通过包裹元素实现间距 */
|
|||
|
|
.radio-wrapper {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 新增下拉选择样式 */
|
|||
|
|
.distribution-select {
|
|||
|
|
width: 100%;
|
|||
|
|
.uni-select {
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: rgba(255, 235, 59, 0.6);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
border-color: #5e7dec; /* 下拉箭头颜色 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|