2023-08-14 DXS

1、公共扫码方法编写

.env.production

 # NODE_ENV='production'
 # VUE_APP_MODE='production'
-# VUE_APP_API_URL='/school' //上线nginx所在地址（处理跨域问题）
\ No newline at end of file
+# VUE_APP_API_URL='/wx_api' //上线nginx所在地址（处理跨域问题）

package.json

@@ -17,12 +17,13 @@
     "path": "^0.12.7",
     "useless-files-webpack-plugin": "^1.0.1",
     "vant": "^3.0.16",
-    "vue": "^3.0.0",
+    "vue": "^3.2.26",
     "vue-baidu-calendar": "^1.0.8",
     "vue-router": "^4.0.0-0",
     "vue-touch": "^2.0.0-beta.4",
     "vue3-hash-calendar": "^1.0.11",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "weixin-js-sdk": "^1.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/service/schoolProperty.js

@@ -4,6 +4,12 @@
 
 import axios from "../utils/axios";
 
+/********** 获取wx.config 所需参数 ***********/
+export function getWxConfig(url) {
+    return axios.get(`wx/getsignature/?url=${url}`);
+}
+
+
 /********** 物品借用 ***********/
 
 //个人借用记录列表

src/store/index.js

@@ -2,6 +2,7 @@ import { createStore } from "vuex";
 
 export default createStore({
   state: {
+    appid : "wx765a55464b308d13", // 公众号的AppID 2023-08-14
     imgUrl: "http://43.143.63.140",
     studentId: "", //学生Id
     studentName: "", //学生姓名

src/utils/scanCode.js

+import { getWxConfig } from "../service/schoolProperty";
+import wx from "weixin-js-sdk"; //调用微信相关
+
+/***
+ * Date:2023-08-14
+ * Describe:用于调取微信扫码
+ * */
+export function scanCodeFun(appId){
+    let url = location.href.split('#')[0] //获取当前域名
+    let encode = ''
+    getWxConfig(url).then(res=>{
+        if(res.code == 200){
+            const data = res.data
+            wx.config({
+                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+                debug: false,
+                // debug: true,
+                // 必填，公众号的唯一标识
+                appId,
+                // 必填，生成签名的时间戳
+                timestamp: data.timestamp,
+                // 必填，生成签名的随机串
+                nonceStr: data.noncestr,
+                // 必填，签名，见附录1
+                signature: data.signature,
+                // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
+                jsApiList: ['scanQRCode']
+            });
+            wx.scanQRCode({
+                needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
+                scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
+                success: function (res) {
+                    encode = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
+                }
+            })
+        }
+    })
+    return encode
+}

src/views/teacher/schoolProperty/borrowDetail.vue

@@ -5,15 +5,15 @@
       <van-field v-model="borrowForm.code" label="自编码" placeholder="请输入自编码"/>
       <van-field v-model="borrowForm.code" label="设备名称" placeholder="请输入设备名称"/>
       <van-field v-model="borrowForm.code" label="型号" placeholder="请输入型号"/>
-      <van-field is-link readonly v-model="dateChoose" label="借用日期" @click="showPicker = true"
+      <van-field is-link readonly v-model="borrowForm.dateChoose" label="借用日期" @click="showPicker = true"
                  placeholder="请选择借用日期"/>
       <van-calendar v-model:show="showPicker" @confirm="onConfirm" />
       <van-field v-model="borrowForm.code" label="借用人" placeholder="请输入借用人"/>
       <van-field v-model="borrowForm.code" label="用途" placeholder="请输入用途"/>
       <van-field v-model="borrowForm.code" label="借用期限(天)" placeholder="请输入借用期限"/>
-      <van-field is-link readonly v-model="dateChoose" label="归还时间" @click="showPicker = true"
-                 placeholder="请选择归还时间"/>
-      <van-calendar v-model:show="showPicker" @confirm="onConfirm" />
+<!--      <van-field is-link readonly v-model="dateChoose" label="归还时间" @click="showPicker = true"-->
+<!--                 placeholder="请选择归还时间"/>-->
+<!--      <van-calendar v-model:show="showPicker" @confirm="onConfirm" />-->
       <van-field v-model="borrowForm.code" label="归还时设备情况" placeholder="请输入归还时设备情况"/>
     </van-cell-group>
     <div>
@@ -39,6 +39,8 @@
   let showPicker = ref(false) //是否显示日历选择
   const onConfirm = (date) => {
     dateChoose.value  = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+    borrowForm.dateChoose  = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+    // console.log("borrowForm.dateChoose",borrowForm.dateChoose)
     showPicker.value = false;
   };
 

src/views/teacher/schoolProperty/borrowList.vue

@@ -2,7 +2,7 @@
   <van-nav-bar title="物品借用" left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
   <div class="flexBLock searchBlock">
     <van-search class="searchInput" v-model="searchKey" placeholder="请输入搜索关键词" />
-    <van-icon name="scan" />
+    <van-icon name="scan" @click="getCode" />
   </div>
   <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
     <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
@@ -32,10 +32,11 @@
 import { getBorrowList } from "@/service/schoolProperty"
 import { useRouter } from "vue-router";
 import { ref } from "vue";
-import {useStore} from "vuex";
+import { useStore } from "vuex";
+import { scanCodeFun } from "../../../utils/scanCode"
+
 const router = useRouter();
 const store = useStore();
-console.log('store',store.state.userInfo.userId)
 const id = store.state.userInfo.userId ;
 let searchKey = ref('')
 const loading = ref(false)
@@ -44,6 +45,11 @@ const list = ref([1,2,3,4,5]);
 const pullLoading = ref(false);
 const finished = ref(false);
 
+//扫码获取
+const getCode = () => {
+  let enCode = scanCodeFun(store.state.appid) //获取到的设备自编码
+}
+
 //获取列表数据
 const getList = () => {