shenze-sysMan/src/views/accountPer/index.vue

<template>
  <!-- 账号权限 -->
  <div class="account-management-page">
    <s-header :name="$t('accountPer.accountPermission')" :noback="false" />

    <div class="management-container">
      <!-- 操作工具栏 -->
      <div class="dashboard-toolbar">
        <!-- 统计信息 -->
        <div class="statistics-card">
          <van-icon name="user" class="statistics-icon" />
          <div class="statistics-content">
            <div class="statistics-label">{{ $t('accountPer.chirdAccountTotal') }}</div>
            <div class="statistics-value">{{ accountPerList.length }}</div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <van-button icon="friends" class="action-btn" @click="pushRole">
            {{ $t('accountPer.rolePermissions') }}
          </van-button>
          <van-button type="primary" icon="plus" class="action-btn" @click="pushAdd">
            {{ $t('accountPer.add') }}
          </van-button>
          <van-button icon="filter-o" class="action-btn" @click="searchClick">
            {{ $t('accountPer.screen') }}
          </van-button>
        </div>
      </div>

      <!-- 账户列表 -->
      <div class="account-list">
        <van-cell-group>
          <div v-for="(item, index) in accountPerList" :key="index" class="account-card" @click="accountClick(item)">
            <div class="card-header">
              <div class="account-info">
                <h3 class="account-name">
                  {{ decodeURIComponent(item.name) }}
                  <van-tag :color="item.isEnabled ? '#e8f5e9' : '#ffebee'"
                    :text-color="item.isEnabled ? '#4caf50' : '#ff5252'" class="status-tag">
                    {{ item.isEnabled ? $t('accountPer.effective') : $t('accountPer.paused') }}
                  </van-tag>
                </h3>
                <div class="account-id">@{{ item.username }}</div>
              </div>
              <van-icon name="arrow" class="arrow-icon" />
            </div>

            <div class="role-info">
              <van-icon name="user" class="role-icon" />
              <span class="role-text">{{ item.roleName }}</span>
            </div>
          </div>
        </van-cell-group>
      </div>
    </div>

    <accountPerSearch ref="searchRef" @search="search($event)" />
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from 'vue';
import sHeader from "../../components/SimpleHeader";
import { getChildAdminList } from '../../service/accountPar/index';
import { showFailToast } from 'vant';
import { getLoginUser } from "../../common/js/utils";
import accountPerSearch from './search.vue';
import { useRouter } from "vue-router";

export default {
  name: 'accountPer',
  components: { sHeader, accountPerSearch },
  // components: { accountPerSearch },
  setup() {
    const router = useRouter();
    const searchRef = ref(null);
    const accountPerList = ref([]); // 列表集合
    let searchParams = reactive({
      adminId: "", // 用户账户id
      current: 1, // 页数
      size: 20, // 页大小
      isUse: '0', // 是否使用
      // type: null // 优惠码类型 0或null:折扣优惠码；1：抵扣价优惠码
    });
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      // styleUrl('accountPer')
      // 初始化列表及页码
      const user = getLoginUser();
      if (user) {
        searchParams.adminId = user.id;
        searchGetList();
      }
    });
    // 搜索点击
    const searchClick = () => { searchRef.value.showSearch(); };
    // 跳转添加账号
    const pushAdd = () => { localStorage.removeItem('accoutPerSet'); router.push('/accountPerAdd'); }
    // 跳转角色权限页面
    const pushRole = () => { router.push('/role'); }
    // 查询列表
    const searchGetList = () => {
      accountPerList.value = [];
      searchParams.current = 1;
      getList();
    }
    // 搜索弹窗触发搜索
    const search = (data) => {
      searchParams = Object.assign(searchParams, data);
      searchGetList();
    };
    // 获取设备列表数据
    const getList = async () => {
      const { data } = await getChildAdminList(Object.assign({}, searchParams));
      if (data.code === "00000") {
        accountPerList.value = accountPerList.value.concat(data.data);
      } else { showFailToast(data.message); }
    };
    // 跳转修改
    const accountClick = (item) => {
      localStorage.setItem('accoutPerSet', JSON.stringify(item));
      router.push('/accountPerAdd');
    };

    // 回到上一页 账户操作页
    // const onClickLeft = () => {
    //   router.push('/accountOperation');
    // };
    return {
      searchRef,
      searchClick,
      pushAdd,
      pushRole,
      search,
      accountPerList,
      ...toRefs(searchParams),
      accountClick,
      // onClickLeft,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";

.account-management-page {
  background: #f8f9fa;
  min-height: 100vh;

  .management-container {
    padding: 16px;

    .dashboard-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      padding: 0 16px;

      .statistics-card {
        flex: 1;
        background: linear-gradient(135deg, #f8f9ff, #ffffff);
        border-radius: 12px;
        padding: 16px;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(78, 107, 221, 0.08);

        .statistics-icon {
          font-size: 24px;
          color: #4e6bdd;
          margin-right: 12px;
          padding: 8px;
          background: rgba(78, 107, 221, 0.1);
          border-radius: 8px;
        }

        .statistics-content {
          .statistics-label {
            font-size: 12px;
            color: #8787a6;
            margin-bottom: 4px;
          }

          .statistics-value {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
          }
        }
      }

      .action-buttons {
        display: flex;
        gap: 12px;
        flex-shrink: 0;

        .action-btn {
          height: 40px;
          padding: 0 16px;
          border-radius: 20px;
          font-size: 14px;
          transition: all 0.2s;

          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(78, 107, 221, 0.15);
          }

          &:active {
            transform: translateY(0);
          }

          // 主按钮特殊样式
          &[type="primary"] {
            background: linear-gradient(135deg, #4e6bdd, #3b5ab3);
            border: none;
          }
        }
      }
    }

    @media (max-width: 768px) {
      .dashboard-toolbar {
        flex-direction: column;

        .statistics-card {
          width: 100%;
        }

        .action-buttons {
          width: 100%;
          flex-wrap: wrap;

          .action-btn {
            flex: 1;
            min-width: 120px;
          }
        }
      }
    }

    .account-list {
      .account-card {
        margin-bottom: 12px;
        padding: 16px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: transform 0.2s;

        &:active {
          transform: scale(0.98);
        }

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .account-info {
            flex: 1;

            .account-name {
              margin: 0 0 4px 0;
              font-size: 16px;
              color: #2c3e50;
              display: flex;
              align-items: center;

              .status-tag {
                margin-left: 8px;
                font-size: 12px;
                border: none;
              }
            }

            .account-id {
              font-size: 12px;
              color: #8787a6;
            }
          }

          .arrow-icon {
            color: #c0c4cc;
            font-size: 16px;
          }
        }

        .role-info {
          display: flex;
          align-items: center;
          padding: 8px 0;
          border-top: 1px solid #eee;

          .role-icon {
            color: #4e6bdd;
            font-size: 14px;
            margin-right: 6px;
          }

          .role-text {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
}
</style>