hjt_erdao_WeChatApplet/pages/soldier/home/folder6/index.vue

<template>
	<view class="main main-bg">
		<view class="left">
			<image src="../../../../static/ing7.png"></image>
		</view>
		<view class="right">
			<view>您好,您可以联系我们的在线客服进行咨询,<button class="btn" type="primary" open-type="contact">[点击这里]</button>输入你想要咨询的内容,我们将马上为您服务!</view>
			<view>或者您可以<span class="text" @click="makePhone()">[点击这里]</span>直接为您拨打客服电话!</view>
		</view>
	</view>
</template>

<script>
import server from "@/api/index";
export default {
	data() {
		return {
			
		}
	},
	methods:{
		makePhone(){
			server.getTelInfo().then(res =>{
				if(res){
					uni.makePhoneCall({
						phoneNumber:res,
						success: (res) => {
							console.log(res)
						},
						fail: (err) => {
							console.error(err)
						}
					})
				}else{
					this.$refs.uToast.show({
						title: '暂无热线电话!',
						type: 'default',
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		min-height: 100vh;
		padding: 30rpx;
		display: flex;
		
		.left{
			width: 130rpx;
			padding-top: 75rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		.right{
			width: calc(100% - 130rpx);
			height: 250rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
		}
		.btn{
			display: inline;
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #fff;
			color: #12C194;
			font-size: 26rpx;
		}
		.text{
			color: #12C194;
		}
	}
</style>