|
|
@@ -11,10 +11,44 @@
|
|
|
</swipe>
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
+ <Divider>客服顾问</Divider>
|
|
|
+ <div class="contacts" v-if="myId?true:false">
|
|
|
+ <div>
|
|
|
+ <h1>{{ menuberinfo?menuberinfo:'未授权'}}</h1>
|
|
|
+ <div >
|
|
|
+ <span @click="showPopup" class="iconfont icon-weixin"></span>
|
|
|
+ <span @click="callPhone" class="iconfont icon-dianhua"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <popup :style="{ height: '60%',width:'80vw' }"
|
|
|
+ closeable
|
|
|
+ close-icon="close"
|
|
|
+ v-model="show">
|
|
|
+ <div id="qrcode">
|
|
|
+ <div class="top-color">
|
|
|
+ <img :src=avatar
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="qrcodeimg">
|
|
|
+ <span ></span>
|
|
|
+ <img :src=qrcode
|
|
|
+ alt="">
|
|
|
+ <p >长按识别二维码，添加 <ww-open-data type="userName" :openid=myId />企业微信</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </popup>
|
|
|
+ <div>
|
|
|
+ <img :src=avatar
|
|
|
+ alt=""
|
|
|
+ style="width: 15vw;height: 15vw;border-radius: 50%;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Divider>精选文章</Divider>
|
|
|
<tabs @click="onClick"
|
|
|
v-model="active"
|
|
|
- swipeable
|
|
|
animated
|
|
|
+ sticky
|
|
|
color="blue">
|
|
|
<tab v-for="item in category"
|
|
|
:title="item.name"
|
|
|
@@ -36,8 +70,6 @@
|
|
|
}}</span><span>{{ item.create_datetime }}</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
</list>
|
|
|
</tab>
|
|
|
</tabs>
|
|
|
@@ -47,9 +79,10 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { Swipe, SwipeItem, Tab, Tabs, List, Toast } from 'vant';
|
|
|
+import { Swipe, SwipeItem, Tab, Tabs, List, Toast, Divider,popup } from 'vant';
|
|
|
import sessionStorage from "../../../util/sessionStorage.js"
|
|
|
-import { getSwiperUrl, articleCategory, getArticleCategoryList,getUser_Id } from "../../../../serves/prove"; //indexswiperInfo, 有用=》getUser_Id
|
|
|
+import {getSwiperUrl, articleCategory, getArticleCategoryList, getUser_Id, getMember} from "../../../../serves/prove";
|
|
|
+import storage from "@/util/sessionStorage"; //indexswiperInfo, 有用=》getUser_Id
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
@@ -62,13 +95,25 @@ export default {
|
|
|
page: 1,
|
|
|
limit: 10,
|
|
|
id: '',
|
|
|
- myId:''
|
|
|
+ myId:'',
|
|
|
+ show:false,
|
|
|
+ menuberinfo: '',
|
|
|
+ avatar: '',
|
|
|
+ qrcode: '',
|
|
|
+ phone:'',
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
- Swipe, SwipeItem, Tab, Tabs, List,
|
|
|
+ Swipe, SwipeItem, Tab, Tabs, List, Divider,popup
|
|
|
},
|
|
|
async created () {
|
|
|
+ if(!this.myId){
|
|
|
+ this.myId = storage.getLocalstorage('user_id')
|
|
|
+ }
|
|
|
+ if (this.myId != null && this.myId !== '' && this.myId !== 'undefined') {
|
|
|
+ this.getMemberapi(this.myId)
|
|
|
+ }
|
|
|
+ // this.myId='WeiQiJia'
|
|
|
let auth_code = "";
|
|
|
if (this.$route.query.auth_code) {
|
|
|
auth_code = this.$route.query.auth_code
|
|
|
@@ -108,6 +153,15 @@ export default {
|
|
|
Toast('获取数据失败')
|
|
|
}
|
|
|
},
|
|
|
+ async getMemberapi (user_id) {
|
|
|
+ const res = await getMember(user_id)
|
|
|
+ if (res.code === 2000) {
|
|
|
+ this.menuberinfo = res.data.name;
|
|
|
+ this.avatar = res.data.avatar;
|
|
|
+ this.phone = res.data.tel;
|
|
|
+ this.qrcode = res.data.qrcode;
|
|
|
+ }
|
|
|
+ },
|
|
|
//轮播图url
|
|
|
async getSwiperUrlapi () {
|
|
|
const res = await getSwiperUrl()
|
|
|
@@ -125,6 +179,13 @@ export default {
|
|
|
this.finished = true
|
|
|
}
|
|
|
},
|
|
|
+ showPopup () {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ //打电话
|
|
|
+ callPhone(){
|
|
|
+ window.location.href='tel:'+ this.phone
|
|
|
+ },
|
|
|
onClick (name, title) {
|
|
|
this.page = 1
|
|
|
const targetid = this.category.find(obj => obj.name === title)
|
|
|
@@ -191,7 +252,89 @@ export default {
|
|
|
height: 15rem;
|
|
|
}
|
|
|
}
|
|
|
+ .contacts {
|
|
|
+ padding: 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
|
|
|
+ height: 9rem;
|
|
|
+ border-radius: 3vw;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ #qrcode {
|
|
|
+ height: 100%;
|
|
|
+ // background-color: aqua;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .qrcodeimg{
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ padding: 0.3rem;
|
|
|
+ background: linear-gradient(to right, #a1c4fd, #c2e9fb);
|
|
|
+ margin-top: -20px;
|
|
|
+ width: 50vw;
|
|
|
+ height: 50vw;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: block;
|
|
|
+ width: 80%;
|
|
|
+ height: 1rem;
|
|
|
+ border-radius: 30px;
|
|
|
+ background: linear-gradient(to right, #a1c4fd, #c2e9fb);
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-size: 1rem;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-color {
|
|
|
+ width:100%;
|
|
|
+ height: 10rem;
|
|
|
+ background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ // position: fixed;
|
|
|
+ padding: 0 1rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ img {
|
|
|
+ width: 6rem;
|
|
|
+ height: 6rem;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ div:nth-child(1) {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 0.6rem;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 2.2rem;
|
|
|
+ margin: 0 5vw 0 0;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 0.2rem;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-weixin {
|
|
|
+ background-color: rgb(0, 204, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-dianhua {
|
|
|
+ background-color: rgb(0, 140, 255);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
//标签内容
|
|
|
.title {
|
|
|
padding-top: 2rem;
|
