312 lines
6.5 KiB
Vue
312 lines
6.5 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 v-for="(item,index) in fllist" key="index" :class="active == index ? 'active' : ''" @click="btntab(index)">
|
||
{{item.classifyName}}
|
||
<text v-if="active == index"></text>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="list_val" v-for="(item,index) in wzlist" :key="index" @click="btnitem(item.articleId)">
|
||
<text>{{item.title}}</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">{{tel}}</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:0,
|
||
flag:false,
|
||
fllist:[],
|
||
classifyId:'',
|
||
wzlist:[],
|
||
tel:''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getfenlist()
|
||
},
|
||
methods:{
|
||
// 点击切换高亮
|
||
btntab(index){
|
||
this.active = index
|
||
this.classifyId = this.fllist[index].classifyId
|
||
this.getwzlist()
|
||
},
|
||
// 点击拨打电话
|
||
btndh(){
|
||
this.flag = true
|
||
this.$u.get("/app/getServerPhone").then(res => {
|
||
if(res.code == 200){
|
||
this.tel = res.data
|
||
}
|
||
})
|
||
},
|
||
// 点击隐藏拨打电话
|
||
btnyc(){
|
||
this.flag = false
|
||
},
|
||
// 点击拨打
|
||
call() {
|
||
let phoneNumber = this.tel
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber,
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res)
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err)
|
||
uni.showToast({
|
||
title: '拨打电话失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击详情
|
||
btnitem(articleId){
|
||
uni.navigateTo({
|
||
url:'/page_user/bangzhuxq?classifyId=' + articleId
|
||
})
|
||
},
|
||
|
||
//获取分类列表
|
||
getfenlist(){
|
||
this.$u.get("app/classify/list").then(res => {
|
||
if(res.code == 200){
|
||
this.fllist = res.data
|
||
this.classifyId = res.data[0].classifyId
|
||
this.getwzlist()
|
||
}
|
||
})
|
||
},
|
||
// 获取分类文章列表
|
||
getwzlist(){
|
||
let data = {
|
||
classifyId:this.classifyId
|
||
}
|
||
this.$u.get(`/app/article/list?pageNum=1&pageSize=999&classifyId=${this.classifyId}`).then(res => {
|
||
if(res.code == 200){
|
||
this.wzlist = res.rows
|
||
}
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</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;
|
||
max-height: 800rpx;
|
||
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: 100%;
|
||
// overflow: scroll;
|
||
.list_val{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
margin-bottom: 34rpx;
|
||
|
||
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> |