|
@@ -1,45 +1,74 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar leftIconSize="0" title="详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
|
|
|
- <view class="lucky">
|
|
|
- <!-- <view class="lucky-number">
|
|
|
- <view class="flex lucky-number-circle">
|
|
|
- <view class="title">幸运数字</view>
|
|
|
- <view class="num" v-if="info.status == 1">?</view>
|
|
|
- <view class="luckyNum" v-else>{{ info.plainLuckyNum }}</view>
|
|
|
+ <u-navbar leftIconSize="0" title="盲票详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
|
|
|
+ <view class="detail">
|
|
|
+ <view class="detail-top">
|
|
|
+ <u-swiper :list="picUrlArr" height="320" radius="0" :indicator="true" :circular="true"></u-swiper>
|
|
|
+ </view>
|
|
|
+ <view class="flex detail-info">
|
|
|
+ <view class="detail-info__left">
|
|
|
+ <text class="title">{{ boxInfo.title }}</text>
|
|
|
+ <view class="flex num">
|
|
|
+ <u-icon name="gift" size="25" color="#EB7009"></u-icon>
|
|
|
+ <text>100%抽中,奖品多多</text>
|
|
|
+ </view>
|
|
|
+ <view class="tip">图片仅供参考,请以实物为准</view>
|
|
|
+ </view>
|
|
|
+ <view class="detail-info__right">
|
|
|
+ <text class="money">¥{{ $numberFormat(boxInfo.salePrice) }}</text>
|
|
|
+ <text>销量 {{ boxInfo.saleQty }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="lucky-title">
|
|
|
- <view class="txt">{{ info.title }}</view>
|
|
|
- <view class="id">盲票序列号:{{ info.serialNo }}</view>
|
|
|
+ <view class="detail-goods">
|
|
|
+ <view class="detail-goods-title">可获得奖品</view>
|
|
|
+ <view class="detail-goods-list">
|
|
|
+ <!-- <navigator :url="`/pages/prizeGoods/detail?id=${ item.prizeId }`" class="detail-goods-list-item"
|
|
|
+ hover-class="navigator-hover" v-for="(item, index) in prizeList" :key="index"> -->
|
|
|
+ <view class="detail-goods-list-item" v-for="(item, index) in prizeList" :key="index">
|
|
|
+ <view class="detail-goods-list-item__value">
|
|
|
+ <view class="flex image-wrap">
|
|
|
+ <image :src="item.picUrl" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <text class="title">{{ item.title }}</text>
|
|
|
+ <text class="num"
|
|
|
+ v-if="item.prizeType != 'coin'">价值:¥{{ $numberFormat(item.value) }}</text>
|
|
|
+ <text class="num" v-else>数量:{{ item.value }}个</text>
|
|
|
+ <text class="num">概率:{{ item.hitRate }}%</text>
|
|
|
+ </view>
|
|
|
+ <view class="name">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </navigator> -->
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flex lucky-btn">
|
|
|
- <view class="pay" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
|
|
|
- <view class="pay" @click="saveImg" v-else>保存至手机相册</view>
|
|
|
- </view> -->
|
|
|
</view>
|
|
|
- <u-overlay :show="luckyShow" zIndex="100">
|
|
|
- <view class="flex luck-warp">
|
|
|
+ <u-overlay :show="luckyShow" :opacity="0.8" zIndex="100">
|
|
|
+ <view class="flex luck-warp" @touchmove.prevent.stop>
|
|
|
<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="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="{ '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="name">{{ info.title }}</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 class="btn" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
|
|
|
+ <view class="btn" @click="saveImg" v-else>保存至手机相册</view>
|
|
|
</view>
|
|
|
- <view class="flex luck-info-num" v-if="info.status == 2">23</view>
|
|
|
+ <view class="flex luck-info-num" v-if="info.status == 2">{{ info.plainLuckyNum }}</view>
|
|
|
<view class="flex luck-info-close">
|
|
|
- <u-icon name="close" color="#333" size="20"></u-icon>
|
|
|
+ <navigator open-type="exit" target="miniProgram" hover-class="none" class="flex">
|
|
|
+ <u-icon name="close" color="#333" size="20"></u-icon>
|
|
|
+ </navigator>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -47,10 +76,10 @@
|
|
|
|
|
|
<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" />
|
|
|
|
|
|
- <u-popup :show="showNull" :round="10" mode="center" :safeAreaInsetBottom="false">
|
|
|
+ <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="toIndex">确认</view>
|
|
|
+ <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
@@ -81,13 +110,17 @@
|
|
|
posterData: {},
|
|
|
|
|
|
luckyShow: true,
|
|
|
- status: 2
|
|
|
+ status: 2,
|
|
|
+
|
|
|
+ boxId: '',
|
|
|
+ picUrlArr: [],
|
|
|
+ boxInfo: {},
|
|
|
+ prizeList: [],
|
|
|
};
|
|
|
},
|
|
|
|
|
|
onLoad(options) {
|
|
|
if (options.id) {
|
|
|
- console.log(options);
|
|
|
this.serialNo = options.id
|
|
|
}
|
|
|
|
|
@@ -112,6 +145,7 @@
|
|
|
}).then(res => {
|
|
|
uni.hideLoading();
|
|
|
if (res.code == 0) {
|
|
|
+ this.getBoxDetail(res.data.boxId)
|
|
|
if (res.data.status == 1) {
|
|
|
this.info = res.data
|
|
|
} else if (res.data.status == 2) {
|
|
@@ -136,6 +170,7 @@
|
|
|
}
|
|
|
} else {
|
|
|
this.showNull = true
|
|
|
+ this.luckyShow = false
|
|
|
}
|
|
|
} else {
|
|
|
uni.$u.toast('该盲票不存在!');
|
|
@@ -212,6 +247,33 @@
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+ getBoxDetail(id) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/mall/ticket/detail', {
|
|
|
+ boxId: id,
|
|
|
+ noToken: true
|
|
|
+ }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.boxInfo = res.data
|
|
|
+ let picUrlArr = res.data.picUrl.split(',')
|
|
|
+ picUrlArr.forEach(item => {
|
|
|
+ this.picUrlArr.push(env.filePublic + item)
|
|
|
+ })
|
|
|
+ let prizeList = res.data.prizeList
|
|
|
+ prizeList.forEach(item => {
|
|
|
+ let picUrlArr = item.picUrl.split(',')
|
|
|
+ item.picUrl = env.filePublic + picUrlArr[0]
|
|
|
+ })
|
|
|
+ this.prizeList = prizeList
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
close() {
|
|
|
this.payShow = false
|
|
|
},
|
|
@@ -264,9 +326,9 @@
|
|
|
},
|
|
|
|
|
|
toIndex() {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index'
|
|
|
- })
|
|
|
+ // uni.switchTab({
|
|
|
+ // url: '/pages/index/index'
|
|
|
+ // })
|
|
|
},
|
|
|
}
|
|
|
}
|
|
@@ -281,25 +343,26 @@
|
|
|
width: 85%;
|
|
|
border-radius: 40rpx;
|
|
|
background-color: #fff;
|
|
|
-
|
|
|
- .luck-info-image{
|
|
|
+
|
|
|
+ .luck-info-image {
|
|
|
margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .image1{
|
|
|
+
|
|
|
+ .image1 {
|
|
|
width: 400rpx;
|
|
|
height: 400rpx;
|
|
|
margin-top: -200rpx;
|
|
|
}
|
|
|
- .image2{
|
|
|
+
|
|
|
+ .image2 {
|
|
|
width: 450rpx;
|
|
|
height: 450rpx;
|
|
|
- margin-top: -280rpx;
|
|
|
+ margin-top: -286rpx;
|
|
|
// padding-bottom: 50rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .luck-info-tip{
|
|
|
- .tip{
|
|
|
+
|
|
|
+ .luck-info-tip {
|
|
|
+ .tip {
|
|
|
width: 460rpx;
|
|
|
height: 100rpx;
|
|
|
line-height: 50rpx;
|
|
@@ -310,38 +373,42 @@
|
|
|
background: rgba(255, 109, 28, 0.2);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .luck-info-content{
|
|
|
+
|
|
|
+ .luck-info-content {
|
|
|
flex-direction: column;
|
|
|
- .title{
|
|
|
+
|
|
|
+ .title {
|
|
|
line-height: 68rpx;
|
|
|
font-size: 48rpx;
|
|
|
margin-bottom: 36rpx;
|
|
|
}
|
|
|
- .name{
|
|
|
+
|
|
|
+ .name {
|
|
|
font-size: 40rpx;
|
|
|
line-height: 56rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
- .num{
|
|
|
+
|
|
|
+ .num {
|
|
|
font-size: 32rpx;
|
|
|
color: #666666;
|
|
|
line-height: 44rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- .mat{
|
|
|
+
|
|
|
+
|
|
|
+ .mat {
|
|
|
margin-bottom: 140rpx;
|
|
|
}
|
|
|
-
|
|
|
- .mat2{
|
|
|
+
|
|
|
+ .mat2 {
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
-
|
|
|
- .luck-info-btn{
|
|
|
+
|
|
|
+ .luck-info-btn {
|
|
|
margin-top: 20rpx;
|
|
|
- .btn{
|
|
|
+
|
|
|
+ .btn {
|
|
|
width: 530rpx;
|
|
|
height: 100rpx;
|
|
|
line-height: 100rpx;
|
|
@@ -351,23 +418,23 @@
|
|
|
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;
|
|
|
+ margin-bottom: 72rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .luck-info-num{
|
|
|
+
|
|
|
+ .luck-info-num {
|
|
|
position: absolute;
|
|
|
- top: -60rpx;
|
|
|
+ top: -56rpx;
|
|
|
width: 100%;
|
|
|
font-size: 80rpx;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
-
|
|
|
- .luck-info-close{
|
|
|
+
|
|
|
+ .luck-info-close {
|
|
|
position: absolute;
|
|
|
width: 70rpx;
|
|
|
height: 70rpx;
|
|
|
- background-color: #F8F8F8;
|
|
|
+ background-color: #b9b9b9;
|
|
|
border-radius: 50%;
|
|
|
right: 10rpx;
|
|
|
top: -80rpx;
|
|
@@ -375,90 +442,153 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .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;
|
|
|
- // }
|
|
|
+
|
|
|
+ .detail {
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+
|
|
|
+ &-top {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-info {
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx 16rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 10rpx 10rpx 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ text {
|
|
|
+ line-height: 24rpx;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ color: $uni-text-color;
|
|
|
+ font-size: 28rpx;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 162rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: rgba(157, 157, 157, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $uni-text-color;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-sku {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 10rpx 10rpx 20rpx;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ padding: 24rpx 16rpx 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+
|
|
|
+ view {
|
|
|
+ padding-left: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-goods {
|
|
|
+ margin: 10rpx 10rpx 20rpx;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-list {
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ position: relative;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+
|
|
|
+ &__value {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ position: absolute;
|
|
|
+ left: 0rpx;
|
|
|
+ top: 0rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ padding: 10rpx 40rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-top-left-radius: 10rpx;
|
|
|
+ border-bottom-right-radius: 40rpx;
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding-left: 50rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ color: #848484;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-item:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.null-prize {
|