|
|
|
@ -1,8 +1,8 @@ |
|
|
|
<template> |
|
|
|
<view class="wrap"> |
|
|
|
<view class="stabar"></view> |
|
|
|
<view class="secbar"> |
|
|
|
<view class="title">恭喜完成演练！</view> |
|
|
|
<view class="secbar"> |
|
|
|
<view class="title">恭喜完成演练！</view> |
|
|
|
</view> |
|
|
|
<view class="marsk" v-if="showLayer"></view> |
|
|
|
<view class="popup-layer" v-if="showMedal"> |
|
|
|
@ -10,114 +10,131 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="mainwrap2"> |
|
|
|
<view class="question-wrap"> |
|
|
|
<view class="question-list"> |
|
|
|
<view :class="item.correct === 0 ? 'question-item erritem':'question-item'" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)"> |
|
|
|
<span class="question-num">{{i+1}}</span> |
|
|
|
</view> |
|
|
|
<!-- <view class="question-item erritem" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)"> |
|
|
|
<view class="question-wrap"> |
|
|
|
<view class="question-list"> |
|
|
|
<view :class="item.correct === 0 ? 'question-item erritem':'question-item'" |
|
|
|
v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)"> |
|
|
|
<span class="question-num">{{i+1}}</span> |
|
|
|
</view> |
|
|
|
<!-- <view class="question-item erritem" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)"> |
|
|
|
<span class="question-num">{{i+1}}</span> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="answer-content"> |
|
|
|
<view class="qucont">{{ask}}</view> |
|
|
|
<view class="youans"><label>您的答案：</label>{{answer}}</view> |
|
|
|
<view class="corans"><label>正确答案：</label>{{correctAnswer}}</view> |
|
|
|
<view v-if="analysis!=='' && analysis!==null"> |
|
|
|
<view class="analys"><label>解析：</label> |
|
|
|
<view>{{analysis}}</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="answer-content"> |
|
|
|
<view class="qucont">{{ask}}</view> |
|
|
|
<view class="youans"><label>您的答案：</label>{{answer}}</view> |
|
|
|
<view class="corans"><label>正确答案：</label>{{correctAnswer}}</view> |
|
|
|
<view v-if="analysis!=='' && analysis!==null"> |
|
|
|
<view class="analys"><label>解析：</label> |
|
|
|
<view>{{analysis}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="question-record"> |
|
|
|
<label>演练记录：</label> |
|
|
|
<view class="list"> |
|
|
|
<view class="item" v-for="(item, i) in recordList" :key="i"> |
|
|
|
<span>{{item.createTime}}</span> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="backIndex"> |
|
|
|
<button @click="backIndex()">返回首页</button> |
|
|
|
</view> |
|
|
|
<view class="perinfo"> |
|
|
|
<view class="myitem"> |
|
|
|
<!-- <label><button open-type="share"></button>炫耀一下</label> --> |
|
|
|
<view @click="shareUser()"><label> |
|
|
|
<image src="/static/images/btn-xy.png"></image> |
|
|
|
</label>炫耀一下</view> |
|
|
|
</view> |
|
|
|
<view class="myitem"> |
|
|
|
<view @click="review()"><label> |
|
|
|
<image src="/static/images/btn-hg.png"></image> |
|
|
|
</label>演练回顾</view> |
|
|
|
</view> |
|
|
|
<view class="myitem"> |
|
|
|
<view @click="reChallenge()"><label> |
|
|
|
<image src="/static/images/btn-cx.png"></image> |
|
|
|
</label>重新挑战</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="popup-share" v-if="showShare"> |
|
|
|
<label @click="closeShare()" class="close-button"></label> |
|
|
|
<label class="medimg"> |
|
|
|
<image src="/static/images/medal_1.png"></image> |
|
|
|
</label> |
|
|
|
<view class="congrat">恭喜你获得1枚成就勋章！</view> |
|
|
|
<view class="perinfo"> |
|
|
|
<view class="myitem"> |
|
|
|
<view @click=""><label><button open-type="share"></button> |
|
|
|
<image src="/static/images/btn-wx.png"></image> |
|
|
|
</label>分享给微信好友</view> |
|
|
|
</view> |
|
|
|
<view class="myitem"> |
|
|
|
<view @click="formSubmit()"><label> |
|
|
|
<image src="/static/images/btn-ma.png"></image> |
|
|
|
</label>二维码邀请</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="question-record"> |
|
|
|
<label>演练记录：</label> |
|
|
|
<view class="list"> |
|
|
|
<view class="item" v-for="(item, i) in recordList" :key="i"> |
|
|
|
<span>{{item.createTime}}</span> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="backIndex"> |
|
|
|
<button @click="backIndex()">返回首页</button> |
|
|
|
</view> |
|
|
|
<view class="perinfo"> |
|
|
|
<view class="myitem"> |
|
|
|
<!-- <label><button open-type="share"></button>炫耀一下</label> --> |
|
|
|
<view @click="shareUser()"><label><image src="/static/images/btn-xy.png"></image></label>炫耀一下</view> |
|
|
|
</view> |
|
|
|
<view class="myitem"> |
|
|
|
<view @click="review()"><label><image src="/static/images/btn-hg.png"></image></label>演练回顾</view> |
|
|
|
</view> |
|
|
|
<view class="myitem"> |
|
|
|
<view @click="reChallenge()"><label><image src="/static/images/btn-cx.png"></image></label>重新挑战</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="popup-share" v-if="showShare"> |
|
|
|
<label @click="closeShare()" class="close-button"></label> |
|
|
|
<label class="medimg"><image src="/static/images/medal_1.png"></image></label> |
|
|
|
<view class="congrat">恭喜你获得1枚成就勋章！</view> |
|
|
|
<view class="perinfo"> |
|
|
|
<view class="myitem"> |
|
|
|
<view @click=""><label><button open-type="share"></button><image src="/static/images/btn-wx.png"></image></label>分享给微信好友</view> |
|
|
|
</view> |
|
|
|
<view class="myitem"> |
|
|
|
<view @click="formSubmit()"><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<canvas class="shengcheng" id="photo" type="2d"></canvas> |
|
|
|
<canvas class="shengcheng" id="photo" type="2d"></canvas> |
|
|
|
<!--生成海报后的图 --> |
|
|
|
<view v-if="showLoad"> |
|
|
|
<view class='imagePathBox'> |
|
|
|
<!-- <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> --> |
|
|
|
<view class="btnbox"> |
|
|
|
<button class='cancel' @click="cancel()">取消</button> |
|
|
|
<button class='baocun' @click="saveImage()">保存至相册</button> |
|
|
|
</view> |
|
|
|
<!-- <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> --> |
|
|
|
<view class="btnbox"> |
|
|
|
<button class='cancel' @click="cancel()">取消</button> |
|
|
|
<button class='baocun' @click="saveImage()">保存至相册</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="mask"></view> |
|
|
|
</view> |
|
|
|
<view class="mask"></view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState, mapMutations, mapGetters } from 'vuex' |
|
|
|
import { |
|
|
|
mapState, |
|
|
|
mapMutations, |
|
|
|
mapGetters |
|
|
|
} from 'vuex' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
"questionFreId":"8eefa1161f4643ccaed9404949911a39", |
|
|
|
"roleId":"8ad2af376ec64f519147030497086a96", |
|
|
|
"sceneId": "d6b424abc2d44f2888a4d9a3d52f9f09", |
|
|
|
achieveMedalImg:"", |
|
|
|
questionList: [], |
|
|
|
recordList: [], |
|
|
|
"ask":"", |
|
|
|
"answer":"", |
|
|
|
"correctAnswer":"", |
|
|
|
"analysis":"", |
|
|
|
"showLayer":true, |
|
|
|
"showAnlysisc":false, |
|
|
|
"showMedal":true, |
|
|
|
"showShare":false, |
|
|
|
"showLoad":false, |
|
|
|
canvas: null, //canvas 对象 |
|
|
|
tempFilePath: "", |
|
|
|
"imageQR":'' |
|
|
|
"questionFreId": "8eefa1161f4643ccaed9404949911a39", |
|
|
|
"roleId": "8ad2af376ec64f519147030497086a96", |
|
|
|
"sceneId": "d6b424abc2d44f2888a4d9a3d52f9f09", |
|
|
|
achieveMedalImg: "", |
|
|
|
questionList: [], |
|
|
|
recordList: [], |
|
|
|
"ask": "", |
|
|
|
"answer": "", |
|
|
|
"correctAnswer": "", |
|
|
|
"analysis": "", |
|
|
|
"showLayer": true, |
|
|
|
"showAnlysisc": false, |
|
|
|
"showMedal": true, |
|
|
|
"showShare": false, |
|
|
|
"showLoad": false, |
|
|
|
canvas: null, //canvas 对象 |
|
|
|
tempFilePath: "", |
|
|
|
"imageQR": '' |
|
|
|
}; |
|
|
|
}, |
|
|
|
//分享到好友 |
|
|
|
onShareAppMessage(res) { |
|
|
|
if (res.from === 'button') {// 来自页面内分享按钮 |
|
|
|
console.log(res.target) |
|
|
|
} |
|
|
|
return { |
|
|
|
title: '自定义分享标题', |
|
|
|
path: '/pages/index/index' |
|
|
|
} |
|
|
|
onShareAppMessage(res) { |
|
|
|
if (res.from === 'button') { // 来自页面内分享按钮 |
|
|
|
console.log(res.target) |
|
|
|
} |
|
|
|
return { |
|
|
|
title: '自定义分享标题', |
|
|
|
path: '/pages/index/index' |
|
|
|
} |
|
|
|
}, |
|
|
|
//分享到朋友圈 |
|
|
|
onShareTimeline(res) { |
|
|
|
@ -129,13 +146,13 @@ |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
this.timer = setTimeout(() => { |
|
|
|
this.showMedal = false |
|
|
|
this.showLayer = false |
|
|
|
clearTimeout(this.timer) |
|
|
|
this.showMedal = false |
|
|
|
this.showLayer = false |
|
|
|
clearTimeout(this.timer) |
|
|
|
}, 2000) |
|
|
|
this.roleId = options.roleId !=null ? options.roleId : this.roleId |
|
|
|
this.questionFreId = options.questionFreId!=null ? options.questionFreId : this.questionFreId |
|
|
|
this.sceneId = options.sceneId!=null ? options.sceneId : this.sceneId; |
|
|
|
this.roleId = options.roleId != null ? options.roleId : this.roleId |
|
|
|
this.questionFreId = options.questionFreId != null ? options.questionFreId : this.questionFreId |
|
|
|
this.sceneId = options.sceneId != null ? options.sceneId : this.sceneId; |
|
|
|
this.getQuestionList() |
|
|
|
this.getRecordList() |
|
|
|
this.editUserMedal(); |
|
|
|
@ -185,7 +202,10 @@ |
|
|
|
async getRecordList() { |
|
|
|
const { |
|
|
|
data: res |
|
|
|
} = await uni.$http.post('/small/questionFre/listAll',{roleId:this.roleId,userId:this.userId}) |
|
|
|
} = await uni.$http.post('/small/questionFre/listAll', { |
|
|
|
roleId: this.roleId, |
|
|
|
userId: this.userId |
|
|
|
}) |
|
|
|
if (!res.success) return uni.$showMsg() |
|
|
|
this.recordList = res.data |
|
|
|
|
|
|
|
@ -196,11 +216,11 @@ |
|
|
|
data: res |
|
|
|
} = await uni.$http.post('/small/wechat/editUserMedal', { |
|
|
|
medal: this.sceneId, |
|
|
|
guid: this.userId |
|
|
|
guid: this.userId |
|
|
|
}) |
|
|
|
if (!res.success) return uni.$showMsg() |
|
|
|
this.achieveMedalImg = uni.$http.baseUrl + res.data |
|
|
|
if (res.data == null || res.data =="") { |
|
|
|
this.achieveMedalImg = uni.$http.baseUrl + res.data |
|
|
|
if (res.data == null || res.data == "") { |
|
|
|
this.showMedal = false |
|
|
|
this.showLayer = false |
|
|
|
} |
|
|
|
@ -211,7 +231,7 @@ |
|
|
|
data: res |
|
|
|
} = await uni.$http.post('/small/scene/manage/getQRCode') |
|
|
|
if (!res.success) return uni.$showMsg() |
|
|
|
this.imageQR = uni.$http.baseUrl + res.data |
|
|
|
this.imageQR = uni.$http.baseUrl + res.data |
|
|
|
//uni.$showMsg('数据请求成功！') |
|
|
|
}, |
|
|
|
backIndex() { |
|
|
|
@ -226,167 +246,168 @@ |
|
|
|
reChallenge() { |
|
|
|
uni.navigateTo({ |
|
|
|
// url: '/subpkg/rechallenge/rechallenge?questionFreId=' + this.questionFreId |
|
|
|
url: '/subpkg/practice/practice?roleId='+this.roleId+'&sceneId='+this.sceneId |
|
|
|
url: '/subpkg/practice/practice?roleId=' + this.roleId + '&sceneId=' + this.sceneId |
|
|
|
}) |
|
|
|
}, |
|
|
|
review() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subpkg/review/review?questionFreId=' + this.questionFreId +'&sceneId=' + this.sceneId +"&roleId=" + this.roleId |
|
|
|
url: '/subpkg/review/review?questionFreId=' + this.questionFreId + '&sceneId=' + this.sceneId + |
|
|
|
"&roleId=" + this.roleId |
|
|
|
}) |
|
|
|
}, |
|
|
|
closeShare() { |
|
|
|
this.showShare = false |
|
|
|
this.showLayer = false |
|
|
|
}, |
|
|
|
formSubmit(){ |
|
|
|
wx.createSelectorQuery() |
|
|
|
.select('#photo') // 在 canvas的 id |
|
|
|
.fields({ |
|
|
|
node: true, |
|
|
|
size: true |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
// Canvas 对象 |
|
|
|
const canvas = res[0].node |
|
|
|
this.canvas = canvas |
|
|
|
// 渲染上下文 |
|
|
|
const context = canvas.getContext('2d') |
|
|
|
// canvas 画布的实际绘制宽高 |
|
|
|
const width = res[0].width |
|
|
|
const height = res[0].height |
|
|
|
// 初始化画布大小 |
|
|
|
const dpr = wx.getWindowInfo().pixelRatio |
|
|
|
canvas.width = width * dpr |
|
|
|
canvas.height = height * dpr |
|
|
|
context.scale(dpr, dpr) |
|
|
|
// 清空画布 |
|
|
|
context.clearRect(0, 0, width, height) |
|
|
|
//canvas背景色 |
|
|
|
context.fillStyle = '#3c9cff'; |
|
|
|
context.fillStyle ="#FFF" // 背景颜色 |
|
|
|
context.fillRect(0, 0, 500, 800) // 667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高 |
|
|
|
//绘制左下角文字 |
|
|
|
context.fontSize = 12; |
|
|
|
context.fillStyle = '#333'; |
|
|
|
context.textAlign ='left'; |
|
|
|
context.fillText("长按识别小程序～", 10, 520); |
|
|
|
context.stroke(); |
|
|
|
// 图片对象 |
|
|
|
const image = canvas.createImage() |
|
|
|
image.src = '/static/images/share_bg.png' |
|
|
|
// 图片对象 |
|
|
|
const imageQR = canvas.createImage() |
|
|
|
imageQR.src = this.imageQR |
|
|
|
image.onload = () => { |
|
|
|
// 将图片绘制到 canvas 上 |
|
|
|
context.drawImage(image, 0, 0, 350, 450) |
|
|
|
context.drawImage(imageQR, 200, 450, 130, 120) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.showLoad = true |
|
|
|
this.showShare = false |
|
|
|
this.showLayer = false |
|
|
|
formSubmit() { |
|
|
|
wx.createSelectorQuery() |
|
|
|
.select('#photo') // 在 canvas的 id |
|
|
|
.fields({ |
|
|
|
node: true, |
|
|
|
size: true |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
// Canvas 对象 |
|
|
|
const canvas = res[0].node |
|
|
|
this.canvas = canvas |
|
|
|
// 渲染上下文 |
|
|
|
const context = canvas.getContext('2d') |
|
|
|
// canvas 画布的实际绘制宽高 |
|
|
|
const width = res[0].width |
|
|
|
const height = res[0].height |
|
|
|
// 初始化画布大小 |
|
|
|
const dpr = wx.getWindowInfo().pixelRatio |
|
|
|
canvas.width = width * dpr |
|
|
|
canvas.height = height * dpr |
|
|
|
context.scale(dpr, dpr) |
|
|
|
// 清空画布 |
|
|
|
context.clearRect(0, 0, width, height) |
|
|
|
//canvas背景色 |
|
|
|
context.fillStyle = '#3c9cff'; |
|
|
|
context.fillStyle = "#FFF" // 背景颜色 |
|
|
|
context.fillRect(0, 0, 500, 800) // 667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高 |
|
|
|
//绘制左下角文字 |
|
|
|
context.fontSize = 12; |
|
|
|
context.fillStyle = '#333'; |
|
|
|
context.textAlign = 'left'; |
|
|
|
context.fillText("长按识别小程序～", 10, 520); |
|
|
|
context.stroke(); |
|
|
|
// 图片对象 |
|
|
|
const image = canvas.createImage() |
|
|
|
image.src = '/static/images/share_bg.png' |
|
|
|
// 图片对象 |
|
|
|
const imageQR = canvas.createImage() |
|
|
|
imageQR.src = this.imageQR |
|
|
|
image.onload = () => { |
|
|
|
// 将图片绘制到 canvas 上 |
|
|
|
context.drawImage(image, 0, 0, 350, 450) |
|
|
|
context.drawImage(imageQR, 200, 450, 130, 120) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.showLoad = true |
|
|
|
this.showShare = false |
|
|
|
this.showLayer = false |
|
|
|
}, |
|
|
|
cancel(){ |
|
|
|
cancel() { |
|
|
|
const canvas = this.canvas; |
|
|
|
const ctx = canvas.getContext("2d"); |
|
|
|
ctx.clearRect(0, 0, 500, 800) |
|
|
|
ctx.clearRect(0, 0, 500, 800) |
|
|
|
this.showLoad = false |
|
|
|
}, |
|
|
|
saveImage() { |
|
|
|
uni.canvasToTempFilePath({ |
|
|
|
canvasId: 'photo', |
|
|
|
destWidth: 286, |
|
|
|
destHeight: 417, |
|
|
|
canvas: this.canvas, |
|
|
|
success: (res) => { |
|
|
|
this.tempFilePath = res.tempFilePath |
|
|
|
uni.saveImageToPhotosAlbum({ |
|
|
|
filePath: res.tempFilePath, |
|
|
|
success: (res)=> { |
|
|
|
wx.showToast({ |
|
|
|
title: '保存成功', |
|
|
|
}) |
|
|
|
this.showLoad = false |
|
|
|
const canvas = this.canvas; |
|
|
|
const ctx = canvas.getContext("2d"); |
|
|
|
ctx.clearRect(0, 0, 500, 800) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
uni.canvasToTempFilePath({ |
|
|
|
canvasId: 'photo', |
|
|
|
destWidth: 286, |
|
|
|
destHeight: 417, |
|
|
|
canvas: this.canvas, |
|
|
|
success: (res) => { |
|
|
|
this.tempFilePath = res.tempFilePath |
|
|
|
uni.saveImageToPhotosAlbum({ |
|
|
|
filePath: res.tempFilePath, |
|
|
|
success: (res) => { |
|
|
|
wx.showToast({ |
|
|
|
title: '保存成功', |
|
|
|
}) |
|
|
|
this.showLoad = false |
|
|
|
const canvas = this.canvas; |
|
|
|
const ctx = canvas.getContext("2d"); |
|
|
|
ctx.clearRect(0, 0, 500, 800) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
formSubmit(){ |
|
|
|
wx.createSelectorQuery() |
|
|
|
.select('#photo') // 在 canvas的 id |
|
|
|
.fields({ |
|
|
|
node: true, |
|
|
|
size: true |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
// Canvas 对象 |
|
|
|
const canvas = res[0].node |
|
|
|
this.canvas = canvas |
|
|
|
// 渲染上下文 |
|
|
|
const context = canvas.getContext('2d') |
|
|
|
// canvas 画布的实际绘制宽高 |
|
|
|
const width = res[0].width |
|
|
|
const height = res[0].height |
|
|
|
// 初始化画布大小 |
|
|
|
const dpr = wx.getWindowInfo().pixelRatio |
|
|
|
canvas.width = width * dpr |
|
|
|
canvas.height = height * dpr |
|
|
|
context.scale(dpr, dpr) |
|
|
|
// 清空画布 |
|
|
|
context.clearRect(0, 0, width, height) |
|
|
|
//canvas背景色 |
|
|
|
context.fillStyle = '#3c9cff'; |
|
|
|
context.fillStyle ="#FFF" // 背景颜色 |
|
|
|
context.fillRect(0, 0, 500, 800) // 667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高 |
|
|
|
//绘制左下角文字 |
|
|
|
context.fontSize = 16; |
|
|
|
context.fillStyle = '#333'; |
|
|
|
context.textAlign ='left'; |
|
|
|
context.fillText("长按识别小程序～", 16, 520); |
|
|
|
context.stroke(); |
|
|
|
// 图片对象 |
|
|
|
const image = canvas.createImage() |
|
|
|
image.src = '/static/images/share_bg.png' |
|
|
|
// 图片对象 |
|
|
|
const imageQR = canvas.createImage() |
|
|
|
imageQR.src = this.imageQR |
|
|
|
image.onload = () => { |
|
|
|
// 将图片绘制到 canvas 上 |
|
|
|
context.drawImage(image, 0, 0, 350, 450) |
|
|
|
context.drawImage(imageQR, 200, 450, 130, 120) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.showLoad = true |
|
|
|
this.showShare = false |
|
|
|
this.showLayer = false |
|
|
|
formSubmit() { |
|
|
|
wx.createSelectorQuery() |
|
|
|
.select('#photo') // 在 canvas的 id |
|
|
|
.fields({ |
|
|
|
node: true, |
|
|
|
size: true |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
// Canvas 对象 |
|
|
|
const canvas = res[0].node |
|
|
|
this.canvas = canvas |
|
|
|
// 渲染上下文 |
|
|
|
const context = canvas.getContext('2d') |
|
|
|
// canvas 画布的实际绘制宽高 |
|
|
|
const width = res[0].width |
|
|
|
const height = res[0].height |
|
|
|
// 初始化画布大小 |
|
|
|
const dpr = wx.getWindowInfo().pixelRatio |
|
|
|
canvas.width = width * dpr |
|
|
|
canvas.height = height * dpr |
|
|
|
context.scale(dpr, dpr) |
|
|
|
// 清空画布 |
|
|
|
context.clearRect(0, 0, width, height) |
|
|
|
//canvas背景色 |
|
|
|
context.fillStyle = '#3c9cff'; |
|
|
|
context.fillStyle = "#FFF" // 背景颜色 |
|
|
|
context.fillRect(0, 0, 500, 800) // 667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高 |
|
|
|
//绘制左下角文字 |
|
|
|
context.fontSize = 16; |
|
|
|
context.fillStyle = '#333'; |
|
|
|
context.textAlign = 'left'; |
|
|
|
context.fillText("长按识别小程序～", 16, 520); |
|
|
|
context.stroke(); |
|
|
|
// 图片对象 |
|
|
|
const image = canvas.createImage() |
|
|
|
image.src = '/static/images/share_bg.png' |
|
|
|
// 图片对象 |
|
|
|
const imageQR = canvas.createImage() |
|
|
|
imageQR.src = this.imageQR |
|
|
|
image.onload = () => { |
|
|
|
// 将图片绘制到 canvas 上 |
|
|
|
context.drawImage(image, 0, 0, 350, 450) |
|
|
|
context.drawImage(imageQR, 200, 450, 130, 120) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.showLoad = true |
|
|
|
this.showShare = false |
|
|
|
this.showLayer = false |
|
|
|
}, |
|
|
|
saveImage() { |
|
|
|
uni.canvasToTempFilePath({ |
|
|
|
canvasId: 'photo', |
|
|
|
destWidth: 286, |
|
|
|
destHeight: 417, |
|
|
|
canvas: this.canvas, |
|
|
|
success: (res) => { |
|
|
|
this.tempFilePath = res.tempFilePath |
|
|
|
uni.saveImageToPhotosAlbum({ |
|
|
|
filePath: res.tempFilePath, |
|
|
|
success: (res)=> { |
|
|
|
wx.showToast({ |
|
|
|
title: '保存成功', |
|
|
|
}) |
|
|
|
this.showLoad = false |
|
|
|
const canvas = this.canvas; |
|
|
|
const ctx = canvas.getContext("2d"); |
|
|
|
ctx.clearRect(0, 0, 500, 800) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
uni.canvasToTempFilePath({ |
|
|
|
canvasId: 'photo', |
|
|
|
destWidth: 286, |
|
|
|
destHeight: 417, |
|
|
|
canvas: this.canvas, |
|
|
|
success: (res) => { |
|
|
|
this.tempFilePath = res.tempFilePath |
|
|
|
uni.saveImageToPhotosAlbum({ |
|
|
|
filePath: res.tempFilePath, |
|
|
|
success: (res) => { |
|
|
|
wx.showToast({ |
|
|
|
title: '保存成功', |
|
|
|
}) |
|
|
|
this.showLoad = false |
|
|
|
const canvas = this.canvas; |
|
|
|
const ctx = canvas.getContext("2d"); |
|
|
|
ctx.clearRect(0, 0, 500, 800) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
itemClickHandler(item) { |
|
|
|
if (item !== "") { |
|
|
|
@ -464,10 +485,11 @@ |
|
|
|
width: 33%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.secbar { |
|
|
|
height: 4vh; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.title { |
|
|
|
display: inline-block; |
|
|
|
margin-top: 1.75vh; |
|
|
|
@ -561,9 +583,9 @@ |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
label { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 2; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 2; |
|
|
|
} |
|
|
|
|
|
|
|
.list { |
|
|
|
@ -575,9 +597,10 @@ |
|
|
|
.item { |
|
|
|
margin: 2% 0; |
|
|
|
border-bottom: 1px dotted #ddd; |
|
|
|
|
|
|
|
label { |
|
|
|
color: #666; |
|
|
|
font-size: 1.0rem; |
|
|
|
font-size: 1.0rem; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -622,7 +645,7 @@ |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.close-button { |
|
|
|
position: absolute; |
|
|
|
top: -60rpx; |
|
|
|
@ -634,77 +657,79 @@ |
|
|
|
border-radius: 50%; |
|
|
|
transform: rotate(45deg); |
|
|
|
} |
|
|
|
|
|
|
|
.close-button:before, .close-button:after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
background: #333; |
|
|
|
border-radius: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
|
|
.close-button:before, |
|
|
|
.close-button:after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
background: #333; |
|
|
|
border-radius: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.close-button:before { |
|
|
|
height: 24rpx; |
|
|
|
width: 4rpx; |
|
|
|
height: 24rpx; |
|
|
|
width: 4rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.close-button:after { |
|
|
|
height: 4rpx; |
|
|
|
width: 24rpx; |
|
|
|
height: 4rpx; |
|
|
|
width: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.imagePathBox{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(0,0,0,0.6); |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|
.shengcheng{ |
|
|
|
width: 350px; |
|
|
|
height: 580px; |
|
|
|
position: absolute; |
|
|
|
top: 45%; |
|
|
|
left: 50%; |
|
|
|
-webkit-transform: translate(-50%, -50%); |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
.btnbox { |
|
|
|
display: flex; |
|
|
|
width: 70%; |
|
|
|
height: 90rpx; |
|
|
|
position: absolute; |
|
|
|
bottom: 10%; |
|
|
|
left: 15%; |
|
|
|
} |
|
|
|
.baocun ,.cancel{ |
|
|
|
display: block; |
|
|
|
width: 45%; |
|
|
|
height: 90rpx; |
|
|
|
padding: 0; |
|
|
|
line-height: 90rpx; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 28rpx; |
|
|
|
border-radius: 50rpx; |
|
|
|
background: #1367fe; |
|
|
|
border: 1px solid #1367fe; |
|
|
|
} |
|
|
|
|
|
|
|
.cancel { |
|
|
|
display: inline-block; |
|
|
|
background-color: #fff; |
|
|
|
color: #1367fe; |
|
|
|
} |
|
|
|
|
|
|
|
button[class="baocun"]::after{ |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.imagePathBox { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|
|
|
|
|
.shengcheng { |
|
|
|
width: 350px; |
|
|
|
height: 580px; |
|
|
|
position: absolute; |
|
|
|
top: 45%; |
|
|
|
left: 50%; |
|
|
|
-webkit-transform: translate(-50%, -50%); |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.btnbox { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
position: absolute; |
|
|
|
bottom: 10%; |
|
|
|
left: 10%; |
|
|
|
width: 80%; |
|
|
|
height: 90rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.baocun, |
|
|
|
.cancel { |
|
|
|
display: inline-block; |
|
|
|
width: 60%; |
|
|
|
padding: 0; |
|
|
|
line-height: 90rpx; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 28rpx; |
|
|
|
border-radius: 50rpx; |
|
|
|
background: #1367fe; |
|
|
|
border: 1px solid #1367fe; |
|
|
|
} |
|
|
|
|
|
|
|
.cancel { |
|
|
|
width: 35%; |
|
|
|
background-color: #fff; |
|
|
|
color: #1367fe; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
