feat: 完成审批访客预约套件封装+选择门禁点页面

src/pages.json

@@ -241,7 +241,11 @@
     },
     {
       "path": "pages/select/select-access-control",
-      "type": "page"
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "disableScroll": true
+      }
     },
     {
       "path": "pages/select/select-organization",

src/pages/approval/components/NavigatorSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="px-2 text-3.5">
     <view v-if="inline">
-      <view class="flex flex-items-center pos-relative pb-1.5">
+      <view class="flex flex-items-center pos-relative pb-1.5" @click="toSelect">
         <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
         <view>{{ title }}</view>
         <view class="ml-a mr-2" :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
@@ -68,7 +68,12 @@
   const toSelect = () => {
     if (props.type === 'accessControl') {
       uni.navigateTo({
-        url: `/pages/select/select-access-control`
+        url: `/pages/select/select-access-control`,
+        events: {
+          change: res => {
+            console.log(1111, res)
+          }
+        }
       })
     } else {
       const params = {

src/pages/approval/components/VisitDuration.vue

@@ -0,0 +1,194 @@
+<template>
+  <view class="px-2 text-3.5">
+    <view v-if="inline">
+      <view class="flex flex-items-center pos-relative pb-1.5" @click="toSelect">
+        <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
+        <view>{{ title }}</view>
+        <view class="ml-a mr-2" :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
+          {{ text || placeholder }}
+        </view>
+        <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
+      </view>
+    </view>
+    <view v-else>
+      <view class="flex flex-items-center pos-relative">
+        <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
+        <view>{{ title }}</view>
+      </view>
+      <view class="py-2" @click="toSelect">
+        <view class="flex flex-items-center flex-justify-between">
+          <view :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
+            {{ text || placeholder }}
+          </view>
+          <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
+        </view>
+      </view>
+    </view>
+    <wd-popup v-model="show" position="bottom" custom-style="border-radius:12rpx;">
+      <view v-if="showDuration">
+        <view
+          class="px-4 py-2 text-3.5 border-b-1 border-[#dcdcdc] border-solid flex flex-items-center"
+        >
+          <view @click="show = false">取消</view>
+          <view class="font-bold text-4 flex-1 text-center">访问时长</view>
+          <view class="flex flex-items-center" @click="changeSelect">
+            <view class="custom-color-blue">自定义时间</view>
+            <wd-icon name="arrow-right" size="14px" class="ml-1" color="#255cf7"></wd-icon>
+          </view>
+        </view>
+        <scroll-view class="h-60 text-3.5" :scroll-y="true">
+          <view
+            v-for="item in durationList"
+            :key="item.value"
+            @click="changeDuration(item)"
+            class="py-4 px-4 flex flex-items-center"
+          >
+            <view>{{ item.label }}</view>
+            <view
+              class="bg-#f3f5fa ml-a w-12 h-6 rounded-5 flex flex-items-center flex-justify-center"
+            >
+              <wd-icon
+                v-if="duration === item.label"
+                name="check"
+                size="15px"
+                class="ml-1"
+                color="#255cf7"
+              ></wd-icon>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+      <view v-else>
+        <view
+          class="px-4 py-2 text-3.5 border-b-1 border-[#dcdcdc] border-solid flex flex-items-center"
+        >
+          <view class="flex flex-items-center" @click="showDuration = true">
+            <wd-icon name="arrow-left" size="14px" class="ml-1" color="#0d0f10"></wd-icon>
+            <view class="custom-color-black">返回</view>
+          </view>
+          <view class="font-bold text-4 flex-1 text-center">时间选择器</view>
+          <wd-icon
+            name="close"
+            size="14px"
+            class="ml-1"
+            color="#0d0f10"
+            @click="show = false"
+          ></wd-icon>
+        </view>
+        <wd-datetime-picker-view
+          :formatter="formatter"
+          type="datetime"
+          v-model="timestamp"
+          @change="change"
+        />
+      </view>
+      <view
+        @click="confirm"
+        class="py-2.5 rounded custom-bg-blue w-90% mx-5% font-bold text-center color-white text-3.5 my-2"
+      >
+        完成
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import dayjs from 'dayjs'
+
+  const text = ref<string | null>(null)
+  const show = ref<boolean>(false)
+  const timestamp = ref<number>(0)
+  const duration = ref<string>('')
+
+  const showDuration = ref<boolean>(true)
+
+  const formatter = (type, value) => {
+    switch (type) {
+      case 'year':
+        return value + '年'
+      case 'month':
+        return value + '月'
+      case 'date':
+        return value + '日'
+      case 'hour':
+        return value + '时'
+      case 'minute':
+        return value + '分'
+      default:
+        return value
+    }
+  }
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: [String, null],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const durationList = [
+    { label: '30分钟', value: 1800000 },
+    { label: '1小时', value: 3600000 },
+    { label: '2小时', value: 7200000 },
+    { label: '3小时', value: 10800000 },
+    { label: '5小时', value: 18000000 },
+    { label: '8小时', value: 28800000 },
+    { label: '12小时', value: 43200000 },
+    { label: '24小时', value: 86400000 }
+  ]
+
+  onMounted(() => {
+    if (props.value) {
+      text.value = props.value
+      duration.value = props.value
+    }
+  })
+
+  const changeSelect = () => {
+    timestamp.value = new Date().getTime()
+    showDuration.value = false
+  }
+
+  const toSelect = () => {
+    show.value = true
+  }
+
+  const change = value => {
+    timestamp.value = value.value
+    duration.value = ''
+  }
+
+  const changeDuration = item => {
+    duration.value = item.label
+    timestamp.value = 0
+  }
+
+  const confirm = () => {
+    if (timestamp.value === 0) {
+      text.value = duration.value
+    } else {
+      text.value = dayjs(timestamp.value).format('YYYY-M-D HH:mm')
+    }
+    show.value = false
+  }
+</script>

src/pages/approval/components/Visitor.vue

@@ -30,6 +30,8 @@
       required
     ></DatetimePicker>
     <wd-divider color="#bcbfbe"></wd-divider>
+    <VisitDuration :id="6" title="访问时长" required value="2小时" inline></VisitDuration>
+    <wd-divider color="#bcbfbe"></wd-divider>
     <Input :id="7" title="同行人数" @change="inputChange" inline></Input>
     <wd-divider color="#bcbfbe"></wd-divider>
     <Input :id="8" title="访问单位" @change="inputChange" inline></Input>
@@ -49,6 +51,7 @@
   import Keyboard from '@/pages/approval/components/Keyboard.vue'
   import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
   import NavigatorSelector from '@/pages/approval/components/NavigatorSelector.vue'
+  import VisitDuration from '@/pages/approval/components/VisitDuration.vue'
 
   const columns = ref<Record<number, string>>([
     {

src/pages/select/select-access-control.vue

@@ -1,7 +1,100 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+    disableScroll: true
+  }
+}
+</route>
 <template>
-  <view></view>
+  <view class="h-100vh flex flex-col">
+    <TopNavigation class="bg-white" title="选择门禁点"></TopNavigation>
+    <scroll-view class="flex-1 box-border text-3.5 custom-color-black border-1" :scroll-y="true">
+      <wd-checkbox-group v-model="value" size="large" @change="change">
+        <view class="px-4 py-1.5 bg-white mb-2">
+          <wd-checkbox :modelValue="item.id" v-for="item in permissionList" :key="item.id">
+            <view class="flex flex-items-center">
+              <view
+                class="w-10 h-10 flex flex-justify-center flex-items-center bg-#e4f1ff rounded-2"
+              >
+                <image src="/static/images/icon_file.png" class="w-6 h-6" mode="aspectFill"></image>
+              </view>
+              <view class="ml-2">{{ item.name }}</view>
+            </view>
+          </wd-checkbox>
+        </view>
+        <view
+          v-for="(item, index) in list"
+          :key="item.id"
+          class="bg-white border-#eef0f5 border-b-solid"
+          :class="[index === list.length - 1 ? 'border-b-0' : 'border-b-1']"
+        >
+          <wd-checkbox :modelValue="item.id" class="py-1.5 px-4">
+            <view class="flex flex-items-center">
+              <image
+                src="https://file.hikmall.com/prod/image/69c3851d052e493ebb6e7c2e7a189b61.png"
+                class="w-10 h-10"
+              ></image>
+              <view class="ml-2">{{ item.name }}</view>
+            </view>
+          </wd-checkbox>
+        </view>
+      </wd-checkbox-group>
+    </scroll-view>
+    <view class="pb-safe border-#eef0f5 border-t-solid border-1 flex flex-items-center">
+      <view
+        @click="confirm"
+        class="opacity-60% w-90% py-2 mx-5% text-center custom-bg-blue color-white rounded-2 my-3"
+      >
+        确定
+      </view>
+    </view>
+  </view>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  const instance = getCurrentInstance().proxy
+  const eventChannel = instance.getOpenerEventChannel()
 
-<style scoped lang="scss"></style>
+  const value = ref<number[]>([])
+  const selected = ref<Array>([])
+
+  const permissionList = [
+    {
+      name: '[访客类型]权限组',
+      id: 0
+    }
+  ]
+
+  const list = [
+    {
+      name: 'DS-K(FU6004429)',
+      id: 1
+    },
+    {
+      name: 'DS-K(L40959329)',
+      id: 2
+    }
+  ]
+
+  const change = value => {
+    selected.value = []
+    selected.value.push(...permissionList.filter(item => value.value.includes(item.id)))
+    selected.value.push(...list.filter(item => value.value.includes(item.id)))
+  }
+
+  const confirm = () => {
+    eventChannel.emit('change', { value: selected.value })
+    uni.navigateBack()
+  }
+</script>
+
+<style scoped lang="scss">
+  .wd-checkbox-group {
+    background-color: transparent;
+  }
+
+  .wd-checkbox {
+    margin-bottom: 0;
+  }
+</style>