微信增强设置是否关注公众号操作

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-26 23:52:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-07 10:20:52
+ * @LastEditTime: 2022-12-07 10:40:54
  * @FilePath: /data-table/src/App.vue
  * @Description:
 -->

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-06 16:13:57
+ * @LastEditTime: 2022-12-07 10:57:10
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -59,6 +59,15 @@
   >
     提交即授权该表单收集你的填写信息
   </div>
+  <van-overlay :show="show">
+    <div class="wrapper">
+      <div class="block">
+        <div style="text-align: center; margin-top: 0.5rem;">请先关注公众号</div>
+        <van-image width="100%" fit="cover" :src="qr_url" />
+        <div style="text-align: center; margin-bottom: 0.5rem; font-size: 0.85rem;">长按识别二维码</div>
+      </div>
+    </div>
+  </van-overlay>
 </template>
 
 <script setup>
@@ -238,10 +247,23 @@ onMounted(async () => {
   // 生成自定义组件
   // createComponentType(mockData.value);
   createComponentType(formData.value);
-  //
+  // 过期时间显示
   notice_text.value = `表单报名将在 ${formSetting.value.sjsj_end_time} 后结束`;
+  // 判断是否需要关注公众号, 弹出二维码识别
+  if (formSetting.value.wxzq_must_follow) {
+    // wxzq_mp_qrcode
+    show.value = true;
+    // qr_url.value = "http://gyzs.onwall.cn/gzs-img-6.png";
+    qr_url.value = formSetting.value.wxzq_mp_qrcode;
+  }
 });
 
+const show = ref(false);
+const qr_url = ref("");
+const onClose = () => {
+  show.value = false;
+};
+
 // 操作绑定自定义字段回调
 const onActive = (item) => {
   if (item.key === "area_picker") {
@@ -377,4 +399,17 @@ const onSubmit = async (values) => {
   background-color: #ffffff;
   padding-bottom: 1rem;
 }
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 10rem;
+  // height: 10rem;
+  background-color: #fff;
+}
 </style>