|
|
@@ -0,0 +1,389 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="lucky"></view>
|
|
|
+ <u-overlay :show="luckyShow" :opacity="0.8" zIndex="100">
|
|
|
+ <view class="flex luck-warp" @touchmove.prevent.stop>
|
|
|
+ <view class="luck-info">
|
|
|
+ <view class="luck-info-bg">
|
|
|
+ <image src="../../static/lucky/lucky_bg.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="luck-info-content flex">
|
|
|
+ <view class="luck-info-content-num">
|
|
|
+ <image src="../../static/lucky/lucky_gkmp.png" mode="scaleToFill"
|
|
|
+ v-if="info.salePrice == 0"></image>
|
|
|
+ <image src="../../static/lucky/lucky_gkmptwo.png" mode="scaleToFill" v-else></image>
|
|
|
+ </view>
|
|
|
+ <view class="luck-info-content-img">
|
|
|
+ <view class="luck-info-content-img-word">
|
|
|
+ <image class="img" src="../../static/lucky/lucky_tu.png" mode="scaleToFill"></image>
|
|
|
+ <view class="luck-info-content-img-word__content">
|
|
|
+ <text>{{ info.awardsName }}</text>
|
|
|
+ </view>
|
|
|
+ <image class="imgtwo" src="../../static/lucky/lucky_xiaoguo.png" mode="scaleToFill"
|
|
|
+ v-if="infoimg">
|
|
|
+ </image>
|
|
|
+ <image class="img" src="../../static/lucky/lucky_guajiangqu.png" mode="scaleToFill"
|
|
|
+ v-if="info.status == 1">
|
|
|
+ <image class="imgone" src="../../static/lucky/lucky_yidong.png"
|
|
|
+ v-else-if="info.status == 2"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="luck-info-content-ticket">
|
|
|
+ <image src="../../static/lucky/lucky_piaohao.png" mode="scaleToFill"></image>
|
|
|
+ <view class="luck-info-content-ticket-info flex">
|
|
|
+ <view class="title" :class="{ 'action': info.status == 2 }">{{ info.title }}</view>
|
|
|
+ <view class="serialNo" :class="{ 'action': info.status == 2 }">序列号：{{ info.serialNo }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="luck-info-content-btn" style="width: 500rpx;" @click="toChoice" v-if="Choice">领取奖品</view>
|
|
|
+ <view class=" code" v-else>开奖啦!</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-overlay>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderId: '',
|
|
|
+ info: '',
|
|
|
+ luckyShow: true,
|
|
|
+ status: 2,
|
|
|
+ infoimg: false,
|
|
|
+ Choice: false,
|
|
|
+ ChoiceData: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.orderId) {
|
|
|
+ this.orderId = options.orderId
|
|
|
+ this.getDetail()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getDetail() {
|
|
|
+ let _this = this
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/ticket/query', {
|
|
|
+ orderId: this.orderId,
|
|
|
+ }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.data.status == 2) {
|
|
|
+ _this.info = res.data
|
|
|
+ setTimeout(() => {
|
|
|
+ this.infoimg = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.ChoiceData = res.data.ticketId
|
|
|
+ this.Choice = true
|
|
|
+ }, 500)
|
|
|
+ }, 500)
|
|
|
+ } else {
|
|
|
+ let num = 0
|
|
|
+ let time = setInterval(() => {
|
|
|
+ num++
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/ticket/query', {
|
|
|
+ orderId: this.orderId,
|
|
|
+ }).then(ele => {
|
|
|
+ if (ele.data.status == 2) {
|
|
|
+ uni.hideLoading();
|
|
|
+ clearInterval(time)
|
|
|
+ _this.info = res.data
|
|
|
+ setTimeout(() => {
|
|
|
+ this.infoimg = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.ChoiceData = res.data.ticketId
|
|
|
+ this.Choice = true
|
|
|
+
|
|
|
+ }, 500)
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (num == 10) {
|
|
|
+ uni.hideLoading();
|
|
|
+ clearInterval(time)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //跳转奖品页
|
|
|
+ toChoice() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/packagePrize/choice/index?id=${ this.ChoiceData }&type=offline`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .luck-warp {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .luck-info {
|
|
|
+ position: relative;
|
|
|
+ width: 87vw;
|
|
|
+ height: 60vh;
|
|
|
+
|
|
|
+ &-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 87vw;
|
|
|
+ height: 60vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 10;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &-num {
|
|
|
+ position: relative;
|
|
|
+ width: 422rpx;
|
|
|
+ height: 8vh;
|
|
|
+ margin-top: 16vh;
|
|
|
+ margin-bottom: 3vh;
|
|
|
+
|
|
|
+ image {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ &-img {
|
|
|
+ position: relative;
|
|
|
+ width: 73%;
|
|
|
+ height: 10vh;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+
|
|
|
+ &-word {
|
|
|
+ position: absolute;
|
|
|
+ top: 15%;
|
|
|
+ left: 5%;
|
|
|
+ width: 90%;
|
|
|
+ height: 85%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 82.6%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgtwo {
|
|
|
+ position: absolute;
|
|
|
+ width: 20%;
|
|
|
+ height: 82%;
|
|
|
+ left: -20%;
|
|
|
+ animation: shadowTwoMove 0.5s linear infinite;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgone {
|
|
|
+ position: absolute;
|
|
|
+ left: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ animation: shadowMove 0.5s linear infinite;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ position: absolute;
|
|
|
+ top: 25%;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-size: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #FEFEFE;
|
|
|
+ margin-bottom: 1vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-tip {
|
|
|
+ width: 80%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 35rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-ticket {
|
|
|
+ position: relative;
|
|
|
+ width: 73%;
|
|
|
+ height: 10vh;
|
|
|
+ margin-top: 2vh;
|
|
|
+
|
|
|
+ image {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 95%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-info {
|
|
|
+ width: 90%;
|
|
|
+ height: 75%;
|
|
|
+ left: 5%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 5;
|
|
|
+
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ color: #FF6D2C;
|
|
|
+ margin-top: 1vh;
|
|
|
+ margin-bottom: 1vh;
|
|
|
+ width: 90%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .serialNo {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF6D2C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ color: #FFCBAA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btn {
|
|
|
+ padding: 0 8%;
|
|
|
+ height: 7vh;
|
|
|
+ line-height: 7vh;
|
|
|
+ background: linear-gradient(0deg, #FF4924, #F9D448);
|
|
|
+ box-shadow: 0px 6px 9px 0px rgba(135, 19, 3, 0.49);
|
|
|
+ border-radius: 4vh;
|
|
|
+ text-align: center;
|
|
|
+ color: #FEFEFE;
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin-top: 1vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code {
|
|
|
+ padding: 0 20%;
|
|
|
+ height: 7vh;
|
|
|
+ line-height: 10vh;
|
|
|
+ text-align: center;
|
|
|
+ color: #FEFEFE;
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ font-size: 38rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-close {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -140rpx;
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .lucky {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/hit_bkg.png) center center no-repeat;
|
|
|
+ background-size: 100vw 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .null-prize {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 80vw;
|
|
|
+ height: 320rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border: 1px solid rgba(187, 187, 187, 100);
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin-top: 60rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: rgba(235, 112, 9, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 支付后移动动画
|
|
|
+ @keyframes shadowMove {
|
|
|
+ 0% {
|
|
|
+ left: 0%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ left: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 支付后移动动画
|
|
|
+ @keyframes shadowTwoMove {
|
|
|
+ 0% {
|
|
|
+ left: -20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ left: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
