✨ feat(联系我控件): 样式和功能调整

hookehuyr
Commit 66ed221624a0c368dabbdc374cea1834308fd0fb 66ed2216 1 parent 1150c942
Showing 3 changed files with 105 additions and 15 deletions
components.d.ts
src/components/ContactField/index.vue
src/hooks/useComponentType.js
--- a/components.d.ts
View file @66ed221
+++ b/components.d.ts
View file @66ed221
@@ -35,6 +35,7 @@ declare module '@vue/runtime-core' {
     NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
     NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
     NutDivider: typeof import('@nutui/nutui-taro')['Divider']
+    NutFixedNav: typeof import('@nutui/nutui-taro')['FixedNav']
     NutForm: typeof import('@nutui/nutui-taro')['Form']
     NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
@@ -42,6 +43,7 @@ declare module '@vue/runtime-core' {
     NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
     NutOverlay: typeof import('@nutui/nutui-taro')['Overlay']
     NutPicker: typeof import('@nutui/nutui-taro')['Picker']
+    NutPopover: typeof import('@nutui/nutui-taro')['Popover']
     NutPopup: typeof import('@nutui/nutui-taro')['Popup']
     NutRadio: typeof import('@nutui/nutui-taro')['Radio']
     NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
@@ -68,3 +70,7 @@ declare module '@vue/runtime-core' {
     VideoField: typeof import('./src/components/VideoField/index.vue')['default']
   }
 }
+ex.vue')['default']
+    VideoField: typeof import('./src/components/VideoField/index.vue')['default']
+  }
+}
--- a/src/components/ContactField/index.vue
View file @66ed221
+++ b/src/components/ContactField/index.vue
View file @66ed221
 <!--
  * @Date: 2022-11-23 14:41:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-06 19:04:00
+ * @LastEditTime: 2023-04-13 18:19:36
- * @FilePath: /data-table/src/components/ContactField/index.vue
+ * @FilePath: /custom_form/src/components/ContactField/index.vue
  * @Description: 联系我们控件
 -->
 <template>
   <div v-if="HideShow" class="contact-field-page">
-    <van-popover v-model:show="showPopover" placement="left">
+    <!-- <van-popover v-model:show="showPopover" placement="left">
       <div class="contact-content">
         <div class="text-tel">电话联系</div>
         <div>
@@ -28,14 +28,37 @@
           <van-icon name="phone-o" size="2rem" :color="styleColor.baseColor" />
         </div>
       </template>
-    </van-popover>
+    </van-popover> -->
+
+    <div class="wrapper">
+      <Service size="25" :color="styleColor.baseColor" @click="onClick" />
+      <div class="triangle"></div>
+      <div v-if="showPopover" class="contact-content">
+        <div class="text-tel">电话联系</div>
+        <div @click="onTel">
+          <a
+            :style="{ color: styleColor.baseColor }"
+            :href="`tel:${item.component_props.tel}`"
+          >
+            {{ item.component_props.tel }}
+          </a>
+        </div>
+        <div v-if="item.component_props.image_url">
+          <div class="text-qr_code">微信联系</div>
+          <image id="qr_code" :src="item.component_props.image_url" style="width: 80px; height: 80px;" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
-import { ref } from "vue";
+import { ref, computed, onMounted, nextTick } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { styleColor } from "@/constant.js";
+import { Service } from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro'
+import { $ } from '@tarojs/extend'
 const props = defineProps({
   item: Object,
@@ -45,9 +68,53 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
 const showPopover = ref(false);
+
+const onClick = () => {
+  showPopover.value = !showPopover.value;
+
+  // 给每张图片添加查看事件
+  nextTick(() => {
+    var img = $('#qr_code');
+    console.warn(img);
+    $(img).on('longpress', function (e) {
+      Taro.previewImage({
+        // 需要预览的图片链接列表
+        urls: [$(img).attr('src')],
+        // 为当前显示图片的链接/索引值
+        current: $(img).attr('src'),
+        // 图片指示器样式
+        indicator: 'default',
+        // 是否可循环预览
+        loop: false,
+        // 长按图片显示操作菜单，如不填默认为保存相册
+        // longPressActions:{
+        // 	itemList:[this.l('发送给朋友'),this.l]
+        // },
+        success: res => {
+          console.warn('res', res);
+        },
+        fail: err => {
+          console.error('err', err);
+        }
+      })
+    })
+  })
+}
+const onTel = () => {
+  if (process.env.TARO_ENV === 'weapp') {
+    Taro.makePhoneCall({
+      phoneNumber: props.item.component_props.tel,
+      success () {},
+      fail () {}
+    })
+  }
+}
+
+onMounted(async () => {
+})
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .contact-field-page {
   position: fixed;
   bottom: 10rem;
@@ -55,9 +122,10 @@ const showPopover = ref(false);
   // height: 100%;
   z-index: 9;
   .wrapper {
+    position: relative;
     background: white;
-    width: 3rem;
+    width: 100px;
-    height: 3rem;
+    height: 100px;
     border-radius: 50%;
     text-align: center;
     box-shadow: 0rem -0.17rem 0.67rem 0.08rem rgba(0, 0, 0, 0.05);
@@ -68,18 +136,34 @@ const showPopover = ref(false);
 }
 .contact-content {
+  background-color: white;
+  box-shadow: 0 2px 12px rgba(50,50,51,.12);
+  position: absolute;
+  right: 115px;
   padding: 1rem 0.85rem;
+  font-size: 20px;
   text-align: center;
+  border-radius: 10px;
   .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;
   }
 }
+.triangle {
+  width: 0;
+  height: 0;
+  border-left: 20px solid white;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  position: absolute;
+  top: 40%;
+  right: 100%;
+  z-index: 999;
+}
 </style>
--- a/src/hooks/useComponentType.js
View file @66ed221
+++ b/src/hooks/useComponentType.js
View file @66ed221
@@ -21,7 +21,7 @@ import NumberField from '@/components/NumberField/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'
+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'
@@ -151,10 +151,10 @@ export function createComponentType(data) {
     //   item.name = item.key
     //   item.component = MarqueeField
     // }
-    // if (item.component_props.tag === 'contact') {
+    if (item.component_props.tag === 'contact') {
-    //   item.name = item.key
+      item.name = item.key
-    //   item.component = ContactField
+      item.component = ContactField
-    // }
+    }
     // if (item.component_props.tag === 'rule') {
     //   item.name = item.key
     //   item.component = RuleField