pet_uni/components/RightNav/index.vue

<template>
	<view class="right-nav row">
		<view
        class="right-nav-button col-12"
        v-for="(item,index) in buttonGroup"
        >
      <u-image v-if="item.type !== 'wechat' && item.type !== 'chat'" :src="item.image" width="93" height="93" @click="handle(item.type)"></u-image>
      <button v-if="item.type === 'wechat'" open-type="contact" :src="item.image" style="padding-left:0;">
        <u-image :src="item.image" width="93" height="93"></u-image>
      </button>
      <view v-if="item.type === 'chat'" style="position: relative;">
        <u-badge v-if="msgCount>0" type="error" max="99" :value="msgCount" absolute :offset="[0,0]" custom-style="z-index:1;"></u-badge>
        <u-image :src="item.image" width="93" height="93" @click="handle(item.type)"></u-image>
      </view>
    </view>
	</view>
</template>

<script>
	import { imghost } from '@/config/host.js'
  import functions from "@/utils/functions";
  import {getConfig} from "@/api/other";
  import {userChatCount} from "@/api/user";
	export default{
		data() {
			return {
				title: 'Hello',
				loading: true,
				buttonGroup:[
					{
						image:imghost+"/right-button-wechat.png",
						type:'wechat'
					},{
						image:imghost+"/right-button-chat.png",
						type:'chat'
					},{
						image:imghost+"/right-button-phone.png",
						type:'phone'
					},
				],
        kefu_phone:'',
        msgCount:0,
			}
		},
		onLoad() {

		},
    mounted() {
      let that = this;
      // uni.$on('getMsgNumber', (data) => {
        that.getMsgNumber();
      // });
    },
		methods: {
      getMsgNumber(){
        userChatCount().then(res => {
          this.msgCount = res.data.count
        })
      },
      callPhone(phone){
        uni.makePhoneCall({
          phoneNumber: phone.toString()
        });
      },
			handle(type){
					switch (type) {
						case 'chat':
              this.navTo("/pages/ChatDetail/index?id=0",true);
              break;
            case 'wechat':
              // uni.openCustomerServiceChat({
              //   extInfo: {url: ''},
              //   corpId: '',
              //   success(res) {
              //     console.log(res)
              //   },
              //   fail(res) {
              //     console.log(res)
              //   },
              // });
              functions.success('跳转微信客服');
              break;
            default:
              this.callPhone(this.kefu_phone)
					}
			},
      navTo(url,token = false) {
        if (token) {
          if (uni.getStorageSync('token')) {
            uni.navigateTo({
              url: url
            })
          } else {
            uni.navigateTo({
              url: '/pages/Login/index'
            })
          }
        }else{
          uni.navigateTo({
            url: url
          })
        }
      },
      getPhone(){
        getConfig('kefu_phone').then(res => {
          this.kefu_phone = res.data.kefu_phone;
        })
      }
		},
    created() {
      this.getPhone();
    },
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>