kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

型号适配

h5_css
蟑螂恶霸 3 years ago
parent
d1cd66dd20
commit
3c5a2eea4d
2 changed files with 347 additions and 316 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      static/base_css.css
  2. 657
      subpkg/complete/complete.vue

6
static/base_css.css
View File

@ -422,12 +422,18 @@ h3.contit span {
font-weight: 600; font-weight: 600;
} }
.myitem {
display: flex;
justify-content: center;
}
.myitem span { .myitem span {
position: relative; position: relative;
margin: 1% 10% 0 0; margin: 1% 10% 0 0;
padding-right: 0.6rem; padding-right: 0.6rem;
font-size: 0.9rem; font-size: 0.9rem;
color: #666; color: #666;
white-space: nowrap;
} }
.myitem span b { .myitem span b {

657
subpkg/complete/complete.vue
View File

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