|
|
@@ -0,0 +1,568 @@
|
|
|
+<template>
|
|
|
+ <div class="timeline-container">
|
|
|
+ <div class="timeline-content">
|
|
|
+ <div class="timeline-entry-list">
|
|
|
+ <div class="gameBox">
|
|
|
+ <div class="home">
|
|
|
+ <div :class="{ 'dim': isDim }">
|
|
|
+ <div v-if="!isDim">
|
|
|
+ <img class="rules" src="@/assets/image/answerGame/kaijiang/rules.png" alt="互动规则"
|
|
|
+ @click="clickRuleWrapper">
|
|
|
+ <div class="top" v-if="top">
|
|
|
+ <span style="font-size: 18px;color: #fff;font-weight: 600;">当前拥有抽奖券:{{ top
|
|
|
+ }}张</span>
|
|
|
+ </div>
|
|
|
+ <img class="answer" src="@/assets/image/answerGame/kaijiang/join.png" alt="参与活动"
|
|
|
+ @click="clickAnswer">
|
|
|
+ <img class="exit" src="@/assets/image/answerGame/kaijiang/exit.png" alt="退出活动"
|
|
|
+ @click="getOut">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="ruleWrapper" v-if="isRuleWrapper">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>活动规则</span>
|
|
|
+ <span style="float: right; font-size: 20px;cursor: pointer;" @click="closeRuleWrapper">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div v-html="rule"></div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="closeWrapper" v-if="isCloseWrapper">
|
|
|
+ <img class="goHome" src="@/assets/image/answerGame/kaijiang/goHome.png" alt="关闭"
|
|
|
+ @click="refresh">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <SiderInfo></SiderInfo>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="扫码参与" :visible.sync="recharge" width="30%" :before-close="beforeClose">
|
|
|
+ <div class="payBox-way">
|
|
|
+ <div class="way-item">
|
|
|
+ <div class="item-left">
|
|
|
+ <div id="expCode" ref="expCodeRef"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-right">
|
|
|
+ <div class="up">
|
|
|
+ <div>应付金额</div>
|
|
|
+ <div style="color: #fe2c55;margin-left: 8px;">¥ {{ money }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="center">
|
|
|
+ <img style="height: 18px;" src="../../../assets/image/answerGame/kaijiang/weixinPay.png"
|
|
|
+ alt="weixinpay">
|
|
|
+ <div class="textStyle">微信扫码支付</div>
|
|
|
+ </div>
|
|
|
+ <div class="down">
|
|
|
+ <div>抽奖券：</div>
|
|
|
+ <el-input-number @change="changeCount" size="mini" v-model="count" :step="1" :min="1"
|
|
|
+ step-strictly></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import QRCode from 'qrcodejs2';
|
|
|
+import { getWxPayCode, queryWxPayStatus } from "@/api/pay";
|
|
|
+import { homeData, MidAutumnSignIn } from "@/api/allApi";
|
|
|
+import SiderInfo from '@/components/SiderInfo.vue';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ SiderInfo
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ actId: this.$route.query.actId,
|
|
|
+ rule: '',
|
|
|
+ top: '1',
|
|
|
+ isCloseWrapper: false,
|
|
|
+ isRuleWrapper: false,
|
|
|
+ isDim: false,
|
|
|
+ timerPayWxQRcode: null,
|
|
|
+ timer: null,
|
|
|
+ //充值二维码
|
|
|
+ payUrl: '',
|
|
|
+ //充值弹窗
|
|
|
+ recharge: false,
|
|
|
+ //充值金额
|
|
|
+ money: 100,
|
|
|
+ count: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getHomeData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeCount(val) {
|
|
|
+ this.money = 100 * val;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ clearInterval(this.timerPayWxQRcode);
|
|
|
+ this.handlePayWxQRcode();
|
|
|
+ },
|
|
|
+ beforeClose(done) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ clearInterval(this.timerPayWxQRcode);
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ handlePayWxQRcode() { // 获取微信支付二维码
|
|
|
+ getWxPayCode({ // 这里根据不同的后端接口去修改
|
|
|
+ integral: this.money * 10,
|
|
|
+ totalFee: this.money,
|
|
|
+ }).then(res => {
|
|
|
+ let data = res.data.data;
|
|
|
+ this.qrcode(data.payUrl); // 例如：data.payUrl 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
|
|
|
+ this.timer = setInterval(() => { // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
|
|
|
+ this.handleQueryWxPayStatus(data.orderNo);
|
|
|
+ }, 1000);
|
|
|
+ this.timerPayWxQRcode = setInterval(() => { // 刷新微信支付二维码
|
|
|
+ console.log('刷新微信支付二维码');
|
|
|
+ clearInterval(this.timer); // 清除定时器;
|
|
|
+ clearInterval(this.timerPayWxQRcode);
|
|
|
+ this.handlePayWxQRcode();
|
|
|
+ }, 60000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleQueryWxPayStatus(orderNo) { // 查询微信支付状态
|
|
|
+ queryWxPayStatus({ // 这里根据不同的后端接口去修改
|
|
|
+ orderNo: orderNo,
|
|
|
+ }).then(res => {
|
|
|
+ let data = res.data.data;
|
|
|
+ if (data == '支付成功') { // 当查询到支付成功时
|
|
|
+ this.money = 100;
|
|
|
+ this.count = 1;
|
|
|
+ this.recharge = false;
|
|
|
+ clearInterval(this.timer); // 清除定时器;
|
|
|
+ clearInterval(this.timerPayWxQRcode);
|
|
|
+ this.isDim = true;
|
|
|
+ this.isCloseWrapper = true;
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 清空二维码,避免生成多个二维码
|
|
|
+ delQrcode() {
|
|
|
+ this.$refs.expCodeRef.innerHTML = ""
|
|
|
+ },
|
|
|
+ // 前端根据 payUrl 生成微信支付二维码
|
|
|
+ qrcode(payUrl) {
|
|
|
+ this.delQrcode();
|
|
|
+ return new QRCode('expCode', {
|
|
|
+ width: 150,
|
|
|
+ height: 150,
|
|
|
+ text: payUrl,
|
|
|
+ colorDark: '#000',
|
|
|
+ colorLight: '#fff'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ refresh() {
|
|
|
+ location.reload();
|
|
|
+ },
|
|
|
+ getOut() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/home/festiveEvents',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getHomeData() {
|
|
|
+ homeData({ actId: this.actId }).then(response => {
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.rule = response.data.data.rule;
|
|
|
+ this.top = response.data.data.top;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickAnswer() {
|
|
|
+ this.recharge = true;
|
|
|
+ this.$nextTick(function () {
|
|
|
+ this.handlePayWxQRcode();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickConfirm() {
|
|
|
+ MidAutumnSignIn({ actId: this.actId }).then(response => {
|
|
|
+ this.isDim = true;
|
|
|
+ this.isCloseWrapper = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickIpay() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/ipay',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickRuleWrapper() {
|
|
|
+ this.isDim = true;
|
|
|
+ this.isRuleWrapper = true;
|
|
|
+ },
|
|
|
+ closeRuleWrapper() {
|
|
|
+ this.isDim = false;
|
|
|
+ this.isRuleWrapper = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.timeline-container {
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-entry-list {
|
|
|
+ margin-right: 17.5rem;
|
|
|
+ border-radius: 2px;
|
|
|
+ width: 720px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-entry-list .gameBox {
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ position: relative;
|
|
|
+ padding: 2.667rem 0;
|
|
|
+ z-index: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-left: 2.67rem;
|
|
|
+ padding-right: 2.67rem;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 280px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.gameBox .item {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ background: url(@/assets/image/answerGame/item/itemBg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 375px;
|
|
|
+ height: 667px;
|
|
|
+}
|
|
|
+
|
|
|
+.item .integralBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 7.3%;
|
|
|
+ right: 8%;
|
|
|
+ width: 90px;
|
|
|
+ height: 35.2px;
|
|
|
+ /* background: greenyellow; */
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 35.2px;
|
|
|
+}
|
|
|
+
|
|
|
+.integralBox .integral {
|
|
|
+ font-size: 16px;
|
|
|
+ color: orange;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.item .timer {
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/item/timer.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ top: 15%;
|
|
|
+ right: 10%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.timer .second {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.item .topicNum {
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/item/topicNum.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 120px;
|
|
|
+ height: 42px;
|
|
|
+ top: 25%;
|
|
|
+ left: 4.8%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.topicNum .topic {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.item .questionBox {
|
|
|
+ position: absolute;
|
|
|
+ width: 375px;
|
|
|
+ top: 28%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.questionBox .title {
|
|
|
+ margin: auto 50px;
|
|
|
+ height: 180px;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ /* font-weight: 600; */
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.answerItem {
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #3883fa;
|
|
|
+ background: rgb(221, 218, 218);
|
|
|
+ border-radius: 20px;
|
|
|
+ width: 80%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.right {
|
|
|
+ /*选择正确的答案颜色*/
|
|
|
+ background: #3ede58;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.error {
|
|
|
+ /*选择错误的答案颜色*/
|
|
|
+ background: #e53117;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.invisible {
|
|
|
+ width: 25px;
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.gameBox .home {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ background: url(@/assets/image/answerGame/kaijiang/homeBg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 375px;
|
|
|
+ height: 667px;
|
|
|
+}
|
|
|
+
|
|
|
+.home .rules {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 35px;
|
|
|
+ top: 35%;
|
|
|
+ left: 5%;
|
|
|
+}
|
|
|
+
|
|
|
+.home .top {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.home .answer {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 280px;
|
|
|
+ bottom: 10%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.home .exit {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 280px;
|
|
|
+ bottom: 2%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.hidden {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.show {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.dim {
|
|
|
+ /* opacity:0.6; */
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(0, 0, 0, .4);
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.clearfix:before,
|
|
|
+.clearfix:after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+}
|
|
|
+
|
|
|
+.clearfix:after {
|
|
|
+ clear: both
|
|
|
+}
|
|
|
+
|
|
|
+.ruleWrapper {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 12;
|
|
|
+}
|
|
|
+
|
|
|
+.box-card {
|
|
|
+ width: 350px;
|
|
|
+}
|
|
|
+
|
|
|
+.confirmWrapper {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/kaijiang/isConfirm.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 291px;
|
|
|
+ height: 179px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 12;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.confirmWrapper .homeBtn {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 20px;
|
|
|
+ width: 53px;
|
|
|
+}
|
|
|
+
|
|
|
+.confirmWrapper .iPay {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 92px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.confirmWrapper .confirm {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 92px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.closeWrapper {
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/kaijiang/finish.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 258px;
|
|
|
+ height: 258px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 12;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.closeWrapper .goHome {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 112px;
|
|
|
+ height: 55px;
|
|
|
+}
|
|
|
+
|
|
|
+.payBox-way {
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.way-item {
|
|
|
+ display: flex;
|
|
|
+ background-color: #f7f7f9;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.item-left {
|
|
|
+ position: relative;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 7px;
|
|
|
+}
|
|
|
+
|
|
|
+.item-right {
|
|
|
+ margin-left: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.up {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.textStyle {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 4px;
|
|
|
+ color: rgba(22, 24, 35, .34);
|
|
|
+}
|
|
|
+
|
|
|
+.down {
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(22, 24, 35, .34);
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ -moz-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.el-card__header {
|
|
|
+ padding: 10px 20px !important;
|
|
|
+}
|
|
|
+</style>
|
