完善生产查询与登录权限配置

2026-09-03 19:56:19 +08:00
parent 793f140a45
commit 02c8fb7021
438 changed files with 1595 additions and 573 deletions
@@ -0,0 +1,2 @@
+## 1.0.0（2024-10-30）
+发布程序
@@ -0,0 +1,227 @@
+<template>
+  <view>
+    <camera v-if="isPermission" device-position="back" style="width: 100%; height: 100vh;position: fixed;" mode="scanCode" 
+	  @scancode="scanProcess" :flash="flash" :initdone="(isInitDone = true)">
+      <view @tap="back" class="backButton" :style="{top: getStatusBarHeight,height: getCapsuleHeight,width: getCapsuleHeight,}">
+        <image src="../../static/back.png"></image>
+      </view>
+      <view class="cameraUI" v-if="isInitDone">
+        <image class="scanBox" :src=" isOnlyBarCode === true ? '../../static/BarCodeScan.png' : '../../static/scan.png'" mode="widthFix">
+          <image class="scanEffect" src="../../static/scan-effect.png" mode="aspectFill"></image>
+        </image>
+        <view class="control">
+          <view :class="['flashLight', { flashOpen: flash === 'on' }]" @tap="swithFlash" hover-class="flashClick">
+            <image :src="flash === 'off' ? '../../static/flash_close.png' : '../../static/flash_open.png'"></image>
+          </view>
+        </view>
+      </view>
+    </camera>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+
+const { isOnlyBarCode, scanResult } = defineProps({
+  isOnlyBarCode: {
+    type: Boolean,
+    default: false,
+  },
+  scanResult: {
+    type: Function,
+    default: (data) => {
+      console.log(data);
+      uni.showToast({
+        icon: "none",
+        title: "扫描结果：" + data,
+      });
+    },
+  },
+});
+
+const SYSTEM_INFO = uni.getSystemInfoSync();
+const getStatusBarHeight = SYSTEM_INFO.statusBarHeight + 5 + "px";
+const getCapsuleHeight = uni.getMenuButtonBoundingClientRect().height + "px";
+
+const isPermission = ref(false);
+const isShowButtonAni = ref(false);
+const isInitDone = ref(false);
+const flash = ref("off");
+
+onShow(() => {
+  handleCameraPermission()
+    .then(() => {
+      isPermission.value = true;
+    })
+    .catch((err) => {
+      uni.showModal({
+        title: "访问失败",
+        content: "由于您" + err.message +"，无法使用本功能，如需使用请重新进入本页面进行授权。",
+        showCancel: false,
+        complete: (res) => {
+          back();
+        },
+      });
+    });
+});
+
+const back = () => {
+  uni.navigateBack();
+};
+
+const swithFlash = () => {
+  flash.value = flash.value === "off" ? "on" : "off";
+  uni.vibrateShort();
+};
+
+const scanProcess = (e) => {
+  if (isOnlyBarCode === true && e.detail.type !== "barcode") {
+    uni.showToast({
+      icon: "error",
+      title: "请扫描条形码",
+    });
+    uni.vibrateShort();
+  } else {
+    scanResult(e.detail.result);
+    uni.vibrateLong();
+  }
+};
+
+const handleCameraPermission = () => {
+  return new Promise((resolve, reject) => {
+    const showCameraPermissionModal = () => {
+      uni.showModal({
+        title: "提示",
+        content: "检测到未授权摄像头权限，将无法使用本功能，是否前往设置权限？",
+        success: (res) => {
+          if (res.confirm) {
+            uni.openSetting();
+          } else {
+            reject(new Error("未授权摄像头权限"));
+          }
+        },
+      });
+    };
+    uni.getSetting({
+      success: (res) => {
+        const hasCameraPermission =
+          res.authSetting.hasOwnProperty("scope.camera");
+        if (hasCameraPermission) {
+          if (!res.authSetting["scope.camera"]) {
+            showCameraPermissionModal();
+          } else {
+            resolve();
+          }
+        } else {
+          uni.authorize({
+            scope: "scope.camera",
+            success: () => {
+              resolve();
+            },
+            fail: () => {
+              showCameraPermissionModal();
+            },
+          });
+        }
+      },
+      fail: (err) => {
+        reject(err);
+      },
+    });
+  });
+};
+</script>
+
+<style lang="less" scoped>
+.cameraUI {
+  width: 750rpx;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .scanBox {
+    width: 636rpx;
+    display: block;
+    position: relative;
+    .scanEffect {
+      position: absolute;
+      left: 50%;
+      top: 5%;
+      width: 595rpx;
+      height: 86rpx;
+      transform: translateX(-50%);
+      z-index: 1;
+      animation: scan 1.5s ease-in-out infinite;
+    }
+  }
+  .BarCodeScanEffect {
+    top: 30%;
+    animation: BarCodeScan 1.5s ease-in-out infinite;
+  }
+  @keyframes scan {
+    0% {
+      top: 5%;
+      opacity: 0;
+    }
+
+    20% {
+      opacity: 1;
+    }
+
+    80% {
+      opacity: 1;
+    }
+
+    100% {
+      top: 70%;
+      opacity: 0;
+    }
+  }
+  .control {
+    margin-top: 80rpx;
+    height: 110rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .flashLight {
+      width: 90rpx;
+      height: 90rpx;
+      background: rgba(74, 74, 74, 0.8);
+      box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      image {
+        width: 60%;
+        height: 60%;
+      }
+    }
+    .flashOpen {
+      backdrop-filter: blur(6px);
+      background: rgba(255, 255, 255, 0.5);
+    }
+    .flashClick {
+      transition: all 0.1s ease-in-out 0s;
+      transform: scale(1.2);
+    }
+  }
+}
+.backButton {
+  position: absolute;
+  left: 30rpx;
+  width: 65rpx;
+  height: 65rpx;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  image {
+    width: 75%;
+    height: 75%;
+  }
+}
+</style>
@@ -0,0 +1,85 @@
+{
+  "id": "Zeekin-ScanCode",
+  "displayName": "小程序扫描扫码解析二维码和条形码，简洁的代码、细节的交互和界面设计，开箱即用",
+  "version": "1.0.0",
+  "description": "基于camera实现，细节满满的界面、动画和交互设计，简洁清晰的组件代码，已配置完善的权限校验交互",
+  "keywords": [
+    "扫码",
+    "条形码",
+    "二维码",
+    "小程序"
+],
+  "repository": "",
+"engines": {
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "摄像头"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "n",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "n",
+          "app-nvue": "n",
+          "app-uvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "n",
+          "Android Browser": "n",
+          "微信浏览器(Android)": "n",
+          "QQ浏览器(Android)": "n"
+        },
+        "H5-pc": {
+          "Chrome": "n",
+          "IE": "n",
+          "Edge": "n",
+          "Firefox": "n",
+          "Safari": "n"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "n",
+          "百度": "n",
+          "字节跳动": "y",
+          "QQ": "n",
+          "钉钉": "n",
+          "快手": "y",
+          "飞书": "y",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,28 @@
+### 程序简介
+> 由于自带的uni.scancode不支持连续扫码和实现定制化的界面，故设计本程序。
+基于camera实现，细节满满的界面、动画和交互设计，简洁清晰的组件代码，已配置完善的权限校验交互。
+
+- 默认支持连续扫码，通过自行改写自定义扫描事件可以实现单次扫码；
+- 支持仅扫描条形码，将更改扫描框样式和扫描结果过滤；
+- 支持扫码震动反馈、提示轻震反馈，支持闪光灯功能；
+- 清晰、简洁、兼容良好的代码和界面，可基于现有逻辑快速二次开发。
+
+### 组件参数说明
+参数名 | 类型 | 必填 | 说明
+------------- | -------------
+isOnlyBarCode  | Boolean  | 否  | 配置是否仅扫码条形码模式，默认为false
+scanResult  | Function  | 否 | 自定义扫码成功事件，默认为弹出结果提示框
+
+### 使用示例（uni_module）
+```html
+<Zeekin-ScanCode :scanResult="handleScanResult" :isOnlyBarCode="true" />
+```
+
+```javascript
+const handleScanResult = (data) => {
+  uni.showToast({
+	icon: 'none',
+	title: '自定义处理扫描结果：' + data
+  });
+};
+```