145 lines
4.1 KiB
Vue
145 lines
4.1 KiB
Vue
<template>
|
||
<div class="customer-page">
|
||
<div class="title">
|
||
<img class="icon" src="@/assets/img/heshang.jpg" alt="">
|
||
<div class="info">
|
||
<h1>阿弥陀佛，我是客服小僧</h1>
|
||
<p>使用寺院联盟遇到任何疑问都可以联系我</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-type-group" v-for="(cus, index) in list" :key="index">
|
||
<img :src="cus.icon_url" alt="">
|
||
<div class="info">
|
||
<h1>{{cus.title}} <span v-if="cus.title == '客服微信号'" class="wechat-account">{{cus.value}}</span></h1>
|
||
<p v-html="cus.content"></p>
|
||
</div>
|
||
<a class="phone" :href="'tel:'+cus.value" v-if="cus.title === '电话客服'"></a>
|
||
|
||
</div>
|
||
<!-- <div class="customer-type-group">
|
||
<img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
|
||
<div class="info">
|
||
<h1>在线客服</h1>
|
||
<p>服务时间：周一至周五 10：00-18：00</p>
|
||
<p>如不在服务时间，留言后我们会及时与您联系</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-type-group">
|
||
<img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
|
||
<div class="info">
|
||
<h1>电话客服</h1>
|
||
<p>服务时间：周一至周五 10：00-18：00</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-type-group">
|
||
<img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
|
||
<div class="info">
|
||
<h1>客服微信号</h1>
|
||
<p>点击即可复制微信号，在微信中添加好友，我们会及时与您联系</p>
|
||
</div>
|
||
</div> -->
|
||
<img class="qrcode" :src="qrcode" alt="">
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getCustomerList } from '@/api';
|
||
|
||
export default {
|
||
data(){
|
||
return {
|
||
qrcode: '',
|
||
list: [],
|
||
}
|
||
},
|
||
created(){
|
||
this.getCustomerList();
|
||
},
|
||
methods: {
|
||
async getCustomerList(){
|
||
const res = await getCustomerList();
|
||
console.log(res)
|
||
this.list = res.list;
|
||
this.qrcode = res.platform_code;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.customer-page{
|
||
min-height: 100vh;
|
||
background: #f5f5f5 url('~@/assets/img/customer_background.jpg') center top no-repeat;
|
||
background-size: contain;
|
||
.title{
|
||
display: flex;
|
||
font-size: .4rem;
|
||
height: 4rem;
|
||
align-items: center;
|
||
padding: 0 .53rem;
|
||
.icon{
|
||
width: 1.33rem;
|
||
height: 1.33rem;
|
||
margin-right: .4rem;
|
||
}
|
||
.info{
|
||
color: white;
|
||
h1{
|
||
font-size: .4rem;
|
||
margin-bottom: .27rem;
|
||
}
|
||
p{
|
||
font-size: .37rem;
|
||
}
|
||
}
|
||
}
|
||
.customer-type-group{
|
||
display: flex;
|
||
background: white;
|
||
margin-left: .4rem;
|
||
margin-right: .4rem;
|
||
margin-bottom: .4rem;
|
||
height: 2.67rem;
|
||
border-radius: .27rem;
|
||
padding:.2rem .4rem ;
|
||
align-items: center;
|
||
position: relative;
|
||
img{
|
||
width: 1.07rem;
|
||
height: 1.07rem;
|
||
border-radius: 50%;
|
||
margin-right: .3rem;
|
||
}
|
||
.phone{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
.info{
|
||
flex: 1;
|
||
font-size: .37rem;
|
||
h1{
|
||
font-size: .4rem;
|
||
margin-bottom: .4rem;
|
||
.wechat-account{
|
||
color: rgb(167, 54, 54);
|
||
}
|
||
}
|
||
p{
|
||
color: #aaa;
|
||
font-size: .35rem;
|
||
line-height: 1.3;
|
||
}
|
||
}
|
||
}
|
||
.qrcode{
|
||
width: 4rem;
|
||
height: 4rem;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
</style> |