145 lines
3.8 KiB
Vue
145 lines
3.8 KiB
Vue
<template>
|
|
<view class="mild-shopping">
|
|
<web-view
|
|
ref="webview"
|
|
:webview-styles="webviewStyles"
|
|
:src="webviewUrl"
|
|
@message="handlePostMessage"
|
|
@onPostMessage="handlePostMessage"
|
|
></web-view
|
|
> <qiaobao-assistant page-key="pages/mine_package/mild-shopping/mild-shopping" title="平价专区" />
|
|
</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>
|