|
|
@@ -0,0 +1,918 @@
|
|
|
+<template>
|
|
|
+ <div class="lucky" v-if="nextLevel">
|
|
|
+ <div class="banner"></div>
|
|
|
+ <div class="lottery container">
|
|
|
+ <div class="level" style="margin-top: 80px;" v-if="user.itemName === '王者'">
|
|
|
+ <img src="/images/lottery/level-04.png" alt=""/>
|
|
|
+ <div class="high_title">联系客服直接领取</div>
|
|
|
+ </div>
|
|
|
+ <div class="level" v-else>
|
|
|
+ <div class="low_level">
|
|
|
+ <img :src="user.itemName === '青铜' ? '/images/lottery/level-01.png' : user.itemName === '黄金' ? '/images/lottery/level-02.png' : '/images/lottery/level-03.png'" alt=""/>
|
|
|
+ <div class="level_title">青铜买家用户每发布十条询价便可获得一次抽奖机会</div>
|
|
|
+ </div>
|
|
|
+ <div class="up"><img src="/images/lottery/up.png" alt=""/><span>升级</span></div>
|
|
|
+ <div class="high_level">
|
|
|
+ <img :src="nextLevel.nextItem.name === '黄金' ? '/images/lottery/level-020.png' : nextLevel.nextItem.name === '钻石' ? '/images/lottery/level-030.png' : '/images/lottery/level-040.png'" alt=""/>
|
|
|
+ </div>
|
|
|
+ <div class="progress_bar" v-show="this.user.itemName === '青铜'">
|
|
|
+ <div class="buyer_inquiry inquiry">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="15" :percentage="inquiryRate"></el-progress>
|
|
|
+ <span class="all_count"><span v-text="buyerInquiryCount"></span>条询价</span>
|
|
|
+ <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span v-text="activityInquiryCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
|
|
|
+ </div>
|
|
|
+ <div class="vendor_inquiry inquiry">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="15" :percentage="replyRate"></el-progress>
|
|
|
+ <span class="all_count"><span v-text="vendorInquiryCount"></span>条询价</span>
|
|
|
+ <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>卖家再增加<span v-text="activityReplyCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="progress_bar" v-show="this.user.itemName === '黄金'">
|
|
|
+ <div class="buyer_inquiry inquiry" v-if="this.user.role === 'CUSTOMER'">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="15" :percentage="inquiryRate"></el-progress>
|
|
|
+ <span class="all_count"><span v-text="buyerInquiryCount"></span>条询价</span>
|
|
|
+ <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span v-text="activityInquiryCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
|
|
|
+ </div>
|
|
|
+ <div class="vendor_inquiry inquiry" v-if="this.user.role === 'SELLER'">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="15" :percentage="replyRate"></el-progress>
|
|
|
+ <span class="all_count"><span v-text="vendorInquiryCount"></span>条询价</span>
|
|
|
+ <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>卖家再增加<span v-text="activityReplyCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="progress_bar" v-show="this.user.itemName === '钻石' && this.user.role === 'CUSTOMER'">
|
|
|
+ <div class="buyer_inquiry inquiry">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="15" :percentage="inquiryRate"></el-progress>
|
|
|
+ <span class="all_count"><span v-text="buyerInquiryCount"></span>条询价</span>
|
|
|
+ <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span v-text="activityInquiryCount"></span>条报价，便可升级{{this.nextLevel.nextItem.name}}用户</div>
|
|
|
+ </div>
|
|
|
+ <div class="buyer_trad inquiry">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="15" :percentage="tradeRate"></el-progress>
|
|
|
+ <span class="all_count"><span v-text="buyerTradeCount"></span>元</span>
|
|
|
+ <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span v-text="activityTradeCount"></span>元交易额，便可升级{{this.nextLevel.nextItem.name}}用户</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="prize">
|
|
|
+ <div class="press-prise">
|
|
|
+ <div class="press_prise">
|
|
|
+ <ul class="nineGrid">
|
|
|
+ <li class="row">
|
|
|
+ <div v-for="(prise, index) in currentPrizes.slice(0, 3)" :class="activeIndex === index ? `active` : ``">
|
|
|
+ <div class="wrapper">
|
|
|
+ <img :src="prise.img" alt="">
|
|
|
+ <p v-text="prise.name"></p>
|
|
|
+ </div>
|
|
|
+ <div class="mask"></div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="row">
|
|
|
+ <div :class="activeIndex === 7 ? 'active': ''" class="grid_center">
|
|
|
+ <div class="wrapper">
|
|
|
+ <img :src="sevenPrize.img" alt="">
|
|
|
+ <p v-text="sevenPrize.name"></p>
|
|
|
+ </div>
|
|
|
+ <div class="mask"></div>
|
|
|
+ </div>
|
|
|
+ <div class="getLuck" @click="startLottery">
|
|
|
+ <p>立即抽奖</p>
|
|
|
+ </div>
|
|
|
+ <div :class="activeIndex === 3 ? 'active': ''" class="grid_center">
|
|
|
+ <div class="wrapper">
|
|
|
+ <img :src="thirdPrize.img" alt="">
|
|
|
+ <p v-text="thirdPrize.name"></p>
|
|
|
+ </div>
|
|
|
+ <div class="mask"></div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="row">
|
|
|
+ <div v-for="(prise, index) in currentPrize" :class="activeIndex === 6-index ? `active` : ``">
|
|
|
+ <div class="wrapper">
|
|
|
+ <img :src="prise.img" alt="">
|
|
|
+ <p v-text="prise.name"></p>
|
|
|
+ </div>
|
|
|
+ <div class="mask"></div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="lave-count">剩余<span>{{restCount}}</span>次</div>
|
|
|
+ <div class="tab-prise">
|
|
|
+ <span class="toggle"
|
|
|
+ v-for="(item, index) in user.userDetails"
|
|
|
+ :class="{'active' : index === selectLevelIndex}"
|
|
|
+ @click="toggleLevel(item)">{{item.itemName}}用户</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="look_prise">
|
|
|
+ <div class="header">
|
|
|
+ <span>获奖名单</span>
|
|
|
+ <span @click="lookMyPrizes(true)">查看我的奖品</span>
|
|
|
+ </div>
|
|
|
+ <div class="body">
|
|
|
+ <div class="list_head">
|
|
|
+ <span>时间</span>
|
|
|
+ <span>用户</span>
|
|
|
+ <span>奖品</span>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(record, index) in recordData" :key="index" :style="'top: -' + 40 * scrollTimerIndex + 'px'" :class="{'scrollTop': isTop}">
|
|
|
+ <div class="time" :title="record.drawnTime" v-text="record.drawnTime">2018-08-08</div>
|
|
|
+ <div class="company" :title="record.userName" v-text="record.userName">深圳市优软科技有限公司公司深圳市优软科技有限公司公司</div>
|
|
|
+ <div class="prise_level" :title="record.prizeName" v-text="record.prizeName">一等奖</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="describe">
|
|
|
+ <img src="/images/lottery/describe.png" alt=""/>
|
|
|
+ </div>
|
|
|
+ <div class="rule">
|
|
|
+ <header>活动规则</header>
|
|
|
+ <div class="section">
|
|
|
+ <div class="list">1、活动时间：九月起；</div>
|
|
|
+ <div class="list">2、三个月内的重复型号询价，不计入抽奖机会；</div>
|
|
|
+ <div class="list">3、钻石用户连续3个月内累计的数据达到抽奖资格，将于最近的一次抽奖中参与，如9-10-11月内达到抽奖资格，将在12月底的抽奖(钻石用户领奖在每个季度最后一个工作日)，钻石用户奖品 将由我们电话联系用户；</div>
|
|
|
+ <div class="list">4、获得实物礼品的客户，联系客服微信领取；</div>
|
|
|
+ <div class="list">5、活动礼品按周发放；</div>
|
|
|
+ <div class="list">6、对活动规则以及礼品发送有疑问，请联系在线客服（友情提示：客服在线时间周一至周五，早九点至晚六点，法定节假日除外）；</div>
|
|
|
+ <div class="list">7、领奖时，兑换码和手机号为一致，便可兑换奖品，望您妥善保管；</div>
|
|
|
+ <div class="list">8、本次活动所属权归优软商城所有。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--去登录-->
|
|
|
+ <div class="no-prise login">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showLoginBox">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <img src="/images/lottery/hua.png" class="hua" alt=""/>
|
|
|
+ <p>你还未登录，请登陆后抽奖</p>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <a type="button" @click="goLogin">确认</a>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!--未获得抽奖机会-->
|
|
|
+ <div class="no-prise">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showNoPriseBox">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <img src="/images/lottery/hua.png" class="hua" alt=""/>
|
|
|
+ <p>您未获得抽奖机会，请您先发布询价</p>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <a type="button" @click="sureInquiry(false)">确认</a>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!--未抽中奖品还有机会-->
|
|
|
+ <div class="no-prise">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showChooseBox">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <img src="/images/lottery/hua.png" class="hua" alt=""/>
|
|
|
+ <p>很遗憾，您没有中奖，下次还有机会！</p>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <a type="button" @click="showChooseBox = false">确认</a>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!--中奖提示-->
|
|
|
+ <div class="no-prise get-prise" v-if="winningInfo.data">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showGetPriseBox">
|
|
|
+ <div class="dialog-content" v-if="winningInfo.data.name === ''">
|
|
|
+ <!--<div class="close" @click="showGetPriseBox = false">×</div>-->
|
|
|
+ <img src="/images/lottery/hua.png" class="hua" alt=""/>
|
|
|
+ <p>很遗憾，您没有中奖，下次还有机会！</p>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <a type="button" @click="closeGotPriseInfo(false)">确认</a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-content" v-else>
|
|
|
+ <!--<div class="close" @click="showGetPriseBox = false">×</div>-->
|
|
|
+ <img src="/images/lottery/hua.png" class="hua" alt=""/>
|
|
|
+ <p>恭喜您抽中<span v-text="winningInfo.data.name"></span>，请添加客服微信使用兑换码兑换</p>
|
|
|
+ <div class="qr"><p>扫描微信二维码或添加XXX微信领取奖品</p><img src="/images/lottery/qr.png" alt=""/></div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <a type="button" @click="closeGotPriseInfo(false)">确认</a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!--查看我的奖品-->
|
|
|
+ <div class="no-prise look-prise">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="lookPriseBox">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <div class="close" @click="lookPriseBox = false">×</div>
|
|
|
+ <img src="/images/lottery/hua.png" class="hua" alt=""/>
|
|
|
+ <div class="btn-tip">奖品列表</div>
|
|
|
+ <div v-if="ownRecordData.content && ownRecordData.content.length">
|
|
|
+ <div style="margin: 0 auto; text-align: center; width: 700px;">
|
|
|
+ <div class="prise-tab"><span>奖品</span><span>竞换码</span><span>中奖时间</span><span>竞换状态</span></div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="item in ownRecordData.content">
|
|
|
+ <div :title="item.prizeName" v-text="item.prizeName">一等奖</div>
|
|
|
+ <div :title="item.code" v-text="item.code">YRQT0010</div>
|
|
|
+ <div :title="item.drawnTime" v-text="item.drawnTime">2018年12月30日</div>
|
|
|
+ <div v-text="item.status === 100 ? '已兑奖' : item.status === 200 ? '未兑奖' : ''">已兑换</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div style="float: right;">
|
|
|
+ <page :total="ownRecordData.totalElements" :page-size="pageParams.count"
|
|
|
+ :current="pageParams.page" @childEvent="handleCurrentChange"></page>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="prise-style">兑奖方式：扫描微信二维码或添加XXXX微信领取奖品 <img src="/images/lottery/mall_qr.png" alt=""/></div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="no_prise"><i class="fa fa-smile-o fa-lg"></i>暂无中奖记录</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!--二维码-->
|
|
|
+ <div class="qr-active">
|
|
|
+ <img src="/images/lottery/qr.png" alt=""/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import Page from '~components/common/page/pageComponent.vue'
|
|
|
+ export default {
|
|
|
+ name: 'lottery',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ pageParams: {
|
|
|
+ page: 1,
|
|
|
+ count: 3
|
|
|
+ },
|
|
|
+ activeIndex: -1, // 当前转动到哪个位置，起点位置
|
|
|
+ count: 8, // 总共有多少个位置
|
|
|
+ timer: 0, // 每次转动定时器
|
|
|
+ speed: 200, // 初始转动速度
|
|
|
+ times: 0, // 转动次数
|
|
|
+ cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
|
|
|
+ prize: -1, // 中奖位置
|
|
|
+ click: true,
|
|
|
+ showToast: false,
|
|
|
+ showLoginBox: false,
|
|
|
+ showNoPriseBox: false,
|
|
|
+ lookPriseBox: false,
|
|
|
+ showChooseBox: false,
|
|
|
+ showGetPriseBox: false,
|
|
|
+ scrollTimer: {},
|
|
|
+ scrollTimerIndex: 0,
|
|
|
+ isTop: false,
|
|
|
+ selectLevelIndex: 0,
|
|
|
+ // 询价
|
|
|
+ buyerInquiryCount: 0,
|
|
|
+ activityInquiryCount: 0,
|
|
|
+ inquiryRate: 0,
|
|
|
+ // 回复
|
|
|
+ vendorInquiryCount: 0,
|
|
|
+ activityReplyCount: 0,
|
|
|
+ replyRate: 0,
|
|
|
+ thirdPrize: {},
|
|
|
+ sevenPrize: {},
|
|
|
+ // 钻石交易
|
|
|
+ buyerTradeCount: 0,
|
|
|
+ activityTradeCount: 0,
|
|
|
+ tradeRate: 0,
|
|
|
+ restCount: 0,
|
|
|
+ pCode: '',
|
|
|
+ gotIndexItem: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Page
|
|
|
+ },
|
|
|
+ fetch ({ store }) {
|
|
|
+ return Promise.all([
|
|
|
+ // 获取个人中奖
|
|
|
+ store.dispatch('lottery/getOwnLotteryInfo', {activityCode: '11wwwwwwww',itemCode: this.user.itemCode})
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ user () {
|
|
|
+ console.log(this.$store.state.lottery.lotteryInfo.userInfo.data.data, 'user')
|
|
|
+ return this.$store.state.lottery.lotteryInfo.userInfo.data ? this.$store.state.lottery.lotteryInfo.userInfo.data.data : []
|
|
|
+ },
|
|
|
+ nextLevel () {
|
|
|
+ console.log(this.$store.state.lottery.lotteryInfo.nextLevel.data.data, 'next')
|
|
|
+ return this.$store.state.lottery.lotteryInfo.nextLevel.data ? this.$store.state.lottery.lotteryInfo.nextLevel.data.data : []
|
|
|
+ },
|
|
|
+ recordData () {
|
|
|
+ return this.$store.state.lottery.lotteryInfo.record.data ? this.$store.state.lottery.lotteryInfo.record.data.data : []
|
|
|
+ },
|
|
|
+ ownRecordData () {
|
|
|
+ return this.$store.state.lottery.lotteryInfo.ownRecord.data ? this.$store.state.lottery.lotteryInfo.ownRecord.data : []
|
|
|
+ },
|
|
|
+ currentPrizes () {
|
|
|
+ console.log(this.$store.state.lottery.lotteryInfo.prizes.data, 'current')
|
|
|
+ return this.$store.state.lottery.lotteryInfo.prizes.data ? this.$store.state.lottery.lotteryInfo.prizes.data.data : []
|
|
|
+ },
|
|
|
+ currentPrize () {
|
|
|
+ return this.currentPrizes.slice(4,7).reverse()
|
|
|
+ },
|
|
|
+ winningInfo () {
|
|
|
+ return this.$store.state.lottery.lotteryInfo.ownLotteryInfo.data ? this.$store.state.lottery.lotteryInfo.ownLotteryInfo.data : []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.scrollInterval(true)
|
|
|
+ this.getDetail()
|
|
|
+ this.getLevel()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 去询价
|
|
|
+ sureInquiry (type) {
|
|
|
+ this.showNoPriseBox = type
|
|
|
+ this.$router.push('/applyPurchase')
|
|
|
+ },
|
|
|
+ // 获取第3和第7奖品详情
|
|
|
+ getDetail () {
|
|
|
+ this.currentPrizes.forEach((item, index) => {
|
|
|
+ if (index === 3) {
|
|
|
+ this.thirdPrize = item
|
|
|
+ }
|
|
|
+ if (index === 7) {
|
|
|
+ this.sevenPrize = item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取等级
|
|
|
+ getLevel () {
|
|
|
+ this.nextLevel.currentItem.activityItemDetails.forEach(item => {
|
|
|
+ let percent = Number(100)
|
|
|
+ if (item.type === 'CUSTOMER_UPGRADE' && this.user.itemName === '青铜') {
|
|
|
+ this.buyerInquiryCount = item.amount
|
|
|
+ this.activityInquiryCount = this.buyerInquiryCount - this.user.activityInquiryCount
|
|
|
+ let inquiry = (percent - ((this.activityInquiryCount / this.buyerInquiryCount) * 100)).toFixed(0)
|
|
|
+ this.inquiryRate = Number(inquiry)
|
|
|
+ }
|
|
|
+ if (item.type === 'SELLER_UPGRADE' && this.user.itemName === '青铜') {
|
|
|
+ this.vendorInquiryCount = item.amount
|
|
|
+ this.activityReplyCount = this.vendorInquiryCount - this.user.activityReplyCount
|
|
|
+ let replay = (percent - ((this.activityReplyCount / this.vendorInquiryCount) * 100)).toFixed(0)
|
|
|
+ this.replyRate = Number(replay)
|
|
|
+ }
|
|
|
+ if (this.user.role === 'CUSTOMER' && item.type === 'CUSTOMER_UPGRADE' && this.user.itemName === '黄金') {
|
|
|
+ this.buyerInquiryCount = item.amount
|
|
|
+ this.activityInquiryCount = this.buyerInquiryCount - this.user.itemCount
|
|
|
+ let inquiry = (percent - ((this.activityInquiryCount / this.buyerInquiryCount) * 100)).toFixed(0)
|
|
|
+ this.inquiryRate = Number(inquiry)
|
|
|
+ }
|
|
|
+ if (this.user.role === 'SELLER' && item.type === 'SELLER_UPGRADE' && this.user.itemName === '黄金') {
|
|
|
+ this.vendorInquiryCount = item.amount
|
|
|
+ this.activityReplyCount = this.vendorInquiryCount - this.user.itemCount
|
|
|
+ let replay = (percent - ((this.activityReplyCount / this.vendorInquiryCount) * 100)).toFixed(0)
|
|
|
+ this.replyRate = Number(replay)
|
|
|
+ }
|
|
|
+ if (this.user.role === 'CUSTOMER' && item.type === 'CUSTOMER_UPGRADE' && item.resource === 'INQUIRY' && this.user.itemName === '钻石') {
|
|
|
+ this.buyerInquiryCount = item.amount
|
|
|
+ this.activityInquiryCount = this.buyerInquiryCount - this.user.itemCount
|
|
|
+ let inquiry = (percent - ((this.activityInquiryCount / this.buyerInquiryCount) * 100)).toFixed(0)
|
|
|
+ this.inquiryRate = Number(inquiry)
|
|
|
+ }
|
|
|
+ if (this.user.role === 'CUSTOMER' && item.type === 'CUSTOMER_UPGRADE' && item.resource === 'TRADE_AMOUNT' && this.user.itemName === '钻石') {
|
|
|
+ this.buyerTradeCount = item.amount
|
|
|
+ this.activityTradeCount = this.buyerTradeCount - this.user.activityTradeCount
|
|
|
+ let trad = (percent - ((this.activityTradeCount / this.buyerTradeCount) * 100)).toFixed(3)
|
|
|
+ this.tradeRate = Number(trad)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOwnWiningInfo () {
|
|
|
+ this.$http.get('/lottery/user/draw', {params: {activityCode: '11wwwwwwww', itemCode: this.pCode ? this.pCode : this.user.itemCode}})
|
|
|
+ .then(res => {
|
|
|
+ console.log(res.data, 'res.data')
|
|
|
+ let _arr = []
|
|
|
+ for (let i = 0; i < this.currentPrizes.length; i++) {
|
|
|
+ console.log(this.currentPrizes[i].code, 'code')
|
|
|
+ if (this.currentPrizes[i].code === res.data.data.code) {
|
|
|
+ _arr.push(this.currentPrizes[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.gotIndexItem = _arr.slice(0, 1)[0].$index
|
|
|
+ console.log(_arr.slice(0, 1)[0], 'gotItem0')
|
|
|
+ console.log(this.gotIndexItem, 'gotItem')
|
|
|
+ console.log(_arr)
|
|
|
+ this.$store.commit('lottery/lotteryInfo/GET_OWN_LOTTERY_INFO_SUCCESS', res.data)
|
|
|
+ }, err => {
|
|
|
+ this.$store.commit('lottery/lotteryInfo/GET_OWN_LOTTERY_INFO_FAILURE', err)
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 切换等级
|
|
|
+ toggleLevel (item) {
|
|
|
+ console.log(item, 'item')
|
|
|
+ if (item.itemName === '钻石') {
|
|
|
+ this.$message.info('钻石等级暂不能自主抽奖')
|
|
|
+ } else {
|
|
|
+ this.pCode = item.itemCode
|
|
|
+ this.restCount = item.lotteryCount
|
|
|
+ if (this.pCode) {
|
|
|
+ this.$http.get('/lottery//user/prizes', {params: {activityCode: '11wwwwwwww', itemCode: this.pCode}})
|
|
|
+ .then(res => {
|
|
|
+ this.$store.commit('lottery/lotteryInfo/GET_CURRENT_GRADE_PRIZES_SUCCESS', res.data)
|
|
|
+ setTimeout( () => {
|
|
|
+ this.getDetail()
|
|
|
+ }, 0)
|
|
|
+ }, err => {
|
|
|
+ this.$store.commit('lottery/lotteryInfo/GET_CURRENT_GRADE_PRIZES_FAILURE', err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查看我的奖品
|
|
|
+ lookMyPrizes (type) {
|
|
|
+ this.lookPriseBox = type
|
|
|
+ },
|
|
|
+ // 去登录
|
|
|
+ goLogin () {
|
|
|
+ this.$router.push('/auth/login?returnUrl=' + window.location.href)
|
|
|
+ },
|
|
|
+ // 开始抽奖
|
|
|
+ startLottery () {
|
|
|
+ if (this.$store.state.option.user.logged) {
|
|
|
+ if (this.restCount < 1) {
|
|
|
+ this.showNoPriseBox = true
|
|
|
+ } else {
|
|
|
+ if (!this.click) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.getOwnWiningInfo()
|
|
|
+ this.closeToast()
|
|
|
+ this.speed = 200
|
|
|
+ this.click = false
|
|
|
+ this.startRoll()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.showLoginBox = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 开始转动
|
|
|
+ startRoll () {
|
|
|
+ this.times += 1 // 转动次数
|
|
|
+ this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化
|
|
|
+ // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
|
|
|
+ if (this.times > this.cycle + 10 && this.prize === this.activeIndex) {
|
|
|
+ clearTimeout(this.timer) // 清除转动定时器，停止转动
|
|
|
+ this.prize = -1
|
|
|
+ this.times = 0
|
|
|
+ this.click = true
|
|
|
+ this.showToast = true
|
|
|
+ // console.log('你已经中奖了')
|
|
|
+ this.showGetPriseBox = true
|
|
|
+ } else {
|
|
|
+ if (this.times < this.cycle) {
|
|
|
+ this.speed -= 10 // 加快转动速度
|
|
|
+ } else if (this.times === this.cycle) { // 随机获得一个中奖位置
|
|
|
+ // const index = parseInt(Math.random() * 10, 0) || 0
|
|
|
+ this.prize = this.gotIndexItem
|
|
|
+ if (this.prize > 7) {
|
|
|
+ this.prize = 7
|
|
|
+ }
|
|
|
+ // console.log(`中奖位置${this.prize}`)
|
|
|
+ } else if (this.times > this.cycle + 10 &&
|
|
|
+ ((this.prize === 0 && this.activeIndex === 7) || this.prize === this.activeIndex + 1)) {
|
|
|
+ this.speed += 110
|
|
|
+ } else {
|
|
|
+ this.speed += 20
|
|
|
+ }
|
|
|
+ if (this.speed < 40) {
|
|
|
+ this.speed = 40
|
|
|
+ }
|
|
|
+ this.timer = setTimeout(this.startRoll, this.speed)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 每一次转动
|
|
|
+ oneRoll () {
|
|
|
+ let index = this.activeIndex // 当前转动到哪个位置
|
|
|
+ const count = this.count // 总共有多少个位置
|
|
|
+ index += 1
|
|
|
+ if (index > count - 1) {
|
|
|
+ index = 0
|
|
|
+ }
|
|
|
+ this.activeIndex = index
|
|
|
+ },
|
|
|
+ // 关闭弹出框
|
|
|
+ closeToast () {
|
|
|
+ this.showToast = false
|
|
|
+ },
|
|
|
+ // 我的奖品
|
|
|
+ scrollInterval (flag) {
|
|
|
+ // let _arr = {}
|
|
|
+ // _arr = this.recordData
|
|
|
+ if (flag && this.recordData.length > 5) {
|
|
|
+ this.scrollTimer = setInterval(() => {
|
|
|
+ this.scrollTimerIndex ++
|
|
|
+ this.isTop = (this.scrollTimerIndex % 45 === 0)
|
|
|
+ if (this.isTop) {
|
|
|
+ this.scrollTimerIndex = 0
|
|
|
+ // for (let i = 0; i < this.recordData; i++) {
|
|
|
+ // _arr.push(this.recordData.pop())
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }, 3000)
|
|
|
+ } else {
|
|
|
+ clearInterval(this.scrollTimer)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 个人奖品分页
|
|
|
+ handleCurrentChange (page) {
|
|
|
+ this.pageParams.page = page
|
|
|
+ this.pageCommodity(this.pageParams)
|
|
|
+ },
|
|
|
+ async pageCmpGoods (pageParams) {
|
|
|
+ console.log(pageParams)
|
|
|
+ params.page = pageParams.page
|
|
|
+ params.count = pageParams.count
|
|
|
+ params.activityCode = '11wwwwwwww'
|
|
|
+ try {
|
|
|
+ let { data } = await this.$http.get('/lottery/user/winninghistories/one', { params })
|
|
|
+ this.$store.commit('lottery/lotteryInfo/GET_OWN_WIN_RECORD_SUCCESS', data)
|
|
|
+ } catch (err) {
|
|
|
+ this.$store.commit('lottery/lotteryInfo/GET_OWN_WIN_RECORD_FAILURE', err)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeGotPriseInfo (type) {
|
|
|
+ this.showGetPriseBox = type
|
|
|
+ this.prize = -1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .lucky {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ background: #88dcf4;
|
|
|
+ .qr-active {
|
|
|
+ position: fixed;
|
|
|
+ top: 300px;
|
|
|
+ right: 50px;
|
|
|
+ }
|
|
|
+ .banner{
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 552px;
|
|
|
+ text-align: center;
|
|
|
+ background: url('/images/lottery/banner.png') center center/auto 100% no-repeat #018bff;
|
|
|
+ }
|
|
|
+ .lottery{
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 100px !important;
|
|
|
+ width: 1190px;
|
|
|
+ text-align: center;
|
|
|
+ .level{
|
|
|
+ position: relative;
|
|
|
+ margin-top: 140px;
|
|
|
+ .low_level{
|
|
|
+ width: 372px;
|
|
|
+ .level_title {
|
|
|
+ margin: 20px auto 0;
|
|
|
+ padding: 9px 23px 10px 22px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #fcac46;
|
|
|
+ border-radius: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .high_title{
|
|
|
+ width: 184px;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ padding: 10px 12px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #fcac46;
|
|
|
+ border-radius: 15px;
|
|
|
+ }
|
|
|
+ .up {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 320px;
|
|
|
+ span{
|
|
|
+ position: absolute;
|
|
|
+ top: 28px;
|
|
|
+ left: 229px;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #693100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .high_level {
|
|
|
+ position: absolute;
|
|
|
+ top: -107px;
|
|
|
+ left: 803px
|
|
|
+ }
|
|
|
+ .progress_bar {
|
|
|
+ position: absolute;
|
|
|
+ top: 245px;
|
|
|
+ left: 460px;
|
|
|
+ width: 511px;
|
|
|
+ .inquiry {
|
|
|
+ position: relative;
|
|
|
+ div.tip_text{
|
|
|
+ padding-left: 20px;
|
|
|
+ margin-top: 18px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #0082c4;
|
|
|
+ text-align: left;
|
|
|
+ img{
|
|
|
+ margin: -4px 10px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span.all_count{
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ left: 525px;
|
|
|
+ width: 136px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #0083c5;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vendor_inquiry, .buyer_trad{
|
|
|
+ margin-top: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .prize{
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 110px auto;
|
|
|
+ .press-prise {
|
|
|
+ float: left;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 500px;
|
|
|
+ text-align: center;
|
|
|
+ .lave-count{
|
|
|
+ margin: 22px 0;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff6600;
|
|
|
+ >span{
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff6600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-prise{
|
|
|
+ span.toggle{
|
|
|
+ display: inline-block;
|
|
|
+ width: 131px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #fdd557;
|
|
|
+ border-radius: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 16px;
|
|
|
+ &:hover, &.active{
|
|
|
+ background-color: #ff9000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .press_prise{
|
|
|
+ position: relative;
|
|
|
+ width: 494px;
|
|
|
+ height: 309px;
|
|
|
+ background-color: #ffbe04;
|
|
|
+ border-radius: 13px;
|
|
|
+ .nineGrid {
|
|
|
+ padding-right: 15px;
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ left: 8px;
|
|
|
+ width: 478px;
|
|
|
+ height: 293px;
|
|
|
+ background-color: #ff9000;
|
|
|
+ border-radius: 13px;
|
|
|
+ li {
|
|
|
+ height: 86px;
|
|
|
+ display: flex;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 10px;
|
|
|
+ .wrapper {
|
|
|
+ width: 148px;
|
|
|
+ height: 80px;
|
|
|
+ background-color: #fff2cf;
|
|
|
+ border-radius: 13px;
|
|
|
+ box-shadow: 0 7px 0 #ffc63c;
|
|
|
+ -moz-box-shadow: 0 7px 0 #ffc63c;
|
|
|
+ -o-box-shadow: 0 7px 0 #ffc63c;
|
|
|
+ -webkit-box-shadow: 0 7px 0 #ffc63c;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ /*width: 46px;*/
|
|
|
+ /*height: 38px;*/
|
|
|
+ vertical-align: middle;
|
|
|
+ margin: 8px 0;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ color: #ff6000;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .mask {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 148px;
|
|
|
+ height: 86px;
|
|
|
+ opacity: 0.5;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #000;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >div:nth-child(2) .wrapper {
|
|
|
+ background: #fee6a7;
|
|
|
+ }
|
|
|
+ >div.grid_center .wrapper{
|
|
|
+ background: #fee6a7;
|
|
|
+ }
|
|
|
+ > div.active {
|
|
|
+ .mask {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > div:first-child {
|
|
|
+ margin-left: 24px;
|
|
|
+ }
|
|
|
+ > div.getLuck {
|
|
|
+ margin-right: 6px;
|
|
|
+ width: 148px;
|
|
|
+ height: 80px;
|
|
|
+ background-color: #fddb00;
|
|
|
+ border-radius: 13px;
|
|
|
+ box-shadow: 0 7px 0 #ffc63c;
|
|
|
+ -moz-box-shadow: 0 7px 0 #ffc63c;
|
|
|
+ -o-box-shadow: 0 7px 0 #ffc63c;
|
|
|
+ -webkit-box-shadow: 0 7px 0 #ffc63c;
|
|
|
+ cursor: pointer;
|
|
|
+ p {
|
|
|
+ font-size: 27px;
|
|
|
+ font-weight: 900;
|
|
|
+ color: #f91f00;
|
|
|
+ line-height: 85px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(2), li:last-child {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .look_prise{
|
|
|
+ float: right;
|
|
|
+ width: 582px;
|
|
|
+ .header {
|
|
|
+ padding: 0 8px 0 28px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 582px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background-color: #fdd557;
|
|
|
+ border-radius: 13px 13px 0px 0px;
|
|
|
+ span{
|
|
|
+ color: #846244;
|
|
|
+ &:first-child {
|
|
|
+ float: left;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 8px;
|
|
|
+ float: right;
|
|
|
+ width: 134px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ font-size: 18px;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: solid 1px #846244;
|
|
|
+ cursor: pointer ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .body{
|
|
|
+ padding: 0 24px 29px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0px 0px 13px 13px;
|
|
|
+ .list_head{
|
|
|
+ width: 100%;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ border-bottom: solid 1px #846244;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #846244;
|
|
|
+ &:first-child {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ width: 100%;
|
|
|
+ height: 296px;
|
|
|
+ overflow: hidden;
|
|
|
+ li{
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ transition: top 1s;
|
|
|
+ -moz-transition: top 1s;
|
|
|
+ -webkit-transition: top 1s;
|
|
|
+ -o-transition: top 1s;
|
|
|
+ &.scrollTop {
|
|
|
+ transition: top 0s;
|
|
|
+ -moz-transition: top 0s;
|
|
|
+ -webkit-transition: top 0s;
|
|
|
+ -o-transition: top 0s;
|
|
|
+ }
|
|
|
+ div{
|
|
|
+ float: left;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #846244;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ &:first-child {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .describe{
|
|
|
+ margin-bottom: 88px;
|
|
|
+ }
|
|
|
+ .rule{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 1040px;
|
|
|
+ text-align: center;
|
|
|
+ header{
|
|
|
+ padding-left: 14px;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #846244;
|
|
|
+ background-color: #fdd557;
|
|
|
+ border-radius: 13px 13px 0px 0px;
|
|
|
+ }
|
|
|
+ .section{
|
|
|
+ padding: 20px 20px 36px 14px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 0px 0px 13px 13px;
|
|
|
+ .list{
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #846244;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wangcz
