Skip to content

P
pica-annual-summary
提交 096377b8 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

样式问题

上级 334ff0ce
隐藏空白字符变更
内嵌 并排
正在显示 包含 103 行增加 和 78 行删除
src/components/annual-summary/logo.vue
浏览文件 @ 096377b8
......@@ -49,6 +49,9 @@ export default {
width: 20px;
height: 29px;
padding: 0 4px;
&.web {
top: 15px;
}
}
.logo {
position: absolute;
......@@ -58,6 +61,9 @@ export default {
display: block;
width: 77px;
height: 50px;
&.web {
top: 10px;
}
}
}
</style>
\ No newline at end of file
src/components/wx-open/index.vue
浏览文件 @ 096377b8
<template>
<section class="launch-app">
<article :id="wxWapperId" v-show="showImg"></article>
<img v-show="!showImg" @click="callAppAction" class="pic" :src="wxBtnImg" />
<article :id="wxWapperId" v-show="!showImg"></article>
<img v-show="showImg" @click="callAppAction" class="pic" :src="wxBtnImg" />
</section>
</template>
......@@ -24,50 +24,50 @@
* 微信类型 1、云鹊医联 5、云鹊健康 10、基层大众版 15、云鹊医 20、基层医生版 25、云鹊慧测试账号 30云鹊医导流公众号
* 各个环境目前获取签名使用：type [dev: 1, test1: 15, uat: 30, prod: 5]
* https://sc.yunqueyi.com/wechats/signs?url=${页面地址}&type=1
*/
*/
import axios from 'axios';
import axios from "axios";
export default {
props: {
platform: {
type: String,
default: 'h5', // h5, native
default: "h5" // h5, native
},
/**
* 1. platform=h5配置带参URL即可 eg: https://phome.yunqueyi.com/mall?code=1234
* 如果URL为空app未打开的情况下即为打开APP首页
*
* 2. platform=native URL值为 'androidClassName###iosClassName'
*/
*/
url: {
type: String,
default: '',
default: ""
},
/**
* 1. platform=h5 暂时不用填写
* 2. platform=native 如果需要传参数，为 key:value 键值对
*/
*/
params: {
type: Object,
default: () => ({}),
default: () => ({})
},
wxWapperId: {
type: String,
default: 'wx-open-launch-app-id-1',
default: "wx-open-launch-app-id-1"
},
wxOpenId: {
type: String,
default: 'wx-open-id-1',
default: "wx-open-id-1"
},
appid: {
type: String,
default: 'wx5103ed453ef2dbe8',
default: "wx5103ed453ef2dbe8"
},
wxBtnImg: {
type: String,
default: 'https://file.yunqueyi.com/h5/images/asimg/share-btn-l.png',
},
default: "https://file.yunqueyi.com/h5/images/asimg/share-btn-l.png"
}
},
data() {
return {
......@@ -76,69 +76,77 @@ export default {
isWechat: false,
isWechatSuitable: false,
signMap: null,
extinfo: '',
checkInWechatFn: () => {},
extinfo: "",
checkInWechatFn: () => {}
};
},
computed: {
// 如果可以使用，则插入微信标签
showImg() {
const si = this.isWechatSuitable != null && this.isWechatSuitable === false;
console.log('showImg...', si);
const si =
this.isWechatSuitable != null && this.isWechatSuitable === false;
console.log("showImg...", si);
return si;
},
}
},
watch: {
showImg(value) {
let _this = this;
// 如果微信标签可用，则动态生成标签节点，并添加相应监听事件
if(!value) {
this.$nextTick( () => {
if (!value) {
this.$nextTick(() => {
const insertId = document.getElementById(this.wxWapperId);
console.log('in watch insertId', insertId);
if(!insertId) return;
console.log("in watch insertId", insertId);
if (!insertId) return;
// const insertHtml = '';
let script = document.createElement("script"); // 创建script内容插槽 避免template标签冲突
script.type = "text/wxtag-template"; // 使用script插槽 必须定义这个type
let script = document.createElement("script"); // 创建script内容插槽 避免template标签冲突
script.type = "text/wxtag-template"; // 使用script插槽 必须定义这个type
let content = `<img src='${this.wxBtnImg}'
style="display: block; margin: 5px 0; width: 340px; height: 50px;"/>`;
script.text = content; // 自定义的html字符串内容
style="display: block; width: 340px; height: 50px;"/>`;
script.text = content; // 自定义的html字符串内容
// 唤起微信小程序
// let html = `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="小程序原始id" path="小程序页面路径和参数">${script.outerHTML}</wx-open-launch-weapp>`
// 唤起APP
let insertHtml = `<wx-open-launch-app id="${this.wxOpenId}"
extinfo="${this.extinfo}"
appid="${this.appid}" style="display: block; margin: 5px 0; width: 340px; height: 50px;" >
appid="${this.appid}" style="display: block; width: 340px; height: 50px;" >
${script.outerHTML}
</wx-open-launch-app>`;
console.log('insertHtml', insertHtml);
console.log("insertHtml", insertHtml);
insertId.innerHTML = insertHtml;
this.$forceUpdate();
// 注册监听事件
this.$nextTick(() => {
var btn = document.getElementById(this.wxOpenId);
if(btn != null) {
if (btn != null) {
// 成功唤起事件
btn.addEventListener('launch', e => {
_this.$emit('launchApp');
}, true);
btn.addEventListener(
"launch",
e => {
_this.$emit("launchApp");
},
true
);
// 唤起失败事件
btn.addEventListener('error', e => {
console.log('launchAppError...', e.detail);
if (e.detail && e.detail.errMsg === 'launch:fail') {
window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque';
}
}, true);
btn.addEventListener(
"error",
e => {
console.log("launchAppError...", e.detail);
if (e.detail && e.detail.errMsg === "launch:fail") {
window.location.href =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
}
},
true
);
}
});
});
}
}
},
created() {
},
created() {},
mounted() {
if (process.client) {
const ua = navigator.userAgent.toLowerCase();
......@@ -156,29 +164,30 @@ export default {
},
methods: {
callAppAction() {
console.log('in callAppAction');
this.$emit('launchApp');
console.log("in callAppAction");
this.$emit("launchApp");
setTimeout(() => {
this.$callApp(''); // 不用直接唤起
this.$callApp(""); // 不用直接唤起
// this.$callApp(this.url); // 可以直接唤起指定页面，但只限于是h5页面的URL
}, 100);
},
// 设置平台跳转信息
setPlatformMessage() {
let modeCode = 'M300'; let path = this.url; const
params = [];
let modeCode = "M300";
let path = this.url;
const params = [];
const keys = Object.keys(this.params);
if (this.platform === 'native') {
modeCode = 'M200';
params.push({ key: 'className', value: path });
if (this.platform === "native") {
modeCode = "M200";
params.push({ key: "className", value: path });
} else {
if (path === '' || !path) {
if (path === "" || !path) {
path = window.location.href;
}
console.log('传入的path', path);
params.push({ key: 'pageUrl', value: path });
console.log("传入的path", path);
params.push({ key: "pageUrl", value: path });
}
for (let i = 0; i < keys.length; i++) {
......@@ -186,30 +195,30 @@ export default {
params.push({
key,
value: this.params[key],
value: this.params[key]
});
}
// 暂时不用直接唤起
// this.extinfo = '';
// this.extinfo = '';
this.extinfo = JSON.stringify({
name: 'dispatchEventByModuleCode',
name: "dispatchEventByModuleCode",
param: {
modeCode,
jsonString: params,
},
jsonString: params
}
});
console.log('回到APP参数2', JSON.parse(this.extinfo));
console.log("回到APP参数2", JSON.parse(this.extinfo));
},
checkInWechat() {
const self = this;
const isWechatSuitable = self.checkWechatSuitable();
self.isWechatSuitable = isWechatSuitable;
console.log('是否展示功能', self.isWechatSuitable);
console.log("是否展示功能", self.isWechatSuitable);
// eslint-disable-next-line func-names
return function (fn) {
return function(fn) {
if (isWechatSuitable) fn();
return self;
};
......@@ -218,19 +227,19 @@ export default {
if (!this.isWechat) return false;
const ua = navigator.userAgent.toLowerCase();
const SUITABLE_WECHAT_VERSION = '7.0.12';
const SUITABLE_IOS_VERSION = '10.3.0';
const SUITABLE_ANDROD_VERSION = '5';
const SUITABLE_WECHAT_VERSION = "7.0.12";
const SUITABLE_IOS_VERSION = "10.3.0";
const SUITABLE_ANDROD_VERSION = "5";
// eslint-disable-next-line no-useless-escape
const wechatInfo = ua.match(/micromessenger\/([\d\.]+)/i);
const wechatVersion = wechatInfo[1];
let suitWechat = false;
let suitApp = false;
let appVersion = '0';
let appVersion = "0";
function versionCompare(pre, cur) {
const pres = pre.split('.');
const curs = cur.split('.');
const pres = pre.split(".");
const curs = cur.split(".");
const maxL = Math.max(pres.length, curs.length);
let flag = 0;
......@@ -250,7 +259,9 @@ export default {
suitWechat = versionCompare(SUITABLE_WECHAT_VERSION, wechatVersion);
if (this.isIOS) {
appVersion = ua.match(/cpu iphone os (.*?) like mac os/)[1].replace(/_/g, '.');
appVersion = ua
.match(/cpu iphone os (.*?) like mac os/)[1]
.replace(/_/g, ".");
suitApp = versionCompare(SUITABLE_IOS_VERSION, appVersion);
} else if (this.isAndroid) {
// eslint-disable-next-line prefer-destructuring
......@@ -258,7 +269,10 @@ export default {
suitApp = versionCompare(SUITABLE_ANDROD_VERSION, appVersion);
}
console.log(`wechatVersion: ${wechatVersion}`, `appVersion: ${appVersion}`);
console.log(
`wechatVersion: ${wechatVersion}`,
`appVersion: ${appVersion}`
);
return suitWechat && suitApp;
},
......@@ -271,7 +285,7 @@ export default {
const url = `https://sc.yunqueyi.com/wechats/signs?url=${authUrl}&type=1`;
axios.get(url).then(({ data: res }) => {
if (res && res.code === '000000') {
if (res && res.code === "000000") {
const { signMap } = res.data;
this.signMap = signMap;
......@@ -287,26 +301,31 @@ export default {
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名
jsApiList: ['onMenuShareAppMessage'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-app', 'wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
openTagList: ["wx-open-launch-app", "wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
this.$wx.ready(() => {
console.log('wx.ready is ok.');
console.log("wx.ready is ok.");
});
this.$wx.error((res) => {
console.log('wx.error res => ', res);
this.$wx.error(res => {
console.log("wx.error res => ", res);
});
},
},
}
}
};
</script>
<style lang="less" scoped>
.launch-app {
width: 100%;
display: flex;
justify-content: center;
// min-height: 50px;
}
.pic {
width: 100%;
display: block;
width: 340px;
height: 50px;
// width: 100%;
// display: block;
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或