diff --git a/components/da-tree/index.vue b/components/da-tree/index.vue
index a4bc692..06f4235 100644
--- a/components/da-tree/index.vue
+++ b/components/da-tree/index.vue
@@ -1017,7 +1017,7 @@ export default defineComponent({
     height: 0;
     padding: 0;
     overflow: hidden;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 1;
     visibility: hidden;
     opacity: 0;
@@ -1034,8 +1034,8 @@ export default defineComponent({
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 20px;
-      height: 20px;
+      width: 23px;
+      height: 23px;
       overflow: hidden;
 
       &--arr {
@@ -1163,8 +1163,9 @@ export default defineComponent({
       }
 
       &--append {
-        font-size: 60%;
-        opacity: 0.6;
+        font-size: 80%;
+        opacity: 0.7;
+        padding-top: 5px;
       }
     }
   }
diff --git a/components/n-upload/n-upload.vue b/components/n-upload/n-upload.vue
index fcd253c..2b56151 100644
--- a/components/n-upload/n-upload.vue
+++ b/components/n-upload/n-upload.vue
@@ -41,7 +41,7 @@ const imgs = ref([])
 const uploadConfig = reactive({
   baseURL: getBaseUrl(),
   imgBaseURL: getImgBaseUrl(),
-  header: { 'X-Access-Token': uni.getStorageSync('token') }
+  header: { Authorization: 'Bearer ' + uni.getStorageSync('token') }
 })
 
 // 同步外部值到组件
@@ -50,10 +50,12 @@ watch(
   newVal => {
     if (!newVal) return (fileList.value = [])
     const urls = Array.isArray(newVal) ? newVal : newVal.split(',')
-    imgs.value = urls
+    imgs.value = urls.map(url => url.previewUrl)
     fileList.value = urls.map(url => ({
-      url: uploadConfig.imgBaseURL + url,
+      url: url.url,
       status: 'success',
+      name: url.name,
+      id: url.id,
       message: ''
     }))
   },
@@ -82,10 +84,13 @@ const afterRead = async event => {
     for (let i = 0; i < files.length; i++) {
       const result = await uploadFile(files[i])
       const index = initialLength + i
+      console.log(files[i])
+
       fileList.value[index] = {
-        ...files[i],
         status: 'success',
-        url: uploadConfig.imgBaseURL + result.message
+        url: result.url,
+        name: result.name,
+        id: result.id
       }
     }
   } catch (error) {
@@ -100,14 +105,19 @@ const afterRead = async event => {
 const uploadFile = file => {
   return new Promise((resolve, reject) => {
     uni.uploadFile({
-      url: `${uploadConfig.baseURL}/sys/common/upload`,
+      url: `${uploadConfig.baseURL}/infra/file/upload-with-return`,
       filePath: file.url,
       name: 'file',
       header: uploadConfig.header,
-      formData: { biz: 'lims-device' },
+      formData: { encrypt: false },
       success: res => {
         if (res.statusCode === 200) {
-          resolve(JSON.parse(res.data))
+          let result = JSON.parse(res.data)
+          if (result.code === 0) {
+            resolve(result.data)
+          } else {
+            reject(new Error(result.msg))
+          }
         } else {
           reject(new Error(res.data))
         }
@@ -125,7 +135,7 @@ const formatValue = fileList => {
     : fileList.map(item => item.url.slice(baseUrlLength))
 }
 const updateParent = fileList => {
-  emit('update:modelValue', formatValue(fileList))
+  emit('update:modelValue', fileList)
 }
 </script>
 
diff --git a/nx/hooks/usePageListData.js b/nx/hooks/usePageListData.js
index 33346d7..dda7e84 100644
--- a/nx/hooks/usePageListData.js
+++ b/nx/hooks/usePageListData.js
@@ -7,7 +7,7 @@ export function useListData({ searchParams, api, needInitListData = false, proce
   const loadingData = ref(true)
   const pageParams = reactive({
     pageNo: 1,
-    pageSize: 15
+    pageSize: 20
   })
   const total = ref(0)
   const loadStatus = ref('loadmore')
diff --git a/pages.json b/pages.json
index ebc3dbb..df485ae 100644
--- a/pages.json
+++ b/pages.json
@@ -344,6 +344,13 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/material/openMark/index",
+			"style": {
+				"navigationBarTitleText": "试剂开封",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/setting/UrlConfig",
 			"style": {
diff --git a/pages/device/deviceBusDailyCheck/dailyCheck.data.js b/pages/device/deviceBusDailyCheck/dailyCheck.data.js
index 58c6c10..18f0e78 100644
--- a/pages/device/deviceBusDailyCheck/dailyCheck.data.js
+++ b/pages/device/deviceBusDailyCheck/dailyCheck.data.js
@@ -1,4 +1,5 @@
 import { ref, reactive } from 'vue'
+import nx from '@/nx'
 export const detailSchema = [
   { label: '设备名称', value: 'deviceName' },
   { label: '别名', value: 'alias' },
@@ -11,12 +12,13 @@ export const column = reactive([
   {
     label: '点检人',
     name: 'checkUserName',
-    width: 160
+    width: 200
   },
   {
     label: '点检日期',
     name: 'checkDate',
-    width: 180
+    width: 200,
+    formatter: true
   },
   {
     label: '备注',
@@ -30,3 +32,11 @@ export const column = reactive([
     renders: [{ name: '详情', func: 'detail' }]
   }
 ])
+export function columnFormatter(row, column, rowIndex, columnIndex) {
+  // 判断是哪一列需要格式化
+  if (column.name === 'checkDate') {
+    return nx.$helper.formateToDateTime(row.checkDate)
+  }
+  // 对于不需要特殊格式化的列，返回原始值
+  return row[column.name]
+}
diff --git a/pages/device/deviceBusDailyCheck/detail.vue b/pages/device/deviceBusDailyCheck/detail.vue
index 18291e0..dce0b6f 100644
--- a/pages/device/deviceBusDailyCheck/detail.vue
+++ b/pages/device/deviceBusDailyCheck/detail.vue
@@ -6,13 +6,13 @@
         <up-row class="flex-wrap p10" style="background-color: #f5f7fa">
           <up-col class="mb10" :span="gridCol" v-for="(item, index) in detailSchema">
             <view style="color: #666"
-              ><span style="color: #333">{{ item.label }}：</span>{{ detailInfo[item.value] }}</view
+              ><span style="color: #333">{{ item.label }}：</span>{{ deviceInfo[item.value] }}</view
             >
           </up-col>
         </up-row>
 
-        <view class="p5">
-          <view class="pt5"
+        <view class="p10">
+          <view
             >备注：
             <text style="color: #666">
               {{ detailInfo.content }}
@@ -20,16 +20,16 @@
           </view>
           <up-row>
             <up-col span="6">
-              <view class="pt5"
+              <view class="pt10"
                 >点检人：
                 <text style="color: #666">
                   {{ detailInfo.checkUserName }}
                 </text>
               </view>
-              <view class="pt5"
+              <view class="pt10"
                 >点检日期：
                 <text style="color: #666">
-                  {{ detailInfo.checkDate }}
+                  {{ nx.$helper.formateToDateTime(detailInfo.checkDate) }}
                 </text>
               </view>
             </up-col>
@@ -39,15 +39,15 @@
           </up-row>
         </view>
         <view>
-          <up-row class="font-bold" style="background-color: #f5f5f5">
-            <up-col span="5">点检项目</up-col>
-            <up-col span="3">检查标准</up-col>
+          <up-row class="p10 font-bold" style="background-color: #f5f5f5">
+            <up-col span="3">点检项目</up-col>
+            <up-col span="5">检查标准</up-col>
             <up-col span="2"> 频次</up-col>
             <up-col span="2">是否正常</up-col>
           </up-row>
           <view class="pt10">
             <up-row class="pb10" v-for="(item, index) in detailInfo.maintainItemList" :key="index">
-              <up-col span="5">
+              <up-col span="3">
                 <view class="x-f">
                   <text class="pl10">
                     {{ item.itemName }}
@@ -55,7 +55,7 @@
                 </view>
               </up-col>
 
-              <up-col span="3">{{ item.standard }}</up-col>
+              <up-col span="5">{{ item.standard }}</up-col>
               <up-col span="2">{{ item.frequencyRemark }}</up-col>
               <up-col span="2">
                 <u-tag v-if="item.checkResult == '正常'" text="正常" size="mini" type="success" plain plainFill></u-tag>
@@ -72,11 +72,12 @@
 
 <script setup>
 import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { getDeviceBusInfoById } from '@/nx/api/deviceInfo'
 import { detailSchema } from './dailyCheck.data'
 import dailyCheckApi from '@/nx/api/dailyCheck'
 import { getImgBaseUrl } from '@/defaultBaseUrl'
 import { useGridCol } from '@/nx/hooks/useGridCol'
-
+import nx from '@/nx'
 const { gridCol } = useGridCol([700], [6, 4])
 const props = defineProps({
   show: {
@@ -115,12 +116,18 @@ async function getDetailInfo(id) {
     attachment.value = files.map(item => getImgBaseUrl() + item)
   }
 }
+const deviceInfo = ref({})
+async function getDeviceInfo(id) {
+  const res = await getDeviceBusInfoById(id)
+  deviceInfo.value = res
+}
 const emit = defineEmits(['close', 'open'])
 function handleClose() {
   emit('close')
 }
 function handleOpen() {
   getDetailInfo(props.checkInfo.id)
+  getDeviceInfo(props.checkInfo.deviceId)
 }
 </script>
 
@@ -135,4 +142,7 @@ function handleOpen() {
 :deep(.uicon-close) {
   font-size: 22px !important;
 }
+:deep(.u-popup__content__close--top-right) {
+  top: 30px;
+}
 </style>
diff --git a/pages/device/deviceBusDailyCheck/index.vue b/pages/device/deviceBusDailyCheck/index.vue
index 722e7cc..a37dc17 100644
--- a/pages/device/deviceBusDailyCheck/index.vue
+++ b/pages/device/deviceBusDailyCheck/index.vue
@@ -18,7 +18,7 @@
         v-if="!detailInfo.id"
         title="请扫描设备条码进行巡检"
         icon="dailyCheck"
-        @deviceId="id => getDailyCheckRecord(id)"
+        @deviceId="id => handleSearchRecord(id)"
         @scanResult="result => handleScanResult(result)"
       />
       <view v-else class="content">
@@ -36,7 +36,7 @@
           <up-row class="flex-wrap p10" style="background-color: #f5f7fa">
             <up-col class="mb10" :span="gridCol" v-for="(item, index) in detailSchema">
               <view style="color: #666"
-                ><span style="color: #333">{{ item.label }}：</span>{{ detailInfo[item.value] }}</view
+                ><span style="color: #333">{{ item.label }}：</span>{{ deviceInfo[item.value] }}</view
               >
             </up-col>
           </up-row>
@@ -44,14 +44,14 @@
         <view>
           <uni-section titleFontSize="22px" type="line" title="检查项"> </uni-section>
           <up-row class="p10 font-bold" style="background-color: #f5f5f5">
-            <up-col span="4">巡检项目</up-col>
-            <up-col span="3">检查标准</up-col>
+            <up-col span="3">巡检项目</up-col>
+            <up-col span="5">检查标准</up-col>
             <up-col span="2"> 频次</up-col>
-            <up-col style="text-align: center" span="3">是否正常</up-col>
+            <up-col style="text-align: center" span="2">是否正常</up-col>
           </up-row>
           <view class="pt10">
             <up-row class="pb12" v-for="(item, index) in detailInfo.maintainItemList" :key="index">
-              <up-col span="4">
+              <up-col span="3">
                 <view class="x-f">
                   <u-badge type="warning " :value="index + 1"></u-badge>
                   <text class="pl10">
@@ -60,9 +60,9 @@
                 </view>
               </up-col>
 
-              <up-col span="3">{{ item.standard }}</up-col>
+              <up-col span="5">{{ item.standard }}</up-col>
               <up-col span="2">{{ item.frequencyRemark }}</up-col>
-              <up-col span="3">
+              <up-col span="2">
                 <u-radio-group v-model="item.checkResult" placement="row">
                   <u-radio activeColor="green" label="正常" name="正常"></u-radio>
                   <u-radio activeColor="red" label="不正常" name="不正常"></u-radio>
@@ -73,15 +73,10 @@
         </view>
         <view>
           <uni-section titleFontSize="22px" type="line" title="备注"> </uni-section>
-          <up-textarea v-model="detailInfo.content" placeholder="请输入内容"></up-textarea>
+          <up-input v-model="detailInfo.content" placeholder="请输入备注"></up-input>
           <view class="p10">附件照片：</view>
-          <n-upload v-model="detailInfo.attachment" />
-          <view class="p10">巡检人：</view>
-          <up-input v-model="detailInfo.checkUserName"></up-input>
-          <view v-if="detailInfo.submitFlag == '1'">
-            <view class="p10">巡检日期：</view>
-            <uni-datetime-picker type="datetime" v-model="detailInfo.checkDate" />
-          </view>
+          <n-upload v-model="detailInfo.files" :isUpdate="detailInfo.submitFlag == '0'" />
+          <view class="p10">巡检人：{{ detailInfo.checkUserName }}</view>
         </view>
         <view class="mt40 x-bc" v-if="detailInfo.submitFlag == '0'">
           <up-button
@@ -118,6 +113,7 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, watch, toRefs, computed } from 'vue'
 import { onShow, onLoad } from '@dcloudio/uni-app'
+import { getDeviceBusInfoById } from '@/nx/api/deviceInfo'
 import dailyCheckApi from '@/nx/api/dailyCheck'
 import { detailSchema } from './dailyCheck.data'
 import { useScreenOrientation } from '@/nx/hooks/useScreenOrientation'
@@ -134,32 +130,18 @@ function handleScanResult(result) {
   const codeObj = JSON.parse(result)
   if (!pageLoading.value) {
     getDailyCheckRecord(codeObj.id)
+    getDeviceInfo(codeObj.id)
   }
 }
-// const { scanQRInfo } = toRefs(nx.$store('biz'))
-// watch(scanQRInfo, newVal => {
-//   if (newVal && nx.$router.getCurrentPage().route == 'pages/device/deviceBusDailyCheck/index') {
-//     try {
-//       const codeObj = JSON.parse(newVal)
-//       if (!pageLoading.value) {
-//         getDailyCheckRecord(codeObj.id)
-//       }
-//       scanQRInfo.value = ''
-//     } catch (error) {
-//       scanQRInfo.value = ''
-//       uni.showToast({
-//         title: '请扫描设备码',
-//         icon: 'none'
-//       })
-//     }
-//   }
-// })
+
+function handleSearchRecord(id) {
+  getDailyCheckRecord(id)
+  getDeviceInfo(id)
+}
 const modalText = computed(() => {
   return `确定${modalType.value == '0' ? '暂存' : '提交'}吗？${modalType.value == '0' ? '' : '提交后不能修改'} `
 })
-// onShow(() => {
-//   scanQRInfo.value = ''
-// })
+
 let goBack = ref(false) //设备使用前进行点检操作标记
 onLoad(options => {
   if (options.deviceId) {
@@ -170,6 +152,7 @@ onLoad(options => {
 
 async function getDailyCheckRecord(id) {
   pageLoading.value = true
+
   const res = await dailyCheckApi
     .getCheckRecord({
       deviceId: id,
@@ -179,15 +162,20 @@ async function getDailyCheckRecord(id) {
       pageLoading.value = false
     })
   if (!res.checkUserName) {
-    res.checkUserName = nx.$store('user').userInfo.realname
-    res.checkUserId = nx.$store('user').userInfo.id
+    res.checkUserName = nx.$store('user').userInfo.nickname
   }
   detailInfo.value = res
   modalType.value = res.submitFlag
 
   lockOrientation('landscape')
 }
-
+const deviceInfo = ref({})
+async function getDeviceInfo(id) {
+  const res = await getDeviceBusInfoById(id).finally(() => {
+    pageLoading.value = false
+  })
+  deviceInfo.value = res
+}
 const modalShow = ref(false)
 const modalType = ref('')
 // 是否有异常项
@@ -215,13 +203,6 @@ function handleSubmit(type) {
       }
     }
   }
-  if (!detailInfo.value.checkUserName) {
-    return uni.showToast({
-      title: '请输入巡检人',
-      icon: 'none'
-    })
-  }
-  detailInfo.value.checkDate = nx.$dayjs().format('YYYY-MM-DD HH:mm:ss')
   modalType.value = type
   modalShow.value = true
   console.log(detailInfo.value)
@@ -263,9 +244,7 @@ function handleCreateDailyCheck() {
           deviceId: detailInfo.value.deviceId,
           dataType: 'dailyCheck'
         })
-        res.checkUserName = nx.$store('user').userInfo.realname
-        res.checkUserId = nx.$store('user').userInfo.id
-        res.checkDate = nx.$dayjs().format('YYYY-MM-DD HH:mm:ss')
+        res.checkUserName = nx.$store('user').userInfo.nickname
         detailInfo.value = res
       } else if (res.cancel) {
         console.log('用户点击取消')
diff --git a/pages/device/deviceBusDailyCheck/list.vue b/pages/device/deviceBusDailyCheck/list.vue
index 8da3d56..7125405 100644
--- a/pages/device/deviceBusDailyCheck/list.vue
+++ b/pages/device/deviceBusDailyCheck/list.vue
@@ -1,7 +1,7 @@
 <template>
   <view>
     <up-sticky v-if="!isComponent">
-      <navbar-back title="点检记录"> </navbar-back>
+      <navbar-back title="巡检记录"> </navbar-back>
     </up-sticky>
     <uni-card spacing="0">
       <uni-section v-if="!isComponent" titleFontSize="20px" type="line" :title="deviceText"> </uni-section>
@@ -15,6 +15,7 @@
           :cellStyle="setCellStyle"
           :cellHeaderStyle="setCellHeaderStyle"
           :data="listData"
+          :formatter="columnFormatter"
           @detail="handleDetail"
           @pullUpLoading="pullUpLoadingAction"
         ></zb-table>
@@ -31,7 +32,7 @@ import { setCellHeaderStyle, setCellStyle } from '@/nx/config/zbTable'
 import DailyCheckDetailPopup from './detail.vue'
 import dailyCheckApi from '@/nx/api/dailyCheck'
 import { useListData } from '@/nx/hooks/usePageListData'
-import { column } from './dailyCheck.data'
+import { column, columnFormatter } from './dailyCheck.data'
 import nx from '@/nx'
 let props = defineProps({
   isComponent: {
diff --git a/pages/device/deviceBusInfo/deviceBusInfo.data.js b/pages/device/deviceBusInfo/deviceBusInfo.data.js
index 4b524f4..7cbb18d 100644
--- a/pages/device/deviceBusInfo/deviceBusInfo.data.js
+++ b/pages/device/deviceBusInfo/deviceBusInfo.data.js
@@ -4,7 +4,7 @@ export function getColumn(isFold) {
     {
       label: '设备名称',
       name: 'deviceName',
-      width: isFold ? 200 : 130
+      width: isFold ? 200 : 110
     },
     {
       label: '别名',
@@ -14,13 +14,13 @@ export function getColumn(isFold) {
     {
       label: '设备状态',
       name: 'stateShow',
-      width: isFold ? 120 : 90
+      width: isFold ? 120 : 100
     },
 
     {
       label: '使用状态',
       name: 'inUseFlag',
-      width: isFold ? 120 : 90
+      width: isFold ? 120 : 100
     },
     {
       label: '规格型号',
diff --git a/pages/device/deviceBusMaintain/detail.vue b/pages/device/deviceBusMaintain/detail.vue
index 9741d6f..4b3edd9 100644
--- a/pages/device/deviceBusMaintain/detail.vue
+++ b/pages/device/deviceBusMaintain/detail.vue
@@ -6,11 +6,11 @@
         <up-row class="flex-wrap pt10 pl10" style="background-color: #f5f7fa">
           <up-col class="mb8" :span="gridCol" v-for="(item, index) in detailSchema">
             <view style="color: #666"
-              ><span style="color: #333">{{ item.label }}：</span>{{ detailInfo[item.value] }}</view
+              ><span style="color: #333">{{ item.label }}：</span>{{ deviceInfo[item.value] }}</view
             >
           </up-col>
         </up-row>
-        <view class="pt5">
+        <view class="p10">
           <up-row>
             <up-col span="6">
               <view
@@ -19,10 +19,10 @@
                   {{ detailInfo.checkUserName }}
                 </text>
               </view>
-              <view class="pt5"
+              <view class="pt10"
                 >维护保养日期：
                 <text style="color: #666">
-                  {{ detailInfo.checkDate }}
+                  {{ nx.$helper.formateToDateTime(detailInfo.checkDate) }}
                 </text>
               </view>
             </up-col>
@@ -73,8 +73,9 @@
 import { ref, reactive, onMounted, watch, computed } from 'vue'
 import { useGridCol } from '@/nx/hooks/useGridCol'
 import dailyCheckApi from '@/nx/api/dailyCheck'
+import { getDeviceBusInfoById } from '@/nx/api/deviceInfo'
 import { getImgBaseUrl } from '@/defaultBaseUrl'
-
+import nx from '@/nx'
 const { gridCol } = useGridCol([700], [6, 4])
 const props = defineProps({
   show: {
@@ -113,12 +114,18 @@ async function getDetailInfo(id) {
   const res = await dailyCheckApi.queryById(id)
   detailInfo.value = res
 }
+const deviceInfo = ref({})
+async function getDeviceInfo(id) {
+  const res = await getDeviceBusInfoById(id)
+  deviceInfo.value = res
+}
 const emit = defineEmits(['close', 'open'])
 function handleClose() {
   emit('close')
 }
 function handleOpen() {
   getDetailInfo(props.checkInfo.id)
+  getDeviceInfo(props.checkInfo.deviceId)
 }
 </script>
 
@@ -139,4 +146,7 @@ function handleOpen() {
 :deep(.uicon-close) {
   font-size: 22px !important;
 }
+:deep(.u-popup__content__close--top-right) {
+  top: 30px;
+}
 </style>
diff --git a/pages/device/deviceBusMaintain/index.vue b/pages/device/deviceBusMaintain/index.vue
index 406615c..acd1370 100644
--- a/pages/device/deviceBusMaintain/index.vue
+++ b/pages/device/deviceBusMaintain/index.vue
@@ -18,7 +18,8 @@
         v-if="!detailInfo.id"
         title="请扫描设备条码进行维护保养"
         icon="maintain"
-        @deviceId="id => getDetailInfo(id)"
+        @deviceId="id => handleSearchCheckRecord(id)"
+        @scanResult="result => handleScanResult(result)"
       />
       <view v-else class="content">
         <view>
@@ -26,7 +27,7 @@
           <up-row class="flex-wrap p10" style="background-color: #f5f7fa">
             <up-col class="mb10" :span="gridCol" v-for="(item, index) in detailSchema">
               <view style="color: #666"
-                ><span style="color: #333">{{ item.label }}：</span>{{ detailInfo[item.value] }}</view
+                ><span style="color: #333">{{ item.label }}：</span>{{ deviceInfo[item.value] }}</view
               >
             </up-col>
           </up-row>
@@ -63,13 +64,8 @@
         </view>
         <view>
           <view class="p10">附件照片：</view>
-          <n-upload v-model="detailInfo.attachment" />
-          <view class="p10">维护保养人：</view>
-          <up-input v-model="detailInfo.checkUserName"></up-input>
-          <view v-if="detailInfo.submitFlag == '1'">
-            <view class="p10">维护保养日期：</view>
-            <uni-datetime-picker type="date" v-model="detailInfo.checkDate" />
-          </view>
+          <n-upload v-model="detailInfo.files" :isUpdate="detailInfo.submitFlag == '0'" />
+          <view class="p10">维护保养人：{{ detailInfo.checkUserName }}</view>
         </view>
         <view class="mt40 x-bc" v-if="detailInfo.submitFlag == '0'">
           <up-button
@@ -107,6 +103,7 @@
 import { ref, reactive, onMounted, computed, watch, toRefs } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import dailyCheckApi from '@/nx/api/dailyCheck'
+import { getDeviceBusInfoById } from '@/nx/api/deviceInfo'
 import nx from '@/nx'
 import { useScreenOrientation } from '@/nx/hooks/useScreenOrientation'
 import { useGridCol } from '@/nx/hooks/useGridCol'
@@ -123,70 +120,51 @@ const detailSchema = [
   { label: '使用班组', value: 'deptName' }
 ]
 let detailInfo = ref({})
-let checkList = ref([])
-const { scanQRInfo } = toRefs(nx.$store('biz'))
-watch(scanQRInfo, newVal => {
-  if (newVal && nx.$router.getCurrentPage().route == 'pages/device/deviceBusMaintain/index') {
-    try {
-      const codeObj = JSON.parse(newVal)
-      if (!pageLoading.value) {
-        getDetailInfo(codeObj.id)
-      }
-      scanQRInfo.value = ''
-    } catch (error) {
-      scanQRInfo.value = ''
-      uni.showToast({
-        title: '请扫描设备码',
-        icon: 'none'
-      })
-    }
+function handleScanResult(result) {
+  const codeObj = JSON.parse(result)
+  if (!pageLoading.value) {
+    getDetailInfo(codeObj.id)
+    getDeviceInfo(codeObj.id)
   }
-})
-onShow(() => {
-  scanQRInfo.value = ''
-})
+}
+
+function handleSearchCheckRecord(id) {
+  if (!pageLoading.value) {
+    getDetailInfo(id)
+    getDeviceInfo(id)
+  }
+}
 const modalText = computed(() => {
   return `确定${modalType.value == '0' ? '暂存' : '提交'}吗？${modalType.value == '0' ? '' : '提交后不能修改'} `
 })
+const checkUserName = ref('')
 async function getDetailInfo(id) {
   pageLoading.value = true
-  const res = await dailyCheckApi
-    .getCheckRecord({
-      deviceId: id,
-      dataType: 'maintain',
-      submitFlag: '0',
-      cancelFlag: '0'
-    })
-    .finally(() => {
-      pageLoading.value = false
-    })
+  const res = await dailyCheckApi.getCheckRecord({
+    deviceId: id,
+    dataType: 'maintain',
+    submitFlag: '0',
+    cancelFlag: '0'
+  })
   if (!res.checkUserName) {
-    res.checkUserName = nx.$store('user').userInfo.realname
-    res.checkUserId = nx.$store('user').userInfo.id
-  }
-  if (!res.checkDate) {
-    res.checkDate = nx.$dayjs().format('YYYY-MM-DD 00:00:00')
+    res.checkUserName = nx.$store('user').userInfo.nickname
   }
   detailInfo.value = res
   modalType.value = res.submitFlag
   lockOrientation('landscape')
 }
 
+const deviceInfo = ref({})
+// 获取设备详情
+async function getDeviceInfo(id) {
+  const res = await getDeviceBusInfoById(id).finally(() => {
+    pageLoading.value = false
+  })
+  deviceInfo.value = res
+}
 const modalShow = ref(false)
 const modalType = ref('')
 function handleSubmit(type) {
-  if (!detailInfo.value.checkUserName) {
-    return uni.showToast({
-      title: '请输入维护保养人',
-      icon: 'none'
-    })
-  }
-  if (!detailInfo.value.checkDate) {
-    return uni.showToast({
-      title: '请选择维护保养日期',
-      icon: 'none'
-    })
-  }
   if (type === '1') {
     // 新增维护保养项验证
     const items = detailInfo.value.maintainItemList || []
@@ -200,7 +178,6 @@ function handleSubmit(type) {
   }
   modalType.value = type
   modalShow.value = true
-  console.log(detailInfo.value)
 }
 
 const submitLoading = ref(false)
diff --git a/pages/device/deviceBusMaintain/list.vue b/pages/device/deviceBusMaintain/list.vue
index da1bf78..a963b5f 100644
--- a/pages/device/deviceBusMaintain/list.vue
+++ b/pages/device/deviceBusMaintain/list.vue
@@ -14,6 +14,7 @@
           :columns="column"
           :cellStyle="setCellStyle"
           :cellHeaderStyle="setCellHeaderStyle"
+          :formatter="columnFormatter"
           :data="listData"
           @detail="handleDetail"
           @pullUpLoading="pullUpLoadingAction"
@@ -47,7 +48,8 @@ const column = reactive([
   {
     label: '维护保养日期',
     name: 'checkDate',
-    width: 300
+    width: 300,
+    formatter: true
   },
   {
     name: 'operation',
@@ -56,7 +58,14 @@ const column = reactive([
     renders: [{ name: '详情', func: 'detail' }]
   }
 ])
-
+function columnFormatter(row, column, rowIndex, columnIndex) {
+  // 判断是哪一列需要格式化
+  if (column.name === 'checkDate') {
+    return nx.$helper.formateToDateTime(row.checkDate)
+  }
+  // 对于不需要特殊格式化的列，返回原始值
+  return row[column.name]
+}
 const deviceId = ref('')
 const deviceText = ref('')
 onMounted(() => {
diff --git a/pages/device/deviceBusUseRecord/list.vue b/pages/device/deviceBusUseRecord/list.vue
index 3d3adfb..741c1a2 100644
--- a/pages/device/deviceBusUseRecord/list.vue
+++ b/pages/device/deviceBusUseRecord/list.vue
@@ -65,11 +65,6 @@ const column = reactive([
     width: 170,
     formatter: true
   },
-  {
-    label: '结束使用人',
-    name: 'userNameEnd',
-    width: 100
-  },
   {
     label: '结束时间',
     name: 'useTimeEnd',
@@ -78,19 +73,23 @@ const column = reactive([
   },
   {
     label: '使用前状态',
-    name: 'stateBefore'
+    name: 'stateBefore',
+    width: 110
   },
   {
     label: '使用后状态',
-    name: 'stateAfter'
+    name: 'stateAfter',
+    width: 110
   },
   {
     label: '温度(℃)',
-    name: 'temperature'
+    name: 'temperature',
+    width: 110
   },
   {
     label: '湿度(%RH)',
-    name: 'humidity'
+    name: 'humidity',
+    width: 110
   },
   {
     name: 'operation',
diff --git a/pages/device/index/index.vue b/pages/device/index/index.vue
index 1bf91dc..d51bc54 100644
--- a/pages/device/index/index.vue
+++ b/pages/device/index/index.vue
@@ -1,6 +1,6 @@
 <template>
   <view>
-    <navbar-back title="实验室管理系统【设备管理】" :autoBack="false" leftIcon="" leftText="">
+    <navbar-back title="实验室管理系统【设备管理】" titleWidth="800" :autoBack="false" leftIcon="" leftText="">
       <u-icon @click="popupShow = true" size="28" color="#FFF" name="setting-fill" />
     </navbar-back>
     <up-grid :col="gridCol" :border="false">
diff --git a/pages/material/openMark/index.vue b/pages/material/openMark/index.vue
new file mode 100644
index 0000000..34c9bfc
--- /dev/null
+++ b/pages/material/openMark/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <navbar-back title="试剂开封"></navbar-back>
+  <view class="pl8 pr8 pt8">
+    <up-input
+      style="padding-top: 20px"
+      border="bottom"
+      v-model="materialCode"
+      placeholder="请扫描需要开封的物料编号"
+      prefixIcon="scan"
+      fontSize="16"
+      prefixIconStyle="font-size: 30px;"
+      @confirm="getMaterialList"
+    >
+    </up-input>
+	<view class="x-f mt20" v-if="materialList.length > 0">
+	  <text class="pl6">开封日期：</text>
+	  <uni-datetime-picker type="date" return-type="timestamp" :clear-icon="false" v-model="operatorDate"  />
+	</view>
+    <uni-section v-if="materialList.length > 0" type="line" title="试剂信息" titleFontSize="15px">
+      <!-- <template #right> <up-text type="error" size="18" bold :text="materialList.length"></up-text></template> -->
+      <scroll-view style="height: 60vh" scroll-y scroll-with-animation>
+        <uni-card margin="5px" v-for="item in materialList" class="sample-item">
+          <view class="mt4">
+            <view
+              >物料编号：<text class="black">{{ item.code }}</text></view
+            >
+          </view>
+          <view class="mt4">
+            <view
+              >物料名称：<text class="black">{{ item.name }}</text></view
+            >
+          </view>
+          <view class="mt4"
+            >规格型号：<text class="black">{{ item.modelNo }}</text></view
+          >
+          <view class="mt4"
+            >保质期：<text class="black">{{ item.due }}</text></view
+          >
+        </uni-card>
+      </scroll-view>
+      <up-button type="primary" :loading="btnLoading" style="width: 50%" text="提交" @click="handleSubmit"></up-button>
+    </uni-section>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref, toRefs, watch, onMounted } from 'vue'
+import { debounce } from 'lodash'
+import nx from '@/nx'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+
+const btnLoading = ref(false)
+let materialCode = ref('')
+let materialList = ref([])
+let operatorDate = ref('')
+
+const { scanQRInfo } = toRefs(nx.$store('biz'))
+watch(scanQRInfo, newVal => {
+  debouncedHandleScan(newVal)
+})
+const debouncedHandleScan = debounce(val => {
+  if (!val) return
+  scanQRInfo.value = ''
+  if (nx.$router.getCurrentPage().route !== 'pages/material/openMark/index') return
+  try {
+    materialCode.value = val
+    getMaterialList()
+  } catch (error) {
+    uni.showToast({
+      title: '请扫描正确的物料编码',
+      icon: 'none'
+    })
+  }
+}, 300)
+onShow(() => {
+  scanQRInfo.value = ''
+})
+
+async function getMaterialList() {
+  if (materialCode.value === '') return
+  let params = {
+    code: materialCode.value,
+    usageStatus: 1,
+    openStatus:0,
+	openDueFalg:1
+	
+  }
+  const data = await nx.$api.material.queryMaterialInfo(params)
+  if (!data) return uni.showToast({ title: '未查询到可以开封的物料信息', icon: 'none' })
+  const existingCodes = new Set(materialList.value.map(item => item.id))
+  if (existingCodes.has(data.id)) {
+    return uni.showToast({ title: '该物料已存在，无需重复扫描', icon: 'none' })
+  }
+
+  materialList.value.push(data)
+}
+async function handleSubmit() {
+	if (operatorDate.value === '') {
+	  return uni.showToast({
+	    title: '请选择开封日期',
+	    icon: 'none'
+	  })
+	}
+  btnLoading.value = true
+  let params = {
+    businessType: '开封',
+    operatorDate:operatorDate.value,
+	detailList: materialList.value.map(item => ({infomationId:item.id}))
+	
+  }
+  await nx.$api.material.addUseOver(params).finally(() => {
+    btnLoading.value = false
+  })
+  uni.showToast({
+    title: '开封成功',
+    icon: 'none'
+  })
+  handleReset()
+}
+function handleReset() {
+  materialCode.value = ''
+  materialList.value = []
+  operatorDate.value = ''
+}
+onMounted(async () => {})
+</script>
+
+<style lang="scss" scoped>
+.sample-item {
+  position: relative;
+  pointer-events: none;
+}
+:deep(.uni-select__input-placeholder) {
+  font-size: 16px;
+}
+</style>
diff --git a/pages/material/useUpMark/index.vue b/pages/material/useUpMark/index.vue
index 014e231..80bfbc2 100644
--- a/pages/material/useUpMark/index.vue
+++ b/pages/material/useUpMark/index.vue
@@ -92,7 +92,7 @@ async function handleSubmit() {
   btnLoading.value = true
   let params = {
     businessType: '用完标记',
-    infomationIds: materialList.value.map(item => item.id)
+    detailList: materialList.value.map(item => ({infomationId:item.id}))
   }
   await nx.$api.material.addUseOver(params).finally(() => {
     btnLoading.value = false
diff --git a/static/images/menus/open.png b/static/images/menus/open.png
new file mode 100644
index 0000000..2c142a7
Binary files /dev/null and b/static/images/menus/open.png differ
diff --git a/uni_modules/zb-table/components/zb-table/zb-table.vue b/uni_modules/zb-table/components/zb-table/zb-table.vue
index 529d72f..77c0111 100644
--- a/uni_modules/zb-table/components/zb-table/zb-table.vue
+++ b/uni_modules/zb-table/components/zb-table/zb-table.vue
@@ -1198,6 +1198,7 @@ export default {
   overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
   text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
   overflow-wrap: break-word;
+  font-size: 16px !important;
 }
 .zb-table {
   height: 100%;
diff --git a/uview-plus/components/u-upload/u-upload.vue b/uview-plus/components/u-upload/u-upload.vue
index 91fff93..9e3e5fc 100644
--- a/uview-plus/components/u-upload/u-upload.vue
+++ b/uview-plus/components/u-upload/u-upload.vue
@@ -1,927 +1,916 @@
 <template>
-	<view class="u-upload" :style="[addStyle(customStyle)]">
-		<view class="u-upload__wrap" >
-			<template v-if="previewImage">
-				<view
-				    class="u-upload__wrap__preview"
-				    v-for="(item, index) in lists"
-				    :key="index"
-				>
-					<image
-					    v-if="item.isImage || (item.type && item.type === 'image')"
-					    :src="item.thumb || item.url"
-					    :mode="imageMode"
-					    class="u-upload__wrap__preview__image"
-					    @tap="onClickPreview(item, index)"
-						:style="[{
-							width: addUnit(width),
-							height: addUnit(height)
-						}]"
-					/>
-					<view class="u-upload__wrap__preview__video"
-						:style="{
-							width: addUnit(width),
-							height: addUnit(height)
-						}"
-						v-else-if="(item.isVideo || (item.type && item.type === 'video')) && getVideoThumb">
-						<image
-							v-if="item.thumb"
-						    :src="item.thumb"
-						    :mode="imageMode"
-						    class="u-upload__wrap__preview__image"
-						    @tap="onClickPreview(item, index)"
-							:style="[{
-								width: addUnit(width),
-								height: addUnit(height)
-							}]"
-						/>
-						<up-icon
-							v-else
-						    color="#80CBF9"
-						    size="26"
-						    :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'file-text'"
-						></up-icon>
-						<view v-if="item.status === 'success'"
-							class="u-upload__wrap__play"
-							@tap="onClickPreview(item, index)">
-							<slot name="playIcon"></slot>
-							<up-icon v-if="!$slots['playIcon']"
-								class="u-upload__wrap__play__icon"
-								name="play-right" size="22px"></up-icon>
-						</view>
-					</view>
-					<view
-					    v-else
-					    class="u-upload__wrap__preview__other"
-						@tap="onClickPreview(item, index)"
-						:style="[{
-							width: addUnit(width),
-							height: addUnit(height)
-						}]"
-					>
-						<up-icon
-						    color="#80CBF9"
-						    size="26"
-						    :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'folder'"
-						></up-icon>
-						<text class="u-upload__wrap__preview__other__text">
-							{{item.isVideo || (item.type && item.type === 'video') ? item.name || t("up.common.video") : item.name || t("up.common.file")}}
-						</text>
-					</view>
-					<view
-					    class="u-upload__status"
-					    v-if="item.status === 'uploading' || item.status === 'failed'"
-					>
-						<view class="u-upload__status__icon">
-							<up-icon
-							    v-if="item.status === 'failed'"
-							    name="close-circle"
-							    color="#ffffff"
-							    size="25"
-							/>
-							<u-loading-icon
-							    size="22"
-							    mode="circle"
-							    v-else
-							/>
-						</view>
-						<text
-						    v-if="item.message"
-						    class="u-upload__status__message"
-						>{{ item.message }}</text>
-						<up-gap class="u-upload__progress" height="3px"
-							:style="{width: item.progress + '%'}"></up-gap>
-					</view>
-					<view
-					    class="u-upload__deletable"
-					    v-if="item.status !== 'uploading' && (deletable || item.deletable)"
-					    @tap.stop="deleteItem(index)"
-					>
-						<view class="u-upload__deletable__icon">
-							<up-icon
-							    name="close"
-							    color="#ffffff"
-							    size="10"
-							></up-icon>
-						</view>
-					</view>
-					<slot name="success">
-						<view
-							class="u-upload__success"
-							v-if="item.status === 'success'"
-						>
-							<!-- #ifdef APP-NVUE -->
-							<image
-								:src="successIcon"
-								class="u-upload__success__icon"
-							></image>
-							<!-- #endif -->
-							<!-- #ifndef APP-NVUE -->
-							<view class="u-upload__success__icon">
-								<up-icon
-									name="checkmark"
-									color="#ffffff"
-									size="12"
-								></up-icon>
-							</view>
-							<!-- #endif -->
-						</view>
-					</slot>
-				</view>
-			</template>
-			<canvas id="myCanvas" type="2d"
-				style="width: 100px; height: 150px;display: none;"></canvas>
-			<template v-if="isInCount">
-				<view
-				    v-if="$slots.trigger"
-				    @tap="chooseFile"
-				>
-					<slot name="trigger" />
-				</view>
-				<view
-				    v-else-if="!$slots.trigger && ($slots.default || $slots.$default)"
-				    @tap="chooseFile"
-				>
-					<slot />
-				</view>
-				<view
-				    v-else
-				    class="u-upload__button"
-				    :hover-class="!disabled ? 'u-upload__button--hover' : ''"
-				    hover-stay-time="150"
-				    @tap="chooseFile"
-				    :class="[disabled && 'u-upload__button--disabled']"
-					:style="[{
-						width: addUnit(width),
-						height: addUnit(height)
-					}]"
-				>
-					<up-icon
-					    :name="uploadIcon"
-					    size="26"
-					    :color="uploadIconColor"
-					></up-icon>
-					<text
-					    v-if="uploadText"
-					    class="u-upload__button__text"
-					>{{ uploadText }}</text>
-				</view>
-			</template>
-		</view>
-		<up-popup
-			mode="center"
-			v-model:show="popupShow">
-			<video id="myVideo" v-if="popupShow"
-				:src="currentItemIndex >= 0 ? lists[currentItemIndex].url : ''"
-				@error="videoErrorCallback" show-center-play-btn
-				:object-fit='videoPreviewObjectFit' show-fullscreen-btn='true'
-				enable-play-gesture controls
-				:autoplay="true" auto-pause-if-open-native
-				@loadedmetadata="loadedVideoMetadata"
-				:initial-time='0.1'>
-			</video>
-		</up-popup>
-	</view>
+  <view class="u-upload" :style="[addStyle(customStyle)]">
+    <view class="u-upload__wrap">
+      <template v-if="previewImage">
+        <view class="u-upload__wrap__preview" v-for="(item, index) in lists" :key="index">
+          <image
+            v-if="item.isImage || (item.type && item.type === 'image')"
+            :src="item.thumb || item.url"
+            :mode="imageMode"
+            class="u-upload__wrap__preview__image"
+            @tap="onClickPreview(item, index)"
+            :style="[
+              {
+                width: addUnit(width),
+                height: addUnit(height)
+              }
+            ]"
+          />
+          <view
+            class="u-upload__wrap__preview__video"
+            :style="{
+              width: addUnit(width),
+              height: addUnit(height)
+            }"
+            v-else-if="(item.isVideo || (item.type && item.type === 'video')) && getVideoThumb"
+          >
+            <image
+              v-if="item.thumb"
+              :src="item.thumb"
+              :mode="imageMode"
+              class="u-upload__wrap__preview__image"
+              @tap="onClickPreview(item, index)"
+              :style="[
+                {
+                  width: addUnit(width),
+                  height: addUnit(height)
+                }
+              ]"
+            />
+            <up-icon
+              v-else
+              color="#80CBF9"
+              size="26"
+              :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'file-text'"
+            ></up-icon>
+            <view v-if="item.status === 'success'" class="u-upload__wrap__play" @tap="onClickPreview(item, index)">
+              <slot name="playIcon"></slot>
+              <up-icon
+                v-if="!$slots['playIcon']"
+                class="u-upload__wrap__play__icon"
+                name="play-right"
+                size="22px"
+              ></up-icon>
+            </view>
+          </view>
+          <view
+            v-else
+            class="u-upload__wrap__preview__other"
+            @tap="onClickPreview(item, index)"
+            :style="[
+              {
+                width: addUnit(width),
+                height: addUnit(height)
+              }
+            ]"
+          >
+            <up-icon
+              color="#80CBF9"
+              size="26"
+              :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'folder'"
+            ></up-icon>
+            <text class="u-upload__wrap__preview__other__text">
+              {{
+                item.isVideo || (item.type && item.type === 'video')
+                  ? item.name || t('up.common.video')
+                  : item.name || t('up.common.file')
+              }}
+            </text>
+          </view>
+          <view class="u-upload__status" v-if="item.status === 'uploading' || item.status === 'failed'">
+            <view class="u-upload__status__icon">
+              <up-icon v-if="item.status === 'failed'" name="close-circle" color="#ffffff" size="25" />
+              <u-loading-icon size="22" mode="circle" v-else />
+            </view>
+            <text v-if="item.message" class="u-upload__status__message">{{ item.message }}</text>
+            <up-gap class="u-upload__progress" height="3px" :style="{ width: item.progress + '%' }"></up-gap>
+          </view>
+          <view
+            class="u-upload__deletable"
+            v-if="item.status !== 'uploading' && (deletable || item.deletable)"
+            @tap.stop="deleteItem(index)"
+          >
+            <view class="u-upload__deletable__icon">
+              <up-icon name="close" color="#ffffff" size="15"></up-icon>
+            </view>
+          </view>
+          <slot name="success">
+            <view class="u-upload__success" v-if="item.status === 'success'">
+              <!-- #ifdef APP-NVUE -->
+              <image :src="successIcon" class="u-upload__success__icon"></image>
+              <!-- #endif -->
+              <!-- #ifndef APP-NVUE -->
+              <view class="u-upload__success__icon">
+                <up-icon name="checkmark" color="#ffffff" size="12"></up-icon>
+              </view>
+              <!-- #endif -->
+            </view>
+          </slot>
+        </view>
+      </template>
+      <canvas id="myCanvas" type="2d" style="width: 100px; height: 150px; display: none"></canvas>
+      <template v-if="isInCount">
+        <view v-if="$slots.trigger" @tap="chooseFile">
+          <slot name="trigger" />
+        </view>
+        <view v-else-if="!$slots.trigger && ($slots.default || $slots.$default)" @tap="chooseFile">
+          <slot />
+        </view>
+        <view
+          v-else
+          class="u-upload__button"
+          :hover-class="!disabled ? 'u-upload__button--hover' : ''"
+          hover-stay-time="150"
+          @tap="chooseFile"
+          :class="[disabled && 'u-upload__button--disabled']"
+          :style="[
+            {
+              width: addUnit(width),
+              height: addUnit(height)
+            }
+          ]"
+        >
+          <up-icon :name="uploadIcon" size="26" :color="uploadIconColor"></up-icon>
+          <text v-if="uploadText" class="u-upload__button__text">{{ uploadText }}</text>
+        </view>
+      </template>
+    </view>
+    <up-popup mode="center" v-model:show="popupShow">
+      <video
+        id="myVideo"
+        v-if="popupShow"
+        :src="currentItemIndex >= 0 ? lists[currentItemIndex].url : ''"
+        @error="videoErrorCallback"
+        show-center-play-btn
+        :object-fit="videoPreviewObjectFit"
+        show-fullscreen-btn="true"
+        enable-play-gesture
+        controls
+        :autoplay="true"
+        auto-pause-if-open-native
+        @loadedmetadata="loadedVideoMetadata"
+        :initial-time="0.1"
+      ></video>
+    </up-popup>
+  </view>
 </template>
 
 <script>
-	import {
-		chooseFile
-	} from './utils';
-	import { mixinUpload } from './mixin';
-	import { props } from './props';
-	import { mpMixin } from '../../libs/mixin/mpMixin';
-	import { mixin } from '../../libs/mixin/mixin';
-	import { addStyle, addUnit, toast } from '../../libs/function/index';
-	import test from '../../libs/function/test';
-	import { t } from '../../libs/i18n'
-	/**
-	 * upload 上传
-	 * @description 该组件用于上传图片场景
-	 * @tutorial https://uview-plus.jiangruyi.com/components/upload.html
-	 * @property {String}			accept				接受的文件类型, 可选值为all media image file video （默认 'image' ）
-	 * @property {String | Array}	capture				图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头（默认 ['album', 'camera'] ）
-	 * @property {Array}			extension			选择文件的后缀名，暂只支持.zip、.png等，不支持application/msword等值
-	 * @property {Boolean}			compressed			当accept为video时生效，是否压缩视频，默认为true（默认 true ）
-	 * @property {String}			camera				当accept为video时生效，可选值为back或front（默认 'back' ）
-	 * @property {Number}			maxDuration			当accept为video时生效，拍摄视频最长拍摄时间，单位秒（默认 60 ）
-	 * @property {String}			uploadIcon			上传区域的图标，只能内置图标（默认 'camera-fill' ）
-	 * @property {String}			uploadIconColor		上传区域的图标的字体颜色，只能内置图标（默认 #D3D4D6 ）
-	 * @property {Boolean}			useBeforeRead		是否开启文件读取前事件（默认 false ）
-	 * @property {Boolean}			previewFullImage	是否显示组件自带的图片预览功能（默认 true ）
-	 * @property {String | Number}	maxCount			最大上传数量（默认 52 ）
-	 * @property {Boolean}			disabled			是否启用（默认 false ）
-	 * @property {String}			imageMode			预览上传的图片时的裁剪模式，和image组件mode属性一致（默认 'aspectFill' ）
-	 * @property {String}			name				标识符，可以在回调函数的第二项参数中获取
-	 * @property {Array}			sizeType			所选的图片的尺寸, 可选值为original compressed（默认 ['original', 'compressed'] ）
-	 * @property {Boolean}			multiple			是否开启图片多选，部分安卓机型不支持 （默认 false ）
-	 * @property {Boolean}			deletable			是否展示删除按钮（默认 true ）
-	 * @property {String | Number}	maxSize				文件大小限制，单位为byte （默认 Number.MAX_VALUE ）
-	 * @property {Array}			fileList			显示已上传的文件列表
-	 * @property {String}			uploadText			上传区域的提示文字
-	 * @property {String | Number}	width				内部预览图片区域和选择图片按钮的区域宽度（默认 80 ）
-	 * @property {String | Number}	height				内部预览图片区域和选择图片按钮的区域高度（默认 80 ）
-	 * @property {Object}			customStyle			组件的样式，对象形式
-	 * @event {Function} afterRead		读取后的处理函数
-	 * @event {Function} beforeRead		读取前的处理函数
-	 * @event {Function} oversize		文件超出大小限制
-	 * @event {Function} clickPreview	点击预览图片
-	 * @event {Function} delete 		删除图片
-	 * @example <u-upload :action="action" :fileList="fileList" ></u-upload>
-	 */
-	export default {
-		name: "u-upload",
-		mixins: [mpMixin, mixin, mixinUpload, props],
-		data() {
-			return {
-				// #ifdef APP-NVUE
-				successIcon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACP0lEQVRYCc3YXygsURwH8K/dpcWyG3LF5u/6/+dKVylSypuUl6uUPMifKMWL8oKEB1EUT1KeUPdR3uTNUsSLxb2udG/cbvInNuvf2rVnazZ/ZndmZ87snjM1Z+Z3zpzfp9+Z5mEAhlvjRtZgCKs+gnPAOcAkkMOR4jEHfItjDvgRxxSQD8cM0BuOCaAvXNCBQrigAsXgggYUiwsK0B9cwIH+4gIKlIILGFAqLiBAOTjFgXJxigJp4BQD0sIpAqSJow6kjSNAFTnRaHJwLenD6Mud52VQAcrBfTd2oyq+HtGaGGWAcnAVcXWoM3bCZrdi+ncPfaAcXE5UKVpdW/vitGPqqAtn98d0gXJwX7Qp6MmegUYVhvmTIezdmHlxJCjpHRTCFerLkRRu4k0aqdajN3sWOo0BK//msHa+xDuPC/oNFMKRhTtM4xjIX0SCNpXL4+7VIaHuyiWEp2L7ahWLf8fejfPdqPmC3mJicORZUp1CQzm+GiphvljGk+PBvWRbxii+xVTj5M6CiZ/tsDufvaXyxEUDxeLIyvu3m0iOyEFWVAkydcVYdyFrE9tQk9iMq6f/GNlvwt3LjQfh60LUrw9/cFyyMJUW/XkLSNMV4Mi6C5ML+ui4x5ClAX9sB9w0wV6wglJwJCv5fOxcr6EstgbGiEw4XcfUry4cWrcEUW8n+ARKxXEJHhw2WG43UKSvwI/TSZgvl7kh0b3XLZaLEy0QmMgLZAVH7J+ALOE+AVnDvQOyiPMAWcW5gSzjCPAV+78S5WE0GrQAAAAASUVORK5CYII=',
-				// #endif
-				lists: [],
-				isInCount: true,
-				popupShow: false,
-				currentItemIndex: -1
-			}
-		},
-		watch: {
-			// 监听文件列表的变化，重新整理内部数据
-			fileList: {
-				handler() {
-					this.formatFileList()
-				},
-				immediate: true,
-				deep: true,
-			},
-			deletable(newVal) {
-				this.formatFileList()
-			},
-			maxCount(newVal) {
-				this.formatFileList()
-			},
-			accept(newVal) {
-				this.formatFileList()
-			},
-			popupShow(newVal) {
-				if (!newVal) {
-					this.currentItemIndex = -1;
-				}
-			}
-		},
-		// #ifdef VUE3
-		emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'],
-		// #endif
-		methods: {
-			t,
-			addUnit,
-			addStyle,
-			videoErrorCallback() {},
-			loadedVideoMetadata(e) {
-				if (this.currentItemIndex < 0) {
-					return;
-				}
-				if (this.autoUploadDriver != 'local') {
-					return;
-				}
-				if (!this.getVideoThumb) {
-					return;
-				}
-				// 截取第一帧作为封面，oss等云存储场景直接使用拼接参数。
-				let w = this.lists[this.currentItemIndex].width;
-				let h = this.lists[this.currentItemIndex].height;
-				const dpr = uni.getSystemInfoSync().pixelRatio;
-				uni.createSelectorQuery().select('#myVideo').context(res => {
-					console.log('select video', res)
-					const myVideo = res.context
-					uni.createSelectorQuery()
-					  .select('#myCanvas')
-					  .fields({ node: true, size: true })
-					  .exec(([res]) => {
-						console.log('select canvas', res)
-						const ctx1 = res[0].node.getContext('2d')
-						res[0].node.width = w * dpr
-						res[0].node.height = h * dpr
-						// Draw the first frame and export it as an image
-						// myVideo.onPlay(() => {
-							setTimeout(() => {
-								captureFirstFrame()
-							}, 500)
-						// })
-						const captureFirstFrame = () => {
-							ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr)
-							wx.canvasToTempFilePath({
-								canvas: res[0].node,
-								success: (result) => {
-									console.log('First frame image path:', result
-										.tempFilePath)
-									// Now you can use the image path (result.tempFilePath)
-									this.fileList['currentItemIndex'].thumb = result.tempFilePath
-								},
-								fail: (err) => {
-									console.error('Failed to export image:', err)
-								}
-							})
-						}
+import { chooseFile } from './utils'
+import { mixinUpload } from './mixin'
+import { props } from './props'
+import { mpMixin } from '../../libs/mixin/mpMixin'
+import { mixin } from '../../libs/mixin/mixin'
+import { addStyle, addUnit, toast } from '../../libs/function/index'
+import test from '../../libs/function/test'
+import { t } from '../../libs/i18n'
+/**
+ * upload 上传
+ * @description 该组件用于上传图片场景
+ * @tutorial https://uview-plus.jiangruyi.com/components/upload.html
+ * @property {String}			accept				接受的文件类型, 可选值为all media image file video （默认 'image' ）
+ * @property {String | Array}	capture				图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头（默认 ['album', 'camera'] ）
+ * @property {Array}			extension			选择文件的后缀名，暂只支持.zip、.png等，不支持application/msword等值
+ * @property {Boolean}			compressed			当accept为video时生效，是否压缩视频，默认为true（默认 true ）
+ * @property {String}			camera				当accept为video时生效，可选值为back或front（默认 'back' ）
+ * @property {Number}			maxDuration			当accept为video时生效，拍摄视频最长拍摄时间，单位秒（默认 60 ）
+ * @property {String}			uploadIcon			上传区域的图标，只能内置图标（默认 'camera-fill' ）
+ * @property {String}			uploadIconColor		上传区域的图标的字体颜色，只能内置图标（默认 #D3D4D6 ）
+ * @property {Boolean}			useBeforeRead		是否开启文件读取前事件（默认 false ）
+ * @property {Boolean}			previewFullImage	是否显示组件自带的图片预览功能（默认 true ）
+ * @property {String | Number}	maxCount			最大上传数量（默认 52 ）
+ * @property {Boolean}			disabled			是否启用（默认 false ）
+ * @property {String}			imageMode			预览上传的图片时的裁剪模式，和image组件mode属性一致（默认 'aspectFill' ）
+ * @property {String}			name				标识符，可以在回调函数的第二项参数中获取
+ * @property {Array}			sizeType			所选的图片的尺寸, 可选值为original compressed（默认 ['original', 'compressed'] ）
+ * @property {Boolean}			multiple			是否开启图片多选，部分安卓机型不支持 （默认 false ）
+ * @property {Boolean}			deletable			是否展示删除按钮（默认 true ）
+ * @property {String | Number}	maxSize				文件大小限制，单位为byte （默认 Number.MAX_VALUE ）
+ * @property {Array}			fileList			显示已上传的文件列表
+ * @property {String}			uploadText			上传区域的提示文字
+ * @property {String | Number}	width				内部预览图片区域和选择图片按钮的区域宽度（默认 80 ）
+ * @property {String | Number}	height				内部预览图片区域和选择图片按钮的区域高度（默认 80 ）
+ * @property {Object}			customStyle			组件的样式，对象形式
+ * @event {Function} afterRead		读取后的处理函数
+ * @event {Function} beforeRead		读取前的处理函数
+ * @event {Function} oversize		文件超出大小限制
+ * @event {Function} clickPreview	点击预览图片
+ * @event {Function} delete 		删除图片
+ * @example <u-upload :action="action" :fileList="fileList" ></u-upload>
+ */
+export default {
+  name: 'u-upload',
+  mixins: [mpMixin, mixin, mixinUpload, props],
+  data() {
+    return {
+      // #ifdef APP-NVUE
+      successIcon:
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACP0lEQVRYCc3YXygsURwH8K/dpcWyG3LF5u/6/+dKVylSypuUl6uUPMifKMWL8oKEB1EUT1KeUPdR3uTNUsSLxb2udG/cbvInNuvf2rVnazZ/ZndmZ87snjM1Z+Z3zpzfp9+Z5mEAhlvjRtZgCKs+gnPAOcAkkMOR4jEHfItjDvgRxxSQD8cM0BuOCaAvXNCBQrigAsXgggYUiwsK0B9cwIH+4gIKlIILGFAqLiBAOTjFgXJxigJp4BQD0sIpAqSJow6kjSNAFTnRaHJwLenD6Mud52VQAcrBfTd2oyq+HtGaGGWAcnAVcXWoM3bCZrdi+ncPfaAcXE5UKVpdW/vitGPqqAtn98d0gXJwX7Qp6MmegUYVhvmTIezdmHlxJCjpHRTCFerLkRRu4k0aqdajN3sWOo0BK//msHa+xDuPC/oNFMKRhTtM4xjIX0SCNpXL4+7VIaHuyiWEp2L7ahWLf8fejfPdqPmC3mJicORZUp1CQzm+GiphvljGk+PBvWRbxii+xVTj5M6CiZ/tsDufvaXyxEUDxeLIyvu3m0iOyEFWVAkydcVYdyFrE9tQk9iMq6f/GNlvwt3LjQfh60LUrw9/cFyyMJUW/XkLSNMV4Mi6C5ML+ui4x5ClAX9sB9w0wV6wglJwJCv5fOxcr6EstgbGiEw4XcfUry4cWrcEUW8n+ARKxXEJHhw2WG43UKSvwI/TSZgvl7kh0b3XLZaLEy0QmMgLZAVH7J+ALOE+AVnDvQOyiPMAWcW5gSzjCPAV+78S5WE0GrQAAAAASUVORK5CYII=',
+      // #endif
+      lists: [],
+      isInCount: true,
+      popupShow: false,
+      currentItemIndex: -1
+    }
+  },
+  watch: {
+    // 监听文件列表的变化，重新整理内部数据
+    fileList: {
+      handler() {
+        this.formatFileList()
+      },
+      immediate: true,
+      deep: true
+    },
+    deletable(newVal) {
+      this.formatFileList()
+    },
+    maxCount(newVal) {
+      this.formatFileList()
+    },
+    accept(newVal) {
+      this.formatFileList()
+    },
+    popupShow(newVal) {
+      if (!newVal) {
+        this.currentItemIndex = -1
+      }
+    }
+  },
+  // #ifdef VUE3
+  emits: [
+    'error',
+    'beforeRead',
+    'oversize',
+    'afterRead',
+    'delete',
+    'clickPreview',
+    'update:fileList',
+    'afterAutoUpload'
+  ],
+  // #endif
+  methods: {
+    t,
+    addUnit,
+    addStyle,
+    videoErrorCallback() {},
+    loadedVideoMetadata(e) {
+      if (this.currentItemIndex < 0) {
+        return
+      }
+      if (this.autoUploadDriver != 'local') {
+        return
+      }
+      if (!this.getVideoThumb) {
+        return
+      }
+      // 截取第一帧作为封面，oss等云存储场景直接使用拼接参数。
+      let w = this.lists[this.currentItemIndex].width
+      let h = this.lists[this.currentItemIndex].height
+      const dpr = uni.getSystemInfoSync().pixelRatio
+      uni
+        .createSelectorQuery()
+        .select('#myVideo')
+        .context(res => {
+          console.log('select video', res)
+          const myVideo = res.context
+          uni
+            .createSelectorQuery()
+            .select('#myCanvas')
+            .fields({ node: true, size: true })
+            .exec(([res]) => {
+              console.log('select canvas', res)
+              const ctx1 = res[0].node.getContext('2d')
+              res[0].node.width = w * dpr
+              res[0].node.height = h * dpr
+              // Draw the first frame and export it as an image
+              // myVideo.onPlay(() => {
+              setTimeout(() => {
+                captureFirstFrame()
+              }, 500)
+              // })
+              const captureFirstFrame = () => {
+                ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr)
+                wx.canvasToTempFilePath({
+                  canvas: res[0].node,
+                  success: result => {
+                    console.log('First frame image path:', result.tempFilePath)
+                    // Now you can use the image path (result.tempFilePath)
+                    this.fileList['currentItemIndex'].thumb = result.tempFilePath
+                  },
+                  fail: err => {
+                    console.error('Failed to export image:', err)
+                  }
+                })
+              }
 
-						// Capture the first frame
-						setInterval(() => {
-							ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr);
-						}, 1000 / 24)
-					}).exec()
-				}).exec()
-			},
-			formatFileList() {
-				const {
-					fileList = [], maxCount
-				} = this;
-				const lists = fileList.map((item) => {
-					const name = item.name || item.url || item.thumb
-					return Object.assign(Object.assign({}, item), {
-						// 如果item.url为本地选择的blob文件的话，无法判断其为video还是image，此处优先通过accept做判断处理
-						isImage: item.name ? test.image(item.name) : (this.accept === 'image' || test.image(name)),
-						isVideo: item.name ? test.video(item.name) : (this.accept === 'video' || test.video(name)),
-						deletable: typeof item.deletable === 'boolean' ? item.deletable : this.deletable,
-					})
-				});
-				this.lists = lists
-				this.isInCount = lists.length < maxCount
-			},
-			chooseFile(params) {
-				const {
-					maxCount,
-					multiple,
-					lists,
-					disabled
-				} = this;
-				if (disabled) return Promise.reject();
-				const chooseParams = Object.assign({
-					accept: this.accept,
-					extension: this.extension,
-					multiple: this.multiple,
-					capture: this.capture,
-					compressed: this.compressed,
-					maxDuration: this.maxDuration,
-					sizeType: this.sizeType,
-					camera: this.camera,
-				}, {
-					maxCount: maxCount - lists.length,
-					...params
-				})
-				return chooseFile(chooseParams)
-					.then((res) => {
-						const result = chooseParams.multiple ? res : res[0]
-						this.onBeforeRead(result);
-						return result
-					})
-					.catch((error) => {
-						this.$emit('error', error);
-					});
-			},
-			// 文件读取之前
-			onBeforeRead(file) {
-				const {
-					beforeRead,
-					useBeforeRead,
-				} = this;
-				let res = file
-				// beforeRead是否为一个方法
-				if (test.func(beforeRead)) {
-					// 如果用户定义了此方法，则去执行此方法，并传入读取的文件回调
-					res = beforeRead(file, this.getDetail());
-				}
-				if (useBeforeRead) {
-					res = new Promise((resolve, reject) => {
-						this.$emit(
-							'beforeRead',
-							Object.assign(Object.assign({
-								file
-							}, this.getDetail()), {
-								callback: (ok) => {
-									ok ? resolve() : reject();
-								},
-							})
-						);
-					});
-				}
-				if (test.promise(res)) {
-					res.then((data) => this.onAfterRead(data || file));
-				} else {
-					this.onAfterRead(res || file);
-				}
-			},
-			getDetail(index) {
-				return {
-					name: this.name,
-					index: index == null ? this.fileList.length : index,
-				};
-			},
-			async onAfterRead(file) {
-				const {
-					maxSize,
-					afterRead
-				} = this;
-				const oversize = Array.isArray(file) ?
-					file.some((item) => item.size > maxSize) :
-					file.size > maxSize;
-				if (oversize) {
-					uni.showToast({
-						title: t("up.upload.sizeExceed")
-					})
-					this.$emit('oversize', Object.assign({
-						file
-					}, this.getDetail()));
-					return;
-				}
-				let len = this.fileList.length;
-				if (this.autoUpload) {
-					// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
-					let lists = [].concat(file);
-					let fileListLen = this.fileList.length;
-					lists.map((item) => {
-						this.fileList.push({
-							...item,
-							status: 'uploading',
-							message: t("up.upload.uploading"),
-							progress: 0
-						});
-					});
-					let that = this;
-					this.$emit('update:fileList', this.fileList);
-					for (let i = 0; i < lists.length; i++) {
-						let j = i;
-						let result = '';
-						switch(this.autoUploadDriver) {
-							case 'cos': // 腾讯云
-								break;
-							case 'kodo': // 七牛云
-								break;
-							case 'oss':
-							case 'upload_oss':
-								// 阿里云前端直传
-								// 获取签名
-								console.log()
-								let formData = {};
-								let ret = await uni.request({
-									url: this.autoUploadAuthUrl,
-									method: 'get',
-									header: this.autoUploadHeader,
-									data: {
-										filename: lists[j].name
-									}
-								});
-								// console.log(ret);
-								let res0 = ret.data;
-								if (res0.code == 200) {
-									// 路径 + 文件名 + 扩展名
-									// 不传递filename就要拼接key
-									// res0.data.params.key = res0.data.params.dir + res0.data.params.uniqidName + fileExt;
-									formData = res0.data.params;
-								} else {
-									uni.showToast({
-										title: res0.msg,
-										duration: 1500
-									});
-									return;
-								}
-								var uploadTask = uni.uploadFile({
-									url: res0.data.params.host,
-									filePath: lists[j].url,
-									name: 'file',
-									// fileType: 'video', // 仅支付宝小程序，且必填。
-									// header: header,
-									formData: formData,
-									success: (uploadFileRes) => {
-										let thumb = '';
-										let afterPromise = '';
-										if (that.customAfterAutoUpload) {
-											afterPromise = new Promise((resolve, reject) => {
-												that.$emit(
-													'afterAutoUpload',
-													Object.assign(res0, {
-														callback: (r) => {
-															r.url ? resolve(r) : reject();
-														},
-													})
-												);
-											});
-										}
-										if (test.promise(afterPromise)) {
-											afterPromise.then((data) => that.succcessUpload(len + j, data.url, data.thumb));
-										} else {
-											result = res0.data.params.host + '/' + res0.data.params.key;
-											if (that.accept === 'video' || test.video(result)) {
-												thumb = result + '?x-oss-process=video/snapshot,t_10000,m_fast';
-											}
-											that.succcessUpload(len + j, result, thumb);
-										}
-									}
-								});
-								uploadTask.onProgressUpdate((res) => {
-									that.updateUpload(len + j, {
-										progress: res.progress
-									});
-									// console.log('上传进度' + res.progress);
-									// console.log('已经上传的数据长度' + res.totalBytesSent);
-									// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
-								});
-								break;
-							case 'local':
-							default:
-								// 服务器本机上传
-								var uploadTask = uni.uploadFile({
-									url: this.autoUploadApi,
-									filePath: lists[j].url,
-									name: 'file',
-									// fileType: 'video', // 仅支付宝小程序，且必填。
-									header: this.autoUploadHeader,
-									success: (uploadFileRes) => {
-										let res0 = uploadFileRes.data;
-										let afterPromise = '';
-										if (that.customAfterAutoUpload) {
-											afterPromise = new Promise((resolve, reject) => {
-												that.$emit(
-													'afterAutoUpload',
-													Object.assign(res0, {
-														callback: (r) => {
-															r.url ? resolve(r) : reject();
-														}
-													})
-												);
-											});
-										}
-										if (test.promise(afterPromise)) {
-											afterPromise.then((data) => that.succcessUpload(len + j, data.url));
-										} else {
-											if (res0.code != 200) {
-												uni.showToast({
-													title: res0.msg
-												});
-											} else {
-												result = res0.data.url;
-												that.succcessUpload(len + j, result);
-											}
-										}
-									}
-								});
-								uploadTask.onProgressUpdate((res) => {
-									that.updateUpload(len + j, {
-										progress: res.progress
-									});
-									// console.log('上传进度' + res.progress);
-									// console.log('已经上传的数据长度' + res.totalBytesSent);
-									// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
-								});
-								break;
-						}
-					}
-				} else {
-					if (typeof afterRead === 'function') {
-						afterRead(file, this.getDetail());
-					}
-					this.$emit('afterRead', Object.assign({
-						file
-					}, this.getDetail()));
-				}
-			},
-			updateUpload(index, param) {
-				let item = this.fileList[index];
-				this.fileList.splice(index, 1, {
-					...item,
-					// 注意这里不判断会出现succcessUpload先执行又被覆盖的问题
-					status: param.progress == 100 ? 'success' : 'uploading',
-					message: '',
-					progress: param.progress
-				});
-				this.$emit('update:fileList', this.fileList);
-			},
-			succcessUpload(index, url, thumb = '') {
-				let item = this.fileList[index];
-				this.fileList.splice(index, 1, {
-					...item,
-					status: 'success',
-					message: '',
-					url: url,
-					progress: 100,
-					thumb: thumb
-				});
-				this.$emit('update:fileList', this.fileList);
-			},
-			deleteItem(index) {
-				if (this.autoDelete) {
-					this.fileList.splice(index, 1);
-					this.$emit('update:fileList', this.fileList);
-				} else {
-					this.$emit(
-						'delete',
-						Object.assign(Object.assign({}, this.getDetail(index)), {
-							file: this.fileList[index],
-						})
-					);
-				}
-			},
-			// 预览图片
-			onPreviewImage(previewItem, index) {
-				if (!previewItem.isImage || !this.previewFullImage) return
-                let current = 0;
-                const urls = [];
-                let imageIndex = 0;
-                for (var i = 0; i < this.lists.length; i++) {
-                    const item = this.lists[i];
-                    if (item.isImage || (item.type && item.type === 'image')) {
-                        urls.push(item.url || item.thumb);
-                        if (i === index) {
-                            current = imageIndex;
-                        }
-                        imageIndex += 1;
+              // Capture the first frame
+              setInterval(() => {
+                ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr)
+              }, 1000 / 24)
+            })
+            .exec()
+        })
+        .exec()
+    },
+    formatFileList() {
+      const { fileList = [], maxCount } = this
+      const lists = fileList.map(item => {
+        const name = item.name || item.url || item.thumb
+        return Object.assign(Object.assign({}, item), {
+          // 如果item.url为本地选择的blob文件的话，无法判断其为video还是image，此处优先通过accept做判断处理
+          isImage: item.name ? test.image(item.name) : this.accept === 'image' || test.image(name),
+          isVideo: item.name ? test.video(item.name) : this.accept === 'video' || test.video(name),
+          deletable: typeof item.deletable === 'boolean' ? item.deletable : this.deletable
+        })
+      })
+      this.lists = lists
+      this.isInCount = lists.length < maxCount
+    },
+    chooseFile(params) {
+      const { maxCount, multiple, lists, disabled } = this
+      if (disabled) return Promise.reject()
+      const chooseParams = Object.assign(
+        {
+          accept: this.accept,
+          extension: this.extension,
+          multiple: this.multiple,
+          capture: this.capture,
+          compressed: this.compressed,
+          maxDuration: this.maxDuration,
+          sizeType: this.sizeType,
+          camera: this.camera
+        },
+        {
+          maxCount: maxCount - lists.length,
+          ...params
+        }
+      )
+      return chooseFile(chooseParams)
+        .then(res => {
+          const result = chooseParams.multiple ? res : res[0]
+          this.onBeforeRead(result)
+          return result
+        })
+        .catch(error => {
+          this.$emit('error', error)
+        })
+    },
+    // 文件读取之前
+    onBeforeRead(file) {
+      const { beforeRead, useBeforeRead } = this
+      let res = file
+      // beforeRead是否为一个方法
+      if (test.func(beforeRead)) {
+        // 如果用户定义了此方法，则去执行此方法，并传入读取的文件回调
+        res = beforeRead(file, this.getDetail())
+      }
+      if (useBeforeRead) {
+        res = new Promise((resolve, reject) => {
+          this.$emit(
+            'beforeRead',
+            Object.assign(
+              Object.assign(
+                {
+                  file
+                },
+                this.getDetail()
+              ),
+              {
+                callback: ok => {
+                  ok ? resolve() : reject()
+                }
+              }
+            )
+          )
+        })
+      }
+      if (test.promise(res)) {
+        res.then(data => this.onAfterRead(data || file))
+      } else {
+        this.onAfterRead(res || file)
+      }
+    },
+    getDetail(index) {
+      return {
+        name: this.name,
+        index: index == null ? this.fileList.length : index
+      }
+    },
+    async onAfterRead(file) {
+      const { maxSize, afterRead } = this
+      const oversize = Array.isArray(file) ? file.some(item => item.size > maxSize) : file.size > maxSize
+      if (oversize) {
+        uni.showToast({
+          title: t('up.upload.sizeExceed')
+        })
+        this.$emit(
+          'oversize',
+          Object.assign(
+            {
+              file
+            },
+            this.getDetail()
+          )
+        )
+        return
+      }
+      let len = this.fileList.length
+      if (this.autoUpload) {
+        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+        let lists = [].concat(file)
+        let fileListLen = this.fileList.length
+        lists.map(item => {
+          this.fileList.push({
+            ...item,
+            status: 'uploading',
+            message: t('up.upload.uploading'),
+            progress: 0
+          })
+        })
+        let that = this
+        this.$emit('update:fileList', this.fileList)
+        for (let i = 0; i < lists.length; i++) {
+          let j = i
+          let result = ''
+          switch (this.autoUploadDriver) {
+            case 'cos': // 腾讯云
+              break
+            case 'kodo': // 七牛云
+              break
+            case 'oss':
+            case 'upload_oss':
+              // 阿里云前端直传
+              // 获取签名
+              console.log()
+              let formData = {}
+              let ret = await uni.request({
+                url: this.autoUploadAuthUrl,
+                method: 'get',
+                header: this.autoUploadHeader,
+                data: {
+                  filename: lists[j].name
+                }
+              })
+              // console.log(ret);
+              let res0 = ret.data
+              if (res0.code == 200) {
+                // 路径 + 文件名 + 扩展名
+                // 不传递filename就要拼接key
+                // res0.data.params.key = res0.data.params.dir + res0.data.params.uniqidName + fileExt;
+                formData = res0.data.params
+              } else {
+                uni.showToast({
+                  title: res0.msg,
+                  duration: 1500
+                })
+                return
+              }
+              var uploadTask = uni.uploadFile({
+                url: res0.data.params.host,
+                filePath: lists[j].url,
+                name: 'file',
+                // fileType: 'video', // 仅支付宝小程序，且必填。
+                // header: header,
+                formData: formData,
+                success: uploadFileRes => {
+                  let thumb = ''
+                  let afterPromise = ''
+                  if (that.customAfterAutoUpload) {
+                    afterPromise = new Promise((resolve, reject) => {
+                      that.$emit(
+                        'afterAutoUpload',
+                        Object.assign(res0, {
+                          callback: r => {
+                            r.url ? resolve(r) : reject()
+                          }
+                        })
+                      )
+                    })
+                  }
+                  if (test.promise(afterPromise)) {
+                    afterPromise.then(data => that.succcessUpload(len + j, data.url, data.thumb))
+                  } else {
+                    result = res0.data.params.host + '/' + res0.data.params.key
+                    if (that.accept === 'video' || test.video(result)) {
+                      thumb = result + '?x-oss-process=video/snapshot,t_10000,m_fast'
                     }
+                    that.succcessUpload(len + j, result, thumb)
+                  }
                 }
-                if (urls.length < 1) {
-                    return;
-                }
-				uni.previewImage({
-                    urls: urls,
-                    current: current,
-					fail() {
-						toast(t("up.upload.previewImageFail"))
-					},
-				});
-			},
-			onPreviewVideo(previewItem, index) {
-				if (!this.previewFullImage) return;
-                let current = 0;
-                const sources = [];
-                let videoIndex = 0;
-                for (var i = 0; i < this.lists.length; i++) {
-                    const item = this.lists[i];
-                    if (item.isVideo || (item.type && item.type === 'video')) {
-                        sources.push(Object.assign(Object.assign({}, item), {
-                            type: 'video'
-                        }));
-                        if (i === index) {
-                            current = videoIndex;
-                        }
-                        videoIndex += 1;
+              })
+              uploadTask.onProgressUpdate(res => {
+                that.updateUpload(len + j, {
+                  progress: res.progress
+                })
+                // console.log('上传进度' + res.progress);
+                // console.log('已经上传的数据长度' + res.totalBytesSent);
+                // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
+              })
+              break
+            case 'local':
+            default:
+              // 服务器本机上传
+              var uploadTask = uni.uploadFile({
+                url: this.autoUploadApi,
+                filePath: lists[j].url,
+                name: 'file',
+                // fileType: 'video', // 仅支付宝小程序，且必填。
+                header: this.autoUploadHeader,
+                success: uploadFileRes => {
+                  let res0 = uploadFileRes.data
+                  let afterPromise = ''
+                  if (that.customAfterAutoUpload) {
+                    afterPromise = new Promise((resolve, reject) => {
+                      that.$emit(
+                        'afterAutoUpload',
+                        Object.assign(res0, {
+                          callback: r => {
+                            r.url ? resolve(r) : reject()
+                          }
+                        })
+                      )
+                    })
+                  }
+                  if (test.promise(afterPromise)) {
+                    afterPromise.then(data => that.succcessUpload(len + j, data.url))
+                  } else {
+                    if (res0.code != 200) {
+                      uni.showToast({
+                        title: res0.msg
+                      })
+                    } else {
+                      result = res0.data.url
+                      that.succcessUpload(len + j, result)
                     }
+                  }
                 }
-                if (sources.length < 1) {
-                    return;
-                }
-				// #ifndef MP-WEIXIN
-				this.popupShow = true;
-				this.currentItemIndex = index;
-				console.log(this.lists[this.currentItemIndex])
-				// #endif
-				// #ifdef MP-WEIXIN
-				wx.previewMedia({
-					sources: sources,
-					current: current,
-					fail() {
-						toast(t("up.upload.previewVideoFail"))
-					},
-				});
-				// #endif
-			},
-			onClickPreview(item, index) {
-				if (this.previewFullImage) {
-					switch (item.type) {
-						case 'image':
-							this.onPreviewImage(item, index);
-							break;
-						case 'video':
-							this.onPreviewVideo(item, index);
-							break;
-						default:
-							break;
-					}
-				}
-				this.$emit(
-					'clickPreview',
-					Object.assign(Object.assign({}, item), this.getDetail(index))
-				);
-			}
-		}
-	}
+              })
+              uploadTask.onProgressUpdate(res => {
+                that.updateUpload(len + j, {
+                  progress: res.progress
+                })
+                // console.log('上传进度' + res.progress);
+                // console.log('已经上传的数据长度' + res.totalBytesSent);
+                // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
+              })
+              break
+          }
+        }
+      } else {
+        if (typeof afterRead === 'function') {
+          afterRead(file, this.getDetail())
+        }
+        this.$emit(
+          'afterRead',
+          Object.assign(
+            {
+              file
+            },
+            this.getDetail()
+          )
+        )
+      }
+    },
+    updateUpload(index, param) {
+      let item = this.fileList[index]
+      this.fileList.splice(index, 1, {
+        ...item,
+        // 注意这里不判断会出现succcessUpload先执行又被覆盖的问题
+        status: param.progress == 100 ? 'success' : 'uploading',
+        message: '',
+        progress: param.progress
+      })
+      this.$emit('update:fileList', this.fileList)
+    },
+    succcessUpload(index, url, thumb = '') {
+      let item = this.fileList[index]
+      this.fileList.splice(index, 1, {
+        ...item,
+        status: 'success',
+        message: '',
+        url: url,
+        progress: 100,
+        thumb: thumb
+      })
+      this.$emit('update:fileList', this.fileList)
+    },
+    deleteItem(index) {
+      if (this.autoDelete) {
+        this.fileList.splice(index, 1)
+        this.$emit('update:fileList', this.fileList)
+      } else {
+        this.$emit(
+          'delete',
+          Object.assign(Object.assign({}, this.getDetail(index)), {
+            file: this.fileList[index]
+          })
+        )
+      }
+    },
+    // 预览图片
+    onPreviewImage(previewItem, index) {
+      if (!previewItem.isImage || !this.previewFullImage) return
+      let current = 0
+      const urls = []
+      let imageIndex = 0
+      for (var i = 0; i < this.lists.length; i++) {
+        const item = this.lists[i]
+        if (item.isImage || (item.type && item.type === 'image')) {
+          urls.push(item.url || item.thumb)
+          if (i === index) {
+            current = imageIndex
+          }
+          imageIndex += 1
+        }
+      }
+      if (urls.length < 1) {
+        return
+      }
+      uni.previewImage({
+        urls: urls,
+        current: current,
+        fail() {
+          toast(t('up.upload.previewImageFail'))
+        }
+      })
+    },
+    onPreviewVideo(previewItem, index) {
+      if (!this.previewFullImage) return
+      let current = 0
+      const sources = []
+      let videoIndex = 0
+      for (var i = 0; i < this.lists.length; i++) {
+        const item = this.lists[i]
+        if (item.isVideo || (item.type && item.type === 'video')) {
+          sources.push(
+            Object.assign(Object.assign({}, item), {
+              type: 'video'
+            })
+          )
+          if (i === index) {
+            current = videoIndex
+          }
+          videoIndex += 1
+        }
+      }
+      if (sources.length < 1) {
+        return
+      }
+      // #ifndef MP-WEIXIN
+      this.popupShow = true
+      this.currentItemIndex = index
+      console.log(this.lists[this.currentItemIndex])
+      // #endif
+      // #ifdef MP-WEIXIN
+      wx.previewMedia({
+        sources: sources,
+        current: current,
+        fail() {
+          toast(t('up.upload.previewVideoFail'))
+        }
+      })
+      // #endif
+    },
+    onClickPreview(item, index) {
+      if (this.previewFullImage) {
+        switch (item.type) {
+          case 'image':
+            this.onPreviewImage(item, index)
+            break
+          case 'video':
+            this.onPreviewVideo(item, index)
+            break
+          default:
+            break
+        }
+      }
+      this.$emit('clickPreview', Object.assign(Object.assign({}, item), this.getDetail(index)))
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	$u-upload-preview-border-radius: 2px !default;
-	$u-upload-preview-margin: 0 8px 8px 0 !default;
-	$u-upload-image-width:80px !default;
-	$u-upload-image-height:$u-upload-image-width;
-	$u-upload-other-bgColor: rgb(242, 242, 242) !default;
-	$u-upload-other-flex:1 !default;
-	$u-upload-text-font-size:11px !default;
-	$u-upload-text-color:$u-tips-color !default;
-	$u-upload-text-margin-top:2px !default;
-	$u-upload-deletable-right:0 !default;
-	$u-upload-deletable-top:0 !default;
-	$u-upload-deletable-bgColor:rgb(55, 55, 55) !default;
-	$u-upload-deletable-height:14px !default;
-	$u-upload-deletable-width:$u-upload-deletable-height;
-	$u-upload-deletable-boder-bottom-left-radius:100px !default;
-	$u-upload-deletable-zIndex:3 !default;
-	$u-upload-success-bottom:0 !default;
-	$u-upload-success-right:0 !default;
-	$u-upload-success-border-style:solid !default;
-	$u-upload-success-border-top-color:transparent !default;
-	$u-upload-success-border-left-color:transparent !default;
-	$u-upload-success-border-bottom-color: $u-success !default;
-	$u-upload-success-border-right-color:$u-upload-success-border-bottom-color;
-	$u-upload-success-border-width:9px !default;
-	$u-upload-icon-top:0px !default;
-	$u-upload-icon-right:0px !default;
-	$u-upload-icon-h5-top:1px !default;
-	$u-upload-icon-h5-right:0 !default;
-	$u-upload-icon-width:16px !default;
-	$u-upload-icon-height:$u-upload-icon-width;
-	$u-upload-success-icon-bottom:-10px !default;
-	$u-upload-success-icon-right:-10px !default;
-	$u-upload-status-right:0 !default;
-	$u-upload-status-left:0 !default;
-	$u-upload-status-bottom:0 !default;
-	$u-upload-status-top:0 !default;
-	$u-upload-status-bgColor:rgba(0, 0, 0, 0.5) !default;
-	$u-upload-status-icon-Zindex:1 !default;
-	$u-upload-message-font-size:12px !default;
-	$u-upload-message-color:#FFFFFF !default;
-	$u-upload-message-margin-top:5px !default;
-	$u-upload-button-width:80px !default;
-	$u-upload-button-height:$u-upload-button-width;
-	$u-upload-button-bgColor:rgb(244, 245, 247) !default;
-	$u-upload-button-border-radius:2px !default;
-	$u-upload-botton-margin: 0 8px 8px 0 !default;
-	$u-upload-text-font-size:11px !default;
-	$u-upload-text-color:$u-tips-color !default;
-	$u-upload-text-margin-top: 2px !default;
-	$u-upload-hover-bgColor:rgb(230, 231, 233) !default;
-	$u-upload-disabled-opacity:.5 !default;
+$u-upload-preview-border-radius: 2px !default;
+$u-upload-preview-margin: 0 8px 8px 0 !default;
+$u-upload-image-width: 80px !default;
+$u-upload-image-height: $u-upload-image-width;
+$u-upload-other-bgColor: rgb(242, 242, 242) !default;
+$u-upload-other-flex: 1 !default;
+$u-upload-text-font-size: 11px !default;
+$u-upload-text-color: $u-tips-color !default;
+$u-upload-text-margin-top: 2px !default;
+$u-upload-deletable-right: 0 !default;
+$u-upload-deletable-top: 0 !default;
+$u-upload-deletable-bgColor: rgb(55, 55, 55) !default;
+$u-upload-deletable-height: 20px !default;
+$u-upload-deletable-width: $u-upload-deletable-height;
+$u-upload-deletable-boder-bottom-left-radius: 100px !default;
+$u-upload-deletable-zIndex: 3 !default;
+$u-upload-success-bottom: 0 !default;
+$u-upload-success-right: 0 !default;
+$u-upload-success-border-style: solid !default;
+$u-upload-success-border-top-color: transparent !default;
+$u-upload-success-border-left-color: transparent !default;
+$u-upload-success-border-bottom-color: $u-success !default;
+$u-upload-success-border-right-color: $u-upload-success-border-bottom-color;
+$u-upload-success-border-width: 9px !default;
+$u-upload-icon-top: 0px !default;
+$u-upload-icon-right: 0px !default;
+$u-upload-icon-h5-top: 1px !default;
+$u-upload-icon-h5-right: 0 !default;
+$u-upload-icon-width: 16px !default;
+$u-upload-icon-height: $u-upload-icon-width;
+$u-upload-success-icon-bottom: -10px !default;
+$u-upload-success-icon-right: -10px !default;
+$u-upload-status-right: 0 !default;
+$u-upload-status-left: 0 !default;
+$u-upload-status-bottom: 0 !default;
+$u-upload-status-top: 0 !default;
+$u-upload-status-bgColor: rgba(0, 0, 0, 0.5) !default;
+$u-upload-status-icon-Zindex: 1 !default;
+$u-upload-message-font-size: 12px !default;
+$u-upload-message-color: #ffffff !default;
+$u-upload-message-margin-top: 5px !default;
+$u-upload-button-width: 80px !default;
+$u-upload-button-height: $u-upload-button-width;
+$u-upload-button-bgColor: rgb(244, 245, 247) !default;
+$u-upload-button-border-radius: 2px !default;
+$u-upload-botton-margin: 0 8px 8px 0 !default;
+$u-upload-text-font-size: 11px !default;
+$u-upload-text-color: $u-tips-color !default;
+$u-upload-text-margin-top: 2px !default;
+$u-upload-hover-bgColor: rgb(230, 231, 233) !default;
+$u-upload-disabled-opacity: 0.5 !default;
 
-	.u-upload {
-		@include flex(column);
-		flex: 1;
+.u-upload {
+  @include flex(column);
+  flex: 1;
 
-		&__wrap {
-			@include flex;
-			flex-wrap: wrap;
-			flex: 1;
+  &__wrap {
+    @include flex;
+    flex-wrap: wrap;
+    flex: 1;
 
-			&__preview {
-				border-radius: $u-upload-preview-border-radius;
-				margin: $u-upload-preview-margin;
-				position: relative;
-				overflow: hidden;
-				@include flex;
+    &__preview {
+      border-radius: $u-upload-preview-border-radius;
+      margin: $u-upload-preview-margin;
+      position: relative;
+      overflow: hidden;
+      @include flex;
 
-				&__image {
-					width: $u-upload-image-width;
-					height: $u-upload-image-height;
-				}
+      &__image {
+        width: $u-upload-image-width;
+        height: $u-upload-image-height;
+      }
 
-				&__video,
-				&__other {
-					width: $u-upload-image-width;
-					height: $u-upload-image-height;
-					background-color: $u-upload-other-bgColor;
-					flex: $u-upload-other-flex;
-					@include flex(column);
-					justify-content: center;
-					align-items: center;
+      &__video,
+      &__other {
+        width: $u-upload-image-width;
+        height: $u-upload-image-height;
+        background-color: $u-upload-other-bgColor;
+        flex: $u-upload-other-flex;
+        @include flex(column);
+        justify-content: center;
+        align-items: center;
 
-					&__text {
-						font-size: $u-upload-text-font-size;
-						color: $u-upload-text-color;
-						margin-top: $u-upload-text-margin-top;
-					}
-				}
-			}
-		}
-		&__wrap__play {
-			position: absolute;
-			top: 0px;
-			left: 0px;
-			bottom: 0px;
-			right: 0px;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			&__icon {
-				background: #fff;
-				border-radius: 100px;
-				opacity: 0.8;
-			};
-		}
+        &__text {
+          font-size: $u-upload-text-font-size;
+          color: $u-upload-text-color;
+          margin-top: $u-upload-text-margin-top;
+        }
+      }
+    }
+  }
+  &__wrap__play {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &__icon {
+      background: #fff;
+      border-radius: 100px;
+      opacity: 0.8;
+    }
+  }
 
-		&__deletable {
-			position: absolute;
-			top: $u-upload-deletable-top;
-			right: $u-upload-deletable-right;
-			background-color: $u-upload-deletable-bgColor;
-			height: $u-upload-deletable-height;
-			width: $u-upload-deletable-width;
-			@include flex;
-			border-bottom-left-radius: $u-upload-deletable-boder-bottom-left-radius;
-			align-items: center;
-			justify-content: center;
-			z-index: $u-upload-deletable-zIndex;
+  &__deletable {
+    position: absolute;
+    top: $u-upload-deletable-top;
+    right: $u-upload-deletable-right;
+    background-color: $u-upload-deletable-bgColor;
+    height: $u-upload-deletable-height;
+    width: $u-upload-deletable-width;
+    @include flex;
+    border-bottom-left-radius: $u-upload-deletable-boder-bottom-left-radius;
+    align-items: center;
+    justify-content: center;
+    z-index: $u-upload-deletable-zIndex;
 
-			&__icon {
-				position: absolute;
-				transform: scale(0.7);
-				top: $u-upload-icon-top;
-				right: $u-upload-icon-right;
-				/* #ifdef H5 */
-				top: $u-upload-icon-h5-top;
-				right: $u-upload-icon-h5-right;
-				/* #endif */
-			}
-		}
+    &__icon {
+      position: absolute;
+      transform: scale(0.7);
+      top: $u-upload-icon-top;
+      right: $u-upload-icon-right;
+      /* #ifdef H5 */
+      top: $u-upload-icon-h5-top;
+      right: $u-upload-icon-h5-right;
+      /* #endif */
+    }
+  }
 
-		&__success {
-			position: absolute;
-			bottom: $u-upload-success-bottom;
-			right: $u-upload-success-right;
-			@include flex;
-			// 由于weex(nvue)为阿里巴巴的KPI(部门业绩考核)的laji产物，不支持css绘制三角形
-			// 所以在nvue下使用图片，非nvue下使用css实现
-			/* #ifndef APP-NVUE */
-			border-style: $u-upload-success-border-style;
-			border-top-color: $u-upload-success-border-top-color;
-			border-left-color: $u-upload-success-border-left-color;
-			border-bottom-color: $u-upload-success-border-bottom-color;
-			border-right-color: $u-upload-success-border-right-color;
-			border-width: $u-upload-success-border-width;
-			align-items: center;
-			justify-content: center;
-			/* #endif */
+  &__success {
+    position: absolute;
+    bottom: $u-upload-success-bottom;
+    right: $u-upload-success-right;
+    @include flex;
+    // 由于weex(nvue)为阿里巴巴的KPI(部门业绩考核)的laji产物，不支持css绘制三角形
+    // 所以在nvue下使用图片，非nvue下使用css实现
+    /* #ifndef APP-NVUE */
+    border-style: $u-upload-success-border-style;
+    border-top-color: $u-upload-success-border-top-color;
+    border-left-color: $u-upload-success-border-left-color;
+    border-bottom-color: $u-upload-success-border-bottom-color;
+    border-right-color: $u-upload-success-border-right-color;
+    border-width: $u-upload-success-border-width;
+    align-items: center;
+    justify-content: center;
+    /* #endif */
 
-			&__icon {
-				/* #ifndef APP-NVUE */
-				position: absolute;
-				transform: scale(0.7);
-				bottom: $u-upload-success-icon-bottom;
-				right: $u-upload-success-icon-right;
-				/* #endif */
-				/* #ifdef APP-NVUE */
-				width: $u-upload-icon-width;
-				height: $u-upload-icon-height;
-				/* #endif */
-			}
-		}
-		&__progress {
-			background-color: $u-primary !important;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-		}
+    &__icon {
+      /* #ifndef APP-NVUE */
+      position: absolute;
+      transform: scale(0.7);
+      bottom: $u-upload-success-icon-bottom;
+      right: $u-upload-success-icon-right;
+      /* #endif */
+      /* #ifdef APP-NVUE */
+      width: $u-upload-icon-width;
+      height: $u-upload-icon-height;
+      /* #endif */
+    }
+  }
+  &__progress {
+    background-color: $u-primary !important;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 
-		&__status {
-			position: absolute;
-			top: $u-upload-status-top;
-			bottom: $u-upload-status-bottom;
-			left: $u-upload-status-left;
-			right: $u-upload-status-right;
-			background-color: $u-upload-status-bgColor;
-			@include flex(column);
-			align-items: center;
-			justify-content: center;
+  &__status {
+    position: absolute;
+    top: $u-upload-status-top;
+    bottom: $u-upload-status-bottom;
+    left: $u-upload-status-left;
+    right: $u-upload-status-right;
+    background-color: $u-upload-status-bgColor;
+    @include flex(column);
+    align-items: center;
+    justify-content: center;
 
-			&__icon {
-				position: relative;
-				z-index: $u-upload-status-icon-Zindex;
-			}
+    &__icon {
+      position: relative;
+      z-index: $u-upload-status-icon-Zindex;
+    }
 
-			&__message {
-				font-size: $u-upload-message-font-size;
-				color: $u-upload-message-color;
-				margin-top: $u-upload-message-margin-top;
-			}
-		}
+    &__message {
+      font-size: $u-upload-message-font-size;
+      color: $u-upload-message-color;
+      margin-top: $u-upload-message-margin-top;
+    }
+  }
 
-		&__button {
-			@include flex(column);
-			align-items: center;
-			justify-content: center;
-			width: $u-upload-button-width;
-			height: $u-upload-button-height;
-			background-color: $u-upload-button-bgColor;
-			border-radius: $u-upload-button-border-radius;
-			margin: $u-upload-botton-margin;
-			/* #ifndef APP-NVUE */
-			box-sizing: border-box;
-			/* #endif */
+  &__button {
+    @include flex(column);
+    align-items: center;
+    justify-content: center;
+    width: $u-upload-button-width;
+    height: $u-upload-button-height;
+    background-color: $u-upload-button-bgColor;
+    border-radius: $u-upload-button-border-radius;
+    margin: $u-upload-botton-margin;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
 
-			&__text {
-				font-size: $u-upload-text-font-size;
-				color: $u-upload-text-color;
-				margin-top: $u-upload-text-margin-top;
-			}
+    &__text {
+      font-size: $u-upload-text-font-size;
+      color: $u-upload-text-color;
+      margin-top: $u-upload-text-margin-top;
+    }
 
-			&--hover {
-				background-color: $u-upload-hover-bgColor;
-			}
+    &--hover {
+      background-color: $u-upload-hover-bgColor;
+    }
 
-			&--disabled {
-				opacity: $u-upload-disabled-opacity;
-			}
-		}
-	}
+    &--disabled {
+      opacity: $u-upload-disabled-opacity;
+    }
+  }
+}
 </style>