|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
<view class="head">
|
|
|
- <image class="img" :src="$fileUrl() + '/ka.jpeg'" mode="aspectFill"></image>
|
|
|
+ <image class="img" :src="detail.prizeIcon" mode="aspectFill"></image>
|
|
|
<view class="info">
|
|
|
<view class="title row">
|
|
|
{{ detail.name }}
|
|
|
@@ -61,7 +61,32 @@
|
|
|
</view>
|
|
|
<image @click="toWinningRecord" class="button1" :src="$fileUrl() + '/first/button3.png'" mode="widthFix"></image>
|
|
|
</view>
|
|
|
-
|
|
|
+ <view class="lockBox">
|
|
|
+ <view class="text" v-if="false">本福袋连续购买10发，即开启保护机制</view>
|
|
|
+ <view class="info" v-else>
|
|
|
+ <image class="photo" :src="lockData.userAvtar" mode="aspectFill"></image>
|
|
|
+ <view class="right">
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">{{ lockData.userName }}</view>
|
|
|
+ <view class="tip">目前已开启自动保护机制</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ 保护倒计时:
|
|
|
+ <span v-if="lockHour != '00'">
|
|
|
+ <span class="time">{{ lockHour }}</span>
|
|
|
+ :
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <span class="time">{{ lockMin }}</span>
|
|
|
+ :
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <span class="time">{{ lockSecond }}</span>
|
|
|
+ </span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="prizes">
|
|
|
<image class="title" :src="$fileUrl() + '/first/title.png'" mode="widthFix"></image>
|
|
|
<view class="prizesList" v-for="(item, index) in prizeList">
|
|
|
@@ -88,12 +113,14 @@
|
|
|
|
|
|
<script>
|
|
|
import { rewardType } from '@/utils/commonConfig.js'
|
|
|
-import { prizePoolStatusApi, drawCardSubmitApi, raffleDetailApi, prizeListApi } from '@/api/drawCard.js'
|
|
|
-import { cardType } from '@/utils/utils.js'
|
|
|
+import { prizePoolStatusApi, drawCardSubmitApi, raffleDetailApi, prizeListApi, getLockInfoApi } from '@/api/drawCard.js'
|
|
|
+import { cardType, formatSeconds } from '@/utils/utils.js'
|
|
|
|
|
|
import numImg from '@/component/numImg.vue'
|
|
|
import paymentPopup from '@/component/paymentPopup.vue'
|
|
|
|
|
|
+const { v4: uuidv4 } = require('uuid')
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
numImg,
|
|
|
@@ -101,6 +128,12 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ userId: wx.getStorageSync('userId'),
|
|
|
+ uuid: '',
|
|
|
+ socketTimer: null,
|
|
|
+ lockTimeCountdown: null,
|
|
|
+ lockData: null,
|
|
|
+ lockTime: '',
|
|
|
cardType: cardType,
|
|
|
rewardType: rewardType,
|
|
|
params: {
|
|
|
@@ -117,13 +150,44 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
onLoad(query) {
|
|
|
- console.log(query, 'query')
|
|
|
if (query.id) {
|
|
|
this.params.raffleId = query.id
|
|
|
this.init()
|
|
|
}
|
|
|
this.paymentSuccess()
|
|
|
},
|
|
|
+ onHide() {
|
|
|
+ // 离开页面
|
|
|
+ // 关闭倒计时
|
|
|
+ clearInterval(this.lockTimeCountdown)
|
|
|
+ // 关闭心跳
|
|
|
+ clearInterval(this.socketTimer)
|
|
|
+ // 关闭对话连接
|
|
|
+ wx.closeSocket()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 锁箱小时
|
|
|
+ lockHour() {
|
|
|
+ let tiem = this.lockTime * 1000
|
|
|
+ let timeText = formatSeconds(tiem)
|
|
|
+ timeText = timeText.split(':')[0]
|
|
|
+ return timeText
|
|
|
+ },
|
|
|
+ // 锁箱分钟
|
|
|
+ lockMin() {
|
|
|
+ let tiem = this.lockTime * 1000
|
|
|
+ let timeText = formatSeconds(tiem)
|
|
|
+ timeText = timeText.split(':')[1]
|
|
|
+ return timeText
|
|
|
+ },
|
|
|
+ // 锁箱秒
|
|
|
+ lockSecond() {
|
|
|
+ let tiem = this.lockTime * 1000
|
|
|
+ let timeText = formatSeconds(tiem)
|
|
|
+ timeText = timeText.split(':')[2]
|
|
|
+ return timeText
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
init() {
|
|
|
// 获取卡牌商品列表
|
|
|
@@ -132,6 +196,72 @@ export default {
|
|
|
this.getDetail()
|
|
|
//获取奖池
|
|
|
this.getPrizeList()
|
|
|
+ // 初始化锁箱
|
|
|
+ this.initLock()
|
|
|
+ // 连接锁箱Socket
|
|
|
+ this.connectSocket()
|
|
|
+ },
|
|
|
+ initLock() {
|
|
|
+ // 获取锁箱信息
|
|
|
+ let _this = this
|
|
|
+ let params = {
|
|
|
+ raffleId: this.params.raffleId,
|
|
|
+ }
|
|
|
+ getLockInfoApi(params).then(res => {
|
|
|
+ console.log(res, '锁箱')
|
|
|
+ if (res.data.userId) {
|
|
|
+ _this.lockData = res.data
|
|
|
+ _this.lockTime = res.data.expireTime
|
|
|
+
|
|
|
+ if (_this.lockTimeCountdown) {
|
|
|
+ clearInterval(_this.lockTimeCountdown)
|
|
|
+ _this.lockTimeCountdown = null
|
|
|
+ }
|
|
|
+
|
|
|
+ _this.lockTimeCountdown = setInterval(() => {
|
|
|
+ _this.lockTime = _this.lockTime - 1
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ connectSocket() {
|
|
|
+ // wss://mall.rongtongh.cn/websocket/raffleId38:uuid1122
|
|
|
+
|
|
|
+ let _this = this
|
|
|
+ let uuid = uuidv4()
|
|
|
+ let url = 'wss://mall.rongtongh.cn/websocket/raffleId' + this.params.raffleId + ':' + uuid
|
|
|
+
|
|
|
+ function connect() {
|
|
|
+ wx.connectSocket({
|
|
|
+ url: url,
|
|
|
+ })
|
|
|
+
|
|
|
+ wx.onSocketOpen(function (res) {
|
|
|
+ console.log(res, 'WebSocket连接已打开！')
|
|
|
+ // wx.sendSocketMessage({
|
|
|
+ // data: JSON.stringify(user),
|
|
|
+ // })
|
|
|
+ _this.socketTimer = setInterval(function () {
|
|
|
+ wx.sendSocketMessage({
|
|
|
+ data: '1',
|
|
|
+ })
|
|
|
+ }, 50 * 1000)
|
|
|
+ })
|
|
|
+ wx.onSocketMessage(function (res) {
|
|
|
+ let data = JSON.parse(res.data)
|
|
|
+ console.log(data, 'WebSocket接受信息')
|
|
|
+ _this.lockData = res.data
|
|
|
+ _this.lockTime = res.data.expireTime
|
|
|
+ })
|
|
|
+ wx.onSocketClose(function (res) {
|
|
|
+ console.log('WebSocket连接已关闭！')
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log('re connect')
|
|
|
+ // connect()
|
|
|
+ }, 2000)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ connect()
|
|
|
},
|
|
|
toKnapsack() {
|
|
|
// 跳转背包界面
|
|
|
@@ -139,10 +269,6 @@ export default {
|
|
|
url: '/pages/knapsack/knapsack',
|
|
|
})
|
|
|
},
|
|
|
- showRule() {
|
|
|
- // 显示规则
|
|
|
- // this.$refs.popup.open('center')
|
|
|
- },
|
|
|
refresh() {
|
|
|
wx.showLoading()
|
|
|
setTimeout(function () {
|
|
|
@@ -189,6 +315,14 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
submit() {
|
|
|
+ // 购买时判断锁箱
|
|
|
+ if (this.lockData.userId && this.userId != this.lockData) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '锁箱中无法购买。',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
if (this.selectIndex.length == 0) {
|
|
|
wx.showToast({
|
|
|
title: '请选则要购买的卡牌。',
|
|
|
@@ -290,6 +424,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
flex: 1;
|
|
|
+
|
|
|
.row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -389,6 +524,7 @@ export default {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
+
|
|
|
.kaBk {
|
|
|
width: 70%;
|
|
|
border-radius: 4px;
|
|
|
@@ -427,6 +563,83 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .lockBox {
|
|
|
+ margin: 10px 20px;
|
|
|
+ padding: 10px;
|
|
|
+ height: 16vw;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 1px 2px 2px #459bff;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #459bff;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 14vw;
|
|
|
+ height: 14vw;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ margin-left: 10px;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ width: 100%;
|
|
|
+ color: #459bff;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .time {
|
|
|
+ padding: 5px;
|
|
|
+ color: #fff;
|
|
|
+ background: #459bff;
|
|
|
+ margin: 0 8px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #459bff;
|
|
|
+ width: 40%;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ font-size: 11px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #459bff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.prizes {
|
|
|
.title {
|
|
|
width: 103px;
|
|
|
@@ -445,6 +658,7 @@ export default {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
}
|
|
|
+
|
|
|
.prizesTitle {
|
|
|
position: relative;
|
|
|
height: 30px;
|
|
|
@@ -457,6 +671,7 @@ export default {
|
|
|
font-weight: 800;
|
|
|
background: linear-gradient(90deg, rgba(89, 166, 255, 0.8) 0%, rgba(158, 200, 249, 0) 100%);
|
|
|
}
|
|
|
+
|
|
|
.prizesImg {
|
|
|
position: relative;
|
|
|
display: grid;
|
|
|
@@ -478,6 +693,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.prizesImgOne {
|
|
|
position: relative;
|
|
|
display: flex;
|
chenrong