hookehuyr

✨ feat: 新增密码验证进入表单功能

1 /* 1 /*
2 * @Date: 2022-06-17 14:54:29 2 * @Date: 2022-06-17 14:54:29
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-16 15:57:01 4 + * @LastEditTime: 2023-02-07 13:23:19
5 * @FilePath: /data-table/src/api/form.js 5 * @FilePath: /data-table/src/api/form.js
6 * @Description: 表单接口 6 * @Description: 表单接口
7 */ 7 */
...@@ -13,7 +13,8 @@ const Api = { ...@@ -13,7 +13,8 @@ const Api = {
13 ADD_FORM_FIELD: '/srv/?a=add_form_field', 13 ADD_FORM_FIELD: '/srv/?a=add_form_field',
14 ADD_FORM_SETTING: '/srv/?a=add_form_setting', 14 ADD_FORM_SETTING: '/srv/?a=add_form_setting',
15 QUERY_FORM_SETTING: '/srv/?a=query_form_setting', 15 QUERY_FORM_SETTING: '/srv/?a=query_form_setting',
16 -} 16 + VERIFY_PASSWORD: '/srv/?a=verify_password',
17 +};
17 18
18 /** 19 /**
19 * @description: 新增表单 20 * @description: 新增表单
...@@ -58,3 +59,11 @@ export const addFormSettingAPI = (params) => fn(fetch.post(Api.ADD_FORM_SETTING, ...@@ -58,3 +59,11 @@ export const addFormSettingAPI = (params) => fn(fetch.post(Api.ADD_FORM_SETTING,
58 * @returns: end_time 停止时间 59 * @returns: end_time 停止时间
59 */ 60 */
60 export const getFormSettingAPI = (params) => fn(fetch.get(Api.QUERY_FORM_SETTING, params)); 61 export const getFormSettingAPI = (params) => fn(fetch.get(Api.QUERY_FORM_SETTING, params));
62 +
63 +/**
64 + * @description: 验证便当密码
65 + * @param: form_code 表单唯一标识
66 + * @param: mmtx_password 用户输入的密码
67 + * @returns:
68 + */
69 +export const postVerifyPasswordAPI = (params) => fn(fetch.post(Api.VERIFY_PASSWORD, params));
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-02-07 10:25:41 4 + * @LastEditTime: 2023-02-07 13:27:49
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -83,6 +83,19 @@ ...@@ -83,6 +83,19 @@
83 </div> 83 </div>
84 </div> 84 </div>
85 </van-overlay> 85 </van-overlay>
86 + <van-overlay :show="pwd_show">
87 + <div class="pwd-wrapper">
88 + <div class="block">
89 + <div style="text-align: center; margin-top: 0.5rem;">请输入密码填写表单</div>
90 + <van-config-provider :theme-vars="themeVars">
91 + <van-form>
92 + <van-field v-model="mmtx_password" type="password" autocomplete label="密码" style="border: 1px solid #dfdfdf; margin: 1rem 0; border-radius: 5px;" />
93 + <van-button @click="onSubmitPwd" type="primary" round block>验证并填写表单</van-button>
94 + </van-form>
95 + </van-config-provider>
96 + </div>
97 + </div>
98 + </van-overlay>
86 </template> 99 </template>
87 100
88 <script setup> 101 <script setup>
...@@ -99,7 +112,7 @@ import { ...@@ -99,7 +112,7 @@ import {
99 useTitle, 112 useTitle,
100 } from "@/utils/generatePackage.js"; 113 } from "@/utils/generatePackage.js";
101 import { useRoute } from "vue-router"; 114 import { useRoute } from "vue-router";
102 -import { queryFormAPI, getFormSettingAPI } from "@/api/form.js"; 115 +import { queryFormAPI, getFormSettingAPI, postVerifyPasswordAPI } from "@/api/form.js";
103 import { addFormDataAPI } from "@/api/data.js"; 116 import { addFormDataAPI } from "@/api/data.js";
104 import { showSuccessToast, showFailToast } from "vant"; 117 import { showSuccessToast, showFailToast } from "vant";
105 import { wxInfo, getUrlParams } from "@/utils/tools"; 118 import { wxInfo, getUrlParams } from "@/utils/tools";
...@@ -183,6 +196,16 @@ const setRefMap = (el, item) => { ...@@ -183,6 +196,16 @@ const setRefMap = (el, item) => {
183 const notice_text = ref(""); 196 const notice_text = ref("");
184 const show = ref(false); 197 const show = ref(false);
185 const qr_url = ref(""); 198 const qr_url = ref("");
199 +const pwd_show = ref(true);
200 +const mmtx_password = ref('');
201 +
202 +// 提交表单密码
203 +const onSubmitPwd = async () => {
204 + const { code } = await postVerifyPasswordAPI({ form_code: $route.query.code, mmtx_password: mmtx_password.value });
205 + if (code) {
206 + pwd_show.value = false;
207 + }
208 +}
186 209
187 onMounted(async () => { 210 onMounted(async () => {
188 // TAG: 全局背景色 211 // TAG: 全局背景色
...@@ -295,6 +318,10 @@ const checkUserSubscribe = async () => { ...@@ -295,6 +318,10 @@ const checkUserSubscribe = async () => {
295 localStorage.setItem('weixin_subscribe', 1); 318 localStorage.setItem('weixin_subscribe', 1);
296 show.value = false; 319 show.value = false;
297 } 320 }
321 + // 凭密码填写设置
322 + if (form_setting.mmtx_enable) {
323 + pwd_show.value = true;
324 + }
298 } 325 }
299 326
300 // 操作绑定自定义字段回调 327 // 操作绑定自定义字段回调
...@@ -472,4 +499,17 @@ const onSubmit = async (values) => { ...@@ -472,4 +499,17 @@ const onSubmit = async (values) => {
472 // height: 10rem; 499 // height: 10rem;
473 background-color: #fff; 500 background-color: #fff;
474 } 501 }
502 +
503 +.pwd-wrapper {
504 + display: flex;
505 + align-items: center;
506 + justify-content: center;
507 + height: 100%;
508 + .block {
509 + width: 80vw;
510 + background-color: #fff;
511 + padding: 1rem;
512 + border-radius: 5px;
513 + }
514 +}
475 </style> 515 </style>
......