597 lines
13 KiB
Vue
597 lines
13 KiB
Vue
<template>
|
||
<view class="card-page">
|
||
<HeaderCom></HeaderCom>
|
||
<view class="main" v-if="isFrist">
|
||
<image src="@/static/new/tip/title.png" mode="" class="title-icon"></image>
|
||
<view class="tip">商品提示语</view>
|
||
<view class="heng-icon"></view>
|
||
<view class="sub">*使用后可提前获得该盲盒的商品提示语</view>
|
||
</view>
|
||
<view class="immediate" v-if="promptTotal === 0" @click="buyPrompt">购买提示卡</view>
|
||
<view class="immediate" v-if="promptTotal > 0 && isFrist" @click="useCk">使用提示卡</view>
|
||
|
||
<view class="main-gun" v-if="!isFrist">
|
||
<image src="@/static/new/tip/title.png" mode="" class="title-icon"></image>
|
||
<view class="heng" :style="{'zIndex': isTxt ? 10 : 1}">{{isTxt ? prompt : ''}}</view>
|
||
<view style="z-index: 2;">
|
||
<swiper circular :autoplay="autoplay" :current="current" :interval="50" :duration="100" ref="swiper"
|
||
disable-touch vertical :display-multiple-items="7" class="swiper" @change="swiperChange">
|
||
<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper-item"
|
||
:class="{'active-swiper-item':current === index}">
|
||
<view class="item">{{ item }}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
<view class="footer" v-if="!isFrist">
|
||
<view class="again" @click="again">再抽一次</view>
|
||
<view class="buy" @click="buy">立即购买</view>
|
||
</view>
|
||
<popup-view v-model="show" mode="bottom" border-radius="15" zIndex="1">
|
||
<view class="popup-main">
|
||
<view class="popup-header">
|
||
<image src="@/static/new/tip/big-card.png" mode="" class="popup-header-img"></image>
|
||
<view class="popup-info">
|
||
<view class="popup-info-name">提示卡</view>
|
||
<!-- <view class="popup-info-price">
|
||
<view class="popup-clover">
|
||
<image src="@/static/an/point.gif" mode="" class="clover-img"></image>
|
||
1
|
||
</view>
|
||
|
||
<view class="popup-price">
|
||
<text class="popup-symbol">¥</text>1
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="popup-footer">
|
||
<view class="footer-num">
|
||
<view class="footer-info">
|
||
购买数量
|
||
</view>
|
||
<view class="item-step">
|
||
<image src="@/static/mine/sub.png" class="item-sub" mode="" @click="sub"></image>
|
||
<view class="item-num">{{quantity}}</view>
|
||
<image src="@/static/mine/add.png" class="item-add" mode="" @click="add"></image>
|
||
</view>
|
||
</view>
|
||
<view class="now-buy" @click="confirmPromptBuy">立即购买</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
myMixins
|
||
} from "@/mixins/mixins.js";
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
import {
|
||
usePromptApi,promptCountApi,promptExchangeBatchApi
|
||
} from '@/API/index.js'
|
||
export default {
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
tipvisible: false,
|
||
// 第五条必中
|
||
swiperList: [], // swiper列表数据
|
||
targetIndex: 1, // 指定的目标索引值
|
||
current: 0,
|
||
autoplay: false,
|
||
isFrist: true, //刚进来
|
||
|
||
boxId:'',
|
||
type:'',
|
||
prompt:'',//提示语
|
||
promptId:'',
|
||
|
||
isTxt:false,
|
||
promptTotal:0,
|
||
show:false,
|
||
quantity:1
|
||
}
|
||
},
|
||
components: {
|
||
HeaderCom
|
||
},
|
||
onLoad(option) {
|
||
this.boxId = option.boxId
|
||
this.type = option.type
|
||
// this.useCk()
|
||
},
|
||
mounted() {
|
||
this.getPromptCount()
|
||
},
|
||
methods: {
|
||
// 减
|
||
sub(){
|
||
if(this.quantity === 1){
|
||
this.$api.msg("不能小于1！");
|
||
return;
|
||
}
|
||
if(this.quantity > 1){
|
||
this.quantity--
|
||
}
|
||
},
|
||
// 加
|
||
add(){
|
||
this.quantity++
|
||
},
|
||
// 是否有提示卡
|
||
getPromptCount(){
|
||
promptCountApi().then(res => {
|
||
if(res.code === 200){
|
||
if(res.data === '0'){
|
||
// this.$api.msg('暂无提示卡')
|
||
this.promptTotal = 0
|
||
}else{
|
||
this.promptTotal = Number(res.data)
|
||
}
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
|
||
})
|
||
},
|
||
// 购买提示卡
|
||
buyPrompt(){
|
||
this.show = true
|
||
},
|
||
confirmPromptBuy(){
|
||
uni.showLoading()
|
||
promptExchangeBatchApi({quantity:this.quantity}).then(res => {
|
||
uni.hideLoading()
|
||
this.$api.msg(res.message)
|
||
if(res.code === 200){
|
||
this.getPromptCount()
|
||
this.show = false
|
||
}else{
|
||
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
useCk(){
|
||
|
||
uni.showLoading()
|
||
usePromptApi({boxId:this.boxId}).then(res => {
|
||
uni.hideLoading()
|
||
// this.swiperList = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 7', 'Slide 8', 'Slide 9',
|
||
// 'Slide 10', 'Slide 11', 'Slide 12', 'Slide 13', 'Slide 14', 'Slide 15', 'Slide 16', 'Slide 17',
|
||
// 'Slide 18', 'Slide 19'
|
||
// ]
|
||
this.swiperList = []
|
||
if(res.code === 200){
|
||
this.promptId = res.data.id
|
||
this.prompt = res.data.prompt
|
||
let prompts = res.data.prompts//提示卡列表
|
||
this.swiperList = prompts
|
||
|
||
if (prompts.length > 19) {
|
||
// processedthis.swiperListArray = prompts.slice(0, );
|
||
} else {
|
||
const fillArray = new Array(19 - prompts.length).fill(`${prompts.length}`);
|
||
this.swiperList = prompts.concat(fillArray);
|
||
}
|
||
|
||
// this.swiperList.splice(6,0,`${this.prompt}1`)
|
||
console.log(this.swiperList)
|
||
this.isFrist = false
|
||
this.$nextTick(() => {
|
||
this.autoplay = true
|
||
setTimeout(() => {
|
||
this.autoplay = false;
|
||
this.isTxt = true
|
||
// this.$refs.swiper.swiperTo(6, 0);
|
||
}, 2980)
|
||
})
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
again(){
|
||
promptCountApi().then(res => {
|
||
if(res.data === '0'){
|
||
this.$api.msg('暂无提示卡')
|
||
return
|
||
}else{
|
||
this.isTxt = false
|
||
this.autoplay = false;
|
||
this.swiperList = []
|
||
this.useCk()
|
||
}
|
||
})
|
||
},
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
closeTip() {
|
||
this.tipvisible = false
|
||
},
|
||
submit() {
|
||
this.tipvisible = true
|
||
},
|
||
buy(){
|
||
if(this.promptId){
|
||
uni.redirectTo({
|
||
url:`/pages/index/boxOrderConfirm?boxId=${this.boxId}&type=${this.type}&promptId=${this.promptId}`
|
||
})
|
||
}else{
|
||
uni.redirectTo({
|
||
url:`/pages/index/boxOrderConfirm?boxId=${this.boxId}&type=${this.type}`
|
||
})
|
||
}
|
||
|
||
},
|
||
swiperChange(e) {
|
||
// 滚动后停在第三个位置
|
||
if (e.detail.current === 3) {
|
||
this.current = 3;
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {}
|
||
|
||
.card-page {
|
||
height: 100vh;
|
||
padding-top: 112rpx;
|
||
background-image: url('@/static/new/tip/bg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
|
||
.main-gun {
|
||
background-image: url('@/static/new/tip/card-g.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
height: 880rpx;
|
||
padding-top: 76rpx;
|
||
position: relative;
|
||
|
||
.title-icon {
|
||
display: block;
|
||
margin: 0 auto;
|
||
width: 112rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.heng {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-image: url('@/static/new/tip/heng.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
height: 80rpx;
|
||
width: 416rpx;
|
||
position: absolute;
|
||
left: 166rpx;
|
||
top: 410rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #528FCC;
|
||
z-index: 1;
|
||
}
|
||
|
||
.swiper {
|
||
width: 416rpx;
|
||
height: 512rpx;
|
||
position: absolute;
|
||
left: 166rpx;
|
||
top: 200rpx;
|
||
// margin-left: 166rpx;
|
||
// margin-top: 64rpx;
|
||
z-index: 2;
|
||
.swiper-item {
|
||
height: 72rpx;
|
||
z-index: 2;
|
||
.item {
|
||
z-index: 2;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #528FCC;
|
||
}
|
||
}
|
||
|
||
.active-swiper-item {
|
||
height: 80rpx;
|
||
z-index: 2;
|
||
.item {
|
||
height: 80rpx;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #528FCC;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
background-image: url('@/static/new/tip/big-card.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
height: 880rpx;
|
||
padding-top: 76rpx;
|
||
|
||
.title-icon {
|
||
display: block;
|
||
margin: 0 auto;
|
||
width: 112rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.tip {
|
||
padding-top: 350rpx;
|
||
font-weight: 800;
|
||
font-size: 40rpx;
|
||
color: #143D66;
|
||
text-align: center;
|
||
}
|
||
|
||
.heng-icon {
|
||
|
||
background-image: url('@/static/new/tip/heng.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
width: 416rpx;
|
||
height: 80rpx;
|
||
display: block;
|
||
margin: 24rpx auto;
|
||
}
|
||
|
||
.sub {
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.immediate {
|
||
position: fixed;
|
||
bottom: 32rpx;
|
||
left: 32rpx;
|
||
width: 686rpx;
|
||
height: 96rpx;
|
||
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.again {
|
||
width: 328rpx;
|
||
height: 96rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #EBEBEB;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.buy {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 328rpx;
|
||
height: 96rpx;
|
||
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 16rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
.popup-main {
|
||
padding: 30rpx 22rpx;
|
||
// padding: 32rpx 32rpx 0rpx 32rpx;
|
||
z-index: 9991;
|
||
// max-height: 900rpx;
|
||
// position: relative;
|
||
.popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 158rpx;
|
||
|
||
.popup-header-img {
|
||
width: 158rpx;
|
||
height: 158rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.popup-info {
|
||
margin-left: 25rpx;
|
||
.popup-info-name {
|
||
|
||
width: 482rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.popup-info-price {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.popup-price {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 300;
|
||
font-size: 16rpx;
|
||
color: #888888;
|
||
margin-left: 20rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding-bottom: 8rpx;
|
||
text-decoration: line-through;
|
||
.popup-symbol {
|
||
// font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
.popup-clover {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 42rpx;
|
||
color: #000000;
|
||
height: 50rpx;
|
||
|
||
.clover-img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-title {
|
||
color: #333333;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
margin-top: 48rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
.specification-list{
|
||
// display: flex;
|
||
// align-items: center;
|
||
// flex-wrap: wrap;
|
||
|
||
width: 100%;
|
||
max-height: 600rpx;
|
||
margin-bottom: 50rpx;
|
||
padding-bottom: 220rpx;
|
||
overflow-y: auto;
|
||
.specification-item {
|
||
z-index: 9999;
|
||
display: inline-block;
|
||
padding: 0 64rpx;
|
||
// width: 200rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
border: 2rpx solid #B3B3BE;
|
||
border-radius: 28rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
font-size: 24rpx;
|
||
color: #B3B3BE;
|
||
margin-right: 32rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
.specification-item-active {
|
||
border: 2rpx solid #333333;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.popup-footer{
|
||
z-index: 9999;
|
||
background-color: #fff;
|
||
// padding-bottom: 20rpx;
|
||
margin-top: 30rpx;
|
||
.footer-num{
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
z-index: 9999;
|
||
margin-top: 20rpx;
|
||
.footer-info{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 800;
|
||
color: #333333;
|
||
.footer-info-num{
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.item-step {
|
||
margin-top: 17rpx;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item-sub {
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
}
|
||
|
||
.item-num {
|
||
width: 78rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.item-add {
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
}
|
||
}
|
||
}
|
||
.now-buy{
|
||
z-index: 9999;
|
||
margin-top: 46rpx;
|
||
|
||
|
||
width: 706rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 16rpx;
|
||
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |