You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
5.4 KiB
263 lines
5.4 KiB
<template>
|
|
<view class="roleSelector">
|
|
<uv-popup ref="popup" :round="30" :customStyle="{height: '60vh'}">
|
|
<view class="content">
|
|
<view class="header">
|
|
<view class="title">选择身份</view>
|
|
<view class="close-btn" @click="close">
|
|
<uv-icon name="close" size="20" color="#999"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="role-tip">请选择您的身份类型：</view>
|
|
|
|
<view class="role-list">
|
|
<view
|
|
v-for="(role, index) in roleOptions"
|
|
:key="index"
|
|
:class="['role-item', selectedRole === role.value && 'active']"
|
|
@click="selectRole(role.value)">
|
|
<view class="role-icon">
|
|
<uv-icon :name="getRoleIcon(role.value)" size="20" :color="selectedRole === role.value ? '#007AFF' : '#666'"></uv-icon>
|
|
</view>
|
|
<view class="role-info">
|
|
<view class="role-name">{{ role.label }}</view>
|
|
<view class="role-desc">{{ getRoleDesc(role.value) }}</view>
|
|
</view>
|
|
<view class="role-check">
|
|
<uv-icon v-if="selectedRole === role.value" name="checkmark-circle" size="20" color="#007AFF"></uv-icon>
|
|
<uv-icon v-else name="close-circle" size="20" color="#ccc"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="action-buttons">
|
|
<view class="btn cancel" @click="close">取消</view>
|
|
<view class="btn confirm" @click="confirmRoleChange">确认</view>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters, mapMutations } from 'vuex'
|
|
|
|
export default {
|
|
name: 'RoleSelector',
|
|
data() {
|
|
return {
|
|
selectedRole: '0'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['role']),
|
|
...mapGetters(['getRoleOptions']),
|
|
roleOptions() {
|
|
return this.getRoleOptions;
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations(['switchRole']),
|
|
|
|
// 打开角色选择弹窗
|
|
open() {
|
|
this.selectedRole = this.role;
|
|
this.$refs.popup.open('bottom');
|
|
},
|
|
|
|
// 关闭弹窗
|
|
close() {
|
|
this.$refs.popup.close();
|
|
},
|
|
|
|
// 选择角色
|
|
selectRole(roleValue) {
|
|
this.selectedRole = roleValue;
|
|
},
|
|
|
|
// 确认角色切换
|
|
confirmRoleChange() {
|
|
if (this.selectedRole !== this.role) {
|
|
// 使用Vuex mutation切换角色
|
|
this.switchRole(this.selectedRole);
|
|
uni.showToast({
|
|
title: `已切换到${this.getCurrentRoleText(this.selectedRole)}`,
|
|
icon: 'success'
|
|
});
|
|
|
|
// 触发父组件事件
|
|
this.$emit('roleChanged', this.selectedRole);
|
|
}
|
|
this.close();
|
|
},
|
|
|
|
// 获取角色图标
|
|
getRoleIcon(roleValue) {
|
|
switch(roleValue) {
|
|
case '0': return 'man';
|
|
case '1': return 'bag';
|
|
case '2': return 'man-add';
|
|
case '3': return 'setting';
|
|
default: return 'man';
|
|
}
|
|
},
|
|
|
|
// 获取角色描述
|
|
getRoleDesc(roleValue) {
|
|
switch(roleValue) {
|
|
case '0': return '接单赚钱，自由工作';
|
|
case '1': return '发布订单，管理业务';
|
|
case '2': return '协助管理，处理订单';
|
|
case '3': return '区域管理，审核订单';
|
|
default: return '';
|
|
}
|
|
},
|
|
|
|
// 获取当前角色文本
|
|
getCurrentRoleText(roleValue) {
|
|
const role = this.roleOptions.find(r => r.value === roleValue);
|
|
return role ? role.label : '用户/泵司';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.roleSelector {
|
|
.content {
|
|
padding: 30rpx 20rpx;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.close-btn {
|
|
padding: 10rpx;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.role-tip {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.role-list {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.role-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 25rpx 20rpx;
|
|
border-radius: 15rpx;
|
|
border: 2rpx solid #f0f0f0;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
border-color: #007AFF;
|
|
background-color: #f0f8ff;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #f8f8f8;
|
|
}
|
|
}
|
|
|
|
.role-icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
background-color: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.role-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.role-name {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.role-desc {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.role-check {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
padding-top: 20rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&.cancel {
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
|
|
&:hover {
|
|
background-color: #e8e8e8;
|
|
}
|
|
}
|
|
|
|
&.confirm {
|
|
background-color: #007AFF;
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
background-color: #0056CC;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|