feat: 增加界面

src/pages/user/customer/index.vue

@@ -7,7 +7,16 @@
                 <p>使用寺院联盟遇到任何疑问都可以联系我</p>
             </div>
         </div>
-        <div class="customer-type-group">
+        <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>
@@ -28,14 +37,32 @@
                 <h1>客服微信号</h1>
                 <p>点击即可复制微信号，在微信中添加好友，我们会及时与您联系</p>
             </div>
-        </div>
-        <img class="qrcode" src="https://login.weixin.qq.com/qrcode/4eUoxEzS0A==" alt="">
+        </div> -->
+        <img class="qrcode" :src="qrcode" alt="">
     </div>
 </template>
 
 <script>
-export default {
+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>
 
@@ -76,11 +103,19 @@ export default {
         border-radius: .27rem;
         padding:.2rem .4rem ;
         align-items: center;
+        position: relative;
         img{
             width: 1.07rem;
             height: 1.07rem;
             border-radius: 50%;
-            margin-right: .13rem;
+            margin-right: .3rem;
+        }
+        .phone{
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
         }
         .info{
             flex: 1;
@@ -88,6 +123,9 @@ export default {
             h1{
                 font-size: .4rem;
                 margin-bottom: .4rem;
+                .wechat-account{
+                    color: rgb(167, 54, 54);
+                }
             }
             p{
                 color: #aaa;
@@ -98,6 +136,7 @@ export default {
     }
     .qrcode{
         width: 4rem;
+        height: 4rem;
         display: block;
         margin-left: auto;
         margin-right: auto;