✨ feat: 新增多选规则确认控件

+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-24 14:33:47
+ * @FilePath: /data-table/src/components/RuleField/index.vue
+ * @Description: 多选规则确认控件
+-->
+<template>
+  <div class="multi-rule-field-page">
+    <div class="label">
+      {{ item.component_props.label
+      }}<span v-if="item.component_props.required">&nbsp;*</span>（最少选{{
+        item.component_props.count
+      }}项）
+    </div>
+    <van-field :name="item.key" :rules="rules" :border="false" style="padding-bottom: 0">
+      <template #input>
+        <van-checkbox-group v-model="item.value">
+          <template v-for="(rule, idx) in item.component_props.rules" :key="idx">
+            <van-checkbox :name="idx" shape="square">{{ rule.rule_desc }}</van-checkbox>
+            <div class="rule-box" @click="showRule(rule)">
+              {{ rule.rule_link }}&nbsp;>>
+            </div>
+          </template>
+        </van-checkbox-group>
+      </template>
+    </van-field>
+  </div>
+
+  <van-overlay :show="show">
+    <div class="rule-wrapper" @click.stop>
+      <div class="rule-block">
+        <div style="height: 70vh; overflow: scroll" v-html="rule_content"></div>
+        <div class="close-btn">
+          <van-button type="primary" block @click="closeRule"
+            >关&nbsp;&nbsp;闭</van-button
+          >
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+
+const show = ref(false);
+const checked = ref([]);
+const showRule = (rule) => {
+  show.value = true;
+  rule_content.value = rule.rule_content;
+};
+const closeRule = () => {
+  show.value = false;
+  rule_content.value = "";
+};
+const rule_content = ref("");
+
+const validator = (val) => {
+  if (!props.item.component_props.required) {
+    // 非必填
+    return true;
+  } else {
+    return props.item.value.length >= props.item.component_props.count ? true : false;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (!val) {
+    return "选择项不能为空";
+  } else if (props.item.value.length < props.item.component_props.count) {
+    return `最少选择${props.item.component_props.count}项`;
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+</script>
+
+<style lang="less" scoped>
+.multi-rule-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+  .rule-box {
+    font-size: 0.85rem;
+    margin-left: 1.8rem;
+    padding-bottom: 0.5rem;
+    color: #1989fa;
+  }
+}
+.rule-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.rule-block {
+  position: relative;
+  width: 80vw;
+  height: 80vh;
+  background-color: #fff;
+  overflow: scroll;
+  padding: 1rem;
+  .close-btn {
+    position: absolute;
+    bottom: 1rem;
+    // transform: translateX(100%);
+    width: calc(100% - 2rem);
+  }
+}
+</style>

@@ -23,6 +23,7 @@ import VideoField from '@/components/VideoField/index.vue'
 import MarqueeField from '@/components/MarqueeField/index.vue'
 import ContactField from '@/components/ContactField/index.vue'
 import RuleField from '@/components/RuleField/index.vue'
+import MultiRuleField from '@/components/MultiRuleField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -48,6 +49,7 @@ import RuleField from '@/components/RuleField/index.vue'
  * @type video 视频控件 VideoField
  * @type marquee 跑马灯控件 MarqueeField
  * @type rule 活动规则控件 RuleField
+ * @type multi_rule 活动规则控件 MultiRuleField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -144,5 +146,10 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = RuleField;
     }
+    if (item.component_props.name === 'multi_rule') {
+      item.name = item.key;
+      item.value = [];
+      item.component = MultiRuleField;
+    }
   })
 }

@@ -13,7 +13,7 @@
       <van-cell-group>
         <component
           :ref="item.component_props.name"
-          v-for="(item, index) in formData"
+          v-for="(item, index) in mockData"
           :key="index"
           :is="item.component"
           :item="item"
@@ -85,9 +85,30 @@ onMounted(async () => {
       value: "",
       component: "",
       component_props: {
-        name: "contact",
-        tel: "13765765676",
-        qr_code: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
+        name: "multi_rule",
+        label: "同意活动规则之后才可提交",
+        required: "1",
+        count: "2",
+        rules: [
+          {
+            rule_desc: "同意规则条款以及后续附录1",
+            rule_link: "活动规则",
+            rule_content:
+              "<div style='text-align:justify;'><h3>1活动规则</h3><p>这是活动规则</p><p>更多活动规则</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p></div>",
+          },
+          {
+            rule_desc: "同意规则条款以及后续附录2",
+            rule_link: "活动规则",
+            rule_content:
+              "<div style='text-align:justify;'><h3>2活动规则</h3><p>这是活动规则</p><p>更多活动规则</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p></div>",
+          },
+          {
+            rule_desc: "同意规则条款以及后续附录2",
+            rule_link: "活动规则",
+            rule_content:
+              "<div style='text-align:justify;'><h3>2活动规则</h3><p>这是活动规则</p><p>更多活动规则</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p></div>",
+          },
+        ],
       },
     },
   ];