新增活动规则控件

+<!--
+ * @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="rule-field-page">
+    <div class="label">
+      {{ item.component_props.label
+      }}<span v-if="item.component_props.required">&nbsp;*</span>
+    </div>
+    <van-field
+      :name="item.key"
+      :rules="item.rules"
+      :border="false"
+      style="padding-bottom: 0"
+    >
+      <template #input>
+        <van-radio-group v-model="item.value">
+          <van-radio name="1">{{ item.component_props.rule_desc }}</van-radio>
+        </van-radio-group>
+      </template>
+    </van-field>
+    <div class="rule-box" @click="show = true">
+      {{ item.component_props.rule_link }}&nbsp;>>
+    </div>
+  </div>
+
+  <van-overlay :show="show" @click="show = false">
+    <div class="rule-wrapper" @click.stop>
+      <div class="rule-block">
+        <div
+          style="height: 70vh; overflow: scroll"
+          v-html="item.component_props.rule_content"
+        ></div>
+        <div class="close-btn">
+          <van-button type="primary" block @click="show = false"
+            >关&nbsp;&nbsp;闭</van-button
+          >
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+
+const show = ref(false);
+</script>
+
+<style lang="less" scoped>
+.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: 2.7rem;
+    padding-bottom: 1rem;
+    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>

@@ -22,6 +22,7 @@ import DividerField from '@/components/DividerField/index.vue'
 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'
 
 /**
  * 生成自定义组件类型
@@ -46,6 +47,7 @@ import ContactField from '@/components/ContactField/index.vue'
  * @type divider 分割线 DividerField
  * @type video 视频控件 VideoField
  * @type marquee 跑马灯控件 MarqueeField
+ * @type rule 活动规则控件 RuleField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -138,5 +140,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = ContactField;
     }
+    if (item.component_props.name === 'rule') {
+      item.name = item.key;
+      item.component = RuleField;
+    }
   })
 }