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

news2024/9/21 2:46:08

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

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.coloradmin.cn/o/2073085.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

10大国产AI绘画软件,每一款都挺好用 ,你用过吗?

在这个科技与艺术交织的时代,AI绘画软件正以惊人的速度改变着我们的创作方式。今天,就让我们一起探索那些你绝不能错过的10大国产AI绘画神器,它们不仅让创作变得前所未有的简单高效,更让每一位艺术家和爱好者都能享受到创作的无限乐趣! 1️⃣触站A🎨——语音创作,未…

循环结构程序设计-找出指定数量学生的最高分

**7-1-1 #include <stdio.h>int main(){int n,score,max;scanf("%d",&n);max 0;for(int i0;i<n;i){scanf("%d",&score);if(score>max){max score;}}printf("%d",max);return 0; }

一文迅速上手 ESP32 bluedroid 蓝牙从机开发

前言 个人邮箱&#xff1a;zhangyixu02gmail.com该博客主要针对希望迅速上手 ESP32 蓝牙从机开发人员&#xff0c;因此&#xff0c;很多蓝牙技术细节知识并不会进行介绍&#xff0c;仅仅介绍我认为需要了解的 API 函数和回调内容。本文主要是基于gatt_server demo来微调进行进…

# ‘telnet‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

‘telnet’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 一、报错描述&#xff1a; 1、当使用 telnet 命令&#xff0c;连接本地 tomcat 的 8005 端口时报错。 2、报错解释 这个错误表明系统无法识别telnet命令&#xff0c;因为它不是内置命令&#xff0c;也没有…

跳马(华为od机考题)

一、题目 1.原题 马是象棋(包括中国象棋和国际象棋)中的棋子&#xff0c; 走法是每步直一格再斜一格&#xff0c; 即先横着或直着走一格&#xff0c;然后再斜着走一个对角线&#xff0c; 可进可退&#xff0c;可越过河界&#xff0c;俗称“马走‘日’字。 给顶m行n列的棋盘&…

人工智能在专业领域的斗争

介绍 ChatGPT 等大型语言模型 (LLM) 在用自然语言讨论一般话题的能力方面令人印象深刻。然而&#xff0c;他们在医学、金融和法律等专业领域却举步维艰。这是由于缺乏真正的理解&#xff0c;并且注重模仿而不是智力。 大语言模型正处于炒作的顶峰。由于能够用自然语言回答和讨…

“Docker中部署Kibana:步骤与指南“

博主这篇文章是跟Elasticsearch那篇文章是有关系的&#xff0c;建议大家先去看&#xff1a; 轻松上手&#xff1a;Docker部署Elasticsearch&#xff0c;高效构建搜索引擎环境_docker 启动 es-CSDN博客 这篇博文&#xff0c;还有镜像下载不下来的情况&#xff0c;大家可以去看…

攻破:重定向 缓冲区

文章目录 前言&#xff1a;认识读文件read认识重定向&&缓冲区重定向现象及分析&#xff1a;dup2的介绍&#xff1a; 缓冲区的引入&#xff1a;缓冲区的理解&#xff1a; 前言&#xff1a; ​ 从上一章开始&#xff0c;我们进入了文件IO的学习&#xff0c;认识了文件描…

浅谈C# RabbitMQ

一、基本介绍 RabbitMQ——Rabbit Message Queue的简写&#xff0c;但不能仅仅理解其为消息队列&#xff0c;消息代理更合适。 RabbitMQ 是一个由 Erlang 语言开发的AMQP&#xff08;高级消息队列协议&#xff09;的开源实现&#xff0c;其内部结构如下&#xff1a; RabbitMQ作…

今年秋招太吓人了。(20届,在得物做Java开发)

有个学弟来问我诉苦最近好忙好累&#xff0c;说竞争压力特别大&#xff0c;让我给点建议&#xff0c;要不要放弃实习闷头搞秋招&#xff0c;我才意识到时间太快了&#xff0c;想想我都毕业几年了&#xff0c;感慨颇深&#xff0c;整理一下我的求职经验和目前的心得吧&#xff0…

SpingBoot集成kafka-发送读取消息示例

