Enterprise WeChat custom customer portrait

Basic introduction to OpenAPI

Documentation for the open interface of Wechat Assistant

version: 0.4

Note 1: The open interface of the Weiban assistant has been opened for public testing, enter the Weiban background-application management-API access to obtain the enterprise logo ( corp_id), enterprise API call credentials ( secret)

Note 2: All time-related fields in the system are in seconds .

Note 3: At present, the open api does not provide a test mode, please pay attention when developing and calling, and delete the test data in time when the test is completed.

read instructions

Weiban Assistant provides further integration and customization capabilities for accessing enterprises through an open interface (Open API).

All interfaces use HTTPS protocol, JSON data format and UTF-8 encoding.

The interface uses GET and POST operations, and other types of operations (such as PUT) are not used.

The query parameter may be required in GET type operations .

Explanation : The query parameter is a parameter put in the url. For example, API Enterprise WeChat Marketing_Enterprise WeChat Session Archive_Private Domain Traffic Operation-WeChat Assistant official website After adding query parameters access_tokenand , idthe complete request is:

Enterprise WeChat Marketing_Enterprise WeChat Session Archive_Private Domain Traffic Operation-WeChat Assistant official website

In addition, in addition to the query parameter in the POST type operation, the body parameter may also need to be provided . The details will be introduced in the corresponding business API documentation.

errcodeThe and fields are always included in the request return value errmsg, which are called the basic return fields . Used to describe the success status of the request, which is defined as follows:


https://weibanzhushou.com/dashboard/side_window#tab=clientCustomerInfoManage

Node backend interface:

When the enterprise WeChat clicks on the customer portrait, it automatically adjusts the card link we configured to correspond to the back-end interface, and passes the code to the back-end interface, and the back-end gets the code. The front end uses Vue to develop a multi-page application, which contains an order.html page for displaying in the position of this custom card. The backend reads the order.html page through the http protocol, and returns the code or a custom token to the WeChat enterprise card in the form of a response header. After the front end gets the code or token, it can interact with other interfaces on the back end.

//微伴测试
const toolsGetPage = async (req, res) => {
  const { code } = req.query
  console.log(req.url)
  console.log(code)
  axios({
    url: 'https://test.xxx.com/weiban/order.html'
  }).then(resHtml => {
    //console.log(resHtml.data)
    // const tempPage = fs.readFileSync(
    //   '/source/banxuezhushou_h5/public/weiban/index.html',
    //   'utf-8'
    // )
    if (code === '666') {
      res.setHeader('access_token', Date.now())
      res.setHeader('code', code)
      res.send(resHtml.data)
      //res.redirect('http://localhost:85/#/h5/index/home/recommend')
    } else {
      res.setHeader('access_token', 'no')
      res.setHeader('code', code)
      res.send(resHtml.data)
    }    
  })

}

