|
@@ -1,8 +1,8 @@
|
|
<template>
|
|
<template>
|
|
<view>
|
|
<view>
|
|
- <u-navbar leftIconSize="0" title="幸运数字" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
|
|
|
|
|
|
+ <u-navbar leftIconSize="0" title="详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
|
|
<view class="lucky">
|
|
<view class="lucky">
|
|
- <view class="lucky-number">
|
|
|
|
|
|
+ <!-- <view class="lucky-number">
|
|
<view class="flex lucky-number-circle">
|
|
<view class="flex lucky-number-circle">
|
|
<view class="title">幸运数字</view>
|
|
<view class="title">幸运数字</view>
|
|
<view class="num" v-if="info.status == 1">?</view>
|
|
<view class="num" v-if="info.status == 1">?</view>
|
|
@@ -13,12 +13,37 @@
|
|
<view class="txt">{{ info.title }}</view>
|
|
<view class="txt">{{ info.title }}</view>
|
|
<view class="id">盲票序列号:{{ info.serialNo }}</view>
|
|
<view class="id">盲票序列号:{{ info.serialNo }}</view>
|
|
</view>
|
|
</view>
|
|
- <!-- <view class="flex lucky-tip"><text>请刮开纸质票面的数字,与此幸运数字相同的就是所中奖项</text></view> -->
|
|
|
|
<view class="flex lucky-btn">
|
|
<view class="flex lucky-btn">
|
|
<view class="pay" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
|
|
<view class="pay" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
|
|
<view class="pay" @click="saveImg" v-else>保存至手机相册</view>
|
|
<view class="pay" @click="saveImg" v-else>保存至手机相册</view>
|
|
- </view>
|
|
|
|
|
|
+ </view> -->
|
|
</view>
|
|
</view>
|
|
|
|
+ <u-overlay :show="luckyShow" zIndex="100">
|
|
|
|
+ <view class="flex luck-warp">
|
|
|
|
+ <view class="luck-info">
|
|
|
|
+ <view class="flex luck-info-image">
|
|
|
|
+ <image class="image1" src="../../static/icon/lucky_bg.png" mode="" v-if="info.status == 1"></image>
|
|
|
|
+ <image class="image2" src="../../static/icon/lucky_bg2.png" mode="" v-else></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view :class="{ 'flex luck-info-content mat': info.status == 1, 'flex luck-info-content mat2': info.status != 1 }">
|
|
|
|
+ <view class="title">幸运数字</view>
|
|
|
|
+ <view class="name">测试盲票</view>
|
|
|
|
+ <view class="num">盲票序列号:{{ info.serialNo }}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="flex luck-info-tip" v-if="info.status == 2">
|
|
|
|
+ <view class="tip">请刮开纸质票面的数字,与此幸运数字相同的就是所中奖项</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="flex luck-info-btn">
|
|
|
|
+ <view class="btn" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
|
|
|
|
+ <view class="btn" v-else>保存至手机相册</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="flex luck-info-num" v-if="info.status == 2">23</view>
|
|
|
|
+ <view class="flex luck-info-close">
|
|
|
|
+ <u-icon name="close" color="#333" size="20"></u-icon>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </u-overlay>
|
|
|
|
|
|
<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" />
|
|
<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" />
|
|
|
|
|
|
@@ -53,7 +78,10 @@
|
|
payShow: false,
|
|
payShow: false,
|
|
payLookFlag: true,
|
|
payLookFlag: true,
|
|
showNull: false,
|
|
showNull: false,
|
|
- posterData: {}
|
|
|
|
|
|
+ posterData: {},
|
|
|
|
+
|
|
|
|
+ luckyShow: true,
|
|
|
|
+ status: 2
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
|
|
@@ -245,90 +273,192 @@
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
- .lucky {
|
|
|
|
- width: 100%;
|
|
|
|
- min-height: calc(100vh - 44px - var(--status-bar-height));
|
|
|
|
- background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/background.png) center center;
|
|
|
|
-
|
|
|
|
- &-number {
|
|
|
|
- padding-top: 300rpx;
|
|
|
|
-
|
|
|
|
- &-circle {
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
+ .luck-warp {
|
|
|
|
+ height: 100%;
|
|
|
|
+
|
|
|
|
+ .luck-info {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 85%;
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+
|
|
|
|
+ .luck-info-image{
|
|
|
|
+ margin-bottom: 30rpx;
|
|
|
|
+
|
|
|
|
+ .image1{
|
|
|
|
+ width: 400rpx;
|
|
|
|
+ height: 400rpx;
|
|
|
|
+ margin-top: -200rpx;
|
|
|
|
+ }
|
|
|
|
+ .image2{
|
|
|
|
+ width: 450rpx;
|
|
|
|
+ height: 450rpx;
|
|
|
|
+ margin-top: -280rpx;
|
|
|
|
+ // padding-bottom: 50rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .luck-info-tip{
|
|
|
|
+ .tip{
|
|
|
|
+ width: 460rpx;
|
|
|
|
+ height: 100rpx;
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ padding: 0 26rpx;
|
|
|
|
+ color: #666666;
|
|
|
|
+ text-align: center;
|
|
|
|
+ background: rgba(255, 109, 28, 0.2);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .luck-info-content{
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
- width: 336rpx;
|
|
|
|
- height: 336rpx;
|
|
|
|
- background-color: #FFFFFF;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- margin: auto;
|
|
|
|
-
|
|
|
|
- .title {
|
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
|
|
+ .title{
|
|
|
|
+ line-height: 68rpx;
|
|
|
|
+ font-size: 48rpx;
|
|
|
|
+ margin-bottom: 36rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
- .num {
|
|
|
|
- font-size: 120rpx;
|
|
|
|
- color: #E86737;
|
|
|
|
|
|
+ .name{
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
+ line-height: 56rpx;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
- .luckyNum {
|
|
|
|
- font-size: 120rpx;
|
|
|
|
- color: #E86737;
|
|
|
|
|
|
+ .num{
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #666666;
|
|
|
|
+ line-height: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- }
|
|
|
|
-
|
|
|
|
- &-title {
|
|
|
|
- margin-top: 40rpx;
|
|
|
|
- margin-bottom: 200rpx;
|
|
|
|
-
|
|
|
|
- .txt {
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: 36rpx;
|
|
|
|
- font-weight: bold;
|
|
|
|
- line-height: 50rpx;
|
|
|
|
- margin-bottom: 8rpx;
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .mat{
|
|
|
|
+ margin-bottom: 140rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
- .id {
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- color: #888787;
|
|
|
|
|
|
+
|
|
|
|
+ .mat2{
|
|
|
|
+ margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
- }
|
|
|
|
-
|
|
|
|
- &-tip {
|
|
|
|
- padding: 0 40rpx;
|
|
|
|
- color: #333;
|
|
|
|
- width: 80vw;
|
|
|
|
- height: 200rpx;
|
|
|
|
- ;
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
- background-color: rgba(255, 255, 255, 20);
|
|
|
|
- // opacity: .4;
|
|
|
|
- text-align: center;
|
|
|
|
- margin: 0 auto 20rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &-btn {
|
|
|
|
- .pay {
|
|
|
|
- width: 400rpx;
|
|
|
|
- height: 80rpx;
|
|
|
|
- font-size: 36rpx;
|
|
|
|
- line-height: 80rpx;
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
- background-color: rgba(235, 112, 9, 100);
|
|
|
|
|
|
+
|
|
|
|
+ .luck-info-btn{
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
+ .btn{
|
|
|
|
+ width: 530rpx;
|
|
|
|
+ height: 100rpx;
|
|
|
|
+ line-height: 100rpx;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-size: 48rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-radius: 200rpx;
|
|
|
|
+ background: linear-gradient(180deg, #FFB266 0%, #FFB266 0%, #FF843A 100%, #FF843A 100%);
|
|
|
|
+ box-shadow: 0px 4px 10px 0px rgba(182, 85, 24, 0.6);
|
|
|
|
+ margin-bottom: 80rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .luck-info-num{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: -60rpx;
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 80rpx;
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
- text-align: center;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .luck-info-close{
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 70rpx;
|
|
|
|
+ height: 70rpx;
|
|
|
|
+ background-color: #F8F8F8;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ right: 10rpx;
|
|
|
|
+ top: -80rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
|
|
- .index {
|
|
|
|
- margin: 60rpx 0;
|
|
|
|
- text-align: center;
|
|
|
|
- font-weight: bold;
|
|
|
|
- color: $uni-color-primary;
|
|
|
|
- }
|
|
|
|
|
|
+ .lucky {
|
|
|
|
+ // width: 100%;
|
|
|
|
+ // min-height: calc(100vh - 44px - var(--status-bar-height));
|
|
|
|
+ // background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/background.png) center center;
|
|
|
|
+
|
|
|
|
+ // &-number {
|
|
|
|
+ // padding-top: 300rpx;
|
|
|
|
+
|
|
|
|
+ // &-circle {
|
|
|
|
+ // box-sizing: border-box;
|
|
|
|
+ // flex-direction: column;
|
|
|
|
+ // width: 336rpx;
|
|
|
|
+ // height: 336rpx;
|
|
|
|
+ // background-color: #FFFFFF;
|
|
|
|
+ // border-radius: 50%;
|
|
|
|
+ // margin: auto;
|
|
|
|
+
|
|
|
|
+ // .title {
|
|
|
|
+ // margin-bottom: 20rpx;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // .num {
|
|
|
|
+ // font-size: 120rpx;
|
|
|
|
+ // color: #E86737;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // .luckyNum {
|
|
|
|
+ // font-size: 120rpx;
|
|
|
|
+ // color: #E86737;
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // &-title {
|
|
|
|
+ // margin-top: 40rpx;
|
|
|
|
+ // margin-bottom: 200rpx;
|
|
|
|
+
|
|
|
|
+ // .txt {
|
|
|
|
+ // text-align: center;
|
|
|
|
+ // font-size: 36rpx;
|
|
|
|
+ // font-weight: bold;
|
|
|
|
+ // line-height: 50rpx;
|
|
|
|
+ // margin-bottom: 8rpx;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // .id {
|
|
|
|
+ // line-height: 40rpx;
|
|
|
|
+ // text-align: center;
|
|
|
|
+ // color: #888787;
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // &-tip {
|
|
|
|
+ // padding: 0 40rpx;
|
|
|
|
+ // color: #333;
|
|
|
|
+ // width: 80vw;
|
|
|
|
+ // height: 200rpx;
|
|
|
|
+ // ;
|
|
|
|
+ // border-radius: 10rpx;
|
|
|
|
+ // background-color: rgba(255, 255, 255, 20);
|
|
|
|
+ // // opacity: .4;
|
|
|
|
+ // text-align: center;
|
|
|
|
+ // margin: 0 auto 20rpx;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // &-btn {
|
|
|
|
+ // .pay {
|
|
|
|
+ // width: 400rpx;
|
|
|
|
+ // height: 80rpx;
|
|
|
|
+ // font-size: 36rpx;
|
|
|
|
+ // line-height: 80rpx;
|
|
|
|
+ // border-radius: 20rpx;
|
|
|
|
+ // background-color: rgba(235, 112, 9, 100);
|
|
|
|
+ // color: #FFFFFF;
|
|
|
|
+ // text-align: center;
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // .index {
|
|
|
|
+ // margin: 60rpx 0;
|
|
|
|
+ // text-align: center;
|
|
|
|
+ // font-weight: bold;
|
|
|
|
+ // color: $uni-color-primary;
|
|
|
|
+ // }
|
|
}
|
|
}
|
|
|
|
|
|
.null-prize {
|
|
.null-prize {
|