302 lines
6.2 KiB
Vue
302 lines
6.2 KiB
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> |