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> |