366 lines
7.4 KiB
Vue
366 lines
7.4 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 购买弹窗 -->
|
|
<view class="dlg" v-if="visible" @click="close">
|
|
<view>
|
|
<view class="buy-main" @click.stop="">
|
|
<view class="buy-header">
|
|
<image src="@/static/new/index/zs.png" mode="" class="header-icon"></image>
|
|
<view class="header-txt">逢抽必中</view>
|
|
<image src="@/static/new/index/zs.png" mode="" class="header-icon"></image>
|
|
</view>
|
|
<view class="dlg-tip">两件包邮/正品保障</view>
|
|
|
|
<view class="btn-main">
|
|
<template v-for="(item,index) in item.price">
|
|
<view class="btn-buy one" v-if="item.type === 'SINGLE'" @click="goBuy(item.type)">
|
|
<image src="@/static/new/index/1-txt.png" mode="aspectFit" class="buy-title"></image>
|
|
</view>
|
|
<view class="btn-buy three" v-if="item.type === 'TRIPLE'" @click="goBuy(item.type)">
|
|
<view class="tips">9折</view>
|
|
<image src="@/static/new/index/3-txt.png" mode="aspectFit" class="buy-title"></image>
|
|
</view>
|
|
<view class="btn-buy five" v-if="item.type === 'PENTA'" @click="goBuy(item.type)">
|
|
<view class="tips">8折</view>
|
|
<image src="@/static/new/index/5-txt.png" mode="aspectFit" class="buy-title"></image>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</view>
|
|
<image src="@/static/order/close.png" mode="" class="close-buy" @click="close"></image>
|
|
</view>
|
|
</view>
|
|
<TipCom :visible="tipVisible" @close="tipClose" @click="immediate" @nonuse="nonuse"></TipCom>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import TipCom from './tip.vue'
|
|
import {
|
|
promptCountApi
|
|
} from '@/API/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
tipVisible:false,
|
|
buyType:'',//购买类型
|
|
}
|
|
},
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
item: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
components:{
|
|
TipCom
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
// 关闭弹框
|
|
close() {
|
|
this.$emit('close')
|
|
},
|
|
// 购买
|
|
goBuy(type) {
|
|
this.buyType = type
|
|
this.tipVisible = true
|
|
// 用提示卡时打开提示卡组件
|
|
// promptCountApi().then(res => {
|
|
// if(res.data === '0'){
|
|
// uni.navigateTo({
|
|
// url:`/pages/index/boxOrderConfirm?boxId=${this.item.id}&type=${type}`
|
|
// })
|
|
// }else{
|
|
// this.tipVisible = true
|
|
// }
|
|
|
|
// })
|
|
// this.$emit('click', type)
|
|
},
|
|
// 不使用提示卡
|
|
nonuse(){
|
|
this.tipVisible = false
|
|
this.$emit('click')
|
|
uni.navigateTo({
|
|
url:`/pages/index/boxOrderConfirm?boxId=${this.item.id}&type=${this.buyType}`
|
|
})
|
|
},
|
|
// 使用提示卡
|
|
immediate(){
|
|
this.tipVisible = false
|
|
this.$emit('click')
|
|
uni.navigateTo({
|
|
url:`/pages/index/card?boxId=${this.item.id}&type=${this.buyType}`
|
|
})
|
|
},
|
|
// 关闭提示卡弹框组件
|
|
tipClose(){
|
|
this.tipVisible = false
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dlg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dlg-main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
.dlg-swiper {
|
|
// width: 402rpx;
|
|
width: 750rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
|
|
.dlg-swiper-item {
|
|
width: 468rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dlg-swiper-img {
|
|
width: 468rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: center;
|
|
transform: scale(1);
|
|
transition: transform 0.3s ease-in-out 0s;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.dlg-close-img {
|
|
margin-top: 23rpx;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
z-index: 9999;
|
|
}
|
|
}
|
|
|
|
.activity-main {
|
|
flex-direction: column;
|
|
width: 480rpx;
|
|
height: 608rpx;
|
|
background-image: url('@/static/new/box/hdtc.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
|
|
.dlg-title {
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 148rpx;
|
|
height: 52rpx;
|
|
}
|
|
|
|
.activity-img {
|
|
width: 448rpx;
|
|
height: 440rpx;
|
|
border-radius: 20rpx;
|
|
border: 1px solid red;
|
|
display: block;
|
|
margin: 20rpx auto;
|
|
z-index: 2;
|
|
}
|
|
|
|
.now-buy {
|
|
width: 348rpx;
|
|
// height: 120rpx;
|
|
display: block;
|
|
margin: -120rpx auto 0 auto;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dlg-close-img {
|
|
display: block;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
z-index: 9999;
|
|
margin: -120rpx auto 0 auto;
|
|
}
|
|
}
|
|
|
|
.buy-main {
|
|
width: 480rpx;
|
|
height: 640rpx;
|
|
background-image: url('@/static/new/index/bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
.buy-header {
|
|
padding-top: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.header-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
|
|
.header-txt {
|
|
font-weight: 800;
|
|
font-size: 32rpx;
|
|
color: #143D66;
|
|
margin: 0 16rpx;
|
|
}
|
|
}
|
|
|
|
.dlg-tip {
|
|
text-align: center;
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #528FCC;
|
|
}
|
|
|
|
.btn-main {
|
|
height: 480rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
.btn-buy {
|
|
width: 400rpx;
|
|
height: 188rpx;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
padding-left: 96rpx;
|
|
padding-top: 52rpx;
|
|
position: relative;
|
|
|
|
.buy-title {
|
|
width: 208rpx;
|
|
height: 72rpx;
|
|
}
|
|
.tips{
|
|
position: absolute;
|
|
width: 158rpx;
|
|
height: 40rpx;
|
|
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%);
|
|
border-radius: 20rpx 0px 20rpx 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
top: 20rpx;
|
|
left: 44rpx;
|
|
}
|
|
}
|
|
|
|
.one {
|
|
background-image: url('@/static/new/index/1.png');
|
|
}
|
|
|
|
.three {
|
|
background-image: url('@/static/new/index/3.png');
|
|
}
|
|
|
|
.five {
|
|
background-image: url('@/static/new/index/5.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
.close-buy {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
display: block;
|
|
margin: 129rpx auto 0 auto;
|
|
}
|
|
|
|
.tip-dlg {
|
|
.tip-main {
|
|
width: 480rpx;
|
|
height: 648rpx;
|
|
background-image: url('@/static/new/tip/card.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
|
|
.tip-icon {
|
|
width: 112rpx;
|
|
height: 52rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tip-txt {
|
|
padding-top: 364rpx;
|
|
font-weight: 800;
|
|
font-size: 40rpx;
|
|
color: #143D66;
|
|
text-align: center;
|
|
}
|
|
|
|
.tip-sub {
|
|
margin: 0 auto;
|
|
margin-top: 24rpx;
|
|
width: 352rpx;
|
|
font-size: 24rpx;
|
|
color: #528FCC;
|
|
}
|
|
}
|
|
|
|
.tip-btn {
|
|
margin-top: 64rpx;
|
|
width: 480rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.btn-icon {
|
|
width: 228rpx;
|
|
height: 96rpx;
|
|
font-size: 44rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: YouSheBiaoTiHei;
|
|
}
|
|
|
|
.now {
|
|
background-image: url('@/static/new/tip/btn.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.close-tip {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
display: block;
|
|
margin: 84rpx auto 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style> |