手持登录首页调整

src/App.vue

@@ -24,6 +24,102 @@ router.afterEach(() => {
 })
 </script>
 <style >
+.flex {
+  display: flex;
+}
+
+.flexColumn {
+  flex-direction: column;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+}
+
+.alignCenter {
+  align-items: center;
+}
+
+.alignStart {
+  align-items: flex-start;
+}
+
+.alignEnd {
+  align-items: flex-end;
+}
+
+.spaceBetween {
+  justify-content: space-between;
+}
+
+.spaceEvenly {
+  justify-content: space-evenly;
+}
+
+.spaceAround {
+  justify-content: space-around;
+}
+
+.spaceCenter {
+  justify-content: center;
+}
+
+.justifyEnd {
+  justify-content: flex-end;
+}
+
+.allFlex {
+  flex: 1;
+}
+
+.flexWrap {
+  flex-wrap: wrap;
+}
+
+.flexNoWrap {
+  flex-wrap: nowrap;
+}
+
+.width1 {
+  width: 10%;
+}
+
+.width2 {
+  width: 20%;
+}
+
+.width3 {
+  width: 30%;
+}
+
+.width4 {
+  width: 40%;
+}
+
+.width5 {
+  width: 50%;
+}
+
+.width6 {
+  width: 60%;
+}
+
+.width7 {
+  width: 70%;
+}
+
+.width8 {
+  width: 80%;
+}
+
+.width9 {
+  width: 90%;
+}
+
+.width10 {
+  width: 100%;
+}
 
 
 

src/components/SelectWarehouse.vue

@@ -0,0 +1,68 @@
+<template>
+  <van-popup v-model:show="warehouseTrueFalseBy" position="center" round :close-on-click-overlay="false">
+    <div class="select-warehouses">
+      <div class="title">
+        工作仓库设置
+      </div>
+      <van-radio-group v-model="code">
+        <van-cell-group inset>
+          <van-cell :title="value" clickable v-for="(value, key) in warehousesMap" @click="groupChange(key)">
+            <template #right-icon>
+              <van-radio :name="key" />
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </van-radio-group>
+      <div class="btn" @click="onConfirm"> 确定</div>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useStore } from '@/store/modules/user'
+// 创建响应式数据
+const warehouseTrueFalseBy = ref(false)
+const warehousesMap = ref({
+  'WH99': '测试仓库(WH99)',
+  'WH01': '九干仓(WH01)',
+  'WH02': '新浜一仓(WH02)',
+  'WH10': '新浜二仓(WH10)',
+})
+const code = ref('')
+const show = (warehouse) => {
+  warehouseTrueFalseBy.value = true
+  code.value = warehouse
+}
+const groupChange = (n) => {
+  code.value = n
+}
+// 确认按钮事件
+const storeUser = useStore()
+const emit = defineEmits(['setWarehouse'])
+const onConfirm = () => {
+  storeUser.setToken({ warehouse: code.value, token: storeUser.token })
+  emit('setWarehouse', code.value)
+  warehouseTrueFalseBy.value = false
+}
+defineExpose({ show })
+</script>
+<style scoped lang="sass">
+.select-warehouses
+  padding: 10px 15px
+  width: 300px
+
+  .title
+    font-size: 16px
+    font-weight: 500
+    padding-bottom: 10px
+
+  .radio-item
+    margin-bottom: 10px
+
+  .btn
+    color: #3c9cff
+    line-height: 30px
+    text-align: center
+    cursor: pointer
+</style>

src/hooks/basic/menu.js

@@ -0,0 +1,109 @@
+import {
+  reactive,
+  ref
+} from "vue"
+
+export default function() {
+
+  const menuList = reactive([
+    {
+      title: '工作台',
+      id: 0,
+      icon: "home-o",
+      menu:[{
+        title:'入库',
+        children: [
+          {
+            title: '收货',
+            icon: 'newspaper-o',
+            path: "take-delivery"
+          },
+          {
+            title: '盲扫',
+            icon: 'newspaper-o',
+            path: "blind-receiving"
+          },
+          {
+            title: '海康快上',
+            icon: 'newspaper-o',
+            path: "hik-putaway-allocation"
+          },
+          {
+            title: '海康上架',
+            icon: 'newspaper-o',
+            path: "hik-putaway"
+          },
+          {
+            title: '海康入库',
+            icon: 'newspaper-o',
+            path: "hik-box-return"
+          },
+        ]
+      },
+        {
+          title:'出库',
+          children: [
+            {
+              title: '拣货',
+              icon: 'newspaper-o',
+              path: 'picking'
+            },
+            {
+              title: '拣货(巷道)',
+              icon: 'newspaper-o',
+              path: "picking-aisle"
+            },
+            {
+              title: '活动单复核',
+              icon: 'newspaper-o',
+              path: "check-activity"
+            },
+            {
+              title: 'B2B复核',
+              icon: 'newspaper-o',
+              path: "check-large"
+            },
+            {
+              title: '复核还库',
+              icon: 'newspaper-o',
+              path: "check-move-stock"
+            },
+          ]
+        },
+        {
+          title:'库存',
+          children: [
+            {
+              title: '移库任务',
+              icon: 'newspaper-o',
+              path: "move-list"
+            },
+          ]
+        },
+        {
+          title:'其他',
+          children: [
+            {
+              title: '加工单',
+              icon: 'newspaper-o',
+              path: "processing"
+            },
+            {
+              title: '计件面板',
+              icon: 'newspaper-o',
+              path: "piece-dashboard"
+            },
+            {
+              title: '退货登记',
+              icon: 'newspaper-o',
+              path: "returned-register"
+            },
+          ]
+        }
+      ]
+    },
+  ]);
+  return {
+    menuList
+  }
+}

