在微信小程序预览，实现客服消息，因是个人版，不支持
button | uni-app官网 (dcloud.net.cn)
条件编译处理多端差异 | uni-app官网 (dcloud.net.cn)
uni.makePhoneCall(OBJECT) | uni-app官网 (dcloud.net.cn)
javascript
//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>