Sprinkler-app/page_user/kefu.vue

<template>
	<view>
		<u-navbar :is-back="true" title='帮助与客服' title-color="#000" :border-bottom="false" :background="true" 
			id="navbar">
		</u-navbar>
		<image class="bjimg" src="https://api.ccttiot.com/smartmeter/img/static/uXBpJuaUs0XUNb8HTahh" mode=""></image>
	    <view class="top">
	    	<view class="lt">
	    		<view class="one">Hi~有什么可以帮您！</view>
				<view class="two">工作时间:</view>
				<view class="two">工作日8:30-11:30 13:30-18:00</view>
	    	</view>
			<view class="rt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ug9Y5mLQSE1qkp5Pp1A8" mode=""></image>
			</view>
	    </view>
		
		<view class="cai">
			<view class="nav">
				<view :class="active == 1 ? 'active' : ''" @click="btntab(1)">
					猜你想问
					<text v-if="active == 1"></text>
				</view>
				<view :class="active == 2 ? 'active' : ''" @click="btntab(2)">
					费用问题
					<text v-if="active == 2"></text>
				</view>
				<view :class="active == 3 ? 'active' : ''" @click="btntab(3)">
					使用问题
					<text v-if="active == 3"></text>
				</view>
			</view>
			<view class="list">
				<view class="list_val" v-for="(item,index) in 4" :key="index" @click="btnitem">
					<text>怎么使用蓝牙版浇花器？</text> <image src="https://api.ccttiot.com/smartmeter/img/static/uFmOt7OXDSVaAOMeQ8eK" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="btn" @click="btndh">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uNMbLZ4Ig7lkFLmhcU1P" mode=""></image> 在线客服
		</view>
		
		<!-- 拨打电话 -->
		<view class="kfimg" v-if="flag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uc8dAVNneEshmNJjPW3w" mode=""></image>
			<view class="boda">
				<view class="tel">000-260-1559</view>
				<view class="btntel" @click="call">
					立即拨打
				</view>
			</view>
			<image class="yic" @click="btnyc" src="https://api.ccttiot.com/smartmeter/img/static/uPhDN73dFXTe31yvnHhP" mode=""></image>
		</view>
		<view class="mask" v-if="flag"></view>
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					bgc: {
						backgroundColor: "#fff",
					},
					active:1,
					flag:false
				}
			},
			// 分享到好友（会话）
			onShareAppMessage: function() {
				return {
					title: '绿小能',
					path: '/pages/index/index'
				}
			},
			
			// 分享到朋友圈  
			onShareTimeline: function() {
				return {
					title: '绿小能',
					query: '',
					path: '/pages/index/index'
				}
			},
			onLoad() {
				
			},
			methods:{
				// 点击切换高亮
                btntab(num){
					this.active = num
				},
				// 点击拨打电话
				btndh(){
					this.flag = true
				},
				// 点击隐藏拨打电话
				btnyc(){
					this.flag = false
				},
				// 点击拨打
				call() {
					let phoneNumber = '15523256562'
					uni.makePhoneCall({
						phoneNumber: phoneNumber,
						success: function(res) {
							console.log('拨打电话成功', res)
						},
						fail: function(err) {
							console.error('拨打电话失败', err)
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							})
						}
					})
				},
				// 点击详情
				btnitem(){
					uni.navigateTo({
						url:'/page_user/kefuxq'
					})
				}
			}
		}
</script>

<style lang="less">
	/deep/ .u-title{
		margin-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		margin-bottom: 22rpx;
	}
	.kfimg{
		width: 590rpx;
		height: 706rpx;
		position: fixed;
		top: 380rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
		.yic{
			position: fixed;
			top: 750rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			width: 60rpx !important;
			height: 60rpx !important; 
		}
		.boda{
			text-align: center;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom:72rpx;
			.tel{
				font-size: 36rpx;
				color: #3D3D3D;
				font-weight: 600;
				margin-bottom: 62rpx;
			}
			.btntel{
				margin: auto;
				width: 436rpx;
				height: 68rpx;
				background: #48893B;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border-radius: 50rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 600;
				text-align: center;
				line-height: 68rpx;
			}
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .5;
		position: fixed;
		top: 0;
		left: 0;
	}
	.btn{
		width: 644rpx;
		height: 88rpx;
		background: #48893B;
		border-radius: 55rpx 55rpx 55rpx 55rpx;
		border-radius: 50rpx;
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: 600;
	    display: flex;
		align-items: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 92rpx;
		justify-content: center;
		image{
			width: 42rpx;
			height: 42rpx;
			margin-right: 24rpx;
		}
 	}
	.active{
		font-size: 28rpx !important;
		color: #3D3D3D !important;
	}
	.cai{
		margin: auto;
		margin-top: 34rpx;
		width: 644rpx;
		height: 526rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 20rpx;
		padding: 36rpx 32rpx;
		box-sizing: border-box;
		.list{
			height: 360rpx;
			overflow: scroll;
			.list_val{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #3D3D3D;
				margin-bottom: 64rpx;
				
				image{
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
		.nav{
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			font-size: 28rpx;
			color: #666666;
			font-weight: 600;
			view{
				text-align: center;
				position: relative;
				text{
					position: absolute;
					top:22rpx;
					left: 8rpx;
					width: 92rpx;
					height: 26rpx;
					background: rgba(72,137,59,0.5);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border-radius: 20rpx;
					display: inline-block;
				}
			}
		}
	}
	.top{
		width: 644rpx;
		margin: auto;
		margin-top: 42rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.lt{
			.one{
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				margin-bottom: 28rpx;
			}
			.two{
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}
		.rt{
			image{
				width: 168rpx;
				height: 154rpx;
			}
		}
	}
	.bjimg{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

</style>