hookehuyr

✨ feat: 单行输入控件新增扫描功能

1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-03-03 15:10:05 4 + * @LastEditTime: 2023-03-03 21:15:22
5 * @FilePath: /data-table/src/components/TextField/index.vue 5 * @FilePath: /data-table/src/components/TextField/index.vue
6 - * @Description: 单行文本输入框 6 + * @Description: 单行文本输入框(微信扫描功能)
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="text-field-page"> 9 <div v-if="HideShow" class="text-field-page">
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
11 <span v-if="item.component_props.required">&nbsp;*</span> 11 <span v-if="item.component_props.required">&nbsp;*</span>
12 {{ item.component_props.label }} 12 {{ item.component_props.label }}
13 </div> 13 </div>
14 - <div v-if="item.component_props.note" v-html="item.component_props.note" 14 + <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" />
15 - style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;" />
16 <van-field v-model="item.value" :name="item.name" :type="item.type" 15 <van-field v-model="item.value" :name="item.name" :type="item.type"
17 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'" :rules="item.rules" 16 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'" :rules="item.rules"
18 - :required="item.required" :readonly="item.component_props.readonly" :disabled="item.component_props.disabled" 17 + :required="item.required"
19 - :input-align="item.component_props.align" :right-icon="test === 'camera' ? 'scan' : ''" 18 + :readonly="item.component_props.readonly || item.component_props.is_edit_camera_scan_result"
20 - @click-right-icon="clickRightIcon" /> 19 + :disabled="item.component_props.disabled" :input-align="item.component_props.align"
20 + :right-icon="item.component_props.is_camera_scan ? 'scan' : ''" @click-right-icon="clickRightIcon" />
21 </div> 21 </div>
22 </template> 22 </template>
23 23
...@@ -26,9 +26,6 @@ import { useRoute } from "vue-router"; ...@@ -26,9 +26,6 @@ import { useRoute } from "vue-router";
26 import { showSuccessToast, showFailToast } from 'vant'; 26 import { showSuccessToast, showFailToast } from 'vant';
27 // 初始化WX环境 27 // 初始化WX环境
28 import wx from 'weixin-js-sdk' 28 import wx from 'weixin-js-sdk'
29 -import { wxJsAPI } from '@/api/wx/config'
30 -import { apiList } from '@/api/wx/jsApiList.js'
31 -import { wxInfo, getUrlParams, stringifyQuery } from "@/utils/tools";
32 29
33 const props = defineProps({ 30 const props = defineProps({
34 item: Object, 31 item: Object,
...@@ -39,16 +36,16 @@ const HideShow = computed(() => { ...@@ -39,16 +36,16 @@ const HideShow = computed(() => {
39 }) 36 })
40 37
41 const $route = useRoute(); 38 const $route = useRoute();
42 -// TODO: 等待真实数据进行判断,默认条形码识别 39 +// 默认识别类型
43 -const test = $route.query.test; 40 +const scan_type_code = ref('ALL_CODE');
44 -const scan_type_code = ref(2); 41 +// 微信二维码扫描功能判断
45 const scanType = (scan_type_code) => { 42 const scanType = (scan_type_code) => {
46 switch (scan_type_code) { 43 switch (scan_type_code) {
47 - case 0: 44 + case 'ALL_CODE':
48 return ["qrCode", "barCode"] 45 return ["qrCode", "barCode"]
49 - case 1: 46 + case 'QR_CODE':
50 return ["qrCode"] 47 return ["qrCode"]
51 - case 2: 48 + case 'BAR_CODE':
52 return ["barCode"] 49 return ["barCode"]
53 } 50 }
54 } 51 }
...@@ -56,12 +53,12 @@ const scanType = (scan_type_code) => { ...@@ -56,12 +53,12 @@ const scanType = (scan_type_code) => {
56 // 预览模式 53 // 预览模式
57 const model = $route.query.model; 54 const model = $route.query.model;
58 const clickRightIcon = async () => { 55 const clickRightIcon = async () => {
59 - // 预览模式屏蔽微信授权 56 + // 预览模式屏蔽微信功能
60 if (model === 'preview') return false; 57 if (model === 'preview') return false;
61 wx.ready(() => { 58 wx.ready(() => {
62 wx.scanQRCode({ 59 wx.scanQRCode({
63 needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, 60 needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
64 - scanType: scanType(scan_type_code.value), // 可以指定扫二维码还是一维码,默认二者都有 61 + scanType: scanType(item.props.camera_scan_type), // 可以指定扫二维码还是一维码,默认二者都有
65 success: function (res) { 62 success: function (res) {
66 if (res.errMsg === 'scanQRCode:ok') { 63 if (res.errMsg === 'scanQRCode:ok') {
67 let code = res.resultStr; 64 let code = res.resultStr;
...@@ -94,6 +91,15 @@ const clickRightIcon = async () => { ...@@ -94,6 +91,15 @@ const clickRightIcon = async () => {
94 span { 91 span {
95 color: red; 92 color: red;
96 } 93 }
94 +
95 + .note-wrapper {
96 + font-size: 0.9rem;
97 + margin-left: 1rem;
98 + color: gray;
99 + padding-bottom: 0.5rem;
100 + padding-top: 0.25rem;
101 + white-space: pre-wrap;
102 + }
97 } 103 }
98 } 104 }
99 105
......