<template>
<view class="pages">
<u-navbar title="咨询客服" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
title-size='36' height='50'></u-navbar>
<image class="topimg" src="https://api.ccttiot.com/smartmeter/img/static/u9XgHi1QDOJ9G0vPA1g2" mode="aspectFit"></image>
<!-- 咨询客服 -->
<view class="list">
<view v-for="(item, index) in list" :key="index" class="kflist">
<view class="name">
{{item.name == null ? '--' : item.name}}
</view>
<view class="shangb">
上班时间：{{item.workTimeStart == null ? '--' : item.workTimeStart}}~{{item.workTimeEnd == null ? '--' : item.workTimeEnd}}
</view>
<view class="shangb">
非上班时间无人接听 请勿拨打
</view>
<view class="bd">
<view class="lt" @click="previewImage">
<image :src="item.wx" lazy-load :show-menu-by-longpress="true" @longpress="handleLongPress" mode=""></image>
</view>
<view class="rt">
<view class="">
长按识别二维码
</view>
<view class="">
添加客服微信
</view>
</view>
</view>
<view class="bds">
<view class="lt">
手机号：{{item.mobile == null ? '--' : item.mobile}}
</view>
<view class="rt">
<view class="" @click="btntel(item.mobile)">
立即拨打
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
btnmsk: false,
bgc: {
backgroundColor: "#8883f0",
},
textValue: '',
currentCount: 0,
cutidx: -1,
imglist: [],
token: '',
contact: '',
stause: false,
list:[]
}
},
computed: {
},
onLoad() {
this.getstause()
},
// 分享到好友（会话）
onShareAppMessage: function() {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
methods: {
// 长按识别二维码
handleLongPress(){
setTimeout(() => {
// 取消二维码所在弹窗的显示
// popupKfShow.value = false
},500)
},
// 点击拨打咨询电话
btntel(mobile) {
uni.makePhoneCall({
phoneNumber: mobile,
success: function(res) {
console.log('拨打电话成功', res)
},
fail: function(err) {
}
})
},
btnfzsj(text) {
uni.setClipboardData({
data:text,
success: () => {
uni.showToast({
title: '复制成功',
duration: 2000,
icon: 'success'
});
}
})
},
btnfzwx(text) {
uni.setClipboardData({
data:text,
success: () => {
uni.showToast({
title: '复制成功',
duration: 2000,
icon: 'success'
});
}
})
},
// 请求客服列表
getstause() {
this.$u.get(`/app/customerService/list?pageSize=999&pageNum=1&orderByColumn=sort&isAsc=desc`).then((res) => {
if (res.code == 200) {
this.list = res.rows
}
})
},
hidePlaceholder() {
this.placeholderVisible = false
},
showPlaceholder() {
if (!this.textValue) {
this.placeholderVisible = true
}
},
updateWordCount() {
this.currentCount = this.textValue.trim().replace(/\s+/g, '').length
},
}
}
</script>
<style lang="scss">
/deep/ .u-title {
padding-bottom: 22rpx;
}
/deep/ .u-icon__icon {
padding-bottom: 22rpx;
}
.topimg{
margin-top: 10rpx;
width: 100%;
height: 198rpx;
}
.list{
width: 100%;
height: 71vh;
overflow: scroll;
}
.kflist {
margin-top: 32rpx;
background-color: #fff;
padding: 22rpx;
border-radius: 30rpx;
width: 686rpx;
max-height: 622rpx;
margin: auto;
background: #F2F1FF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 40rpx 50rpx;
box-sizing: border-box;
margin-bottom: 24rpx;
.name{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.shangb{
font-size: 32rpx;
color: #3D3D3D;
margin-top: 10rpx;
}
.bd{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28rpx;
.lt{
width: 272rpx;
height: 272rpx;
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
border-radius: 10rpx;
}
.rt{
text-align: center;
view{
font-size: 32rpx;
color: #3D3D3D;
margin-top: 16rpx;
}
}
}
.bds{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 34rpx;
.lt{
font-size: 32rpx;
color: #3D3D3D;
}
.rt{
view{
width: 166rpx;
height: 54rpx;
background: #8883F0;
border-radius: 6rpx 6rpx 6rpx 6rpx;
text-align: center;
line-height: 54rpx;
font-size: 28rpx;
color: #FFFFFF;
}
}
}
}
.btn {
width: 590rpx;
height: 84rpx;
background: #8883F0;
filter: blur(0px);
color: #fff;
font-size: 36rpx;
line-height: 84rpx;
text-align: center;
border-radius: 50rpx;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 96rpx;
}
page {
background-color: #F7FAFE !important;
}
.pages {
padding: 0 30rpx;
box-sizing: border-box;
}
.leix {
margin-top: 34rpx;
.title {
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
line-height: 50rpx;
}
.lxxz {
display: flex;
view {
border-radius: 15rpx;
border: 2rpx solid #C4C4C4;
padding: 14rpx 34rpx 14rpx 34rpx;
box-sizing: border-box;
margin-right: 28rpx;
margin-top: 40rpx;
position: relative;
overflow: hidden;
text {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
width: 31rpx;
height: 19rpx;
background: #8883F0;
color: #fff;
border-radius: 5rpx;
font-size: 18rpx;
text-align: center;
line-height: 19rpx;
}
}
}
}
.active {
border: 2rpx solid #8883F0 !important;
image {
display: block !important;
}
}
.problem {
margin-top: 40rpx;
.title {
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
line-height: 50rpx;
}
}
.lxfs {
margin-top: 40rpx;
.title {
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
line-height: 50rpx;
}
input {
margin-top: 32rpx;
width: 612rpx;
height: 80rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
border-radius: 20rpx;
padding-left: 20rpx;
}
}
.scpic {
margin-top: 40rpx;
.title {
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
line-height: 50rpx;
}
text {
display: block;
margin-top: 40rpx;
font-size: 28rpx;
color: #95989D;
line-height: 38rpx;
}
.icon {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 40rpx;
.imgbox {
width: 33%;
image {
width: 142rpx;
height: 142rpx;
}
}
}
}
.input-container {
position: relative;
width: 612rpx;
height: 248rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
border-radius: 20rpx;
margin-top: 40rpx;
overflow: hidden;
padding-right: 38rpx;
box-sizing: border-box;
}
.placeholder {
position: absolute;
top: 18rpx;
left: 38rpx;
color: #999;
/* placeholder颜色 */
pointer-events: none;
/* 确保点击事件可以穿透到textarea上 */
}
.custom-textarea {
width: 100%;
height: 100%;
/* 设置一个合适高度 */
padding-top: 18rpx;
/* 为placeholder留出空间 */
padding-left: 38rpx;
box-sizing: border-box;
border: 1px solid #ccc;
padding-bottom: 50rpx;
}
.word-count {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
color: #999;
}
</style>