frontend-app/pages/mine_package/mild-shopping/mild-shopping.vue

<template>
  <view class="mild-shopping">
    <web-view
      ref="webview"
      :webview-styles="webviewStyles"
      :src="webviewUrl"
      @message="handlePostMessage"
      @onPostMessage="handlePostMessage"
    ></web-view
  ></view>
</template>

<script>
import { TOKEN_NAME, USER_DATA, getStorageFun } from "@/utils/auth.js";
import { MILD_BASE_URL } from "@/utils/config.js";
// 全局变量
let wv; // 计划创建的webview

export default {
  data() {
    return {
      webviewStyles: {
        progress: {
          color: "#333333",
        },
      },
      wvNode: null,
      webviewUrl: "",
      // webviewUrl:'https://agent.o.tbmall.xin/',//中台测试
      // webviewUrl:'https://agent.tbmall.xin',
      // webviewUrl: "http://192.168.1.29:8004/",
    };
  },

  onShow() {
    // #ifdef APP-PLUS
    this.webviewUrl = MILD_BASE_URL;
    this.initWebview();
    // #endif
  },

  methods: {
    /**
     * 初始化webview
     */
    initWebview() {
      const currentWebview = this.$scope.$getAppWebview();
      setTimeout(() => {
        wv = currentWebview.children()[0];
        console.log(
          "TOKEN_NAME-1",
          getStorageFun(TOKEN_NAME),
          getStorageFun(USER_DATA),
        );
        if (wv) {
          //   this.evalJSWithLog("onBridgeShowApp", {
          //   token: 'WnJyYmV5SmhiR2NpT2lKSVV6STFOaUo5LmV5SjFjMlZ5U1dRaU9qRTNNallzSW0xamFFbGtJam94TURBeUxDSnBjM01pT2lKb2MyMHRabkp2Ym5SbGJtUWlMQ0owSWpveE56WXlNVGczTURreE1qYzRmUS5Caml4VU8yS1ZoUHBmeHdjRDRPWE4tSmw5T1lBZnBlc3hCRUN6UUFzQUpzRkp2em4',
          //   userId: '1726',
          //   name: '陈俊兴',
          // });
          this.evalJSWithLog("onBridgeShowApp", {
            token: getStorageFun(TOKEN_NAME),
            userId: getStorageFun(USER_DATA).userId,
            name: getStorageFun(USER_DATA).name,
          });
        }
      }, 300);
      // 支付成功，小程序跳回app
    },

    /**
     * 处理来自webview的消息
     */
    handlePostMessage(val) {
      console.log("收到消息", val, val.detail.data);
      const detail = val.detail.data[0];
      const type = detail?.type;
      console.log("收到消息-1", type);

      // 使用策略模式处理不同类型消息
      const handlers = {
        /** 一键登录 **/
        back: () => this.back(detail),
        uniFunction: () => this.uniFunction(detail),
        /** 默认 */
        default: () => {
          if (detail.userInfo) {
            this.handleChatMessage(detail, type);
          } else {
            console.log("未知类型:", type);
          }
        },
      };

      (handlers[type] || handlers["default"])();
    },


    back() {
      uni.switchTab({
        url: "/pages/mine/mine",
      });
    },
    // uni 方法
    uniFunction({ name, params, success, fail, complete }) {
      uni[name]({
        ...params,
        success: (res) => {
          if (success) {
            this.evalJSWithLog(success, res);
          }
        },
        fail: () => {
          if (fail) {
            this.evalJSWithLog(fail);
          }
        },
        complete: () => {
          if (complete) {
            this.evalJSWithLog(complete);
          }
        },
      });
    },
    
    /**
     * 调用webview中的JS方法并记录日志
     */
    evalJSWithLog(callBackName, data) {
      if (!wv) return;
      const params = JSON.stringify(data);
      console.log(`调用 evalJS: ${callBackName}(${params})`);
      wv.evalJS(`${callBackName}(${params})`);
    },
  },
};
</script>

<style lang="scss" scoped>
.mild-shopping {
  padding-top: var(--status-bar-height);
}
</style>