src/views/index.vue

@@ -1,59 +1,230 @@
 <template>
-  <div class="container">
-    <van-image class="image" :src="imageUrl" ></van-image>
-    <div class="name" >{{userInfo.username}}</div>
-    <div class="home" @click="onRouter('picking')">拣货</div>
-<!--    <div class="home" @click="onRouter('picking-aisle')">巷道拣货</div>-->
-    <div class="home" @click="onRouter('blind-receiving')">盲扫</div>
-<!--    <div class="home" @click="onRouter('check-move-stock')">反拣还库</div>-->
-    <div class="home" @click="onRouter('piece-dashboard')">计件面板</div>
-    <div class="home" @click="onRouter('take-delivery')">收货</div>
-    <div class="home" @click="onRouter('hik-putaway-allocation')">海康上架-调度</div>
-    <div class="home" @click="onRouter('hik-putaway')">海康上架</div>
-    <div class="home" @click="onRouter('hik-box-return')">海康-入库/解绑</div>
-    <div class="home" @click="onRouter('check-activity')">复核-活动单</div>
-    <div class="home" @click="onRouter('check-large')">复核-大件单</div>
-    <div class="home" @click="onRouter('move-list')">调拨-移库</div>
-    <div class="home" @click="onRouter('processing')">加工登记</div>
-    <div class="home" @click="onRouter('returned-register')">退货-登记</div>
+  <div class="warehouse container">
+    <div v-if="menuTrueFalseBy" class="menu">
+      <div class="name">
+        {{ userInfo.username }}
+      </div>
+      <div
+        v-for="(item, index) in menuList"
+        :key="index"
+        :class="menuId === item.id ? 'active' : ''"
+        @click="onConfirm(item)"
+        class="title flex"
+      >
+        <div class="icon">
+          <van-icon :name="item.icon"></van-icon>
+        </div>
+        <div>{{ item.title }}</div>
+      </div>
+      <div class="title flex" style="margin-top: 30px;" @click="outLogin">
+        <div class="icon">
+          <van-icon name="upgrade" />
+        </div>
+        <div>退出登录</div>
+      </div>
+    </div>
+    <div :class="menuTrueFalseBy ? 'content-box' : 'content-show'">
+      <div class="content">
+        <van-nav-bar
+          placeholder
+          :fixed="!menuTrueFalseBy"
+          @click-left="back"
+          @click-right="showSelect"
+        >
+          <template #left>
+            <div class="u-nav-slot">
+              <van-icon name="bars" size="25" />
+            </div>
+          </template>
+          <template #title>
+            <div class="flex flexColumn alignCenter">
+              <div>工作台</div>
+            </div>
+          </template>
+          <template #right>
+            <div style="color: #fff">{{ warehousesMap[warehouse] }}</div>
+          </template>
+        </van-nav-bar>
+        <div class="menu-box">
+          <div v-for="(item, index) in menuList[menuId].menu" class="menu-list">
+            <div class="menu-title">{{ item.title }}</div>
+            <div class="menu-item-box">
+              <div v-for="(items, index) in item.children" class="menu-item" @click="onRouter(items.path)">
+                <div class="menu-item-icon">
+                  <van-icon :name="items.icon" size="28" />
+                </div>
+                <div class="menu-item-title">{{ items.title }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="menuTrueFalseBy" @click="hideMenu" class="hide-menu"></div>
+    </div>
+    <select-warehouse ref="selectWarehouseRef" @setWarehouse="setWarehouse" />
   </div>
 </template>
+
 <script setup>
-import imageUrl from '@/assets/img.png'
-import { useRouter } from 'vue-router'
-import { getHeader } from '@/utils/android.ts'
-import { useStore } from '@/store/modules/user.ts'
-import { getUserInfo } from '@/api/login/index.ts'
 import { ref } from 'vue'
+import menu from '@/hooks/basic/menu.js'
+import { useRouter } from 'vue-router'
+import { getHeader, goBack } from '@/utils/android'
+import { useStore } from '@/store/modules/user'
+import { getUserInfo } from '@/api/login/index'
+import SelectWarehouse from '@/components/SelectWarehouse.vue'
+import { showToast } from 'vant'
+
 const router = useRouter()
-const onRouter=(path)=>{
-  router.push(`/${path}`)
-}
 const store = useStore()
-const userInfo=ref({})
+const userInfo = ref({})
 try {
   getHeader()
-}catch (error) {
+} catch (error) {
 }
-setTimeout(()=>{
+setTimeout(() => {
   getUserInfo().then(res => {
-    userInfo.value=res.data
+    userInfo.value = res.data
   })
-},300)
+}, 300)
 
+const { menuList } = menu()
+const menuId = ref(0)
+const menuTrueFalseBy = ref(false)
+const storeUser = useStore()
+const warehouse = ref(storeUser.warehouse)
+const warehousesMap = ref({
+  'WH99': '测试仓库(WH99)',
+  'WH01': '九干仓(WH01)',
+  'WH02': '新浜一仓(WH02)',
+  'WH10': '新浜二仓(WH10)',
+})
+const onRouter = (path) => {
+  router.push(`/${path}`)
+}
+const onConfirm = (item) => {
+  menuTrueFalseBy.value = false
+}
+const back = () => {
+  try {
+    window.android.goBack()
+  }catch (e){
+    menuTrueFalseBy.value = true
+  }
+}
+const selectWarehouseRef = ref(null)
+const showSelect = () => {
+  try {
+    if(window.android.getHeader()){
+      showToast('app内不支持切换仓库')
+    }
+  }catch (e){
+    selectWarehouseRef.value.show(warehouse.value)
+  }
+
+}
+const hideMenu = () => {
+  if (menuTrueFalseBy.value) {
+    menuTrueFalseBy.value = false
+  }
+}
+const setWarehouse = (code) => {
+  warehouse.value = code
+}
+const outLogin = () => {
+  router.push(`/login`)
+}
 </script>
-<style scoped lang="sass" >
-.container
+
+<style lang="sass" scoped>
+.warehouse
+  width: 100%
   height: 100vh
-  .image
-    margin: 20px
-  .home
-    cursor: pointer
-    padding: 5px
-    font-size: 16px
-    text-decoration: underline
-    color: #0077ff
-  .name
-    font-size: 20px
-    color: #0077ff
+  display: flex
+
+  .menu
+    width: 50%
+    margin-left: 15px
+
+    .name
+      margin: 50px auto
+      text-align: center
+      font-size: 18px
+      font-weight: 500
+
+    .title
+      line-height: 40px
+
+    .active
+      color: #3c9cff
+
+  .content-box
+    width: 50%
+    transition: width 0.2s
+    overflow: hidden
+    background-color: #ffffff
+    margin: 80px 0 110px 0
+    position: relative
+
+    .content
+      width: 375px
+      overflow: hidden
+      transform: scale(0.75)
+      transform-origin: left top
+      pointer-events: none
+
+      .menu-box
+        .menu-list
+          background: #fff
+          padding: 10px 0
+          font-size: 13px
+          margin-bottom: 10px
+          color: #333
+
+          .menu-title
+            padding: 0 15px 10px 15px
+            text-align: left
+
+          .menu-item-box
+            display: flex
+
+            .menu-item
+              width: 25%
+
+    .hide-menu
+      position: absolute
+      height: 100%
+      width: 100%
+      left: 0
+      right: 0
+      top: 0
+      bottom: 0
+
+
+  .content-show
+    width: 100%
+
+    .content
+      .menu-box
+        .menu-list
+          background: #fff
+          padding: 10px 0
+          font-size: 13px
+          margin-bottom: 10px
+          color: #333
+
+          .menu-title
+            padding: 0 15px 10px 15px
+            text-align: left
+
+          .menu-item-box
+            display: flex
+
+            .menu-item
+              width: 25%
+
+  .grid-text
+    font-size: 14px
+    color: #909399
+    padding: 5px 0 10px 0
 </style>

src/views/login/login.vue

@@ -1,7 +1,10 @@
 
 <template>
   <div class="container">
-    <van-form  style="margin-top: 16px;" >
+    <div class="container-bg">
+
+    </div>
+    <van-form  style="margin-top: -26px;" >
       <van-cell-group inset>
         <van-field
           v-model="warehouse"
@@ -9,6 +12,7 @@
           name="仓库"
           label="仓库"
           placeholder="仓库"
+          autocomplete="off"
           :rules="[{ required: true, message: '请填写仓库' }]"
         />
         <van-field
@@ -17,9 +21,10 @@
           name="用户名"
           label="用户名"
           placeholder="用户名"
+          autocomplete="off"
+          label-align="top"
           :rules="[{ required: true, message: '请填写用户名' }]"
         />
-
         <van-field
           v-model="password"
           type="password"
@@ -27,14 +32,13 @@
           name="密码"
           label="密码"
           placeholder="密码"
+          autocomplete="off"
+          label-align="top"
           :rules="[{ required: true, message: '请填写密码' }]"
         />
-
       </van-cell-group>
       <div style="margin: 16px;">
-        <van-button round block type="primary" @click="onConfirm" native-type="submit">
-          提交
-        </van-button>
+        <van-button round block type="primary" @click="onConfirm" native-type="submit">登录</van-button>
       </div>
     </van-form>
   </div>
@@ -65,3 +69,12 @@ const onConfirm = async () => {
 }
 
 </script>
+<style scoped lang="sass">
+.container
+  .container-bg
+    height: 190px
+    width: 100%
+    background: url("../../assets/login_bg.jpg") no-repeat
+    background-size: 100%
+
+</style>