Hooke / custom_form

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
66ed2216 1 parent 1150c942

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

Inline Side-by-side
Showing 3 changed files with 105 additions and 15 deletions
......@@ -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']
}
}
......
<!--
* @Date: 2022-11-23 14:41:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-01-06 19:04:00
* @FilePath: /data-table/src/components/ContactField/index.vue
* @LastEditTime: 2023-04-13 18:19:36
* @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;
height: 3rem;
width: 100px;
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>
......
......@@ -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') {
// item.name = item.key
// item.component = ContactField
// }
if (item.component_props.tag === 'contact') {
item.name = item.key
item.component = ContactField
}
// if (item.component_props.tag === 'rule') {
// item.name = item.key
// item.component = RuleField
......