|
@@ -22,15 +22,18 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box-ticket">
|
|
<view class="box-ticket">
|
|
- <swiper class="image-container" circular :vertical="true" :current="currentIndex" :autoplay="false" @change="swiperChange">
|
|
|
|
|
|
+ <swiper class="image-container" circular :vertical="true" :current="currentIndex" :autoplay="false"
|
|
|
|
+ @change="swiperChange">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="item.picUrl">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="item.picUrl">
|
|
<view class="flex image-wrap">
|
|
<view class="flex image-wrap">
|
|
<image class="img" @click="clickImg(item)" :src="item.picUrl" lazy-load mode=""></image>
|
|
<image class="img" @click="clickImg(item)" :src="item.picUrl" lazy-load mode=""></image>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper-item>
|
|
</swiper>
|
|
</swiper>
|
|
-
|
|
|
|
- <swiper class="prize-container" previous-margin="270rpx" next-margin="270rpx" circular :duration="15000" :interval="1500" easing-function="easeOutCubic" :current="currentPrizeIndex" :disable-touch="true" :autoplay="true">
|
|
|
|
|
|
+
|
|
|
|
+ <swiper class="prize-container" previous-margin="270rpx" next-margin="270rpx" circular :duration="15000"
|
|
|
|
+ :interval="1500" easing-function="easeOutCubic" :current="currentPrizeIndex" :disable-touch="true"
|
|
|
|
+ :autoplay="true">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in prizeList" :key="index">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in prizeList" :key="index">
|
|
<view class="flex image-wrap">
|
|
<view class="flex image-wrap">
|
|
<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
|
|
<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
|
|
@@ -86,6 +89,14 @@
|
|
prizeList: []
|
|
prizeList: []
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ onLoad(opthios) {
|
|
|
|
+ if (opthios.scene) {
|
|
|
|
+ let sceneStr = decodeURIComponent(opthios.scene)
|
|
|
|
+ this.sceneArr = sceneStr.split('&')
|
|
|
|
+ uni.setStorageSync('shareUid', this.sceneArr[0])
|
|
|
|
+ uni.setStorageSync('shareType', this.sceneArr[1])
|
|
|
|
+ }
|
|
|
|
+ },
|
|
onShow(opthios) {
|
|
onShow(opthios) {
|
|
this.loginState = uni.getStorageSync('token') ? true : false
|
|
this.loginState = uni.getStorageSync('token') ? true : false
|
|
this.getList()
|
|
this.getList()
|
|
@@ -96,48 +107,48 @@
|
|
this.currentIndex = e.detail.current
|
|
this.currentIndex = e.detail.current
|
|
this.getPrize(this.imgList[this.currentIndex].boxId)
|
|
this.getPrize(this.imgList[this.currentIndex].boxId)
|
|
},
|
|
},
|
|
-
|
|
|
|
- prizeChange(e){
|
|
|
|
|
|
+
|
|
|
|
+ prizeChange(e) {
|
|
let ticketNum = this.imgList.length - 1
|
|
let ticketNum = this.imgList.length - 1
|
|
let num = this.prizeList.length - 1
|
|
let num = this.prizeList.length - 1
|
|
let index = this.currentPrizeIndex = e.detail.current
|
|
let index = this.currentPrizeIndex = e.detail.current
|
|
-
|
|
|
|
|
|
+
|
|
let acIndex = this.currentIndex
|
|
let acIndex = this.currentIndex
|
|
- if(num == index){
|
|
|
|
- acIndex ++
|
|
|
|
- if(acIndex < ticketNum){
|
|
|
|
|
|
+ if (num == index) {
|
|
|
|
+ acIndex++
|
|
|
|
+ if (acIndex < ticketNum) {
|
|
this.currentIndex++
|
|
this.currentIndex++
|
|
- }else if(acIndex == ticketNum){
|
|
|
|
|
|
+ } else if (acIndex == ticketNum) {
|
|
this.currentIndex = ticketNum
|
|
this.currentIndex = ticketNum
|
|
- }else{
|
|
|
|
|
|
+ } else {
|
|
this.currentIndex = 0
|
|
this.currentIndex = 0
|
|
}
|
|
}
|
|
this.currentPrizeIndex = 2
|
|
this.currentPrizeIndex = 2
|
|
this.getPrize(this.imgList[this.currentIndex].boxId)
|
|
this.getPrize(this.imgList[this.currentIndex].boxId)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+
|
|
clickImg(item) {
|
|
clickImg(item) {
|
|
console.log(item);
|
|
console.log(item);
|
|
},
|
|
},
|
|
-
|
|
|
|
- ticketLeft(){
|
|
|
|
- if((this.currentIndex >= 0) && (this.currentIndex < (this.imgList.length - 1))){
|
|
|
|
- this.currentIndex ++
|
|
|
|
- }else if (this.currentIndex == (this.imgList.length - 1)){
|
|
|
|
|
|
+
|
|
|
|
+ ticketLeft() {
|
|
|
|
+ if ((this.currentIndex >= 0) && (this.currentIndex < (this.imgList.length - 1))) {
|
|
|
|
+ this.currentIndex++
|
|
|
|
+ } else if (this.currentIndex == (this.imgList.length - 1)) {
|
|
this.currentIndex = 0
|
|
this.currentIndex = 0
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
- ticketRight(){
|
|
|
|
- if(this.currentIndex > 0){
|
|
|
|
- this.currentIndex --
|
|
|
|
- }else if (this.currentIndex == 0){
|
|
|
|
|
|
+
|
|
|
|
+ ticketRight() {
|
|
|
|
+ if (this.currentIndex > 0) {
|
|
|
|
+ this.currentIndex--
|
|
|
|
+ } else if (this.currentIndex == 0) {
|
|
this.currentIndex = this.imgList.length - 1
|
|
this.currentIndex = this.imgList.length - 1
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
getList() {
|
|
getList() {
|
|
uni.showLoading({
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
title: '加载中'
|
|
@@ -164,10 +175,10 @@
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
})
|
|
})
|
|
},
|
|
},
|
|
-
|
|
|
|
- getPrize(id){
|
|
|
|
|
|
+
|
|
|
|
+ getPrize(id) {
|
|
this.prizeList = []
|
|
this.prizeList = []
|
|
-
|
|
|
|
|
|
+
|
|
$http.post('/api/v1/mp/user/mall/ticket/detail', {
|
|
$http.post('/api/v1/mp/user/mall/ticket/detail', {
|
|
boxId: id,
|
|
boxId: id,
|
|
noToken: true
|
|
noToken: true
|
|
@@ -241,15 +252,15 @@
|
|
if (!this.loginState) {
|
|
if (!this.loginState) {
|
|
uni.navigateTo({
|
|
uni.navigateTo({
|
|
url: "/pages/login/index"
|
|
url: "/pages/login/index"
|
|
- })
|
|
|
|
|
|
+ })
|
|
return
|
|
return
|
|
}
|
|
}
|
|
uni.navigateTo({
|
|
uni.navigateTo({
|
|
url: '/pages/prize/index'
|
|
url: '/pages/prize/index'
|
|
})
|
|
})
|
|
},
|
|
},
|
|
-
|
|
|
|
- toRule(){
|
|
|
|
|
|
+
|
|
|
|
+ toRule() {
|
|
uni.navigateTo({
|
|
uni.navigateTo({
|
|
url: '/pages/about/rule'
|
|
url: '/pages/about/rule'
|
|
})
|
|
})
|
|
@@ -273,7 +284,7 @@
|
|
.image-container {
|
|
.image-container {
|
|
width: 750rpx;
|
|
width: 750rpx;
|
|
height: 40vh;
|
|
height: 40vh;
|
|
-
|
|
|
|
|
|
+
|
|
.swiper-item {
|
|
.swiper-item {
|
|
position: relative;
|
|
position: relative;
|
|
width: 61vw;
|
|
width: 61vw;
|
|
@@ -282,46 +293,46 @@
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
-
|
|
|
|
- .image-wrap{
|
|
|
|
|
|
+
|
|
|
|
+ .image-wrap {
|
|
position: relative;
|
|
position: relative;
|
|
width: 61vw;
|
|
width: 61vw;
|
|
height: 40vh;
|
|
height: 40vh;
|
|
-
|
|
|
|
- .img{
|
|
|
|
|
|
+
|
|
|
|
+ .img {
|
|
width: 61vw;
|
|
width: 61vw;
|
|
height: 40vh;
|
|
height: 40vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- .prize-container{
|
|
|
|
|
|
+
|
|
|
|
+ .prize-container {
|
|
width: 750rpx;
|
|
width: 750rpx;
|
|
- height: 13vh;
|
|
|
|
|
|
+ height: 13vh;
|
|
margin-top: 2vh;
|
|
margin-top: 2vh;
|
|
-
|
|
|
|
|
|
+
|
|
.swiper-item {
|
|
.swiper-item {
|
|
width: 100rpx;
|
|
width: 100rpx;
|
|
- height: 13vh;
|
|
|
|
|
|
+ height: 13vh;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
align-items: center;
|
|
-
|
|
|
|
- .image-wrap{
|
|
|
|
|
|
+
|
|
|
|
+ .image-wrap {
|
|
width: 160rpx;
|
|
width: 160rpx;
|
|
height: 13vh;
|
|
height: 13vh;
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
background: linear-gradient(0deg, #BBBBBB, #FFFFFF);
|
|
background: linear-gradient(0deg, #BBBBBB, #FFFFFF);
|
|
-
|
|
|
|
- .img{
|
|
|
|
|
|
+
|
|
|
|
+ .img {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 76%;
|
|
height: 76%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.box {
|
|
.box {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: calc(100vh - 50px);
|
|
height: calc(100vh - 50px);
|
|
@@ -341,11 +352,11 @@
|
|
&-cir {
|
|
&-cir {
|
|
width: 72rpx;
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
height: 72rpx;
|
|
- background-color: #FFC320 ;
|
|
|
|
|
|
+ background-color: #FFC320;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
margin-bottom: 14rpx;
|
|
margin-bottom: 14rpx;
|
|
-
|
|
|
|
- image{
|
|
|
|
|
|
+
|
|
|
|
+ image {
|
|
width: 40rpx;
|
|
width: 40rpx;
|
|
height: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
@@ -364,8 +375,8 @@
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
-
|
|
|
|
- &-txt{
|
|
|
|
|
|
+
|
|
|
|
+ &-txt {
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
width: 152rpx;
|
|
width: 152rpx;
|
|
height: 48rpx;
|
|
height: 48rpx;
|
|
@@ -373,7 +384,8 @@
|
|
border-radius: 24rpx 0 0 24rpx;
|
|
border-radius: 24rpx 0 0 24rpx;
|
|
margin-top: 40rpx;
|
|
margin-top: 40rpx;
|
|
}
|
|
}
|
|
- &-txt:last-child{
|
|
|
|
|
|
+
|
|
|
|
+ &-txt:last-child {
|
|
background-color: #FFFFCC;
|
|
background-color: #FFFFCC;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -382,8 +394,8 @@
|
|
&-ticket {
|
|
&-ticket {
|
|
position: relative;
|
|
position: relative;
|
|
margin: 40rpx 0 0;
|
|
margin: 40rpx 0 0;
|
|
-
|
|
|
|
- .index-left{
|
|
|
|
|
|
+
|
|
|
|
+ .index-left {
|
|
position: absolute;
|
|
position: absolute;
|
|
width: 100rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
height: 100rpx;
|
|
@@ -391,7 +403,8 @@
|
|
left: 10rpx;
|
|
left: 10rpx;
|
|
z-index: 20;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
- .index-right{
|
|
|
|
|
|
+
|
|
|
|
+ .index-right {
|
|
position: absolute;
|
|
position: absolute;
|
|
width: 100rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
height: 100rpx;
|
|
@@ -399,8 +412,8 @@
|
|
right: 10rpx;
|
|
right: 10rpx;
|
|
z-index: 20;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
-
|
|
|
|
- .box-img{
|
|
|
|
|
|
+
|
|
|
|
+ .box-img {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
z-index: 10;
|
|
@@ -409,22 +422,26 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- &-ticket-btn{
|
|
|
|
|
|
+ &-ticket-btn {
|
|
margin-top: 30rpx;
|
|
margin-top: 30rpx;
|
|
- &-content{
|
|
|
|
|
|
+
|
|
|
|
+ &-content {
|
|
position: relative;
|
|
position: relative;
|
|
width: 420rpx;
|
|
width: 420rpx;
|
|
height: 142rpx;
|
|
height: 142rpx;
|
|
- image{
|
|
|
|
|
|
+
|
|
|
|
+ image {
|
|
width: 420rpx;
|
|
width: 420rpx;
|
|
height: 142rpx;
|
|
height: 142rpx;
|
|
}
|
|
}
|
|
- .title{
|
|
|
|
|
|
+
|
|
|
|
+ .title {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 142rpx;
|
|
height: 142rpx;
|
|
- text{
|
|
|
|
|
|
+
|
|
|
|
+ text {
|
|
font-size: 56rpx;
|
|
font-size: 56rpx;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
color: #C44906;
|
|
color: #C44906;
|