wangyifang
/
xietang-school-wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2022.6.26

Browse Source
main
xy 2 years ago
parent 47b6d38859
commit 1ccf273669
8 changed files with 375 additions and 7 deletions
Show Stats Download Patch File Download Diff File

43
App.vue
Unescape View File

@ -1,4 +1,5 @@
<script>
const jwx = require('jweixin-module')
export default {
onLaunch: function() {
// let link = window.location.href;
@ -25,6 +26,48 @@
// `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base#wechat_redirect`
// })
// }
this.$nextTick(() => {
let url = location.href.split('#')[0]
this.$u.api.share({
url
}).then(res => {
jwx.config({
debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: res.appId,
jsApiList: res.jsApiList,
nonceStr: res.nonceStr,
signature: res.signature,
timestamp: res.timestamp,
})
jwx.ready(() => {
jwx.updateAppMessageShareData({
title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题
desc: '我是党史记录人-红色少年行 未成年人研学',
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标
});
jwx.updateTimelineShareData({
title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题
desc: '我是党史记录人-红色少年行 未成年人研学',
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标
});
jwx.onMenuShareAppMessage({
title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题
desc: '我是党史记录人-红色少年行 未成年人研学',
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标
});
jwx.onMenuShareTimeline({
title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题
desc: '我是党史记录人-红色少年行 未成年人研学',
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标
});
})
})
})
},
onShow: function() {
console.log('App Show')

8
common/http.api.js
Unescape View File

@ -10,6 +10,8 @@ let apiApp = {
baseFormDestroy: '/api/mobile/base-form/destroy',
saveQuiz: '/api/mobile/map-point/save-quiz',
pointDetail: '/api/mobile/map-point/point-detail',
share: '/api/mobile/user/wechat-share',
savePoster: '/api/mobile/vr/save-poster',
}
// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作
@ -25,9 +27,11 @@ const install = (Vue, vm) => {
let baseFormSave = (data = {}) => vm.$u.post(apiApp.baseFormSave, data);
let baseFormDestroy = (params = {}) => vm.$u.post(apiApp.baseFormDestroy, params);
let saveQuiz = (params = {}) => vm.$u.post(apiApp.saveQuiz, params);
let pointDetail = (params = {}) => vm.$u.get(apiApp.pointDetail, params)
let pointDetail = (params = {}) => vm.$u.get(apiApp.pointDetail, params);
let share = (params = {}) => vm.$u.get(apiApp.share, params);
const savePoster = (params = {}) => vm.$u.get(apiApp.savePoster, params);
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
vm.$u.api = { login, getAppId, getQuestions, baseFormIndex, baseFormShow, baseFormSave, baseFormDestroy, getPoints, saveQuiz, pointDetail };
vm.$u.api = { login, getAppId, getQuestions, baseFormIndex, baseFormShow, baseFormSave, baseFormDestroy, getPoints, saveQuiz, pointDetail, share, savePoster };
}
export default {

31
common/util.js
Unescape View File

@ -3,3 +3,34 @@
*
*/
const base64ToFile = (dataurl, filename = 'file') => {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}
export {
base64ToFile
}

20
lib/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
manifest.json
Unescape View File

@ -71,7 +71,7 @@
"vueVersion" : "2",
"h5" : {
"router" : {
"base" : "h5hssnx"
"base" : ""
}
}
}

22
package.json
Unescape View File

@ -0,0 +1,22 @@
{
"name": "h5-woshidangshijiluren",
"version": "1.0.0",
"description": "",
"main": "main.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gitee.com/longyears/h5-woshidangshijiluren.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jweixin-module": "^1.6.0"
}
}

256
pages/certificate/certificate.vue
Unescape View File

@ -1,10 +1,10 @@
<template>
<div class="body">
<div class="body" id="signed">
<u-image class="bkg" :src="require('@/static/certificate-bkg.png')" mode="widthFix"></u-image>
<u-image class="city" mode="widthFix" width="100vw" :src="require('@/static/city.png')"></u-image>
<u-image class="people" mode="widthFix" :width="298" :src="require('@/static/people.png')"></u-image>
<u-image mode="widthFix" width="100vw" class="piaodai" :src="require('@/static/piaodai.png')"></u-image>
<u-image class="share" mode="scaleToFill" :width="99" :height="99" :src="require('@/static/share.png')"> mode=</u-image>
<u-image id="share-img" v-show="!isHidden" class="share-img" mode="scaleToFill" :width="99" :height="99" :src="require('@/static/share.png')" @click="$u.throttle(share)"> mode=</u-image>
<div class="content">
<u-image style="display:flex;align-items: center;margin: auto;" mode="widthFix" :width="335" :src="require('@/static/certificate-word.png')"></u-image>
@ -30,13 +30,137 @@
主办单位：中共苏州市委党史工作办公室 <br>
承办单位：江苏有线苏州分公司
</div>
<transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
<view class="share_cover" v-show="isShare" @click="isShare = false">
<image src="/static/toShare.png" class="share_cover_arrow"></image>
<view class="share_cover_word">
请点击右上角将它发送给指定朋友或分享到朋友圈
</view>
</view>
</transition>
<view class="share" v-if="isHidden">
<view class="share-mask" @click="isHidden = false">
</view>
<view class="share-page">
<image :src="imgData" mode="widthFix"></image>
<view class="share-page__btn">
<view class="share-page__btn--share" @click="isShare = true">分享</view>
<view class="share-page__btn--save" @click="save">保存</view>
</view>
</view>
</view>
</div>
</template>
<script>
import {
ROOTPATH
} from '@/common/config.js'
import {base64ToFile} from '@/common/util'
import html2canvas from '@/lib/html2canvas.min.js'
export default {
data() {
return {};
return {
isShare: false,
isHidden: false,
imgData: '',
};
},
methods: {
showShare () {
this.isShare = true
},
share() {
this.isHidden = true
uni.showLoading({
title: '图片生成中..'
})
let dom = document.querySelector('#signed')
html2canvas(dom, {
width: dom.clientWidth, //dom 原始宽度
height: dom.clientHeight,
scrollY: 0,
scrollX: 0,
useCORS: true,
ignoreElements:(element) => {
return element.attributes.id == 'share-img'
}
}).then(cnv => {
uni.hideLoading()
this.imgData = cnv.toDataURL('image/png', 1)
}).catch(err => {
uni.showToast({
title: '生成失败，请重试',
icon: 'error'
})
this.isHidden = false
console.log(err);
})
},
save() {
this.$u.throttle(() => {
let sysinfo = uni.getSystemInfoSync();
console.log(sysinfo)
if (sysinfo) {
if (sysinfo.platform === 'android') {
uni.showToast({
title: "请长按分享图片进行保存或者分享",
icon: "none"
})
} else {
let a = document.createElement("a")
a.href = this.imgData
a.setAttribute("download", "gmesign")
a.click()
}
} else {
uni.showToast({
title: "请长按分享图片进行保存或者分享",
icon: "none"
})
}
let form = new FormData()
form.append('file', base64ToFile(this.imgData, 'sign'))
form.append('active_tag', 'map_point')
let vuex_token = this.vuex_token;
form.append('token', vuex_token)
let xhr = new XMLHttpRequest()
xhr.open('post', `${ROOTPATH}/api/mobile/upload-file`)
xhr.onreadystatechange = () => {
if (xhr.status === 200 && xhr.readyState === 4) {
let val = JSON.parse(xhr.responseText);
console.log(val);
this.$u.api.savePoster({
upload_id: val.id,
type: 1
}).then(res => {
// uni.showToast({
// title: "保存成功",
// icon: "none"
// })
}).catch(err => {
// uni.showToast({
// title: "保存成功",
// icon: "none"
// })
})
}
}
xhr.send(form)
})
}
}
}
</script>
@ -95,7 +219,7 @@ export default {
}
}
.share {
.share-img {
animation: jello-horizontal 3.2s both infinite;
position: fixed;
@ -196,4 +320,128 @@ export default {
}
}
}
.share_cover {
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
z-index: 100000;
.share_cover_word {
color: #FFFFFF;
font-size: 48rpx;
width: 60%;
margin: 400rpx auto;
text-align: center;
line-height: 40px;
}
.share_cover_arrow {
position: absolute;
right: 0;
top: 0;
width: 300rpx;
height: 400rpx;
}
}
.share {
min-height: 100vh;
overflow-y: scroll;
padding: 278rpx 0;
z-index: 2;
position: fixed;
top: 0;
left: 0;
right: 0;
&-mask {
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&-page {
width: fit-content;
overflow: scroll;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
right: 0;
&>image {
width: 520rpx;
height: auto;
display: block;
border: 6rpx solid #F8E3CF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(19, 1, 2, 0.71);
margin: auto;
}
&__btn {
display: flex;
justify-content: center;
padding-top: 52rpx;
&>view {
width: 230rpx;
height: 66rpx;
background: linear-gradient(0deg, #EFC495, #E9BC8A);
border-radius: 34rpx;
text-align: center;
font-weight: 400;
line-height: 66rpx;
font-size: 26rpx;
letter-spacing: 8rpx;
color: #C93E31;
}
&--share {
margin-right: 60rpx;
}
}
}
}
.fade-in {
animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-out {
animation: fade-out .8s ease-out both;
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>

BIN
static/toShare.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

Write Preview
Loading…
Cancel
Save