index.vue

<template>
  <div class="contact">
    <div class="contact-img">
      <img src="https://cdn.mayi888.com/product/HCe2iRXHsP.png" alt="" />
    </div>
    <div class="btn-wrap" v-if="defaultContact == true">
      <button open-type="contact" @contact="handleContact" show-message-card :send-message-title="wxConcatGoods.title" :send-message-img="wxConcatGoods.img"
      :send-message-path="wxConcatGoods.pathLink"
       :session-from="sessionFrom">
        <div class="btn-main">
          <div class="main-img">
            <img src="http://cdn.mayi888.com/public/png/8782e194-b208-44d6-99c1-10935ce36e2f.png" alt="" />
          </div>
          <div class="main-text">官方微信客服</div>
        </div>
        <img class="btn-next" src="http://cdn.mayi888.com/public/png/a054b29e-8929-415e-9017-dda875e25968.png" alt="" />
      </button>
    </div>
    <div class="btn-wrap" v-else-if="defaultContact == false" @click="myOpeChat">
      <button>
        <div class="btn-main">
          <div class="main-img">
            <img src="http://cdn.mayi888.com/public/png/8782e194-b208-44d6-99c1-10935ce36e2f.png" alt="" />
          </div>
          <div class="main-text">官方微信客服</div>
        </div>
        <img class="btn-next" src="http://cdn.mayi888.com/public/png/a054b29e-8929-415e-9017-dda875e25968.png" alt="" />
      </button>
    </div>
  </div>
</template>

<script>
import { getUserLocation } from "../../utils/wxIndex.js";
import { getWxContact } from "@/api/wxContact.js";
import pathToNavigation from '@/utils/pathToNavigation'
const app = getApp();
const { log } = app;

export default {
  data() {
    return {
      sessionFrom: "",
      defaultContact: null,
      result: null,
      wxConcatGoods:{}
    };
  },
  onLoad(options) {
    if(options.wxConcatGoods){
      let wxConcatGoods = JSON.parse(options.wxConcatGoods)
      wxConcatGoods['pathLink'] = pathToNavigation.toPageUrl(pathToNavigation.getUrlofLink(wxConcatGoods), pathToNavigation.getUrlofQuery(wxConcatGoods));
     console.log(wxConcatGoods,'wxConcatGoods');
     this.wxConcatGoods = wxConcatGoods
    }
    getUserLocation().then((res) => {
      options.longitude = res.longitude;
      options.latitude = res.latitude;
      this.sessionFrom = JSON.stringify(options);
      log.info('sessionFrom', this.sessionFrom)
    });
  },
  onShow() {
    getWxContact().then(res => {
      if (res.data.code == 200) {
        const result = res.data.data
        if (result.whetherOpenCustomerChannel == 0) {
          this.defaultContact = true
        } else if (result.whetherOpenCustomerChannel == 1) {
          this.defaultContact = false
          this.result = result
        }
      }
    })
  },
  methods: {
    handleContact(e) {
      //TODO 商品详情页进入客服页面-进入客服聊天框-点击聊天页面的商品详情卡片进入小程序结果只是返回到了客户详情页面
      console.log(e,'handleContact-e')
      log.info(e,'handleContact-e')
      let errMsg = e.target.errMsg;
      if(errMsg && errMsg == 'enterContact:ok'){
        let backPath = e.target.query.backpath;
        let backParams = e.target.query.params;
        let url = `${e.target.path}?from=${e.target.query.from}&backpath=${encodeURIComponent(
          backPath
        )}&params=${encodeURIComponent(backParams)}}`;
        wx.reLaunch({
          url,
        })
      }
    },
    myOpeChat() {
      log.info('okokok', this.result.whetherOpenCustomerUrl, this.result.whetherOpenCustomerSuiteId);
      if (this.result.whetherOpenCustomerService == 0) {
        wx.showModal({
          title: '提示',
          content: '您未开通企业微信客服，请开通后重试'
        })
      } else if (this.result.whetherOpenCustomerService == 1) {
        if (wx.openCustomerServiceChat) {
          wx.openCustomerServiceChat({
            extInfo: {
              // url: this.result.whetherOpenCustomerUrl.replace(/\s*/g,"").toString()
              url: this.result.whetherOpenCustomerUrl
            },
            // corpId: this.result.whetherOpenCustomerSuiteId.replace(/\s*/g,"").toString(),
            corpId: this.result.whetherOpenCustomerSuiteId,
            success(res) {
              log.info(res);
            },
            fail(res) {
              log.info(res);
              if (res.errCode == 6 && res.errMsg == 'openCustomerServiceChat:fail not bind') {
                wx.showModal({
                  title: '提示',
                  content: '您未在小程序管理后台的「功能-客服-微信客服」处，绑定对应的企业ID'
                })
              } else {
                wx.showModal({
                  title: '提示',
                  content: '系统繁忙,请稍后重试'
                })
              }
            }
          })
        } else {
          wx.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
          })
        }
      }

    }
  }

};
</script>

<style scoped>
.contact {
  padding: 10px 22px 0 22px;
}
.contact-img {
  width: 100%;
  height: 154px;
  margin-bottom: 24px;
  background-color: #ccc;
  border-radius: 8px;
}
.contact-img img {
  width: 100%;
  height: 100%;
}
.btn-wrap {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
}
button {
  width: 100%;
  height: 80px;
  border: none;
  padding: 20px 10px 20px 10px;
  background-color: white;
  box-shadow: #eee 0px 0px 5px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-main {
  display: flex;
  height: 40px;
}
.main-img {
  width: 54px;
  height: 40px;
  border-right: 1px solid #d7d4d4;
  padding-top: 3px;
}
.main-img img {
  width: 42px;
  height: 34px;
}
.main-text {
  color: #1c1b1b;
  font-size: 17px;
  margin-left: 10px;
}
.btn-next {
  width: 9px;
  height: 14px;
}
.btn-next img {
  width: 100%;
  height: 100%;
}
button::after {
  border: none;
}
</style>