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