当前位置: 首页 > news >正文

uniapp+vue3的ifdef实现多端配置客服消息

在微信小程序预览,实现客服消息,因是个人版,不支持

button | uni-app官网 (dcloud.net.cn)

条件编译处理多端差异 | uni-app官网 (dcloud.net.cn)

uni.makePhoneCall(OBJECT) | uni-app官网 (dcloud.net.cn)

//my.vue
<template>
<view class="list"><view class="section"><view class="row"><view class="left"><uni-icons class="symbel" type="download-filled" size="20" color="#21b589"></uni-icons><text>我的下载</text></view><view class="right"><text>0</text><uni-icons type="right" class="arrow_right" size="15" color="#a9a9a9"></uni-icons></view></view><view class="row"><view class="left"><uni-icons class="symbel" type="star-filled" size="20" color="#21b589"></uni-icons><text>我的评分</text></view><view class="right"><text>0</text><uni-icons type="right" class="arrow_right" size="15" color="#a9a9a9"></uni-icons></view></view><view class="row"><view class="left"><uni-icons class="symbel" type="person-filled" size="20" color="#21b589"></uni-icons><text>联系客服</text><!-- 仅出现在 MP 平台下的代码 --><!-- #ifdef MP --><button open-type="contact" class="contect_with">联系客服</button><!-- #endif --><!-- 仅出现在 H5 平台下的代码 --><!-- #ifdef H5--><button @click="clickContact" class="contect_with">拨打电话</button><!-- #endif --></view><view class="right"><text>0</text><uni-icons class="arrow_right" type="right" size="15" color="#a9a9a9"></uni-icons></view></view></view></view>
</template>
<script setup>
// 拨打电话const clickContact=()=>{uni.makePhoneCall({phoneNumber:'13047585784'})}
</script>
<style lang="scss" scoped>
.list{width: 690rpx;margin: 0 30rpx 30rpx;border: 1rpx solid #eee;box-shadow: 0 0 30rpx rgba(0,0,0,0.05);//阴影border-radius: 10rpx;.section{.row{display: flex;justify-content: space-between;// align-items: center;height: 100rpx;border-bottom: 1px solid #eee;position: relative;&:last-child{border-bottom: 0 ;}.left{display: flex;align-items: center;color: #595959;.symbel{margin: 0 30rpx;}.contect_with{position: absolute;left: 0;top: 0;width: 100%;height: 100rpx;opacity: 0;}}.right{display: flex;align-items: center;color: #a9a9a9;.arrow_right{margin-right: 30rpx;}}}}}
</style>


http://www.mrgr.cn/news/7780.html

相关文章:

  • 21.2 Netty聊天会话管理
  • SOMEIP_ETS_061: Sending_two_SOMEIP_Messages_in_a_row
  • 启用 UFW 防火墙后如何打开 80 和 443 端口?
  • 【Leetcode 1805 】 字符串中不同整数的数目—— 双指针
  • 基于Springboot/Vue的企业内部培训考试系统
  • ML307R_APP_DEMO_SDK TCP/UDP使用介绍
  • Java 调整字符串,验证码生成
  • Redis持久化
  • ViT篇外:NVIDIA Llama-3.1-Minitron 4B
  • 【vue】编辑器段落对应材料同步滚动交互
  • 搭建springboot项目,并解决项目出现红色J问题
  • [LitCTF 2023]1zjs
  • MyBatis配置允许批量插入或更新数据
  • DevExpress中Blazor部分学习
  • 前端实现截图(Vue)
  • ansible:远程自动化运维
  • 【赵渝强老师】执行Oracle的冷备份与冷恢复
  • 【EI会议征稿】第四届能源、动力与电气工程国际学术会议(EPEE 2024)
  • 【Hot100】LeetCode—543. 二叉树的直径
  • linux上datax 安装以及使用