294 lines
8.1 KiB
Vue
294 lines
8.1 KiB
Vue
<template>
|
|
<div v-if="istrue" class="startanswer flex_column flex_items pos">
|
|
<!-- 中将 -->
|
|
<view class="mask flex_items flex_center" v-if="ismask2">
|
|
<view class="mk2 pos">
|
|
<image :src="imgUrl+'gift.png'" class="abs" style="width: 138rpx;height: 124rpx;left: -50rpx;top:-50rpx;" mode="">
|
|
</image>
|
|
<image class="abs" :src="imgUrl+'cg.png'"
|
|
style="width: 112rpx;height: 32rpx;left: 50%;transform: translate(-50%);top: 10rpx;">
|
|
</image>
|
|
<view class="flex_column flex_items">
|
|
<text class="bold f40 mt80" style="color: #333;">您的成绩为{{score}}分</text>
|
|
<text class="f28 mt20" style="color: #333;">达到该成绩用时：{{used_minute}}分</text>
|
|
<text class="f28 mt10" style="color: #333;">击败全部99%的用户</text>
|
|
<view class="flex_items flex_center">
|
|
<view class="flex_between flex_items mt40" style="width:220rpx;">
|
|
<text class="bold f24" style="color: #93D574;" v-if='types==1'>{{winfen}}</text>
|
|
<text v-if='types==1' class="f24" style="color: #93D574;">积分兑换券</text>
|
|
<text v-if='types==2' class="f24" style="color: #93D574;">获得:</text>
|
|
<text v-if='types==2' class="f24" style="color: #93D574;">{{pname}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="abs bn flex_center" @click="goindex">
|
|
<image class="mt20" :src="imgUrl+'ky.png'" style="width:160rpx;height:40rpx" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<div class="flex_start flex_items mt50">
|
|
<text class="bold" style="color: #333;font-size:60rpx;">倒计时</text>
|
|
<text class="ml35 bold" style="color: #7BCB7A;font-size: 70rpx;">{{cdTime}}</text>
|
|
</div>
|
|
<!-- t2 -->
|
|
<div class="flex_items flex_center mt80 pos" style="z-index: 2;">
|
|
<div class="bgwhite pos flex_column flex_items"
|
|
style="width: 658rpx;height: 814rpx;box-shadow: 0rpx 28rpx 64rpx 0rpx rgba(163,199,143,0.65);border-radius: 52rpx;">
|
|
<image class="abs" :src="imgUrl+'duigou.png'"
|
|
style="width: 110rpx;height: 110rpx;left: 50%;transform: translate(-50%);top: -55rpx;" mode="">
|
|
</image>
|
|
<div class="flex_start flex_items mt80">
|
|
<text class="f24" style="color: #7CCB72;">第{{num}}题</text>
|
|
<div class="ml10" style="height: 26rpx;width: 1px;background: #b2b2b2;"></div>
|
|
<text class="f24 ml10" style="color: #9E9E9E;">共{{list.length}}题</text>
|
|
</div>
|
|
<div class="flex_column flex_items mt20" style="width:calc(100% - 90rpx);">
|
|
<text class="f40 mb10" style="color: #333;">{{list[num-1].question_name}}</text>
|
|
<div v-for="(item,index) in list[num-1].question_items" :key="index" @click="chosewho(index)"
|
|
:class="['f-center','mt30','f30',index==curindex?'chose':'nochose']"
|
|
style="width: 542rpx;height: 86rpx;line-height: 86rpx;border-radius: 43rpx;">
|
|
{{item.item}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="abs" style="width: 100%;left: 0;bottom: 0;">
|
|
<image :src="imgUrl+'bbm.png'" style="width: 100%;height: 470rpx;" mode=""></image>
|
|
</div>
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import countme from "@/components/counttime.vue"
|
|
export default {
|
|
data() {
|
|
return {
|
|
curindex: -1,
|
|
ans: [{
|
|
tit: "分享给好友并访问活动"
|
|
}, {
|
|
tit: "观看视频不少于15s"
|
|
}, {
|
|
tit: "AB都是"
|
|
}, ],
|
|
ismask2: false,
|
|
acid: "",
|
|
istrue: false,
|
|
cdTime: "",
|
|
list: [],
|
|
num: 1,
|
|
score: "",
|
|
used_minute: "",
|
|
winfen: 0,
|
|
pname: "",
|
|
types: null,
|
|
imgUrl:""
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.imgUrl = this.api.imgUrl
|
|
this.acid = options.id
|
|
this.getData()
|
|
},
|
|
components: {
|
|
countme
|
|
},
|
|
methods: {
|
|
getData() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
})
|
|
this.api.getquestion({
|
|
id: this.acid
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
// uni.hideLoading()
|
|
this.list = res.data.data.item
|
|
this.getdown(res.data.data.expire_minute)
|
|
// this.istrue = true
|
|
} else {
|
|
uni.hideLoading()
|
|
this.istrue = true
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getdown(times) {
|
|
let that = this
|
|
let downTime = Number(times) //倒计时5分钟
|
|
let t = (new Date()).getTime() //当前时间戳
|
|
let dt = t + (downTime * 60) * 1000 //加了5分钟后的时间戳
|
|
let timer = setInterval(() => {
|
|
that.cdTime = that.countDown(dt); //cdtime为显示在页面的时间
|
|
if (that.countDown(dt) == 0) {
|
|
clearInterval(timer)
|
|
}
|
|
}, 1000)
|
|
},
|
|
countDown(dt) {
|
|
let nowTime = (new Date()).getTime(); //实时时间戳
|
|
let times = (dt - nowTime) / 1000; //加分钟后的时间戳-实时时间戳
|
|
let minuter
|
|
let second
|
|
if (times >= 0) {
|
|
minuter = Math.floor(times / 60 % 60); //计算分钟
|
|
second = Math.floor(times % 60); //计算秒钟
|
|
if (minuter == 0 && second == 0) {
|
|
return 0
|
|
}
|
|
if (second.toString().split('').length < 2) { //秒补0
|
|
second = "0" + second
|
|
}
|
|
} else {
|
|
return 0
|
|
}
|
|
uni.hideLoading()
|
|
this.istrue = true
|
|
return minuter + ":" + second; //分补0并返回
|
|
},
|
|
chosewho(index) {
|
|
let that = this
|
|
that.curindex = index
|
|
let tt = '确认选择，下一题？'
|
|
if (this.num == this.list.length) {
|
|
tt = '最后一题，确认提交?'
|
|
}
|
|
uni.showModal({
|
|
title: '确认',
|
|
content: tt,
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
that.goanswer()
|
|
} else if (res.cancel) {
|
|
that.curindex = -1
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
goanswer() {
|
|
uni.showLoading({
|
|
title: "提交中..."
|
|
})
|
|
let that = this
|
|
that.api.getanswer({
|
|
id: that.list[that.num - 1].id,
|
|
answer: [that.list[that.num - 1].question_items[that.curindex].answer],
|
|
finished_flag: that.num == that.list.length ? true : false
|
|
}).then((res) => {
|
|
console.log(res)
|
|
uni.hideLoading()
|
|
if (res.data.code == 200) {
|
|
if (that.num == that.list.length) {
|
|
uni.showToast({
|
|
title: "答题结束",
|
|
icon: "none",
|
|
duration: 1500
|
|
})
|
|
if (res.data.data.prize.length == 0) {
|
|
uni.showToast({
|
|
title: "遗憾，未中奖",
|
|
icon: "none",
|
|
duration: 1200
|
|
})
|
|
setTimeout(function() {
|
|
uni.reLaunch({
|
|
url: "/pages/index/index"
|
|
})
|
|
}, 1200);
|
|
} else {
|
|
that.score = res.data.data.score
|
|
that.used_minute = res.data.data.used_minute
|
|
that.types = res.data.data.prize.type
|
|
that.winfen = res.data.data.prize.winningIntegral
|
|
if (res.data.data.prize.type == 2) {
|
|
that.pname = res.data.data.prize.product.name
|
|
}
|
|
that.ismask2 = true
|
|
}
|
|
setTimeout(function() {
|
|
that.ismask2 = true
|
|
}, 1500);
|
|
} else {
|
|
that.num += 1
|
|
that.curindex = -1
|
|
}
|
|
} else {
|
|
uni.hideLoading()
|
|
that.istrue = true
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
goindex(){
|
|
uni.reLaunch({
|
|
url:"/pages/index/index"
|
|
})
|
|
},
|
|
closemsk() {
|
|
this.ismask = false
|
|
this.ismask2 = false
|
|
},
|
|
callback() {
|
|
console.log(111111111)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.startanswer {
|
|
background-image: url('https://pfapi.86698.cn/static/images/ksdt.png') !important;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.chose {
|
|
color: #fff;
|
|
background: linear-gradient(180deg, #E1F477 0%, #80CD73 100%);
|
|
}
|
|
|
|
.nochose {
|
|
background: #F6F6F6;
|
|
color: #333;
|
|
}
|
|
|
|
.mask {
|
|
background: rgba(0, 0, 0, 0.60);
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.mk2 {
|
|
background-image: url('https://pfapi.86698.cn/static/images/dtzj.png');
|
|
background-size: 100% 100%;
|
|
width: 472rpx;
|
|
height: 580rpx;
|
|
}
|
|
|
|
.bn {
|
|
background-image: url('https://pfapi.86698.cn/static/images/bn.png');
|
|
background-size: 100% 100%;
|
|
width: 308rpx;
|
|
height: 120rpx;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
bottom: 40rpx;
|
|
line-height: 120rpx;
|
|
}
|
|
</style>
|