|
@@ -1,590 +1,696 @@
|
|
|
-<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="aspectFit"
|
|
|
- v-if="info.salePrice == 0"></image>
|
|
|
- <image src="../../static/lucky/zioff.png" mode="aspectFit" 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="pay"
|
|
|
- v-if="info.status == 1 && info.salePrice != 0">
|
|
|
- 支付{{ info.salePrice / 100 }}元,立即刮奖</view>
|
|
|
- <view class="luck-info-content-btn" style="width: 500rpx;" @click="payDetail"
|
|
|
- v-else-if="info.status == 1 && info.salePrice == 0">收下盲票,立即刮奖</view>
|
|
|
- <!-- <view class=" code" v-else>开奖啦!</view> -->
|
|
|
- <view class="luck-info-content-btn" style="width: 500rpx;" @click="toChoice" v-if="Choice">领取奖品
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="luck-info-close flex">
|
|
|
- <navigator open-type="exit" target="miniProgram" hover-class="none"
|
|
|
- class="luck-info-close-content flex">
|
|
|
- <u-icon name="close" color="#fff" size="20"></u-icon>
|
|
|
- </navigator>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-overlay>
|
|
|
-
|
|
|
- <pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" v-if="payShow" />
|
|
|
-
|
|
|
- <u-popup :show="showNull" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
|
|
|
- @touchmove.prevent.stop>
|
|
|
- <view class="null-prize">
|
|
|
- <view class="title">该盲票已兑奖</view>
|
|
|
- <view class="btn" @click="toUser">确认</view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- <u-popup :show="tipShow" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
|
|
|
- @touchmove.prevent.stop>
|
|
|
- <view class="null-prize">
|
|
|
- <view class="title">该盲票已被他人买走了</view>
|
|
|
- <view class="btn" @click="toUser">确认</view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- <u-popup :show="showAction" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
|
|
|
- @touchmove.prevent.stop>
|
|
|
- <view class="null-prize">
|
|
|
- <view class="title">该盲票未激活</view>
|
|
|
- <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import env from '../../config/env.js'
|
|
|
- import $http from '@/utils/request.js'
|
|
|
- import appId from '@/config/appId.js'
|
|
|
- import PayPopup from '../../components/pay-popup/pay-popup.vue'
|
|
|
- import {
|
|
|
- urlParameter
|
|
|
- } from '@/utils/util.js'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- PayPopup
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- serialNo: '',
|
|
|
- info: '',
|
|
|
- payInfo: {},
|
|
|
- payShow: false,
|
|
|
- payLookFlag: true,
|
|
|
- showNull: false,
|
|
|
- luckyShow: false,
|
|
|
- status: 2,
|
|
|
- showAction: false,
|
|
|
- infoimg: false,
|
|
|
- Choice: false,
|
|
|
- ChoiceData: '',
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- onLoad(options) {
|
|
|
- if (options.id) {
|
|
|
- this.serialNo = options.id
|
|
|
- this.getDetail()
|
|
|
- }
|
|
|
- if (options.q) {
|
|
|
- let obj = urlParameter(decodeURIComponent(options.q))
|
|
|
- this.serialNo = obj.id
|
|
|
- this.getDetail()
|
|
|
- }
|
|
|
- if(uni.getStorageSync('code')){
|
|
|
- this.serialNo = uni.getStorageSync('code')
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- if(uni.getStorageSync('code')){
|
|
|
- this.serialNo = uni.getStorageSync('code')
|
|
|
- this.getDetail()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- getDetail() {
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
|
|
|
- serialNo: this.serialNo,
|
|
|
- noToken: true
|
|
|
- }).then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 0) {
|
|
|
- if (res.data.status == 1) {
|
|
|
- this.info = res.data
|
|
|
- this.luckyShow = true
|
|
|
- } else if (res.data.status == 2) {
|
|
|
- this.info = res.data
|
|
|
- if (uni.getStorageSync('token')) {
|
|
|
- uni.redirectTo({
|
|
|
- url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offline`
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.luckyShow = true
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '您未登录或登录失效!',
|
|
|
- confirmText: '去登录',
|
|
|
- showCancel: false,
|
|
|
- success(res) {
|
|
|
- if (res.confirm) {
|
|
|
- uni.navigateTo({
|
|
|
- url: "/pages/login/index"
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.showNull = true
|
|
|
- this.luckyShow = false
|
|
|
- }
|
|
|
- } else if (res.code == 1023) {
|
|
|
- this.showAction = true
|
|
|
- this.luckyShow = false
|
|
|
- } else {
|
|
|
- uni.$u.toast('该盲票不存在!');
|
|
|
- setTimeout(() => {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index'
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- getDetailInfo() {
|
|
|
- let _this = this
|
|
|
- _this.payShow = false
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
|
|
|
- serialNo: _this.serialNo,
|
|
|
- noToken: true
|
|
|
- }).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/queryLuckyNum', {
|
|
|
- serialNo: _this.serialNo,
|
|
|
- noToken: true
|
|
|
- }).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`
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- close() {
|
|
|
- this.payShow = false
|
|
|
- },
|
|
|
- payDetail() {
|
|
|
- let data = {
|
|
|
- ticketId: this.info.ticketId,
|
|
|
- autoCoupon: 0,
|
|
|
- userCouponIds: [],
|
|
|
- orderNum: 1,
|
|
|
- appSource: appId
|
|
|
- }
|
|
|
- uni.showLoading();
|
|
|
- let suid = uni.getStorageSync('shareUid')
|
|
|
- $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 0) {
|
|
|
- if (res.data.payAmt == 0) {
|
|
|
- $http.post('/api/v1/mp/user/ticket/order/submit', {
|
|
|
- suid: suid !== 'undefined' && suid !== undefined ? suid : null,
|
|
|
- type: uni.getStorageSync('shareType')
|
|
|
- }).then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 0) {
|
|
|
- this.getDetailInfo()
|
|
|
- } else {
|
|
|
- this.tipShow = true
|
|
|
- this.luckyShow = false
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- pay() {
|
|
|
- let data = {
|
|
|
- ticketId: this.info.ticketId,
|
|
|
- autoCoupon: 1,
|
|
|
- userCouponIds: [],
|
|
|
- orderNum: 1,
|
|
|
- appSource: appId
|
|
|
- }
|
|
|
- this.payLookFlag = false
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 0) {
|
|
|
- let info = {
|
|
|
- ...res.data,
|
|
|
- ...this.info,
|
|
|
- picUrl: env.filePublic + res.data.picUrl,
|
|
|
- couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
|
|
|
- .data.couponList[0].title,
|
|
|
- couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
|
|
|
- .couponList[0].id,
|
|
|
- }
|
|
|
- this.payInfo = info
|
|
|
- this.payShow = true
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- toUser() {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/user/index'
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- saveImg() {
|
|
|
- this.$refs.hchPoster.posterShow()
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</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>
|
|
|
+<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="aspectFit" v-if="info.salePrice == 0">
|
|
|
+ </image>
|
|
|
+ <image src="../../static/lucky/zioff.png" mode="aspectFit" v-else></image>
|
|
|
+ </view>
|
|
|
+ <view class="luck-info-content-img" v-if="info.status != 1">
|
|
|
+ <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-nearby" v-if="info.status == 1 && info.salePrice != 0">
|
|
|
+ 附近已有<view class="num" style="display: inline-block; padding: 0 2px;">{{ nearbyNum }}</view>人刮开<view class="dots"><view>.</view><view>.</view><view>.</view></view>
|
|
|
+ </view>
|
|
|
+ <view class="luck-info-content-btn" style="width: 500rpx;" @click="pay"
|
|
|
+ v-if="info.status == 1 && info.salePrice != 0">
|
|
|
+ 点击支付</view>
|
|
|
+ <view class="luck-info-content-btn" style="width: 500rpx;" @click="payDetail"
|
|
|
+ v-else-if="info.status == 1 && info.salePrice == 0">收下盲票,立即刮奖</view>
|
|
|
+ <!-- <view class=" code" v-else>开奖啦!</view> -->
|
|
|
+ <view class="luck-info-content-btn" style="width: 500rpx;" @click="toChoice" v-if="Choice">领取奖品
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="luck-info-close flex">
|
|
|
+ <navigator open-type="exit" target="miniProgram" hover-class="none"
|
|
|
+ class="luck-info-close-content flex">
|
|
|
+ <u-icon name="close" color="#fff" size="20"></u-icon>
|
|
|
+ </navigator>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-overlay>
|
|
|
+
|
|
|
+ <pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" v-if="payShow" />
|
|
|
+
|
|
|
+ <u-popup :show="showNull" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
|
|
|
+ @touchmove.prevent.stop>
|
|
|
+ <view class="null-prize">
|
|
|
+ <view class="title">该盲票已兑奖</view>
|
|
|
+ <view class="btn" @click="toUser">确认</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <u-popup :show="tipShow" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
|
|
|
+ @touchmove.prevent.stop>
|
|
|
+ <view class="null-prize">
|
|
|
+ <view class="title">该盲票已被他人买走了</view>
|
|
|
+ <view class="btn" @click="toUser">确认</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <u-popup :show="showAction" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
|
|
|
+ @touchmove.prevent.stop>
|
|
|
+ <view class="null-prize">
|
|
|
+ <view class="title">该盲票未激活</view>
|
|
|
+ <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ import appId from '@/config/appId.js'
|
|
|
+ import PayPopup from '../../components/pay-popup/pay-popup.vue'
|
|
|
+ import {
|
|
|
+ urlParameter
|
|
|
+ } from '@/utils/util.js'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ PayPopup
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ serialNo: '',
|
|
|
+ info: '',
|
|
|
+ payInfo: {},
|
|
|
+ payShow: false,
|
|
|
+ payLookFlag: true,
|
|
|
+ showNull: false,
|
|
|
+ luckyShow: false,
|
|
|
+ status: 2,
|
|
|
+ showAction: false,
|
|
|
+ infoimg: false,
|
|
|
+ Choice: false,
|
|
|
+ ChoiceData: '',
|
|
|
+ nearbyNum: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.id) {
|
|
|
+ this.serialNo = options.id
|
|
|
+ this.getDetail()
|
|
|
+ }
|
|
|
+ if (options.q) {
|
|
|
+ let obj = urlParameter(decodeURIComponent(options.q))
|
|
|
+ this.serialNo = obj.id
|
|
|
+ this.getDetail()
|
|
|
+ }
|
|
|
+ if(uni.getStorageSync('code')){
|
|
|
+ this.serialNo = uni.getStorageSync('code')
|
|
|
+ }
|
|
|
+ this.jumpNumber()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if(uni.getStorageSync('code')){
|
|
|
+ this.serialNo = uni.getStorageSync('code')
|
|
|
+ this.getDetail()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getDetail() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
|
|
|
+ serialNo: this.serialNo,
|
|
|
+ noToken: true
|
|
|
+ }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.data.status == 1) {
|
|
|
+ this.info = res.data
|
|
|
+ this.luckyShow = true
|
|
|
+ } else if (res.data.status == 2) {
|
|
|
+ this.info = res.data
|
|
|
+ if (uni.getStorageSync('token')) {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offline`
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.luckyShow = true
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '您未登录或登录失效!',
|
|
|
+ confirmText: '去登录',
|
|
|
+ showCancel: false,
|
|
|
+ success(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/login/index"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.showNull = true
|
|
|
+ this.luckyShow = false
|
|
|
+ }
|
|
|
+ } else if (res.code == 1023) {
|
|
|
+ this.showAction = true
|
|
|
+ this.luckyShow = false
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('该盲票不存在!');
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getDetailInfo() {
|
|
|
+ let _this = this
|
|
|
+ _this.payShow = false
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
|
|
|
+ serialNo: _this.serialNo,
|
|
|
+ noToken: true
|
|
|
+ }).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/queryLuckyNum', {
|
|
|
+ serialNo: _this.serialNo,
|
|
|
+ noToken: true
|
|
|
+ }).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();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ jumpNumber() {
|
|
|
+ this.nearbyNum = 0 //起始数据
|
|
|
+
|
|
|
+ let endNum = Math.floor(Math.random()*10+1) //最终数据
|
|
|
+ let step = 0 //累加步长
|
|
|
+ let time = 200 //动画时间
|
|
|
+ const timer = setInterval(() => {
|
|
|
+ if(this.nearbyNum < (endNum - step)) {
|
|
|
+ step++
|
|
|
+ //小数
|
|
|
+ this.nearbyNum = step
|
|
|
+ } else {
|
|
|
+ clearInterval(timer)
|
|
|
+ this.nearbyNum = endNum
|
|
|
+ }
|
|
|
+ }, time)
|
|
|
+ },
|
|
|
+
|
|
|
+ //跳转奖品页
|
|
|
+ toChoice() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/packagePrize/choice/index?id=${ this.ChoiceData }&type=offline`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ close() {
|
|
|
+ this.payShow = false
|
|
|
+ },
|
|
|
+ payDetail() {
|
|
|
+ let data = {
|
|
|
+ ticketId: this.info.ticketId,
|
|
|
+ autoCoupon: 0,
|
|
|
+ userCouponIds: [],
|
|
|
+ orderNum: 1,
|
|
|
+ appSource: appId
|
|
|
+ }
|
|
|
+ uni.showLoading();
|
|
|
+ let suid = uni.getStorageSync('shareUid')
|
|
|
+ $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.data.payAmt == 0) {
|
|
|
+ $http.post('/api/v1/mp/user/ticket/order/submit', {
|
|
|
+ suid: suid !== 'undefined' && suid !== undefined ? suid : null,
|
|
|
+ type: uni.getStorageSync('shareType')
|
|
|
+ }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.getDetailInfo()
|
|
|
+ } else {
|
|
|
+ this.tipShow = true
|
|
|
+ this.luckyShow = false
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ pay() {
|
|
|
+ let data = {
|
|
|
+ ticketId: this.info.ticketId,
|
|
|
+ autoCoupon: 1,
|
|
|
+ userCouponIds: [],
|
|
|
+ orderNum: 1,
|
|
|
+ appSource: appId
|
|
|
+ }
|
|
|
+ this.payLookFlag = false
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ let info = {
|
|
|
+ ...res.data,
|
|
|
+ ...this.info,
|
|
|
+ picUrl: env.filePublic + res.data.picUrl,
|
|
|
+ couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
|
|
|
+ .data.couponList[0].title,
|
|
|
+ couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
|
|
|
+ .couponList[0].id,
|
|
|
+ }
|
|
|
+ this.payInfo = info
|
|
|
+ this.payShow = true
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ toUser() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/user/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ saveImg() {
|
|
|
+ this.$refs.hchPoster.posterShow()
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</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: 73%;
|
|
|
+ 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 {
|
|
|
+ text-align: center;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-nearby {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ width: 73%;
|
|
|
+ height: 6vh;
|
|
|
+ margin-top: 4vh;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 46rpx;
|
|
|
+ }
|
|
|
+ .dots {
|
|
|
+ display: inline-block;
|
|
|
+ view {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dots view {
|
|
|
+ animation: dots-1 2s infinite steps(1);
|
|
|
+ -webkit-animation: dots-1 2s infinite steps(1);
|
|
|
+ }
|
|
|
+ .dots view:first-child+view {
|
|
|
+ animation-name: dots-2;
|
|
|
+ -webkit-animation-name: dots-2;
|
|
|
+ }
|
|
|
+ .dots view:first-child+view+view {
|
|
|
+ animation-name: dots-3;//第三个点的动画名称
|
|
|
+ -webkit-animation-name: dots-3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-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%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //动态省略号
|
|
|
+ @keyframes dots-1 {
|
|
|
+ from {
|
|
|
+ opacity: 0
|
|
|
+ }
|
|
|
+ 25% {
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes dots-2 {
|
|
|
+ from {
|
|
|
+ opacity: 0
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes dots-3 {
|
|
|
+ from {
|
|
|
+ opacity: 0
|
|
|
+ }
|
|
|
+ 75% {
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @-webkit-keyframes dots-1 {
|
|
|
+ from {
|
|
|
+ opacity: 0
|
|
|
+ }
|
|
|
+ 25% {
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @-webkit-keyframes dots-2 {
|
|
|
+ from {
|
|
|
+ opacity: 0
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @-webkit-keyframes dots-3 {
|
|
|
+ from {
|
|
|
+ opacity: 0
|
|
|
+ }
|
|
|
+ 75% {
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|