修改

src/components/cu-navbar/index.vue

@@ -6,7 +6,11 @@
     :titleStyle="titleStyle"
     fixed
     placeholder
+    :isBack="isBack"
   >
+  <template #right>
+    <slot name="right"></slot>
+  </template>
   </uv-navbar>
 </template>
 <script setup>
@@ -27,5 +31,9 @@ const props = defineProps({
     type: Object,
     default: () => ({ color: '#fff' }),
   },
+  isBack: {
+    type: Boolean,
+    default: true,
+  }
 })
 </script>

src/pages.json

@@ -42,6 +42,23 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages/user",
+      "pages": [
+        {
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "员工管理"
+          }
+        },
+        {
+          "path": "update",
+          "style": {
+            "navigationBarTitleText": "修改信息"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {

src/pages/mine/index.vue

@@ -41,7 +41,7 @@ const opList = [
       {
         icon: 'photo-fill',
         title: '员工管理',
-        url: '',
+        url: '/pages/user/index',
       },
       {
         icon: 'lock',

src/pages/user/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <view>
+    <CuNavbar title="员工管理">
+      <template #right>
+        <text @click="goPage('/pages/user/update')" class="text-white">添加</text>
+      </template>
+    </CuNavbar>
+
+    <uv-drop-down
+      ref="dropDown"
+      sign="dropDown_1"
+      text-active-color="#3c9cff"
+      :extra-icon="{ name: 'arrow-down-fill', color: '#666', size: '26rpx' }"
+      :extra-active-icon="{
+        name: 'arrow-up-fill',
+        color: '#3c9cff',
+        size: '26rpx',
+      }"
+      :defaultValue="['all', 'all']"
+      :custom-style="{ padding: '0 30rpx' }"
+      @click="selectMenu"
+    >
+      <uv-drop-down-item
+        name="area"
+        type="2"
+        :label="dropDownData.area.label"
+        :value="dropDownData.area.value"
+      >
+      </uv-drop-down-item>
+      <uv-drop-down-item
+        name="store"
+        type="2"
+        :label="dropDownData.store.label"
+        :value="dropDownData.store.value"
+      >
+      </uv-drop-down-item>
+    </uv-drop-down>
+
+    <view class="mt-15rpx">
+      <uv-swipe-action>
+        <uv-swipe-action-item v-for="item in 3" :key="item" :options="options">
+          <view class="flex p-20rpx">
+            <view class="rounded-4rpx bg-true-gray-400 w-100rpx h-100rpx">
+            </view>
+            <view class="flex-1 ml-20rpx flex flex-col justify-between">
+              <view class="flex items-center text-sm">
+                <view>员工名称</view>
+                <uv-tags
+                  class="ml-20rpx"
+                  text="职位"
+                  plain
+                  size="mini"
+                  type="primary"
+                ></uv-tags>
+              </view>
+              <view>
+                <view class="text-28rpx text-hex-999 text-xs">188888888</view>
+              </view>
+            </view>
+          </view>
+        </uv-swipe-action-item>
+      </uv-swipe-action>
+    </view>
+  </view>
+</template>
+<script setup>
+import CuNavbar from '@/components/cu-navbar/index'
+import { computed, reactive, ref } from 'vue'
+const options = [
+  {
+    text: '删除',
+    style: {
+      backgroundColor: '#f56c6c',
+    },
+  },
+  {
+    text: '修改',
+    style: {
+      backgroundColor: '#3c9cff',
+    },
+  },
+  {
+    text: '离职',
+    style: {
+      backgroundColor: '#f9ae3d',
+    },
+  },
+]
+const dropDownData = reactive({
+  area: {
+    label: '全部区域',
+    value: 'all',
+    activeIndex: 0,
+    color: '#333',
+    activeColor: '#2878ff',
+    child: [
+      {
+        label: '全部区域',
+        value: 'all',
+      },
+      {
+        label: '重庆',
+        value: 'cq',
+      },
+      {
+        label: '北京',
+        value: 'bj',
+      },
+    ],
+  },
+  store: {
+    label: '全部门店',
+    value: 'all',
+    activeIndex: 0,
+    color: '#333',
+    activeColor: '#2878ff',
+    child: [
+      {
+        label: '全部门店',
+        value: 'all',
+      },
+      {
+        label: '门店1',
+        value: 'new',
+      },
+      {
+        label: '门店2',
+        value: 'money',
+      },
+    ],
+  },
+})
+
+const result = ref([])
+
+const activeName = ref('area')
+
+const selectMenu = (e) => {
+  const { name, active, type } = e
+  activeName.value = name
+  const find = result.value.find((item) => item.name == activeName.value)
+  if (find) {
+    const findIndex = dropDownData[activeName.value].child.findIndex(
+      (item) => item.label == find.label && item.value == find.value
+    )
+    dropDownData[activeName.value].activeIndex = findIndex
+  } else {
+    dropDownData[activeName.value].activeIndex = 0
+  }
+}
+
+const goPage = (url) => {
+  uni.navigateTo({
+    url,
+  })
+}
+</script>

src/pages/user/update.vue

@@ -0,0 +1,45 @@
+<template>
+  <view>
+    <CuNavbar title="员工添加">
+      <template #right>
+        <view class="text-white">保存</view>
+      </template>
+    </CuNavbar>
+    <view class="px-base">
+      <uv-form labelPosition="left" ref="form" labelWidth="150rpx">
+        <uv-form-item required label="姓名" prop="userInfo.name" borderBottom>
+          <uv-input placeholder="请输入姓名" inputAlign="right" border="none">
+          </uv-input>
+        </uv-form-item>
+        <uv-form-item required label="手机号" prop="userInfo.name" borderBottom>
+          <uv-input placeholder="请输入手机号" inputAlign="right" border="none">
+          </uv-input>
+        </uv-form-item>
+        <uv-form-item
+          required
+          label="登录用户名"
+          prop="userInfo.name"
+          borderBottom
+        >
+          <uv-input
+            placeholder="请输入登录用户名"
+            inputAlign="right"
+            border="none"
+          >
+          </uv-input>
+        </uv-form-item>
+        <uv-form-item :required="false" label="登录密码" prop="userInfo.name">
+          <uv-input
+            placeholder="请输入登录密码"
+            inputAlign="right"
+            border="none"
+          >
+          </uv-input>
+        </uv-form-item>
+      </uv-form>
+    </view>
+  </view>
+</template>
+<script setup>
+import CuNavbar from '@/components/cu-navbar/index'
+</script>