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.
399 lines
8.8 KiB
399 lines
8.8 KiB
<template>
|
|
<view class="wrap">
|
|
<view class="stabar"></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="mainwrap3">
|
|
<view class="title">恭喜完成本次演练！</view>
|
|
<view class="question-wrap">
|
|
<view class="question-list">
|
|
<view class="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>{{answer}}</view>
|
|
<view class="analys"><label>解析：</label>
|
|
<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 class="closesty" @click="closeShare()"></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=""><label><button @tap="share"></button><image src="/static/images/btn-pyq.png"></image></label>分享到朋友圈</view>
|
|
</view>
|
|
<view class="myitem">
|
|
<view @click=""><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
"questionFreId":"59088ceb55644b03b8d0c7d48d2f7d39",
|
|
"roleId":"5f96b1baae1a47fbb17215a5dc46f5ce",
|
|
"sceneId": "",
|
|
questionList: [],
|
|
recordList: [],
|
|
"ask":"",
|
|
"answer":"",
|
|
"showLayer":true,
|
|
"showAnlysisc":false,
|
|
"showMedal":true,
|
|
"showShare":false,
|
|
};
|
|
},
|
|
//分享到好友
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') {// 来自页面内分享按钮
|
|
console.log(res.target)
|
|
}
|
|
return {
|
|
title: '自定义分享标题',
|
|
path: '/pages/home/home'
|
|
}
|
|
},
|
|
//分享到朋友圈
|
|
onShareTimeline(res) {
|
|
return {
|
|
title: "快来和我一起答题吧",
|
|
type: 0,
|
|
summary: "",
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.timer = setTimeout(() => {
|
|
this.showMedal = false
|
|
this.showLayer = false
|
|
clearTimeout(this.timer)
|
|
}, 1000)
|
|
//this.roleId = options.roleId
|
|
//this.questionFreId = options.questionFreId
|
|
this.getQuestionList()
|
|
this.getRecordList()
|
|
},
|
|
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;
|
|
}
|
|
|
|
//uni.$showMsg('数据请求成功！')
|
|
},
|
|
async getRecordList() {
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/questionFre/listAll',{roleId:this.roleId})
|
|
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})
|
|
if (!res.success) return uni.$showMsg()
|
|
// this.recordList = 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
|
|
})
|
|
},
|
|
review(){
|
|
uni.navigateTo({
|
|
url: '/subpkg/review/review?questionFreId='+this.questionFreId
|
|
})
|
|
},
|
|
closeShare(){
|
|
this.showShare = false
|
|
this.showLayer = false
|
|
},
|
|
itemClickHandler(item) {
|
|
if(item !== ""){
|
|
this.ask= item.ask
|
|
this.answer= item.answer
|
|
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, .35);
|
|
}
|
|
.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: 230rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.congrat {
|
|
margin: 25% auto 10%;
|
|
color: #ff6b08;
|
|
font-size: 40rpx;
|
|
text-align: center;
|
|
}
|
|
.myitem {
|
|
margin: 0;
|
|
width: 33%;
|
|
}
|
|
}
|
|
|
|
.mainwrap3 {
|
|
top: 56rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.title {
|
|
margin: 50rpx 0;
|
|
color: #333;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.question-wrap {
|
|
position: relative;
|
|
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%;
|
|
min-height: 400rpx;
|
|
background: #fff;
|
|
border: 1px solid #18c569;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.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: 25%;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
|