SpingBoot集成kafka开发 kafka的几个常见概念 1、springboot和kafka对应版本&#xff08;重要&#xff09;2、创建springboot项目&#xff0c;引入kafka依赖2.1、生产者EventProducer2.2、消费者EventConsumer2.3、启动生产者的方法SpringBoot01KafkaBaseApplication2.4、appli…

监控电脑屏幕的软件叫什么?6款电脑屏幕监控软件分享!

监控电脑屏幕的软件可以帮助企业和家长监控电脑的使用情况&#xff0c;确保工作和学习的效率与安全。 以下是六款常用的电脑屏幕监控软件及其特点&#xff1a; 1. Keylogger 特点&#xff1a;专注于企业数据安全和员工上网行为管理。 功能&#xff1a;全面的屏幕监控、上网…

Redis持久化(RDB、AOF、混合持久化)

目录 1、持久化机制 &#xff08;1&#xff09;RDB &#xff08;2&#xff09;AOF 2、混合持久化 3、总结 ❓为什么需要持久化&#xff1f; Redis 是一个基于内存的键值存储系统&#xff0c;它提供了非常快的数据访问速度&#xff0c;因为它不需要像传统的磁盘存储那样进…

竞猜足球核心算法源码

需要实现的功能如下&#xff1a; 仅用于学习 竞猜足球核心算法源码 package com.lotterysource.portsadmin.service; import com.aliyun.oss.common.utils.DateUtil; import com.fasterxml.jackson.core.type.TypeReference; import com.lotterysource.portsadmin.dbprovid…

进存销系统

摘 要 伴随着我国全面推动信息化的趋势&#xff0c;我国的很多行业都在朝着互联网的方向进发。商品销售行业也有很多挑战。这次论文介绍的进存销系统就是为了能够解决当前传统商品进存销存在的问题&#xff0c;使得商品进存销能够更加有效率。电商智能化管理必不可少的帮手有进…

功能安全实战系列02-RamTst(RamTest)开发介绍

本文框架 前言1. What(RamTst相关概念)1.1 后台检测1.2 前台检测1.3 RamTst对应状态机2.How?2.1 接口调用2.2 配置开发2.3 测试模式选择前言 在本系列笔者将结合工作中对功能安全实战部分的开发经验进一步介绍常用,包括Memory(Flash,Ram)失效检测,程序运行时序时间检测,及…

数字模拟IC设计前端、后端、前仿、后仿新版虚拟机

虚拟化平台&#xff1a;VMware Workstation 15 Pro以上版本 操作系统&#xff1a;CentOS Linux release 7.9.2009 (Core) 一、射频模拟IC设计必备软件 Cadence IC06.18.350/IC23.10.080&#xff08;virtuoso&#xff09; Cadence SPECTRE23.10.538-isr10 Cadence ASSURA04.…

Python优化算法15——麻雀搜索算法(SSA)

科研里面优化算法都用的多&#xff0c;尤其是各种动物园里面的智能仿生优化算法&#xff0c;但是目前都是MATLAB的代码多&#xff0c;python几乎没有什么包&#xff0c;这次把优化算法系列的代码都从底层手写开始。 需要看以前的优化算法文章可以参考&#xff1a;Python优化算…

Mozilla为本地音频到文本翻译开发Whisperfile引擎

Mozilla Ocho 小组正进行 Mozilla 的"创新和实验"。Llamafile 用于将大型语言模型以单个文件的形式发布&#xff0c;以便在不同的硬件/软件间轻松执行。Whisperfile 是一项将音频轻松转化为文本的新引擎。 正如其名称所暗示的&#xff0c;Whisperfile 是围绕 OpenAI…

嵌入式UI开发-lvgl+wsl2+vscode系列:10、控件(Widgets)(三)

1、scale&#xff08;标尺&#xff09; 示例1 #include "../../lv_examples.h" #if LV_USE_SCALE && LV_BUILD_EXAMPLES/*** 简单的水平标尺*/ void lv_example_scale_1(void) {lv_obj_t * scale lv_scale_create(lv_screen_active());lv_obj_set_size(sca…