zdxtDrillProgram/subpkg/complete/complete.vue

<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="achieveMedalImg"></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> -->
				<view class="btnbox">
					<button class='cancel' @click="cancel()">取消</button>
					<button class='baocun' @click="saveImage()">保存至相册</button>
				</view>
			</view>
			<view class="mask"></view>
		</view>

	</view>
</template>

<script>
	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": ''
			};
		},
		//分享到好友
		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 != null ? options.sceneId : this.sceneId;
			this.getQuestionList()
			this.getRecordList()
			this.editUserMedal();
			this.updateScore();
			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 updateScore() {
				const {
					data: res
				} = await uni.$http.post('/small/questionAnswer/updateUserScore', {
					questionFreId: this.questionFreId,
					userId: this.userId
				})
				if (!res.success) return 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: this.userId
				})
				if (!res.success) return uni.$showMsg()
				this.achieveMedalImg = uni.$http.baseUrl + res.data
				if (res.data == null || res.data == "") {
					this.showMedal = false
					this.showLayer = false
				}
				//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
			},
			cancel() {
				const canvas = this.canvas;
				const ctx = canvas.getContext("2d");
				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)
							}
						})
					}
				});
			},
			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;
	}

	.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>