上传代码
This commit is contained in:
413
distribution/pages/register/register.vue
Normal file
413
distribution/pages/register/register.vue
Normal file
@ -0,0 +1,413 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user