You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
679 lines
16 KiB
679 lines
16 KiB
<template>
|
|
<view class="wrap">
|
|
<view class="stabar"></view>
|
|
<view class="secbar">
|
|
<view class="title">恭喜完成演练！</view>
|
|
</view>
|
|
<view class="marsk" v-if="showLayer"></view>
|
|
<view class="popup-layer" v-if="showMedal">
|
|
<image class="animg" src="/static/images/joy.png"></image>
|
|
</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)">
|
|
<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>
|
|
</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>
|
|
<!--生成海报后的图 -->
|
|
<view v-if="showLoad">
|
|
<view class='imagePathBox'>
|
|
<!-- <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> -->
|
|
<button class='baocun' @click="saveImage()">保存至相册</button>
|
|
</view>
|
|
<view class="mask"></view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations, mapGetters } from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
"questionFreId":"8eefa1161f4643ccaed9404949911a39",
|
|
"roleId":"8ad2af376ec64f519147030497086a96",
|
|
"userId":"",
|
|
"sceneId": "",
|
|
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'
|
|
}
|
|
},
|
|
//分享到朋友圈
|
|
onShareTimeline(res) {
|
|
return {
|
|
title: "快来和我一起答题吧",
|
|
type: 0,
|
|
summary: "",
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.timer = setTimeout(() => {
|
|
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;
|
|
this.getQuestionList()
|
|
this.getRecordList()
|
|
this.editUserMedal();
|
|
this.getQR();
|
|
},
|
|
computed: {
|
|
...mapState('m_user', ['userId'])
|
|
},
|
|
methods: {
|
|
async share() {
|
|
await uni.share({
|
|
title: "快来和我一起答题吧",
|
|
type: 0,
|
|
summary: "",
|
|
success() {
|
|
console.log('分享成功')
|
|
}
|
|
})
|
|
},
|
|
async getQuestionList() {
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/questionAnswer/listAll', {
|
|
questionFreId: this.questionFreId
|
|
})
|
|
if (!res.success) return uni.$showMsg()
|
|
this.questionList = res.data
|
|
if (this.questionList.length != 0) {
|
|
this.ask = this.questionList[0].ask;
|
|
this.answer = this.questionList[0].answer;
|
|
this.correctAnswer = this.questionList[0].correctAnswer;
|
|
this.analysis = this.questionList[0].analysis
|
|
}
|
|
|
|
//uni.$showMsg('数据请求成功！')
|
|
},
|
|
async getRecordList() {
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/questionFre/listAll',{roleId:this.roleId,userId:this.userId})
|
|
if (!res.success) return uni.$showMsg()
|
|
this.recordList = res.data
|
|
|
|
//uni.$showMsg('数据请求成功！')
|
|
},
|
|
async editUserMedal() {
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/wechat/editUserMedal', {
|
|
medal: this.sceneId,
|
|
guid: "2752c89b6ca843558991f888f8949da2",
|
|
// guid: this.userId,
|
|
})
|
|
if (!res.success) return uni.$showMsg()
|
|
// this.recordList = res.data
|
|
|
|
this.recordList = res.data
|
|
|
|
//uni.$showMsg('数据请求成功！')
|
|
},
|
|
async getQR() {
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/scene/manage/getQRCode')
|
|
if (!res.success) return uni.$showMsg()
|
|
this.imageQR = uni.$http.baseUrl + res.data
|
|
//uni.$showMsg('数据请求成功！')
|
|
},
|
|
backIndex() {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
shareUser() {
|
|
this.showShare = true
|
|
this.showLayer = true
|
|
},
|
|
reChallenge() {
|
|
uni.navigateTo({
|
|
// url: '/subpkg/rechallenge/rechallenge?questionFreId=' + this.questionFreId
|
|
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
|
|
})
|
|
},
|
|
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
|
|
},
|
|
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)
|
|
}
|
|
})
|
|
}
|
|
});
|
|
},
|
|
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)
|
|
}
|
|
})
|
|
}
|
|
});
|
|
},
|
|
itemClickHandler(item) {
|
|
if (item !== "") {
|
|
this.ask = item.ask
|
|
this.answer = item.answer
|
|
this.correctAnswer = item.correctAnswer
|
|
this.analysis = item.analysis
|
|
this.showAnlysisc = true
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import url("@/static/base_css.css");
|
|
|
|
/* 设置弹出层 */
|
|
.marsk {
|
|
// display: none;
|
|
position: absolute;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.popup-layer,
|
|
.popup-share {
|
|
//display: none;
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 600rpx;
|
|
height: 400rpx;
|
|
padding: 30rpx;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.popup-layer .animg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.popup-share {
|
|
height: 500rpx;
|
|
background-color: #e4eafe;
|
|
border-radius: 30rpx;
|
|
|
|
.medimg {
|
|
position: absolute;
|
|
top: -15%;
|
|
left: 50%;
|
|
transform: translate(-50%, -10%);
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.congrat {
|
|
margin: 25% auto 10%;
|
|
color: #ff6b08;
|
|
font-size: 40rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.myitem {
|
|
margin: 0;
|
|
width: 33%;
|
|
}
|
|
}
|
|
|
|
.secbar {
|
|
height: 4vh;
|
|
text-align: center;
|
|
.title {
|
|
display: inline-block;
|
|
margin-top: 1.75vh;
|
|
}
|
|
}
|
|
|
|
.question-wrap {
|
|
position: relative;
|
|
margin: 2vh 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.question-list {
|
|
/*display: flex;
|
|
justify-content: space-around;*/
|
|
margin: 0 2%;
|
|
|
|
.question-item {
|
|
display: inline-block;
|
|
margin: 2% 1.5%;
|
|
padding: 1% 3%;
|
|
/* width: 60rpx; */
|
|
/* height: 60rpx; */
|
|
align-items: center;
|
|
background-color: #18c569;
|
|
border-radius: 20rpx;
|
|
color: #fff;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.erritem {
|
|
background-color: #fb3737;
|
|
}
|
|
}
|
|
|
|
.answer-content {
|
|
//display: none;
|
|
position: relative;
|
|
z-index: 100;
|
|
margin: 2% 3%;
|
|
padding: 2%;
|
|
width: 90%;
|
|
height: 25vh;
|
|
background: #fff;
|
|
border: 1px solid #18c569;
|
|
border-radius: 20rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.qucont {
|
|
margin: 1% 0 3% 0;
|
|
color: #000;
|
|
font-family: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.corans {
|
|
color: #18c569;
|
|
font-weight: bold;
|
|
|
|
label {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
.youans {
|
|
margin: 2% 0;
|
|
color: #999;
|
|
}
|
|
|
|
.analys {
|
|
margin: 3% 0;
|
|
|
|
label {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
view {
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.question-record {
|
|
margin: 3% 3% 5%;
|
|
width: 94%;
|
|
height: 23vh;
|
|
overflow: hidden;
|
|
|
|
label {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 2;
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
height: calc(100% - 80rpx);
|
|
line-height: 1.75;
|
|
overflow-y: auto;
|
|
|
|
.item {
|
|
margin: 2% 0;
|
|
border-bottom: 1px dotted #ddd;
|
|
label {
|
|
color: #666;
|
|
font-size: 1.0rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.backIndex {
|
|
margin: 2% auto;
|
|
width: 86%;
|
|
|
|
button {
|
|
background-color: #1367fe !important;
|
|
border-radius: 50rpx !important;
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
.perinfo {
|
|
display: flex;
|
|
margin: 5% 0;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.myitem {
|
|
margin: 3% 8%;
|
|
width: 15%;
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
.myitem>view>label {
|
|
display: block;
|
|
position: relative;
|
|
margin: 20rpx auto;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.close-button {
|
|
position: absolute;
|
|
top: -60rpx;
|
|
right: -10rpx;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background-color: rgba(255, 255, 255, .5);
|
|
border: 1rpx solid rgba(255, 255, 255, .7);
|
|
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 {
|
|
height: 24rpx;
|
|
width: 4rpx;
|
|
}
|
|
|
|
.close-button:after {
|
|
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;
|
|
}
|
|
.baocun {
|
|
display: block;
|
|
width: 70%;
|
|
height: 90rpx;
|
|
padding: 0;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 10%;
|
|
left: 15%;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
border-radius: 50rpx;
|
|
background: #1367fe;
|
|
|
|
}
|
|
button[class="baocun"]::after{
|
|
border: 0;
|
|
}
|
|
</style>
|