✨ feat: 规则功能调整（下拉控件绑定值方式修改），测试分享功能

hookehuyr
Commit 7b07d8899ae50370bfc185f301e833dabec57a98 7b07d889 1 parent 0c2f019a
Showing 3 changed files with 85 additions and 90 deletions
src/components/PickerField/index.vue
src/composables/useShare.js
src/views/index.vue
--- a/src/components/PickerField/index.vue
View file @7b07d88
+++ b/src/components/PickerField/index.vue
View file @7b07d88
 <!--
  * @Date: 2022-08-30 13:46:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-27 14:24:03
+ * @LastEditTime: 2023-03-01 18:17:40
  * @FilePath: /data-table/src/components/PickerField/index.vue
  * @Description: 单列选择器组件
 -->
@@ -12,7 +12,7 @@
       {{ item.component_props.label }}
     </div>
     <van-field
-      v-model="item.value"
+      v-model="picker_value"
       is-link
       readonly
       :name="item.key"
@@ -58,12 +58,14 @@ onMounted(() => {
 const selectedValues = ref("");
 const showPicker = ref(false);
+const picker_value = ref(props.item.component_props.default);
 const onConfirm = ({ selectedOptions }) => {
-  props.item.value = selectedOptions[0]?.value;
+  picker_value.value = selectedOptions[0]?.value;
   showPicker.value = false;
   // 触发点自定义监听事件，配合规则显示隐藏其他字段
-  emit("active", { key: props.item.key, value: selectedOptions[0]?.value, type: "picker" });
+  props.item.value = { key: props.item.key, value: picker_value.value, type: "picker" };
+  emit("active", props.item.value);
   // if (add_info_key.value === props.item.value) {
   //   has_add_info.value = true;
   // }
--- a/src/composables/useShare.js 0 → 100644
View file @7b07d88
+++ b/src/composables/useShare.js 0 → 100644
View file @7b07d88
+/*
+ * @Date: 2022-06-13 17:42:32
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-01 17:07:58
+ * @FilePath: /data-table/src/composables/useShare.js
+ * @Description: 文件描述
+ */
+import wx from 'weixin-js-sdk';
+// import { Toast } from 'vant';
+
+/**
+ * @description: 微信分享功能
+ * @param {*} title 标题
+ * @param {*} desc 描述
+ * @param {*} imgUrl 图标
+ * @return {*}
+ */
+export const sharePage = ({title = '自定义表单', desc = '数据收集', imgUrl = ''}) => {
+  const shareData = {
+    title, // 分享标题
+    desc, // 分享描述
+    link: location.origin + location.pathname + location.hash, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
+    imgUrl, // 分享图标
+    success: function () {
+      // console.warn('设置成功');
+    }
+  }
+  // 分享好友（微信好友或qq好友）
+  wx.updateAppMessageShareData(shareData);
+  // 分享到朋友圈或qq空间
+  wx.updateTimelineShareData(shareData);
+  // 分享到腾讯微博
+  wx.onMenuShareWeibo(shareData);
+  // // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
+  // wx.onMenuShareAppMessage(shareData);
+  // // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
+  // wx.onMenuShareTimeline(shareData);
+  // // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
+  // wx.onMenuShareQQ(shareData);
+}
--- a/src/views/index.vue
View file @7b07d88
+++ b/src/views/index.vue
View file @7b07d88
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-27 18:52:17
+ * @LastEditTime: 2023-03-01 18:19:28
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -98,6 +98,8 @@ import { addFormDataAPI } from "@/api/data.js";
 import { showSuccessToast, showFailToast } from "vant";
 import { wxInfo, getUrlParams } from "@/utils/tools";
 import { styleColor } from "@/constant.js";
+import { sharePage } from '@/composables/useShare.js'
+import wx from 'weixin-js-sdk'
 // 获取表单设置
 const store = mainStore();
@@ -183,6 +185,7 @@ const show = ref(false);
 const qr_url = ref("");
 const pwd_show = ref(false);
 const mmtx_password = ref('');
+const form_name = ref('')
 // 提交表单密码
 const onSubmitPwd = async () => {
@@ -201,6 +204,7 @@ onMounted(async () => {
   const form_data = data;
   // 表单网页标题
   useTitle(form_data.name);
+  form_name.value = form_data.name;
   // 重构数据结构
   let page_header = {};
   let page_commit = {};
@@ -216,7 +220,6 @@ onMounted(async () => {
       page_form.push(element);
     }
   });
-  // TODO: 后期需要适配多种图片展示方式，展示只显示单张图片模式
   /** 页眉属性
    * @param label 表单标题
    * @param banner_type 页眉类型：["文字", "单张图", "轮播图"] text=文字，image=单张图，carousel=轮播图
@@ -241,81 +244,6 @@ onMounted(async () => {
     };
   }
   formData.value = formatData(page_form);
-
-  // TODO: 等待真实数据结构 重构规则数据结构
-  const rule_list = [
-    {
-      "mode": "SHOW",
-      "field_names": [
-        "man_inpu"
-      ],
-      "logical_op": "OR",
-      "expr_list": [
-        {
-          "field_name": "sex",
-          "op": "IN",
-          "values": [
-            "男"
-          ]
-        }
-      ],
-      "text": ""
-    },
-    {
-      "mode": "SHOW",
-      "field_names": [
-        "woman_input"
-      ],
-      "logical_op": "OR",
-      "expr_list": [
-        {
-          "field_name": "sex",
-          "op": "IN",
-          "values": [
-            "女"
-          ]
-        }
-      ],
-      "text": ""
-    },
-    {
-      "mode": "HIDE",
-      "field_names": [
-        "phone",
-        "id_card"
-      ],
-      "logical_op": "AND",
-      "expr_list": [
-        {
-          "field_name": "more",
-          "op": "IN",
-          "values": [
-            "不想填了",
-          ]
-        },
-        {
-          "field_name": "field_9",
-          "op": "IN",
-          "values": [
-            "说明1",
-          ]
-        }
-      ],
-      "text": ""
-    }
-  ];
-  formData.value.forEach(item => {
-    rule_list.forEach(rule => {
-      if (rule.field_names?.includes(item.key)) {
-        item.field_rules = {
-          mode: rule.mode,
-          logical_op: rule.logical_op,
-          expr_list: rule.expr_list,
-        }
-      }
-    })
-  })
-
   mockData.value = [
     {
       key: "111",
@@ -354,7 +282,11 @@ onMounted(async () => {
     localStorage.setItem('weixin_subscribe', 0);
   }
   // 判断是否弹出密码输入框
-  checkUserPassword()
+  checkUserPassword();
+  wx.ready(() => {
+    // 自定义分享内容
+    sharePage({ title: form_name.value, desc: '活动报名' });
+  });
 });
 // 打开轮询用户是否关注
@@ -405,8 +337,24 @@ const checkUserPassword = async () => {
 }
 // 根据规则隐藏相应字段
-const checkRules = (field) => {
+const checkRules = async () => {
+  // 数据收集设置
+  const { data } = await getFormSettingAPI({ form_code: $route.query.code });
+  let rule_list = [];
+  if (data.length) {
+    rule_list = [...data[0]['rules']]
+  }
   formData.value.forEach(item => {
+    // 给受作用的字段绑定判断规则
+    rule_list.forEach(rule => {
+      if (rule.field_names?.includes(item.key)) {
+        item.field_rules = {
+          mode: rule.mode,
+          logical_op: rule.logical_op,
+          expr_list: rule.expr_list,
+        }
+      }
+    });
     // 只检查存在规则的字段
     if (item.field_rules) {
       let condition = '';
@@ -415,11 +363,11 @@ const checkRules = (field) => {
       item.field_rules?.expr_list.forEach(expr => {
         if (typeof postData.value[expr['field_name']] === 'string') { // 表单值为字符串（单选，下拉）
           const k = !!expr['values'].includes(postData.value[expr['field_name']])
-          condition += `${k} ${op}`
+          condition += `${k}${op}`
         }
         if (typeof postData.value[expr['field_name']] === 'object') { // 表单值为数组（多选）
           const k = !!(_.intersection(expr['values'], postData.value[expr['field_name']])).length;
-          condition += `${k} ${op}`
+          condition += `${k}${op}`
         }
       });
       // 把结果转换为布尔值
@@ -459,9 +407,9 @@ const onActive = (item) => {
   if (item.type === "rate") {
     postData.value = _.assign(postData.value, { [item.key]: item.value });
   }
-  // if (item.type === "picker") { // 下拉框控件
+  if (item.type === "picker") { // 下拉框控件
-  //   // console.warn(item);
+    postData.value = _.assign(postData.value, { [item.key]: item.value });
-  // }
+  }
   if (item.type === "radio") { // 单选控件
     postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
   }
@@ -476,9 +424,8 @@ const onActive = (item) => {
     });
     postData.value = _.assign(postData.value, { [item.key]: checkbox_value });
   }
-
   // 检查规则，会影响字段显示
-  checkRules(item);
+  checkRules();
 };
 // 检验没有绑定name的输入项
@@ -601,6 +548,12 @@ const onSubmit = async (values) => {
     // }
   }
 };
+
+// setTimeout(() => {
+//   // TAG：微信分享
+//   // 自定义分享内容
+//   sharePage({ title: form_name.value, desc: '活动报名', imgUrl: '' });
+// }, 500)
 </script>
 <style lang="less">