使用uniapp 写一个注册页面,有商户注册、主播注册、经纪人注册三种注册方式
时间: 2023-06-29 10:07:17 浏览: 60
好的,以下是一个简单的注册页面示例:
```html
<template>
<view class="container">
<view class="form">
<view class="form-item">
<text class="form-label">注册类型:</text>
<picker class="form-input" mode="selector" :range="['商户', '主播', '经纪人']" @change="handleTypeChange">
<text>{{ type }}</text>
</picker>
</view>
<view class="form-item">
<text class="form-label">用户名:</text>
<input class="form-input" type="text" v-model="username" />
</view>
<view class="form-item">
<text class="form-label">手机号:</text>
<input class="form-input" type="tel" v-model="phone" />
</view>
<view class="form-item">
<text class="form-label">密码:</text>
<input class="form-input" type="password" v-model="password" />
</view>
<view class="form-item">
<text class="form-label">确认密码:</text>
<input class="form-input" type="password" v-model="confirmPassword" />
</view>
<view class="form-item">
<button class="submit-btn" @click="handleSubmit">注册</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
type: '商户',
username: '',
phone: '',
password: '',
confirmPassword: '',
};
},
methods: {
handleTypeChange(event) {
this.type = event.target.value;
},
handleSubmit() {
// 根据不同的注册类型,执行不同的注册逻辑
switch (this.type) {
case '商户':
this.doMerchantRegister();
break;
case '主播':
this.doAnchorRegister();
break;
case '经纪人':
this.doBrokerRegister();
break;
default:
console.error('未知的注册类型');
}
},
doMerchantRegister() {
// 商户注册逻辑
console.log('商户注册', {
username: this.username,
phone: this.phone,
password: this.password,
confirmPassword: this.confirmPassword,
});
},
doAnchorRegister() {
// 主播注册逻辑
console.log('主播注册', {
username: this.username,
phone: this.phone,
password: this.password,
confirmPassword: this.confirmPassword,
});
},
doBrokerRegister() {
// 经纪人注册逻辑
console.log('经纪人注册', {
username: this.username,
phone: this.phone,
password: this.password,
confirmPassword: this.confirmPassword,
});
},
},
};
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form {
width: 80vw;
max-width: 400px;
background-color: #fff;
border-radius: 4px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.form-label {
width: 80px;
font-size: 16px;
}
.form-input {
flex: 1;
height: 32px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
font-size: 16px;
}
.submit-btn {
width: 100%;
height: 40px;
border: none;
border-radius: 4px;
background-color: #007aff;
color: #fff;
font-size: 16px;
}
</style>
```
这个页面有一个选择注册类型的下拉框,一个用户名输入框、一个手机号输入框、一个密码输入框、一个确认密码输入框和一个注册按钮。
用户选择不同的注册类型后,点击注册按钮会根据不同的类型执行不同的注册逻辑。在示例代码中,我们只是简单地打印出用户注册的信息,实际上应该根据业务需要调用接口进行注册。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)