medical-mall/pages/mall/admin/distribution/level/index.uvue

<template>
  <view class="admin-page">
    <view class="filter-card">
      <view class="filter-row">
        <view class="filter-item">
          <text class="label">鏄惁鏄剧ず锛?/text>
          <view class="select-mock">
            <text>鍏ㄩ儴</text>
            <text class="arrow">鈻?/text>
          </view>
        </view>
        <view class="filter-item">
          <text class="label">绛夌骇鍚嶇О锛?/text>
          <input class="filter-input" placeholder="璇疯緭鍏ョ瓑绾у悕绉? />
        </view>
        <view class="filter-btns">
          <button class="btn primary" @click="onSearch">鏌ヨ</button>
        </view>
      </view>
    </view>

    <view class="content-card">
      <view class="action-bar">
        <button class="btn primary small" @click="onAdd">娣诲姞绛夌骇</button>
      </view>

      <view class="table-container">
        <view class="table-header">
          <view class="col col-id"><text>ID</text></view>
          <view class="col col-img"><text>鍟嗗搧鍥剧墖</text></view>
          <view class="col col-name"><text>鍚嶇О</text></view>
          <view class="col col-level"><text>绛夌骇</text></view>
          <view class="col col-percent"><text>涓€绾у垎浣ｆ瘮渚?/text></view>
          <view class="col col-percent"><text>浜岀骇鍒嗕剑姣斾緥</text></view>
          <view class="col col-stat"><text>浠诲姟鎬绘暟</text></view>
          <view class="col col-stat"><text>闇€瀹屾垚鏁伴噺</text></view>
          <view class="col col-status"><text>鏄惁鏄剧ず</text></view>
          <view class="col col-ops"><text>鎿嶄綔</text></view>
        </view>

        <view class="table-body">
          <view v-for="item in levelList" :key="item.id" class="table-row">
            <view class="col col-id"><text>{{ item.id }}</text></view>
            <view class="col col-img">
              <image class="table-img" src="/static/logo.png" mode="aspectFill" />
            </view>
            <view class="col col-name"><text>{{ item.name }}</text></view>
            <view class="col col-level"><text>{{ item.level }}</text></view>
            <view class="col col-percent"><text>{{ item.percent1 }}%</text></view>
            <view class="col col-percent"><text>{{ item.percent2 }}%</text></view>
            <view class="col col-stat"><text>{{ item.taskTotal }}</text></view>
            <view class="col col-stat"><text>{{ item.taskFinish }}</text></view>
            <view class="col col-status">
              <switch :checked="item.show" color="#1890ff" scale="0.8" />
            </view>
            <view class="col col-ops">
              <text class="op-link">绛夌骇浠诲姟</text>
              <text class="op-divider">|</text>
              <text class="op-link">缂栬緫</text>
              <text class="op-divider">|</text>
              <text class="op-link">鍒犻櫎</text>
            </view>
          </view>
        </view>
      </view>

      <view class="pagination">
        <text class="page-info">鍏?{{ levelList.length }} 鏉?/text>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const levelList = ref([
  { id: '1', name: '涓€绾у垎閿€鍛?, level: 1, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
  { id: '2', name: '浜岀骇鍒嗛攢鍛?, level: 2, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
  { id: '3', name: '涓夌骇鍒嗛攢鍛?, level: 3, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
  { id: '4', name: '鍥涚骇鍒嗛攢鍛?, level: 4, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
  { id: '5', name: '浜旂骇鍒嗛攢鍛?, level: 5, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true }
])

function onSearch() {
  uni.showToast({ title: '鏌ヨ涓?..', icon: 'none' })
}

function onAdd() {
  uni.showToast({ title: '寮€濮嬫坊鍔?, icon: 'none' })
}
</script>

<style scoped lang="scss">
.admin-page {
  /* padding removed */
  
  
}

.filter-card {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 16px;
}

.filter-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.label {
  font-size: 14px;
  color: #333;
}

.select-mock {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  height: 32px;
  width: 160px;
  padding: 0 12px;
  background: #fff;
  text { font-size: 14px; color: #666; }
  .arrow { font-size: 10px; color: #bfbfbf; }
}

.filter-input {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  height: 32px;
  width: 220px;
  padding: 0 12px;
  font-size: 14px;
}

.btn {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
}

.btn.primary {
  background: #1890ff;
  border-color: #1890ff;
  color: #fff;
}

.btn.small {
  height: 32px;
  padding: 0 12px;
}

.content-card {
  background: #fff;
  border-radius: 4px;
  padding: 0;
}

.action-bar {
  padding: 16px 24px;
}

.table-container {
  padding: 0 24px 24px;
}

.table-header {
  display: flex;
  flex-direction: row;
  background: #f8faff;
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
  align-items: center;

  &:hover {
    background: #fafafa;
  }
}

.col {
  padding: 0 8px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.col-id { width: 50px; }
.col-img { width: 80px; justify-content: center; }
.col-name { width: 120px; }
.col-level { width: 80px; justify-content: center; }
.col-percent { width: 120px; justify-content: center; }
.col-stat { width: 100px; justify-content: center; }
.col-status { width: 100px; justify-content: center; }
.col-ops {
  flex: 1;
  justify-content: flex-end;
  padding-right: 16px;
}

.table-img {
  width: 32px;
  height: 32px;
  border-radius: 2px;
}

.op-link {
  color: #1890ff;
  cursor: pointer;
  font-size: 14px;
}

.op-divider {
  color: #e8e8e8;
  margin: 0 8px;
}

.pagination {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}

.page-info {
  font-size: 14px;
  color: #999;
}
</style>