|
<template>
|
<view>
|
<view class="content">
|
<image @click="toWeb" :src="`${$images}/static/img/support/support-banner.png`" mode="widthFix" style="width: 100%"></image>
|
|
<view class="support-wrapper">
|
<view class="support-title">热门问题</view>
|
<uv-cell-group v-if="hotIssues.length">
|
<uv-cell v-for="(item,index) in hotIssues" :key="index" @click="handleShowIssuePopup(item)" :isLink="true" :title="item.issuesContent"></uv-cell>
|
</uv-cell-group>
|
<view v-else>
|
<uv-empty text="暂无数据"></uv-empty>
|
</view>
|
</view>
|
|
<view class="support-phone" >
|
<view class="support-phone-title">
|
<view class="support-phone-icon"></view>
|
<view class="support-phone-text">
|
<view style="text-align: center;font-size: 34rpx;font-weight: 600">热线：{{$customerServicePhone}}</view>
|
<!-- <rich-text :nodes="supportPhone"></rich-text>-->
|
</view>
|
</view>
|
<view class="support-phone-desc">周一至周日 09:00-19:00</view>
|
</view>
|
</view>
|
|
<uv-popup ref="popup" class="support-modal" mode="center"
|
round="12px">
|
<view class="support-modal-content">
|
<view class="modal-body" v-if="hotIssue">
|
<view class="hot-issue-content">
|
<view class="hot-issue-icon"></view>
|
<view class="hot-issue-text">{{ hotIssue.issuesContent }}</view>
|
</view>
|
<view class="hot-answer-content">
|
<view class="hot-answer-icon"></view>
|
<view class="hot-answer-text">{{ hotIssue.answerContent }}</view>
|
</view>
|
</view>
|
<view class="modal-actions">
|
<button class="modal-action" @tap="$refs.popup.close()">
|
我知道了
|
</button>
|
</view>
|
</view>
|
|
</uv-popup>
|
</view>
|
</template>
|
<script>
|
import {getAppHotIssues,getProtocol} from '@/api/modules/user'
|
export default {
|
name: "index",
|
data() {
|
return {
|
hotIssues: [],
|
hotIssue: null,
|
supportPhone: null,
|
}
|
},
|
created() {
|
console.log(uni);
|
this.getHotIssues()
|
},
|
methods: {
|
toWeb(){
|
uni.navigateTo({
|
url: '/pages/web/index'
|
});
|
},
|
openPopup(){
|
this.$refs.popup.open()
|
},
|
getHotIssues() {
|
getAppHotIssues().then(res => {
|
|
this.hotIssues = res.records;
|
});
|
/* getProtocol(this.$Protocol.service).then(res=>{
|
this.supportPhone = res.content
|
})*/
|
},
|
handleShowIssuePopup(item){
|
this.hotIssue = item;
|
this.$refs.popup.open()
|
}
|
},
|
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.content{
|
.support-title {
|
padding: 30rpx;
|
font-size: 34rpx;
|
font-weight: 600;
|
color: #252938;
|
line-height: 48rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
margin-bottom: 10rpx;
|
&::before {
|
content: '';
|
display: block;
|
width: 6rpx;
|
height: 28rpx;
|
background: #4766fe;
|
margin-right: 22rpx;
|
}
|
}
|
|
|
.support-phone{
|
|
margin-top: 40rpx;
|
background: #f7f7f7;
|
border-radius: 16rpx;
|
margin: 40rpx 30rpx 30rpx 30rpx;
|
padding: 34rpx 34rpx 36rpx;
|
text-align: center;
|
}
|
.support-phone-title {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 8rpx;
|
}
|
|
.support-phone-icon {
|
width: 36rpx;
|
height: 32rpx;
|
background-image: url(#{$iconHttps}/static/img/support/support-phone.png);
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center;
|
margin-right: 12rpx;
|
}
|
|
.support-phone-text {
|
font-size: 34rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #252938;
|
line-height: 48rpx;
|
}
|
|
.support-phone-desc {
|
font-size: 24rpx;
|
color: #8b8d96;
|
line-height: 34rpx;
|
text-align: center;
|
margin-top: 20rpx;
|
}
|
}
|
|
|
|
.support-modal {
|
.support-modal-content {
|
width: 600rpx;
|
padding: 40rpx;
|
}
|
|
.hot-issue-content {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
border-bottom: 1px solid #e7e9ed;
|
padding-bottom: 32rpx;
|
margin-bottom: 26rpx;
|
.hot-issue-icon {
|
flex: none;
|
width: 32rpx;
|
height: 34rpx;
|
margin-right: 12rpx;
|
background-image: url(#{$iconHttps}/static/img/support/support-issue.png);
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
|
.hot-issue-text {
|
width: 100% ;
|
font-size: 30rpx;
|
font-weight: 600;
|
color: #252938;
|
line-height: 42rpx;
|
}
|
}
|
|
.hot-answer-content {
|
display: flex;
|
flex-direction: row;
|
.hot-answer-icon {
|
flex: none;
|
width: 32rpx;
|
height: 34rpx;
|
margin-right: 12rpx;
|
background-image: url(#{$iconHttps}/static/img/support/support-answer.png);
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
|
.hot-answer-text {
|
width: 100% ;
|
font-size: 28rpx;
|
color: #8b8d96;
|
line-height: 40rpx;
|
margin-top: -1px;
|
}
|
}
|
|
.modal-action {
|
width: 446rpx;
|
height: 100rpx;
|
background: linear-gradient(270deg, #4766fe 0%, #7d9fff 100%),
|
linear-gradient(104deg, #6d89ff 0%, #2865f2 100%);
|
border-radius: 50rpx;
|
margin: auto;
|
margin-top: 66rpx;
|
font-size: 34rpx;
|
font-weight: 600;
|
color: #ffffff;
|
line-height: 48rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
</style>
|
