490 lines
13 KiB
Vue
490 lines
13 KiB
Vue
<!-- 抽奖界面 -->
|
|
<template>
|
|
<view class="prize-page">
|
|
<view class="nav">
|
|
<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
|
|
<view class="nav-title">开奖</view>
|
|
<view class="nav-back"></view>
|
|
</view>
|
|
<scroll-view scroll-y class="scroll-view">
|
|
<view class="box-main">
|
|
<view class="box-main-top">
|
|
<image src="@/static/index/cjt.png" mode="" class="title-img"></image>
|
|
</view>
|
|
<view class="prize-swiper-main">
|
|
<view class="swiper-title">本期盲盒奖池</view>
|
|
<view class="detail">
|
|
<image src="@/static/index/left.png" mode="" class="detail-left-img"></image>
|
|
<swiper class="swiper-content" circular autoplay :interval="500" :duration="1800" :display-multiple-items="4">
|
|
<swiper-item v-for="(item,index) in detailData.items" :key="index">
|
|
<view class="swiper-item" style="margin-right: 10rpx;">
|
|
<view class="swiper-item-img">
|
|
<image :src="item.coverResource.url" mode="" class="swiper-image"></image>
|
|
<!-- <image :src="gradeData[item.grade]" mode="" class="lv-icon"></image> -->
|
|
</view>
|
|
<!-- <view class="shop-name">{{item.name}}</view>
|
|
<view class="shop-price">¥{{item.sellPrice}}</view> -->
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<image src="@/static/index/right.png" mode="" class="detail-right-img"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="main">
|
|
<view class="main-btn">
|
|
<view class="btn-view-open">开奖</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="footer-header">
|
|
<view class="header-title">中奖信息</view>
|
|
</view>
|
|
<view class="footer-bg">
|
|
<view class="footer-main">
|
|
<view class="footer-shop-item" v-for="(item,index) in resultList" :key="index">
|
|
<view class="grade">
|
|
<image :src="gradeData[item.grade]" mode="" class="shop-grade"></image>
|
|
</view>
|
|
<image :src="item.productCoverResource.url" mode="aspectFill" class="shop-img"></image>
|
|
<view class="box-detail">
|
|
<view class="box-detail-name">{{item.productName}}</view>
|
|
<view class="info">
|
|
<view class="point">
|
|
<image src="@/static/mine/jf.png" class="point-img"></image>
|
|
{{item.ponit}}
|
|
</view>
|
|
<view class="box-detail-money">
|
|
<text class="box-detail-symbol">¥ </text>
|
|
{{item.salePrice}}
|
|
</view>
|
|
</view>
|
|
<!-- <view class="box-detail-money">
|
|
<text class="box-detail-symbol">¥ </text>
|
|
{{item.salePrice}}
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<popup-view v-model="resultvisible" mode="center" border-radius="15" zIndex="100" centerBoxBgColor="rgba(255, 255, 255, 0)">
|
|
<view class="result-dlg">
|
|
<view class="result">
|
|
<image src="@/static/prize/dlg-top.png" mode="" class="result-img"></image>
|
|
<image src="@/static/prize/close.png" mode="" class="result-clsoe" @click="close"></image>
|
|
<view class="result-top">温馨提示</view>
|
|
<view class="result-sub">未开完盲盒 请返回继续开盒</view>
|
|
</view>
|
|
</view>
|
|
</popup-view>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/index/prize"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import { boxRecordResultApi,boxesDetail } from '@/API/index.js'
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
statusBarHeight,
|
|
id:"",//盲盒详情id
|
|
detailData:{
|
|
items:[],
|
|
},//商品详情
|
|
|
|
gradeData:{
|
|
NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/bai.png',
|
|
HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/lan.png',
|
|
RARE: 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/zi.png',
|
|
SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/huang.png',
|
|
},
|
|
icon:{
|
|
NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv1.png',//普通款
|
|
HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv2.png',//隐藏款
|
|
RARE:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv3.png',//稀有款
|
|
SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv4.png',//至尊款
|
|
},
|
|
bg:{
|
|
NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv1.png',//普通款
|
|
HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv2.png',//隐藏款
|
|
RARE:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv3.png',//稀有款
|
|
SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv4.png',//至尊款
|
|
},
|
|
detailData:{},
|
|
no:"",
|
|
resultList:[],
|
|
resultvisible:true
|
|
}
|
|
},
|
|
onLoad(opation) {
|
|
this.id = opation.boxId
|
|
this.no = opation.no
|
|
this.getDetail()
|
|
|
|
},
|
|
onHide(){
|
|
},
|
|
methods:{
|
|
goBack(){
|
|
uni.redirectTo({
|
|
url:`/pages/index/detail?id=${this.id}`
|
|
})
|
|
},
|
|
// 获取盲盒详情
|
|
getDetail(){
|
|
boxesDetail({id:this.id}).then(res => {
|
|
if(res.code === 200){
|
|
this.detailData = res.data
|
|
this.getBoxRecordResult(this.no)
|
|
}
|
|
})
|
|
},
|
|
// 获取中奖信息
|
|
getBoxRecordResult(no){
|
|
boxRecordResultApi({no}).then(res => {
|
|
if(res.code === 200){
|
|
this.resultList = res.data
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
close(){
|
|
this.resultvisible = false
|
|
},
|
|
},
|
|
onUnload(){
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// page{
|
|
// background: linear-gradient( 180deg, #FEFEFE 0%, #F3F4F7 100%);
|
|
// }
|
|
.prize-page{
|
|
.nav {
|
|
width: 100%;
|
|
height: 172rpx;
|
|
background-image: url('@/static/index/nav.png');
|
|
background-size: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 23rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
// padding-bottom: 21rpx;
|
|
// border: 1px solid red;
|
|
.nav-back {
|
|
width: 19rpx;
|
|
height: 34rpx;
|
|
}
|
|
|
|
.nav-title {
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
.scroll-view{
|
|
// height: calc(100vh - 172rpx);
|
|
padding-top: 172rpx;
|
|
.box-main {
|
|
|
|
width: 100%;
|
|
height: 806rpx;
|
|
background-image: url('@/static/index/ba.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
.box-main-top{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// padding-top: 30rpx;
|
|
.title-img{
|
|
width: 199rpx;
|
|
height: 90rpx;
|
|
|
|
}
|
|
}
|
|
.prize-swiper-main{
|
|
width: 663rpx;
|
|
height: 219rpx;
|
|
background: rgba(255,255,255,0.5);
|
|
border-radius: 20rpx;
|
|
margin-left: 44rpx;
|
|
margin-top: 28rpx;
|
|
.swiper-title{
|
|
width: 234rpx;
|
|
height: 46rpx;
|
|
background-image: url('@/static/index/jp.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.detail{
|
|
margin-top: 13rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.detail-left-img{
|
|
width: 14rpx;
|
|
height: 92rpx;
|
|
}
|
|
.swiper-content{
|
|
width: 600rpx;
|
|
height: 127rpx;
|
|
.swiper-item{
|
|
width: 127rpx;
|
|
height: 127rpx;
|
|
border-radius: 10rpx;
|
|
.swiper-item-img{
|
|
position: relative;
|
|
.swiper-image{
|
|
width: 127rpx;
|
|
height: 127rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.lv-icon{}
|
|
}
|
|
}
|
|
}
|
|
.detail-right-img{
|
|
width: 14rpx;
|
|
height: 92rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.main{
|
|
background-image: url('@/static/index/bs.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
margin-top: -116rpx;
|
|
padding-top: 130rpx;
|
|
.main-btn{
|
|
background-image: url('@/static/index/prizr-btn.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 100%;
|
|
height: 188rpx;
|
|
display: flex;
|
|
// align-items: center;
|
|
justify-content: center;
|
|
.btn-view-open{
|
|
width: 354rpx;
|
|
height: 160rpx;
|
|
background-image: url('@/static/index/h.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
font-weight: bold;
|
|
font-size: 48rpx;
|
|
color: #DC7C15;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 28rpx;
|
|
margin-top: -26rpx;
|
|
// z-index: 200;
|
|
}
|
|
.btn-view{
|
|
width: 374rpx;
|
|
height: 160rpx;
|
|
background-image: url('@/static/index/hui.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
font-weight: bold;
|
|
font-size: 48rpx;
|
|
color: #464646;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 28rpx;
|
|
margin-top: -26rpx;
|
|
z-index: 200;
|
|
}
|
|
}
|
|
.footer{
|
|
// margin-top: 30rpx;
|
|
.footer-header{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.header-title{
|
|
width: 401rpx;
|
|
height: 85rpx;
|
|
background-image: url('@/static/index/f.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.footer-bg{
|
|
background-color: #ffbc74;
|
|
padding-bottom: 40rpx;
|
|
.footer-main{
|
|
padding: 90rpx 19rpx 30rpx 19rpx;
|
|
width: 690rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
display: grid;
|
|
gap: 33rpx;
|
|
grid-template-rows: 1fr;
|
|
margin: 0px auto;
|
|
margin-left: 30rpx;
|
|
margin-top: -72rpx;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
.footer-shop-item{
|
|
width: 307rpx;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
.grade{
|
|
z-index: 10;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 91rpx;
|
|
height: 55rpx;
|
|
border-radius: 10rpx 0 0 0;
|
|
background-image: url('@/static/index/g-bg.png');
|
|
background-size: 100%;
|
|
.shop-grade{
|
|
width: 25rpx;
|
|
height: 29rpx;
|
|
margin-left: 14rpx;
|
|
}
|
|
}
|
|
|
|
.shop-img{
|
|
width: 307rpx;
|
|
height: 189rpx;
|
|
background: #E2E2E2;
|
|
border-radius: 10px;
|
|
}
|
|
.box-detail {
|
|
|
|
// margin-left: 16rpx;
|
|
.box-detail-name {
|
|
width: 280rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
// min-height: 84rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
// display: -webkit-box;
|
|
// -webkit-box-orient: vertical;
|
|
// -webkit-line-clamp: 2;
|
|
}
|
|
|
|
.box-detail-price {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.info{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 13rpx;
|
|
.point{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
color: #F0463A;
|
|
.point-img{
|
|
width: 30rpx;
|
|
height: 31rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
.box-detail-money {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #888888;
|
|
text-decoration: line-through;
|
|
margin-left: 12rpx;
|
|
|
|
.box-detail-symbol {
|
|
// font-size: 24rpx;
|
|
// font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.result-dlg{
|
|
padding: 40rpx 0 ;
|
|
.result{
|
|
width: 600rpx;
|
|
background-image: url('@/static/prize/result.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
// background-color: rgba(255, 255, 255, 0);
|
|
position: relative;
|
|
border-radius: 20rpx;
|
|
.result-img{
|
|
width: 128rpx;
|
|
height: 120rpx;
|
|
top: -34rpx;
|
|
left: 233rpx;
|
|
position: absolute;
|
|
}
|
|
.result-clsoe{
|
|
position: absolute;
|
|
top: 11rpx;
|
|
right: 20rpx;
|
|
width: 37rpx;
|
|
height: 38rpx;
|
|
|
|
}
|
|
.result-top{
|
|
font-weight: 500;
|
|
font-size: 38rpx;
|
|
color: #101010;
|
|
text-align: center;
|
|
padding-top: 118rpx;
|
|
}
|
|
.result-sub{
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
padding: 32rpx 0 66rpx 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |