✨ feat: 新增联系我们控件

@@ -93,6 +93,11 @@ body {
   }
 }
 
+#app {
+  min-height: calc(100vh);
+  position: relative;
+}
+
 .@{prefix} {
   color: red;
 }

+<!--
+ * @Date: 2022-11-23 14:41:53
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-23 14:42:16
+ * @FilePath: /data-table/src/components/ContactField/index.vue
+ * @Description: 联系我们控件
+-->
+<template>
+  <div class="contact-field-page">
+    <van-popover v-model:show="showPopover" placement="left">
+      <div class="contact-content">
+        <div class="text-tel">电话联系</div>
+        <div>
+          <a style="color: #1989fa" :href="`tel:${item.component_props.tel}`">{{
+            item.component_props.tel
+          }}</a>
+        </div>
+        <div class="text-qr_code">微信联系</div>
+        <van-image width="100" height="100" :src="item.component_props.qr_code" />
+      </div>
+      <template #reference>
+        <div class="wrapper">
+          <van-icon name="phone-o" size="2rem" color="#1989fa" />
+        </div>
+      </template>
+    </van-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+const props = defineProps({
+  item: Object,
+});
+const showPopover = ref(false);
+</script>
+
+<style lang="less" scoped>
+.contact-field-page {
+  position: fixed;
+  bottom: 10rem;
+  right: 0.5rem;
+  // height: 100%;
+  z-index: 9;
+  .wrapper {
+    background: white;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    text-align: center;
+    box-shadow: 0rem -0.17rem 0.67rem 0.08rem rgba(0, 0, 0, 0.05);
+    /deep/.van-icon {
+      line-height: 1.5;
+    }
+  }
+}
+
+.contact-content {
+  padding: 1rem 0.85rem;
+  text-align: center;
+  .text-tel {
+    color: gray;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+  }
+  .text-qr_code {
+    color: gray;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+  }
+}
+</style>

@@ -21,6 +21,7 @@ import DesField from '@/components/DesField/index.vue'
 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'
 
 /**
  * 生成自定义组件类型
@@ -133,5 +134,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = MarqueeField;
     }
+    if (item.component_props.name === 'contact') {
+      item.name = item.key;
+      item.component = ContactField;
+    }
   })
 }

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-22 14:12:00
+ * @LastEditTime: 2022-11-23 15:05:10
  * @FilePath: /data-table/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider, Popover } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -25,6 +25,6 @@ app.config.warnHandler = () => null;
 
 app.config.globalProperties.$http = axios; // 关键语句
 
-app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider);
+app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider).use(Popover);
 app.use(vueEsign)
 app.mount('#app');

@@ -79,23 +79,20 @@ onMounted(async () => {
   table_cover.value = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
   table_title.value = form_data.name;
   formData.value = formatData(form_data.field_list);
-  // mockData.value = [
-  //   {
-  //     key: "video",
-  //     value: "false",
-  //     component: "",
-  //     component_props: {
-  //       name: "video",
-  //       label: "视频标题",
-  //       src:
-  //         "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095134.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:1fnWx_k8UBYJJ_XjunwCp93N7GI=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTUxMzQubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
-  //       cover:
-  //         "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095136.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PLQaeVUgpZ-rgvD37DE0Yq9W5-o=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTUxMzYucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
-  //     },
-  //   },
-  // ];
+  mockData.value = [
+    {
+      key: "",
+      value: "",
+      component: "",
+      component_props: {
+        name: "contact",
+        tel: "13765765676",
+        qr_code: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
+      },
+    },
+  ];
   // 生成自定义组件
-  // createComponentType(mockData.value);
+  createComponentType(mockData.value);
   createComponentType(formData.value);
 });