Skip to content

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

分享，保存图片等

上级 5e2e512e
隐藏空白字符变更
内嵌 并排
正在显示 包含 383 行增加 和 33 行删除
src/components/annual-summary/card-6.vue
浏览文件 @ e59ebeae
......@@ -37,21 +37,26 @@
<div class="qr-wrapper">
<img src="~@/images/annual/qr-code.png" alt />
</div>
<section v-if="type == 1" class="bottom">
<img src="~@/images/annual/save-btn.png" alt />
<img src="~@/images/annual/share-btn.png" alt />
<section v-if="isHide && type == 1" class="bottom">
<img @click="save" src="~@/images/annual/save-btn.png" alt />
<img @click="share" src="~@/images/annual/share-btn.png" alt />
</section>
<section v-if="type == 2" class="bottom">
<img class="btn-l" src="~@/images/annual/share-btn-l.png" alt />
<!-- <img @click="callApp" class="btn-l" src="~@/images/annual/share-btn-l.png" alt /> -->
<WxOpenCommon :url="openPath" ></WxOpenCommon>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
let _this = null;
import WxOpenCommon from '@/components/wx-open';
import {
getWebPageUrl
} from "@/utils"
export default {
components: {
Logo
Logo,
WxOpenCommon
},
props: {
type: {
......@@ -63,44 +68,34 @@ export default {
default: () => {
return {};
}
},
isHide: {
type: Boolean,
default: true
}
},
data() {
return {
isHide: true,
openPath: '',
// isHide: true,
}
},
created() {
_this = this;
// 截屏时通知前端
window.__screenCaptureEvent = function() {
console.log('in screenCaptureEvent');
_this.$sendBuriedData({
component_tag: '557#557002'
});
}
// 保存图片的回调
window.__savePage2Picture = function(param) {
this.isHide = true;
console.log("__savePage2Picture", param);
}
this.openPath = getWebPageUrl(`profexam/#/as-index`);
},
methods: {
// 保存图片
savePage2Picture() {
this.isHide = false;
this.$forceUpdate()
this.$nextTick( () => {
rocNative.savePage2Picture({
__funcName: "__savePage2Picture"
});
})
save() {
this.$emit('save');
},
// 分享按钮
share() {
this.$emit('share');
}
},
};
......
src/components/wx-open/index.vue 0 → 100644
浏览文件 @ e59ebeae
<template>
<section class="launch-app">
<article :id="wxWapperId" v-show="!showImg"></article>
<img v-show="showImg" @click="callAppAction" class="pic" :src="wxBtnImg" />
</section>
</template>
<script>
/**
* 微信文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
* 新版API初始化前也需要 初始化wx.config
*
* 如果【打开app页面】有分享功能，需要自行初始化加入初始化功能
* 即：(openTagList: ['wx-open-launch-app', 'wx-open-launch-weapp'])
* 然后省去：this.checkInWechatFn(this.getSignMap); 此步骤为获取签名和初始化微信config
*
* 替换成最新wx-jssdk: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js
*
* 样式 必须在如上方: <style> 标签中添加
*
* DEMO中的appid为 云鹊医联公众号的appid & 配置的是test1环境可用。
* 需要当前页面有分享之类的功能了，需要appid需要配置成当前页面用到的appid
*
* 微信类型 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';
export default {
props: {
platform: {
type: String,
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: '',
},
/**
* 1. platform=h5 暂时不用填写
* 2. platform=native 如果需要传参数，为 key:value 键值对
*/
params: {
type: Object,
default: () => ({}),
},
wxWapperId: {
type: String,
default: 'wx-open-launch-app-id-1',
},
wxOpenId: {
type: String,
default: 'wx-open-id-1',
},
appid: {
type: String,
default: 'wx5103ed453ef2dbe8',
},
wxBtnImg: {
type: String,
default: 'https://file.yunqueyi.com/h5/images/mall/invitation/share/share-2.png',
},
},
data() {
return {
isIOS: false,
isAndroid: false,
isWechat: false,
isWechatSuitable: false,
signMap: null,
extinfo: '',
checkInWechatFn: () => {},
};
},
computed: {
// 如果可以使用，则插入微信标签
showImg() {
const si = this.isWechatSuitable != null && this.isWechatSuitable === false;
console.log('showImg...', si);
return si;
},
},
watch: {
showImg(value) {
let _this = this;
// 如果微信标签可用，则动态生成标签节点，并添加相应监听事件
if(!value) {
this.$nextTick( () => {
const insertId = document.getElementById(this.wxWapperId);
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 content = `<img src='${this.wxBtnImg}' style="display: block; width: 100%;"/>`;
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="width:100%;display:block;" >
${script.outerHTML}
</wx-open-launch-app>`;
console.log('insertHtml', insertHtml);
insertId.innerHTML = insertHtml;
this.$forceUpdate();
// 注册监听事件
this.$nextTick(() => {
var btn = document.getElementById(this.wxOpenId);
if(btn != null) {
// 成功唤起事件
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);
}
});
});
}
}
},
created() {
},
mounted() {
if (process.client) {
const ua = navigator.userAgent.toLowerCase();
this.isWechat = /micromessenger\/([\d.]+)/i.test(ua);
this.isIOS = /(iPhone|iPad)/i.test(ua);
this.isAndroid = /(Android)/i.test(ua);
this.checkInWechatFn = this.checkInWechat();
// 如果有微信分享进行的config设置，则此行不用打开
// this.checkInWechatFn(this.getSignMap);
// （根据项目需要）设置跳转的额外参数
this.setPlatformMessage();
}
},
methods: {
callAppAction() {
console.log('in callAppAction');
this.$emit('launchApp');
setTimeout(() => {
this.$callApp(''); // 不用直接唤起
// this.$callApp(this.url); // 可以直接唤起指定页面，但只限于是h5页面的URL
}, 100);
},
// 设置平台跳转信息
setPlatformMessage() {
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 });
} else {
if (path === '' || !path) {
path = window.location.href;
}
console.log('传入的path', path);
params.push({ key: 'pageUrl', value: path });
}
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
params.push({
key,
value: this.params[key],
});
}
// 暂时不用直接唤起
// this.extinfo = '';
this.extinfo = JSON.stringify({
name: 'dispatchEventByModuleCode',
param: {
modeCode,
jsonString: params,
},
});
console.log('回到APP参数2', JSON.parse(this.extinfo));
},
checkInWechat() {
const self = this;
const isWechatSuitable = self.checkWechatSuitable();
self.isWechatSuitable = isWechatSuitable;
console.log('是否展示功能', self.isWechatSuitable);
// eslint-disable-next-line func-names
return function (fn) {
if (isWechatSuitable) fn();
return self;
};
},
checkWechatSuitable() {
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';
// 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';
function versionCompare(pre, cur) {
const pres = pre.split('.');
const curs = cur.split('.');
const maxL = Math.max(pres.length, curs.length);
let flag = 0;
for (let i = 0; i < maxL; i++) {
const pv = pres.length > i ? pres[i] : 0;
const cv = curs.length > i ? curs[i] : 0;
const pn = isNaN(Number(pv)) ? pv.charCodeAt() : Number(pv);
const cn = isNaN(Number(cv)) ? cv.charCodeAt() : Number(cv);
if (cn !== pn) {
flag = cn > pn ? 1 : -1;
break;
}
}
return flag !== -1;
}
suitWechat = versionCompare(SUITABLE_WECHAT_VERSION, wechatVersion);
if (this.isIOS) {
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
appVersion = ua.match(/android (.*?);/)[1];
suitApp = versionCompare(SUITABLE_ANDROD_VERSION, appVersion);
}
console.log(`wechatVersion: ${wechatVersion}`, `appVersion: ${appVersion}`);
return suitWechat && suitApp;
},
getSignMap() {
/**
* 各个环境目前使用：dev=1, test1=15, uat=30, prod=5
* 微信类型 1、云鹊医联 5、云鹊健康 10、基层大众版 15、云鹊医 20、基层医生版 25、云鹊慧测试账号 30云鹊医导流公众号
*/
const authUrl = encodeURIComponent(window.location.href);
const url = `https://sc.yunqueyi.com/wechats/signs?url=${authUrl}&type=1`;
axios.get(url).then(({ data: res }) => {
if (res && res.code === '000000') {
const { signMap } = res.data;
this.signMap = signMap;
this.initWeiXin(signMap);
}
});
},
initWeiXin(data) {
this.$wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
// debug: true,
appId: data.appId, // 必填，公众号的唯一标识
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']
});
this.$wx.ready(() => {
console.log('wx.ready is ok.');
});
this.$wx.error((res) => {
console.log('wx.error res => ', res);
});
},
},
};
</script>
<style lang="less" scoped>
.launch-app {
width: 100%;
// min-height: 50px;
}
.pic {
width: 100%;
display: block;
}
</style>
src/views/annual-summary/detail.vue
浏览文件 @ e59ebeae
......@@ -17,7 +17,7 @@
<Card5 :anualData="anualData"></Card5>
</div>
<div class="swiper-slide">
<Card6 :anualData="anualData"></Card6>
<Card6 :anualData="anualData" @save="savePage2Picture" @share="share" :isHide="isHide"></Card6>
</div>
</div>
<Loading v-show="showLoading" />
......@@ -56,6 +56,7 @@ export default {
isWeb: window.__isWeb,
isInfresh: false,
showLoading: false,
isHide: true,
anualData: {
orderNum: 1,
learnTime4Show: 1
......@@ -69,6 +70,23 @@ export default {
created() {
_this = this;
_this = this;
// 截屏时通知前端
window.__screenCaptureEvent = function() {
console.log("in screenCaptureEvent");
_this.$sendBuriedData({
component_tag: "557#557002"
});
};
// 保存图片的回调
window.__savePage2Picture = function(param) {
this.isHide = true;
console.log("__savePage2Picture", param);
};
// 先调用存储权限（只有安卓手机需要）
this.isAndroid && rocNative.openExternalStoragePermission();
window.__getUserInfoAS = function(param) {
console.log("__getUserInfoAS", param);
......@@ -190,7 +208,7 @@ export default {
// token是否失效校验
checkToken() {
let param = {
token: this.anualData.userToken || this.token,
token: this.userInfo.userToken || this.token,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
......@@ -205,6 +223,32 @@ export default {
} else {
}
});
},
// 保存图片
savePage2Picture() {
this.isHide = false;
this.$forceUpdate();
this.$nextTick(() => {
rocNative.savePage2Picture({
__funcName: "__savePage2Picture"
});
});
},
// 调用原生分享（弹框）
share() {
let shareUrl = getWebPageUrl(`profexam/#/as-share?uuid=${anualData.uuid}`);
this.$rocNative &&
this.$rocNative.shareWechat({
type: 6,
shareId: 0,
shareUrl: shareUrl,
title1: "云鹊医2020年度个人学习报告",
title2: "点击查看我的专属学习报告",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
});
}
}
};
......
src/views/annual-summary/share.vue
浏览文件 @ e59ebeae
<template>
<div class="as-share-wrapper">
<Card6 type="2" :anualData="anualData"></Card6>
<Card6 type="2" :anualData="anualData" ></Card6>
<Loading v-show="showLoading" />
</div>
</template>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或