新增展示组件-按钮控件

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-22 14:23:49
+ * @FilePath: /data-table/src/components/DividerField/index.vue
+ * @Description: 按钮组件
+-->
+<template>
+  <div class="button-field-page">
+    <van-row justify="center" gutter="20">
+      <van-col v-for="item in props.item.component_props.config" key="index">
+        <van-button
+          @click="handleButton(item)"
+          :icon="iconType(item)"
+          :color="item.background ? item.background : backgroundColor"
+          >{{ item.text }}
+        </van-button>
+      </van-col>
+    </van-row>
+  </div>
+  <van-overlay :show="show" @click="onClose">
+    <div class="wrapper">
+      <div class="block">
+        <van-image width="100%" fit="cover" :src="qr_url" />
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+import { styleColor } from "@/constant.js";
+
+const props = defineProps({
+  item: Object,
+});
+
+const show = ref(false);
+const backgroundColor = styleColor.baseColor;
+
+const iconType = (item) => {
+  if (item.type === "tel") return "phone-o";
+  if (item.type === "link") return "link-o";
+  if (item.type === "qr") return "qr";
+};
+
+const qr_url = ref("");
+const handleButton = ({ type, content }) => {
+  if (type === "tel") {
+    location.href = "tel://" + content;
+  }
+  if (type === "link") {
+    location.href = content;
+  }
+  if (type === "qr") {
+    show.value = true;
+    qr_url.value = content;
+  }
+};
+
+const onClose = () => {
+  show.value = false;
+};
+
+onMounted(() => {
+  console.warn(props.item.component_props.config);
+});
+</script>
+
+<style lang="less" scoped>
+.button-field-page {
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 10rem;
+  height: 10rem;
+  background-color: #fff;
+}
+</style>

@@ -25,6 +25,7 @@ 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'
+import ButtonField from '@/components/ButtonField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -150,6 +151,10 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = RuleField;
     }
+    if (item.component_props.name === 'button') {
+      item.name = item.key;
+      item.component = ButtonField;
+    }
     if (item.component_props.name === 'multi_rule') {
       item.name = item.key;
       item.value = [];

@@ -108,6 +108,8 @@ const formatData = (data) => {
     const component_props = {
       name: field.component_code,
     };
+    if (field.component_type === "h5edit") {
+      // 编辑组件
       field.property_list.forEach((prop) => {
         const key = prop["property_code"];
         const obj = {
@@ -118,6 +120,16 @@ const formatData = (data) => {
         };
         Object.assign(component_props, obj);
       });
+    } else {
+      // 展示组件
+      field.property_list.forEach((prop) => {
+        const key = prop["property_code"];
+        const obj = {
+          [key]: prop["setting_value"],
+        };
+        Object.assign(component_props, obj);
+      });
+    }
     // 绑定组件名称标识
     const temp = {
       key: field.field_name,