order.html:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0"
    />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>微伴</title>
    <script>
      var _hmt = _hmt || []
      ;(function () {
        var hm = document.createElement('script')
        hm.src = 'https://hm.baidu.com/hm.js?ba026e086390c108e27594beca3eaf83'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>
    <script>
      var req = new XMLHttpRequest()
      req.open('GET', document.location, false)
      req.send(null)
      var headers = req.getAllResponseHeaders().toLowerCase()
      var tempCode = req.getResponseHeader('code')
      var token = req.getResponseHeader('access_token')
      if (token) {
        localStorage.setItem('token-weiban', token)
      } else {
        localStorage.setItem('token-weiban', '123')
      }
      var code = '456'
      if (tempCode) {
        code = tempCode
      }
      console.log(headers)
    </script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

.vue statement:

<template>
  <div>
    <div class="m-weiban-wrap">
      <div class="m-weiban-nav-wrap">
        <van-tabs v-model="active" class="m-weiban-tabs">
          <van-tab v-for="item in navList" :title="item.title" :key="item.id">
          </van-tab>
        </van-tabs>
      </div>
      <div class="m-weiban-info">
        <div class="m-weiban-grid-wrap">
          <div class="m-weiban-flex">
            <div class="m-weiban-flex-item">
              <div class="m-weiban-grid-item">
                <div class="m-weiban-grid-item-title">消费订单数</div>
                <div class="m-weiban-grid-item-value">{
   
   { num1 }}</div>
              </div>
            </div>
            <div class="m-weiban-flex-item">
              <div class="m-weiban-grid-item">
                <div class="m-weiban-grid-item-title">消费金额</div>
                <div class="m-weiban-grid-item-value">{
   
   { num2 }}</div>
              </div>
            </div>
            <div class="m-weiban-flex-item">
              <div class="m-weiban-grid-item">
                <div class="m-weiban-grid-item-title">客单数</div>
                <div class="m-weiban-grid-item-value">{
   
   { num3 }}</div>
              </div>
            </div>
            <div class="m-weiban-flex-item">
              <div class="m-weiban-grid-item">
                <div class="m-weiban-grid-item-title">退款金额数</div>
                <div class="m-weiban-grid-item-value">{
   
   { num4 }}</div>
              </div>
            </div>
            <div class="m-weiban-flex-item">
              <div class="m-weiban-grid-item">
                <div class="m-weiban-grid-item-title">退款次数数</div>
                <div class="m-weiban-grid-item-value">{
   
   { num5 }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="m-weiban-info-list-wrap">
          <div class="m-weiban-info-list">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="emptyText"
              @load="onLoad"
            >
              <div
                v-for="(item, index) in course_list"
                :key="index"
                class="m-weiban-list-item"
              >
                <div class="m-weiban-row">
                  <span class="m-weiban-desc-label">订单编号</span>
                  <span class="m-weiban-desc-value">{
   
   { item.order_id }}</span>
                  <span class="m-weiban-copy" @click="handleCopy(item)"
                    >复制</span
                  >
                </div>
                <div class="m-weiban-row">
                  <span class="m-weiban-desc-label">商品名称</span>
                  <span class="m-weiban-desc-value">{
   
   { item.goods_name }}</span>
                </div>
                <div class="m-weiban-row">
                  <span class="m-weiban-desc-label">渠道名称</span>
                  <span class="m-weiban-desc-value">{
   
   {
                    item.channel_name
                  }}</span>
                </div>
                <div class="m-weiban-row">
                  <span class="m-weiban-desc-label">订单状态</span>
                  <span class="m-weiban-desc-value">{
   
   {
                    item.order_status
                  }}</span>
                </div>
                <div class="m-weiban-row">
                  <span class="m-weiban-desc-label">创建时间</span>
                  <span class="m-weiban-desc-value">{
   
   {
                    item.create_time
                  }}</span>
                </div>
                <div class="m-weiban-row">
                  <span class="m-weiban-desc-label">支付时间</span>
                  <span class="m-weiban-desc-value">{
   
   { item.paid_time }}</span>
                </div>
              </div></van-list
            >

            <!-- <van-skeleton v-if="isLoading" title :row="3"></van-skeleton> -->

            <van-empty
              v-if="loading === false && course_list.length === 0"
              description="暂无数据"
            ></van-empty>
            <!-- <div class="m-weiban-loading-wrap" v-show="loading">
            <van-loading></van-loading>
          </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getOrderList } from '@/api/weiban'
import { formatNum } from './config'
import * as clipboard from 'clipboard-polyfill/text'
import './index.css'

export default {
  data() {
    return {
      message: 'hello',
      course_list: [],
      isLoading: false,
      finished: false,
      loading: false,
      emptyText: '没有更多了',
      active: 0,
      navList: [],
      num1: '',
      num2: '',
      num3: '',
      num4: '',
      num5: '',
    }
  },
  mounted() {
    //this.handleGetList()
    this.getNavList()
    this.getNum()
  },
  methods: {
    handleGetList() {
      localStorage.setItem('token-weiban', token)
      localStorage.setItem('code-weiban', code)
      this.isLoading = true

      let that = this

      axios({
        url: `${baseUrl}/card/xxx?code=${code}`,
        method: 'get',
        headers: {
          Authorization: token,
        },
      })
        .then((res) => {
          this.isLoading = false
          res.data.code = 404
          if (res.data.code === 200) {
            let tempData = res.data.data
            let tempList = []
            for (let key in tempData) {
              tempList.push(tempData[key])
            }
            this.course_list = tempList
          } else if (res.data.code === 404) {
            let tempData = {
              0: {
                id: 123,
                order_no:
                  '111',
                order_status: 3,
                created_at: '2022-10-14 15:04:02',
                updated_at: '2022-10-14 15:04:02',
              },

            }
            let tempList = []
            for (let key in tempData) {
              tempList.push(tempData[key])
            }
            this.course_list = tempList
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onLoad() {
      this.loading = true

      getOrderList(code).then((res) => {
        let testData = {
          code: 200,
          msg: '成功',
          data: {
            order_list: [
            ],
          },
        }

        res = { data: testData }
        if (res.data.code === 200) {
          let tempData = res.data.data.order_list
          // let tempList = []
          // for (let key in tempData) {
          //   tempList.push(tempData[key])
          // }
          this.course_list = [...this.course_list, ...tempData]
          this.loading = false
          this.finished = true
          if (this.course_list.length === 0) {
            this.emptyText = ''
          }
        }
      })

      return
      axios({
        url: `${baseUrl}/card/xxx?code=${code}`,
        method: 'get',
        headers: {
          Authorization: token,
        },
      })
        .then((res) => {
          let testData = {
            code: 200,
            msg: '成功',
            data: {
              order_list: [
              ],
            },
          }

          res = { data: testData }
          if (res.data.code === 200) {
            let tempData = res.data.data.order_list
            // let tempList = []
            // for (let key in tempData) {
            //   tempList.push(tempData[key])
            // }
            this.course_list = [...this.course_list, ...tempData]
            this.loading = false
            this.finished = true
            if (this.course_list.length === 0) {
              this.emptyText = ''
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getNavList() {
      this.navList = [
        {
          id: 0,
          title: '抖音',
        },
        {
          id: 1,
          title: '快手',
        },
        {
          id: 2,
          title: '小鹅通',
        },
        {
          id: 3,
          title: '京东',
        },
      ]
    },
    getNum() {
      this.num1 = formatNum(364)
      this.num2 = formatNum(64578)
      this.num3 = formatNum(123)
      this.num4 = formatNum(232)
      this.num5 = formatNum(6)
    },
    handleCopy(item) {
      clipboard.writeText(item.order_id).then(() => {
        this.$toast('复制成功')
      })
    },
  },
}
</script>

<style></style>

The interface used by the backend:

http://openapi.weibanzhushou.com/api-8233537

 Consumption code:

http://openapi.weibanzhushou.com/api-8269970

Query user details according to external_user_id:

http://openapi.weibanzhushou.com/api-8269960

 If you want to find the customer's mobile phone number, you need to modify the customer's information in advance, add the user's mobile phone number, and scan the added customer's enterprise WeChat to get the user's mobile phone number, and the customer added through the mobile phone number, enterprise WeChat can get the user phone number.

After getting the customer's mobile phone number, if other information of the customer in the database is also associated with the mobile phone number. You can go to the database to get other customer information.

Guess you like

Origin blog.csdn.net/xutongbao/article/details/127885557