|
|
@@ -1,704 +1,709 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="head">
|
|
|
- <image class="img" :src="$fileUrl() + '/ka.jpeg'" mode="aspectFill"></image>
|
|
|
- <view class="info">
|
|
|
- <view class="title row">
|
|
|
- {{ detail.name }}
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="price">
|
|
|
- ￥{{ detail.price }}
|
|
|
- <span class="text fontPFR">/张明信片</span>
|
|
|
- </view>
|
|
|
- <image
|
|
|
- @click="$navigateTo('/pages/rule/rule', { type: 3 })"
|
|
|
- class="button"
|
|
|
- :src="$fileUrl() + '/invite/button1.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <!-- <view class="users">
|
|
|
+ <view class="container">
|
|
|
+ <view class="head">
|
|
|
+ <image class="img" :src="$fileUrl() + '/ka.jpeg'" mode="aspectFill"></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title row">
|
|
|
+ {{ detail.name }}
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="price">
|
|
|
+ ￥{{ detail.price }}
|
|
|
+ <span class="text fontPFR">/张明信片</span>
|
|
|
+ </view>
|
|
|
+ <image @click="$navigateTo('/pages/rule/rule', { type: 3 })" class="button"
|
|
|
+ :src="$fileUrl() + '/invite/button1.png'" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <!-- <view class="users">
|
|
|
<image class="photo" :style="'left:' + index * 11 + 'px'" :src="$fileUrl() + '/Frame1.png'"
|
|
|
v-for="(item, index) in userList" mode="widthFix"></image>
|
|
|
</view> -->
|
|
|
- <!-- <view class="hot">
|
|
|
+ <!-- <view class="hot">
|
|
|
<image :src="$fileUrl() + /first/hot.png" mode="widthFix"></image>
|
|
|
{{ detail.hotNum }}
|
|
|
</view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="cardList">
|
|
|
- <image class="itemHead" :src="$fileUrl() + '/drawCard_fullSet/headBk.png'" mode="widthFix"></image>
|
|
|
- <view class="countdown textColor5">
|
|
|
- {{ countdown }}
|
|
|
- </view>
|
|
|
- <view class="title">
|
|
|
- <view class="left">
|
|
|
- <image class="text1" :src="$fileUrl() + '/drawCard_fullSet/icon1.png'" mode="widthFix"></image>
|
|
|
- <view class="row text2" style="font-size: 14px">已选择 {{ selectIndex.length }} 个</view>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <view class="text">
|
|
|
- 分享福袋有几率提高
|
|
|
- <span style="color: #63fff6">S赏</span>
|
|
|
- 概率
|
|
|
- </view>
|
|
|
- <!-- <image class="button" :src="$fileUrl() + '/drawCard_fullSet/button1.png'" mode="widthFix"></image> -->
|
|
|
- <button open-type="share" class="share_btn">
|
|
|
- <image class="button" :src="$fileUrl() + '/drawCard_fullSet/button1.png'" mode="widthFix"></image>
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list">
|
|
|
- <view :class="['item', item.check ? 'active' : '']" v-for="(item, index) in cardList" @click="clickCard(item)">
|
|
|
- <image
|
|
|
- v-if="item.check"
|
|
|
- class="kaBkActive"
|
|
|
- :src="$fileUrl() + '/ka/kabk' + cardType(3, item) + 'Active.png'"
|
|
|
- mode="heightFix"
|
|
|
- ></image>
|
|
|
- <image class="kaBk" :src="$fileUrl() + '/ka/kabk' + cardType(3, item) + '.png'" mode="widthFix"></image>
|
|
|
- <numImg class="num" :value="item" :type="3" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <image
|
|
|
- class="buyButton"
|
|
|
- @click="submit"
|
|
|
- :src="$fileUrl() + '/drawCard_fullSet/button2.png'"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view class="buttons">
|
|
|
- <image
|
|
|
- class="button1"
|
|
|
- @click="toKnapsack"
|
|
|
- :src="$fileUrl() + '/drawCard_fullSet/button3.png'"
|
|
|
- mode="heightFix"
|
|
|
- ></image>
|
|
|
- <!-- <image class="button1" :src="$fileUrl() + '/drawCard_fullSet/button4.png'" mode="heightFix"></image> -->
|
|
|
- <image
|
|
|
- class="button1"
|
|
|
- @click="$navigateTo('/pages/drawCard_fullSet/goods', { raffleId: params.raffleId })"
|
|
|
- :src="$fileUrl() + '/drawCard_fullSet/button5.png'"
|
|
|
- mode="heightFix"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="winningList"
|
|
|
- v-if="prizeUserList.length > 0"
|
|
|
- @click="$navigateTo('/pages/drawCard_fullSet/winningList', { raffleId: params.raffleId })"
|
|
|
- >
|
|
|
- <image class="winningListTitle" :src="$fileUrl() + '/drawCard_fullSet/icon2.png'" mode="widthFix"></image>
|
|
|
- <view class="list">
|
|
|
- <view class="item" v-for="(item, index) in prizeUserList.slice(0, 5)">
|
|
|
- <image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
|
|
|
- <view class="name">
|
|
|
- {{ item.userName }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item" v-if="prizeUserList.length > 5">
|
|
|
- <image class="photo" :src="$fileUrl() + '/drawCard_fullSet/icon3.png'" mode="aspectFill"></image>
|
|
|
- <view class="name" style="color: #6478fd">查看更多</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="prizes" style="display: none">
|
|
|
- <image class="title" :src="$fileUrl() + '/first/title.png'" mode="widthFix"></image>
|
|
|
- <view class="prizesList" v-for="(item, index) in prizeList">
|
|
|
- <image class="bk" :src="$fileUrl() + '/first/bk2.png'" mode="scaleToFill"></image>
|
|
|
- <view class="prizesTitle">
|
|
|
- {{ $selectDictLabel(rewardType, item.type) }}
|
|
|
- </view>
|
|
|
- <view class="prizesImgOne" v-if="item.type == 22">
|
|
|
- <view class="image" v-for="(item2, index2) in item.prizeList">
|
|
|
- <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="prizesImg" v-else>
|
|
|
- <view class="image" v-for="(item2, index2) in item.prizeList">
|
|
|
- <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <image class="refresh" @click="refresh" :src="$fileUrl() + '/first/refresh.png'" mode="widthFix"></image>
|
|
|
- <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="cardList">
|
|
|
+ <image class="itemHead" :src="$fileUrl() + '/drawCard_fullSet/headBk.png'" mode="widthFix"></image>
|
|
|
+ <view class="countdown textColor5">
|
|
|
+ {{ countdown }}
|
|
|
+ </view>
|
|
|
+ <view class="title">
|
|
|
+ <view class="left">
|
|
|
+ <image class="text1" :src="$fileUrl() + '/drawCard_fullSet/icon1.png'" mode="widthFix"></image>
|
|
|
+ <view class="row text2" style="font-size: 14px">已选择 {{ selectIndex.length }} 个</view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="text">
|
|
|
+ 分享福袋有几率提高
|
|
|
+ <span style="color: #63fff6">S赏</span>
|
|
|
+ 概率
|
|
|
+ </view>
|
|
|
+ <!-- <image class="button" :src="$fileUrl() + '/drawCard_fullSet/button1.png'" mode="widthFix"></image> -->
|
|
|
+ <button open-type="share" class="share_btn">
|
|
|
+ <image class="button" :src="$fileUrl() + '/drawCard_fullSet/button1.png'" mode="widthFix">
|
|
|
+ </image>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view :class="['item', item.check ? 'active' : '']" v-for="(item, index) in cardList"
|
|
|
+ @click="clickCard(item)">
|
|
|
+ <image v-if="item.check" class="kaBkActive"
|
|
|
+ :src="$fileUrl() + '/ka/kabk' + cardType(3, item) + 'Active.png'" mode="heightFix"></image>
|
|
|
+ <image class="kaBk" :src="$fileUrl() + '/ka/kabk' + cardType(3, item) + '.png'" mode="widthFix">
|
|
|
+ </image>
|
|
|
+ <numImg class="num" :value="item" :type="3" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="buyButton" @click="submit" :src="$fileUrl() + '/drawCard_fullSet/button2.png'"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="buttons">
|
|
|
+ <image class="button1" @click="toKnapsack" :src="$fileUrl() + '/drawCard_fullSet/button3.png'"
|
|
|
+ mode="heightFix"></image>
|
|
|
+ <!-- <image class="button1" :src="$fileUrl() + '/drawCard_fullSet/button4.png'" mode="heightFix"></image> -->
|
|
|
+ <image class="button1" @click="$navigateTo('/pages/drawCard_fullSet/goods', { raffleId: params.raffleId })"
|
|
|
+ :src="$fileUrl() + '/drawCard_fullSet/button5.png'" mode="heightFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="winningList" v-if="prizeUserList.length > 0"
|
|
|
+ @click="$navigateTo('/pages/drawCard_fullSet/winningList', { raffleId: params.raffleId })">
|
|
|
+ <image class="winningListTitle" :src="$fileUrl() + '/drawCard_fullSet/icon2.png'" mode="widthFix"></image>
|
|
|
+ <view class="list">
|
|
|
+ <view class="item" v-for="(item, index) in prizeUserList.slice(0, 5)">
|
|
|
+ <image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
|
|
|
+ <view class="name">
|
|
|
+ {{ item.userName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" v-if="prizeUserList.length > 5">
|
|
|
+ <image class="photo" :src="$fileUrl() + '/drawCard_fullSet/icon3.png'" mode="aspectFill"></image>
|
|
|
+ <view class="name" style="color: #6478fd">查看更多</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="prizes" style="display: none">
|
|
|
+ <image class="title" :src="$fileUrl() + '/first/title.png'" mode="widthFix"></image>
|
|
|
+ <view class="prizesList" v-for="(item, index) in prizeList">
|
|
|
+ <image class="bk" :src="$fileUrl() + '/first/bk2.png'" mode="scaleToFill"></image>
|
|
|
+ <view class="prizesTitle">
|
|
|
+ {{ $selectDictLabel(rewardType, item.type) }}
|
|
|
+ </view>
|
|
|
+ <view class="prizesImgOne" v-if="item.type == 22">
|
|
|
+ <view class="image" v-for="(item2, index2) in item.prizeList">
|
|
|
+ <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="prizesImg" v-else>
|
|
|
+ <view class="image" v-for="(item2, index2) in item.prizeList">
|
|
|
+ <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="refresh" @click="refresh" :src="$fileUrl() + '/first/refresh.png'" mode="widthFix"></image>
|
|
|
+ <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { rewardType } from '@/utils/commonConfig.js'
|
|
|
-import { prizePoolStatusApi, raffleDetailApi, prizeListApi, prizeUserListApi } from '@/api/drawCard.js'
|
|
|
-
|
|
|
-import { cardType, formatSeconds } from '@/utils/utils.js'
|
|
|
-
|
|
|
-import numImg from '@/component/numImg.vue'
|
|
|
-import paymentPopup from '@/component/paymentPopup.vue'
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- numImg,
|
|
|
- paymentPopup,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- countdown: '',
|
|
|
- countdownInfinity: null,
|
|
|
- cardType: cardType,
|
|
|
- rewardType: rewardType,
|
|
|
- params: {
|
|
|
- raffleId: '',
|
|
|
- limit: 20,
|
|
|
- page: 1,
|
|
|
- },
|
|
|
- detail: {},
|
|
|
- total: 0,
|
|
|
- userList: 8,
|
|
|
- cardList: [],
|
|
|
- selectIndex: [],
|
|
|
- prizeList: [],
|
|
|
- prizeUserList: [],
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(query) {
|
|
|
- console.log(query, 'query')
|
|
|
- if (query.id) {
|
|
|
- this.params.raffleId = query.id
|
|
|
- this.init()
|
|
|
- }
|
|
|
- this.paymentSuccess()
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- if (!this.countdownInfinity) {
|
|
|
- clearInterval(this.countdownInfinity)
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- // 获取卡牌商品列表
|
|
|
- this.getCardList()
|
|
|
- // 获取卡包详情
|
|
|
- this.getDetail()
|
|
|
- //获取奖池
|
|
|
- this.getPrizeList()
|
|
|
- // 获取中奖记录
|
|
|
- this.getPrizeUserList()
|
|
|
- },
|
|
|
- toKnapsack() {
|
|
|
- // 跳转背包界面
|
|
|
- wx.navigateTo({
|
|
|
- url: '/pages/knapsack/knapsack',
|
|
|
- })
|
|
|
- },
|
|
|
- refresh() {
|
|
|
- wx.showLoading()
|
|
|
- setTimeout(function () {
|
|
|
- wx.hideLoading()
|
|
|
- }, 1000)
|
|
|
- this.init()
|
|
|
- this.selectIndex = []
|
|
|
- for (var i = 0; i < this.cardList.length; i++) {
|
|
|
- this.cardList[i].check = false
|
|
|
- }
|
|
|
- },
|
|
|
- getPrizeUserList() {
|
|
|
- let params = {
|
|
|
- limit: 999,
|
|
|
- page: 1,
|
|
|
- raffleId: this.params.raffleId,
|
|
|
- }
|
|
|
- prizeUserListApi(params).then(res => {
|
|
|
- console.log(res, '中奖记录')
|
|
|
- let userIds = []
|
|
|
- let list = []
|
|
|
- for (var i = 0; i < res.data.length; i++) {
|
|
|
- let item = res.data[i]
|
|
|
- if (userIds.indexOf(item.userId) == -1) {
|
|
|
- userIds.push(item.userId)
|
|
|
- console.log(userIds.indexOf(item.userId))
|
|
|
- let index = userIds.indexOf(item.userId)
|
|
|
- list[index] = {
|
|
|
- userId: item.userId,
|
|
|
- userAvtar: item.userAvtar,
|
|
|
- userName: item.userName,
|
|
|
- prizes: [],
|
|
|
- }
|
|
|
- list[index].prizes.push(item)
|
|
|
- } else {
|
|
|
- let index = userIds.indexOf(item.userId)
|
|
|
- list[index].prizes.push(item)
|
|
|
- }
|
|
|
- }
|
|
|
- this.userIds = userIds
|
|
|
- this.prizeUserList = list
|
|
|
- })
|
|
|
- },
|
|
|
- getPrizeList() {
|
|
|
- let params = {
|
|
|
- raffleId: this.params.raffleId,
|
|
|
- }
|
|
|
- prizeListApi(params).then(res => {
|
|
|
- console.log(res, '奖池预览')
|
|
|
- let newArray = res.data
|
|
|
- for (var i = 0; i < res.data.length; i++) {
|
|
|
- if (res.data[i].type == 21) {
|
|
|
- newArray = []
|
|
|
- newArray.push(res.data[i])
|
|
|
- res.data.splice(i, 1)
|
|
|
- newArray.push(...res.data)
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- this.prizeList = newArray
|
|
|
- })
|
|
|
- },
|
|
|
- toWinningRecord() {
|
|
|
- let params = {
|
|
|
- raffleId: this.params.raffleId,
|
|
|
- }
|
|
|
- this.$navigateTo('/pages/winningRecord/winningRecord', params)
|
|
|
- },
|
|
|
- getDetail() {
|
|
|
- let params = {
|
|
|
- raffleId: this.params.raffleId,
|
|
|
- }
|
|
|
- raffleDetailApi(params).then(res => {
|
|
|
- console.log(res, '详情')
|
|
|
- this.detail = res.data
|
|
|
- this.endTime = new Date(this.detail.endTime).getTime()
|
|
|
- // this.endTime = new Date('2023-11-10 14:48:00').getTime()
|
|
|
- // 初始化倒计时
|
|
|
- this.initCountdown()
|
|
|
- if (this.countdown != '已结束') {
|
|
|
- this.countdownInfinity = setInterval(() => {
|
|
|
- if (this.countdown == '已结束') {
|
|
|
- clearInterval(this.countdownInfinity)
|
|
|
- this.countdownInfinity = null
|
|
|
- return
|
|
|
- }
|
|
|
- this.initCountdown()
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- initCountdown() {
|
|
|
- let nowTime = new Date().getTime()
|
|
|
- let endTime = this.endTime
|
|
|
- let countdownText = ''
|
|
|
- let countdown = endTime - nowTime
|
|
|
- if (countdown <= 0) {
|
|
|
- countdownText = '已结束'
|
|
|
- } else {
|
|
|
- countdownText = formatSeconds(countdown)
|
|
|
- }
|
|
|
- // console.log(countdownText, 'countdownText')
|
|
|
- this.countdown = countdownText
|
|
|
- },
|
|
|
- submit() {
|
|
|
- if (this.selectIndex.length == 0) {
|
|
|
- wx.showToast({
|
|
|
- title: '请选则要购买的卡牌。',
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- this.$refs.paymentPopup.show(this.params.raffleId, this.selectIndex, this.detail)
|
|
|
- },
|
|
|
- // 支付成功后回调
|
|
|
- paymentSuccess() {
|
|
|
- let _this = this
|
|
|
- console.log('刷新抽卡界面')
|
|
|
- // 刷新界面
|
|
|
- _this.refresh()
|
|
|
- },
|
|
|
- // 选中取消选中卡牌
|
|
|
- clickCard(item) {
|
|
|
- if (item.status == 0) {
|
|
|
- item.check = !item.check
|
|
|
- }
|
|
|
- // 如果是选中
|
|
|
- let index = this.selectIndex.indexOf(item.number)
|
|
|
- if (item.check && index == -1) {
|
|
|
- this.selectIndex.push(item.number)
|
|
|
- } else if (!item.check && index != -1) {
|
|
|
- this.selectIndex.splice(index, 1)
|
|
|
- }
|
|
|
- },
|
|
|
- // 标记已经选中卡牌
|
|
|
- selectFormat() {
|
|
|
- for (var i = 0; i < this.cardList.length; i++) {
|
|
|
- if (this.selectIndex.includes(this.cardList[i].number)) {
|
|
|
- this.cardList[i].check = true
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- getCardList() {
|
|
|
- prizePoolStatusApi(this.params).then(res => {
|
|
|
- console.log(res, '卡牌分页')
|
|
|
- for (var i = 0; i < res.data.list.length; i++) {
|
|
|
- res.data.list[i].check = false
|
|
|
- }
|
|
|
- this.cardList = res.data.list
|
|
|
- this.selectFormat()
|
|
|
- this.total = res.data.total
|
|
|
- })
|
|
|
- },
|
|
|
- left() {
|
|
|
- console.log('上一页')
|
|
|
- if (this.params.page > 1) {
|
|
|
- this.params.page = this.params.page - 1
|
|
|
- }
|
|
|
- this.getCardList()
|
|
|
- },
|
|
|
- right() {
|
|
|
- console.log('下一页')
|
|
|
- let pages = Math.ceil(this.total / this.params.limit)
|
|
|
- if (this.params.page < pages) {
|
|
|
- this.params.page = this.params.page + 1
|
|
|
- }
|
|
|
- this.getCardList()
|
|
|
- },
|
|
|
- },
|
|
|
-}
|
|
|
+ import {
|
|
|
+ rewardType
|
|
|
+ } from '@/utils/commonConfig.js'
|
|
|
+ import {
|
|
|
+ prizePoolStatusApi,
|
|
|
+ raffleDetailApi,
|
|
|
+ prizeListApi,
|
|
|
+ prizeUserListApi
|
|
|
+ } from '@/api/drawCard.js'
|
|
|
+
|
|
|
+ import {
|
|
|
+ cardType,
|
|
|
+ formatSeconds
|
|
|
+ } from '@/utils/utils.js'
|
|
|
+
|
|
|
+ import numImg from '@/component/numImg.vue'
|
|
|
+ import paymentPopup from '@/component/paymentPopup.vue'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ numImg,
|
|
|
+ paymentPopup,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ countdown: '',
|
|
|
+ countdownInfinity: null,
|
|
|
+ cardType: cardType,
|
|
|
+ rewardType: rewardType,
|
|
|
+ params: {
|
|
|
+ raffleId: '',
|
|
|
+ limit: 20,
|
|
|
+ page: 1,
|
|
|
+ },
|
|
|
+ detail: {},
|
|
|
+ total: 0,
|
|
|
+ userList: 8,
|
|
|
+ cardList: [],
|
|
|
+ selectIndex: [],
|
|
|
+ prizeList: [],
|
|
|
+ prizeUserList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(query) {
|
|
|
+ console.log(query, 'query')
|
|
|
+ if (query.id) {
|
|
|
+ this.params.raffleId = query.id
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ this.paymentSuccess()
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ if (!this.countdownInfinity) {
|
|
|
+ clearInterval(this.countdownInfinity)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ // 获取卡牌商品列表
|
|
|
+ this.getCardList()
|
|
|
+ // 获取卡包详情
|
|
|
+ this.getDetail()
|
|
|
+ //获取奖池
|
|
|
+ this.getPrizeList()
|
|
|
+ // 获取中奖记录
|
|
|
+ this.getPrizeUserList()
|
|
|
+ },
|
|
|
+ toKnapsack() {
|
|
|
+ // 跳转背包界面
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/pages/knapsack/knapsack',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ refresh() {
|
|
|
+ wx.showLoading()
|
|
|
+ setTimeout(function() {
|
|
|
+ wx.hideLoading()
|
|
|
+ }, 1000)
|
|
|
+ this.init()
|
|
|
+ this.selectIndex = []
|
|
|
+ for (var i = 0; i < this.cardList.length; i++) {
|
|
|
+ this.cardList[i].check = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPrizeUserList() {
|
|
|
+ let params = {
|
|
|
+ limit: 999,
|
|
|
+ page: 1,
|
|
|
+ raffleId: this.params.raffleId,
|
|
|
+ }
|
|
|
+ prizeUserListApi(params).then(res => {
|
|
|
+ console.log(res, '中奖记录')
|
|
|
+ let userIds = []
|
|
|
+ let list = []
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ let item = res.data[i]
|
|
|
+ if (userIds.indexOf(item.userId) == -1) {
|
|
|
+ userIds.push(item.userId)
|
|
|
+ console.log(userIds.indexOf(item.userId))
|
|
|
+ let index = userIds.indexOf(item.userId)
|
|
|
+ list[index] = {
|
|
|
+ userId: item.userId,
|
|
|
+ userAvtar: item.userAvtar,
|
|
|
+ userName: item.userName,
|
|
|
+ prizes: [],
|
|
|
+ }
|
|
|
+ list[index].prizes.push(item)
|
|
|
+ } else {
|
|
|
+ let index = userIds.indexOf(item.userId)
|
|
|
+ list[index].prizes.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.userIds = userIds
|
|
|
+ this.prizeUserList = list
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPrizeList() {
|
|
|
+ let params = {
|
|
|
+ raffleId: this.params.raffleId,
|
|
|
+ }
|
|
|
+ prizeListApi(params).then(res => {
|
|
|
+ console.log(res, '奖池预览')
|
|
|
+ let newArray = res.data
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ if (res.data[i].type == 21) {
|
|
|
+ newArray = []
|
|
|
+ newArray.push(res.data[i])
|
|
|
+ res.data.splice(i, 1)
|
|
|
+ newArray.push(...res.data)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.prizeList = newArray
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toWinningRecord() {
|
|
|
+ let params = {
|
|
|
+ raffleId: this.params.raffleId,
|
|
|
+ }
|
|
|
+ this.$navigateTo('/pages/winningRecord/winningRecord', params)
|
|
|
+ },
|
|
|
+ getDetail() {
|
|
|
+ let params = {
|
|
|
+ raffleId: this.params.raffleId,
|
|
|
+ }
|
|
|
+ raffleDetailApi(params).then(res => {
|
|
|
+ console.log(res, '详情')
|
|
|
+ this.detail = res.data
|
|
|
+ this.endTime = new Date(this.detail.endTime).getTime()
|
|
|
+ // this.endTime = new Date('2023-11-10 14:48:00').getTime()
|
|
|
+ // 初始化倒计时
|
|
|
+ this.initCountdown()
|
|
|
+ if (this.countdown != '已结束') {
|
|
|
+ this.countdownInfinity = setInterval(() => {
|
|
|
+ if (this.countdown == '已结束') {
|
|
|
+ clearInterval(this.countdownInfinity)
|
|
|
+ this.countdownInfinity = null
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.initCountdown()
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initCountdown() {
|
|
|
+ let nowTime = new Date().getTime()
|
|
|
+ let endTime = this.endTime
|
|
|
+ let countdownText = ''
|
|
|
+ let countdown = endTime - nowTime
|
|
|
+ if (countdown <= 0) {
|
|
|
+ countdownText = '已结束'
|
|
|
+ } else {
|
|
|
+ countdownText = formatSeconds(countdown)
|
|
|
+ }
|
|
|
+ // console.log(countdownText, 'countdownText')
|
|
|
+ this.countdown = countdownText
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.selectIndex.length == 0) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '请选则要购买的卡牌。',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.paymentPopup.show(this.params.raffleId, this.selectIndex, this.detail)
|
|
|
+ },
|
|
|
+ // 支付成功后回调
|
|
|
+ paymentSuccess() {
|
|
|
+ let _this = this
|
|
|
+ console.log('刷新抽卡界面')
|
|
|
+ // 刷新界面
|
|
|
+ _this.refresh()
|
|
|
+ },
|
|
|
+ // 选中取消选中卡牌
|
|
|
+ clickCard(item) {
|
|
|
+ if (item.status == 0) {
|
|
|
+ item.check = !item.check
|
|
|
+ }
|
|
|
+ // 如果是选中
|
|
|
+ let index = this.selectIndex.indexOf(item.number)
|
|
|
+ if (item.check && index == -1) {
|
|
|
+ this.selectIndex.push(item.number)
|
|
|
+ } else if (!item.check && index != -1) {
|
|
|
+ this.selectIndex.splice(index, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 标记已经选中卡牌
|
|
|
+ selectFormat() {
|
|
|
+ for (var i = 0; i < this.cardList.length; i++) {
|
|
|
+ if (this.selectIndex.includes(this.cardList[i].number)) {
|
|
|
+ this.cardList[i].check = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCardList() {
|
|
|
+ prizePoolStatusApi(this.params).then(res => {
|
|
|
+ console.log(res, '卡牌分页')
|
|
|
+ for (var i = 0; i < res.data.list.length; i++) {
|
|
|
+ res.data.list[i].check = false
|
|
|
+ }
|
|
|
+ this.cardList = res.data.list
|
|
|
+ this.selectFormat()
|
|
|
+ this.total = res.data.total
|
|
|
+ })
|
|
|
+ },
|
|
|
+ left() {
|
|
|
+ console.log('上一页')
|
|
|
+ if (this.params.page > 1) {
|
|
|
+ this.params.page = this.params.page - 1
|
|
|
+ }
|
|
|
+ this.getCardList()
|
|
|
+ },
|
|
|
+ right() {
|
|
|
+ console.log('下一页')
|
|
|
+ let pages = Math.ceil(this.total / this.params.limit)
|
|
|
+ if (this.params.page < pages) {
|
|
|
+ this.params.page = this.params.page + 1
|
|
|
+ }
|
|
|
+ this.getCardList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.share_btn {
|
|
|
- background-color: transparent;
|
|
|
- border-width: 0 !important;
|
|
|
- border-radius: 0;
|
|
|
- overflow: initial;
|
|
|
- text-align: start;
|
|
|
- padding: 0;
|
|
|
- box-shadow: none !important;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- &::after {
|
|
|
- border: none;
|
|
|
- }
|
|
|
-}
|
|
|
-.container {
|
|
|
- background: #9ec8f9;
|
|
|
- padding-top: 15px;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .refresh {
|
|
|
- position: fixed;
|
|
|
- display: none;
|
|
|
- right: 4px;
|
|
|
- top: 75%;
|
|
|
- width: 40px;
|
|
|
- z-index: 5;
|
|
|
- }
|
|
|
-
|
|
|
- .head {
|
|
|
- background: #fff;
|
|
|
- border: 10px;
|
|
|
- padding: 15px;
|
|
|
- border-radius: 10px 10px 0 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 106px;
|
|
|
- height: 106px;
|
|
|
- border-radius: 5px;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: start;
|
|
|
- flex: 1;
|
|
|
- .row {
|
|
|
- margin: 5px 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- color: #999999;
|
|
|
-
|
|
|
- .button {
|
|
|
- width: 67px;
|
|
|
- }
|
|
|
-
|
|
|
- .hot {
|
|
|
- display: flex;
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .users {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .photo {
|
|
|
- position: absolute;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #ff2c43;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 14px;
|
|
|
- color: #999999;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cardList {
|
|
|
- margin: 10px;
|
|
|
- border-radius: 12px;
|
|
|
- position: relative;
|
|
|
- background: linear-gradient(180deg, #31b7fd 10%, #6478fd 90%);
|
|
|
- // overflow: scroll;
|
|
|
- padding-bottom: 1px;
|
|
|
- .countdown {
|
|
|
- position: absolute;
|
|
|
- top: 1px;
|
|
|
- padding-left: 70px;
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
- .itemHead {
|
|
|
- position: relative;
|
|
|
- left: -10px;
|
|
|
- top: -10px;
|
|
|
- width: calc(100% + 10px);
|
|
|
- }
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- color: #fff;
|
|
|
- padding: 0 15px 6px 15px;
|
|
|
-
|
|
|
- .left {
|
|
|
- .text1 {
|
|
|
- width: 6.5rem;
|
|
|
- // font-size: 24px;
|
|
|
- // font-weight: 600;
|
|
|
- // text-shadow: 1px 1px 0px #0A57BA;
|
|
|
- // font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
- }
|
|
|
- .text2 {
|
|
|
- font-family:
|
|
|
- Alimama FangYuanTi VF-Medium-Round,
|
|
|
- Alimama FangYuanTi VF-Medium;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- .text {
|
|
|
- width: 100px;
|
|
|
- font-size: 12px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .button {
|
|
|
- width: 72px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .bk {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .list {
|
|
|
- background: #fff;
|
|
|
- padding: 15px;
|
|
|
- border-radius: 12px;
|
|
|
- // width: calc(100% - 80px);
|
|
|
- // height: calc(100% - 70px);
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
|
- grid-template-rows: 1fr 1fr 1fr;
|
|
|
- grid-gap: 15px;
|
|
|
-
|
|
|
- .item {
|
|
|
- display: inline-flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .kaBkActive {
|
|
|
- height: 142%;
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- .kaBk {
|
|
|
- width: 100%;
|
|
|
- border-radius: 4px;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: 0;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buyButton {
|
|
|
- width: 40%;
|
|
|
- margin: 10px auto;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .winningList {
|
|
|
- margin: 20px 10px;
|
|
|
- padding: 15px;
|
|
|
- background: linear-gradient(180deg, #31b7fd 10%, #6478fd 90%);
|
|
|
- border-radius: 12px;
|
|
|
-
|
|
|
- .winningListTitle {
|
|
|
- width: 92px;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .list {
|
|
|
- position: relative;
|
|
|
- padding: 12px 7px 12px 12px;
|
|
|
- border-radius: 12px;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: calc(100% / 6 - 5px);
|
|
|
- // margin: 0 auto;
|
|
|
- position: relative;
|
|
|
- display: inline-flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-right: 5px;
|
|
|
-
|
|
|
- .photo {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #b6b6b6;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- margin-top: 5px;
|
|
|
- display: inline-block;
|
|
|
- font-size: 11px;
|
|
|
- max-width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buttons {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-start;
|
|
|
- padding: 0 10px;
|
|
|
-
|
|
|
- .button1 {
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .prizes {
|
|
|
- .title {
|
|
|
- width: 103px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .prizesList {
|
|
|
- margin: 20px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- // z-index: 5;
|
|
|
-
|
|
|
- .bk {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- .prizesTitle {
|
|
|
- position: relative;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- width: 100%;
|
|
|
- margin-left: 1px;
|
|
|
- margin-top: 15px;
|
|
|
- padding-left: 15px;
|
|
|
- color: #fff;
|
|
|
- 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;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- margin: 15px;
|
|
|
- white-space: wrap;
|
|
|
- text-align: center;
|
|
|
- // overflow: auto;
|
|
|
-
|
|
|
- .image {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- image {
|
|
|
- display: inline-block;
|
|
|
- width: 36vw;
|
|
|
- height: 36vw;
|
|
|
- border-radius: 10px;
|
|
|
- margin: 0 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .prizesImgOne {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin: 15px;
|
|
|
-
|
|
|
- .image {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- image {
|
|
|
- display: inline-block;
|
|
|
- width: 45vw;
|
|
|
- height: 45vw;
|
|
|
- border-radius: 10px;
|
|
|
- margin: 0 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .share_btn {
|
|
|
+ background-color: transparent;
|
|
|
+ border-width: 0 !important;
|
|
|
+ border-radius: 0;
|
|
|
+ overflow: initial;
|
|
|
+ text-align: start;
|
|
|
+ padding: 0;
|
|
|
+ box-shadow: none !important;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ background: #9ec8f9;
|
|
|
+ padding-top: 15px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .refresh {
|
|
|
+ position: fixed;
|
|
|
+ display: none;
|
|
|
+ right: 4px;
|
|
|
+ top: 75%;
|
|
|
+ width: 40px;
|
|
|
+ z-index: 5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ background: #fff;
|
|
|
+ border: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 106px;
|
|
|
+ height: 106px;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: start;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ margin: 5px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 67px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot {
|
|
|
+ display: flex;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .users {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ position: absolute;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ff2c43;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cardList {
|
|
|
+ margin: 10px;
|
|
|
+ border-radius: 12px;
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(180deg, #31b7fd 10%, #6478fd 90%);
|
|
|
+ // overflow: scroll;
|
|
|
+ padding-bottom: 1px;
|
|
|
+
|
|
|
+ .countdown {
|
|
|
+ position: absolute;
|
|
|
+ top: 1px;
|
|
|
+ padding-left: 70px;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemHead {
|
|
|
+ position: relative;
|
|
|
+ left: -10px;
|
|
|
+ top: -10px;
|
|
|
+ width: calc(100% + 10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 15px 6px 15px;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ .text1 {
|
|
|
+ width: 6.5rem;
|
|
|
+ // font-size: 24px;
|
|
|
+ // font-weight: 600;
|
|
|
+ // text-shadow: 1px 1px 0px #0A57BA;
|
|
|
+ // font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-family:
|
|
|
+ Alimama FangYuanTi VF-Medium-Round,
|
|
|
+ Alimama FangYuanTi VF-Medium;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 100px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 72px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bk {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 12px;
|
|
|
+ // width: calc(100% - 80px);
|
|
|
+ // height: calc(100% - 70px);
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
|
+ grid-template-rows: 1fr 1fr 1fr;
|
|
|
+ grid-gap: 15px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .kaBkActive {
|
|
|
+ height: 142%;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kaBk {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buyButton {
|
|
|
+ width: 40%;
|
|
|
+ margin: 10px auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .winningList {
|
|
|
+ margin: 20px 10px;
|
|
|
+ padding: 15px;
|
|
|
+ background: linear-gradient(180deg, #31b7fd 10%, #6478fd 90%);
|
|
|
+ border-radius: 12px;
|
|
|
+
|
|
|
+ .winningListTitle {
|
|
|
+ width: 92px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ position: relative;
|
|
|
+ padding: 12px 7px 12px 12px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: calc(100% / 6 - 5px);
|
|
|
+ // margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 5px;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #b6b6b6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-top: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 11px;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttons {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .button1 {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .prizes {
|
|
|
+ .title {
|
|
|
+ width: 103px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prizesList {
|
|
|
+ margin: 20px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ // z-index: 5;
|
|
|
+
|
|
|
+ .bk {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prizesTitle {
|
|
|
+ position: relative;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 100%;
|
|
|
+ margin-left: 1px;
|
|
|
+ margin-top: 15px;
|
|
|
+ padding-left: 15px;
|
|
|
+ color: #fff;
|
|
|
+ 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;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ margin: 15px;
|
|
|
+ white-space: wrap;
|
|
|
+ text-align: center;
|
|
|
+ // overflow: auto;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ display: inline-block;
|
|
|
+ width: 36vw;
|
|
|
+ height: 36vw;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .prizesImgOne {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 15px;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ display: inline-block;
|
|
|
+ width: 45vw;
|
|
|
+ height: 45vw;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
chenrong