You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
198 lines
4.7 KiB
198 lines
4.7 KiB
<template>
|
|
<view class="page__view">
|
|
|
|
<navbar title="咨询客服" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" />
|
|
|
|
<image class="bg" :src="configList.customer_service_bg" mode="widthFix"></image>
|
|
<!-- <view class="flex bg">
|
|
<view class="flex bg-content">
|
|
<view class="text">
|
|
<view class="title">Hi～,有什么可以帮您！</view>
|
|
<view class="desc">
|
|
<view class="line">工作时间：</view>
|
|
<view class="line">8:00-12:00 13:00-17:30</view>
|
|
</view>
|
|
</view>
|
|
<image class="icon" src="@/pages_order/static/service/icon-service.png" mode="widthFix"></image>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="main">
|
|
<view class="content">
|
|
<view class="flex card concat">
|
|
<button plain class="flex flex-column btn" open-type="contact">
|
|
<image class="icon" src="@/pages_order/static/service/icon-message.png" mode="widthFix"></image>
|
|
<view>联系客服</view>
|
|
</button>
|
|
<button plain class="flex flex-column btn" @click="openQrPopup">
|
|
<image class="icon" src="@/pages_order/static/service/icon-wx.png" mode="widthFix"></image>
|
|
<view>添加微信</view>
|
|
</button>
|
|
<button plain class="flex flex-column btn" @click="openPhonePopup">
|
|
<image class="icon" src="@/pages_order/static/service/icon-phone.png" mode="widthFix"></image>
|
|
<view>电话咨询</view>
|
|
</button>
|
|
</view>
|
|
<view class="card question">
|
|
<view class="card-header">常见问题</view>
|
|
<view class="flex row" v-for="item in list" :key="item.id" @click="jumpToQuestion(item.id)">
|
|
<view>{{ item.question }}</view>
|
|
<uv-icon name="arrow-right" color="#999999" size="33rpx"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<popupQrCode ref="popupQrCode"></popupQrCode>
|
|
|
|
<popupPhone ref="popupPhone"></popupPhone>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from '@/mixins/list.js'
|
|
|
|
import popupQrCode from './popupQrCode.vue'
|
|
import popupPhone from './popupPhone.vue'
|
|
|
|
export default {
|
|
mixins: [mixinsList],
|
|
components: {
|
|
popupQrCode,
|
|
popupPhone,
|
|
},
|
|
data() {
|
|
return {
|
|
list: [],
|
|
mixinsListApi: 'queryFaqList',
|
|
}
|
|
},
|
|
methods: {
|
|
openQrPopup() {
|
|
this.$refs.popupQrCode.open()
|
|
},
|
|
openPhonePopup() {
|
|
this.$refs.popupPhone.open()
|
|
},
|
|
jumpToQuestion(id) {
|
|
let data = this.list.find(item => item.id === id)
|
|
this.$store.commit('setCommonQuestion', data)
|
|
uni.navigateTo({
|
|
url: `/pages_order/service/commonQuestion?id=${id}`
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page__view {
|
|
background: #F5F5F5;
|
|
|
|
/deep/ .nav-bar__view {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 501rpx;
|
|
// width: 100%;
|
|
// height: 501rpx;
|
|
// background: linear-gradient(160deg, #014FA2 36%, #4C8FD6);
|
|
// padding: 0 104rpx 90rpx 65rpx;
|
|
// box-sizing: border-box;
|
|
// align-items: flex-end;
|
|
|
|
// &-content {
|
|
// width: 100%;
|
|
// justify-content: space-between;
|
|
// }
|
|
|
|
// .text {
|
|
// padding: 26rpx 0 34rpx 0;
|
|
// color: #FFFFFF;
|
|
|
|
// .title {
|
|
// font-size: 36rpx;
|
|
// font-weight: 600;
|
|
// }
|
|
|
|
// .desc {
|
|
// margin-top: 13rpx;
|
|
// font-size: 22rpx;
|
|
|
|
// .line + .line {
|
|
// margin-top: 11rpx;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .icon {
|
|
// width: 168rpx;
|
|
// height: auto;
|
|
// }
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
padding: 0 28rpx 28rpx 28rpx;
|
|
box-sizing: border-box;
|
|
background: #F5F5F5;
|
|
|
|
.content {
|
|
transform: translateY(-64rpx);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.card.concat {
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 55rpx 64rpx 26rpx 64rpx;
|
|
box-sizing: border-box;
|
|
|
|
.btn {
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
border: none;
|
|
|
|
.icon {
|
|
width: 66rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card.question {
|
|
margin-top: 25rpx;
|
|
padding: 34rpx 19rpx;
|
|
box-sizing: border-box;
|
|
|
|
.card-header {
|
|
padding: 0 11rpx 11rpx 11rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #000000;
|
|
}
|
|
|
|
.row {
|
|
margin-top: 22rpx;
|
|
justify-content: space-between;
|
|
padding: 17rpx 14rpx 17rpx 23rpx;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
border-bottom: 0.5rpx solid rgba($color: #707070, $alpha: 0.1);
|
|
}
|
|
}
|
|
</style>
|