登录、切换角色

guoshilong

2023-10-27 fbdc9fd53ce80d89b70184db67258f7b3b3a2ebb

 subPackage/user/components/roleList.vue

@@ -1,15 +1,15 @@
<template>
   <view class="role-container">
      <view v-for="(item, index) in roleData">
      <view @click="activeRole(item)" v-for="(item, index) in roleData" :key="index" :class="item.active?'active':''">
         <view class="l">
            <u-icon :name="item.iconName"></u-icon>
            <view class="role-name">
               {{item.roleName}}
            </view>
         </view>
			
         <view class="r">
            <u-icon name="checkmark"></u-icon>

         <view v-if="item.active" class="r">
            <u-icon name="checkmark" color="#2979ff"></u-icon>
         </view>
      </view>
   </view>
@@ -22,13 +22,33 @@
            type: Array,
            default: () => []
         }
      }
      },
      data() {
         return {}
      },

      methods: {

         //启用角色
         activeRole(item) {
            this.roleData.forEach(role => {
               if (role.id == item.id) {
                  role.active = true
               } else {
                  role.active = false
               }
            })

            this.$emit("select", item)

         },
      },
   }
</script>

<style lang="scss" scoped>
   .role-container {
      & > view {
      &>view {
         display: flex;
         justify-content: flex-start;
         align-items: center;
@@ -36,16 +56,20 @@
         padding: 0 16rpx;
         background: #fff;
         height: 80rpx;
			

         .l {
            flex: 1;
            display: flex;
            align-items: center;
				

            .role-name {
               margin-left: 16rpx;
            }
         }
      }
   }

   .active {
      background-color: #e8effb !important;
   }
</style>