352 lines
7.6 KiB
Vue
352 lines
7.6 KiB
Vue
|
|
<template>
|
|
<u-popup :show="newVip"
|
|
class="notice"
|
|
width="70%"
|
|
@close="newVip = false"
|
|
closeable
|
|
round="10"
|
|
mode="center">
|
|
<div class="kuang">
|
|
<!-- <i class="el-icon-close cha"
|
|
@click="close"></i> -->
|
|
<!-- <el-carousel @change="carouselHand"
|
|
:autoplay='false'
|
|
indicator-position="outside"
|
|
:height='bannerHeight + "px"'
|
|
class="switerAll"
|
|
arrow='never'
|
|
ref='swiper'
|
|
style="width:548px;margin:0 auto">
|
|
<div class="left_arr"
|
|
@click="arrowClick('prev')">
|
|
<img src="@/static/images/arrowl.png"
|
|
alt="">
|
|
</div>
|
|
<div class="right_arr"
|
|
@click="arrowClick('next')">
|
|
<img src="@/static/images/arrowr.png"
|
|
alt="">
|
|
</div>
|
|
<el-carousel-item v-for="(item,index) in cGiftList"
|
|
:key="index">
|
|
<div class="kuang_t">{{item.plan}}</div>
|
|
<div class="n_kuang">
|
|
<div class="n_kuang_t">
|
|
<div v-if="cGiftList.length>1"
|
|
class="tit">{{item.actName}}</div>
|
|
<div v-for="(itm,indx) in item.pgpList"
|
|
:key="indx"
|
|
class="bao">
|
|
<img class="img_i"
|
|
:src="itm.cover"
|
|
alt="">
|
|
<div class="bao_r">
|
|
<div class="bao_rl">
|
|
<div>{{itm.productName}}</div>
|
|
<div class="num">X{{itm.quantity}}</div>
|
|
</div>
|
|
<div class="price">￥{{itm.price}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel> -->
|
|
<view class="nei">
|
|
<swiper class="swiper-box"
|
|
:indicator-dots="true"
|
|
:current="swiperDotIndex"
|
|
@change="getIndex">
|
|
<swiper-item v-for="(item, index) in cGiftList"
|
|
:key="index">
|
|
<div class="kuang_t">{{item.plan}}</div>
|
|
<div class="n_kuang">
|
|
<div class="n_kuang_t">
|
|
<div v-if="cGiftList.length>1"
|
|
class="tit">{{item.actName}}</div>
|
|
<div v-for="(itm,indx) in item.pgpList"
|
|
:key="indx"
|
|
class="bao">
|
|
<img class="img_i"
|
|
:src="itm.cover"
|
|
alt="">
|
|
<div class="bao_r">
|
|
<div class="bao_rl">
|
|
<div>{{itm.productName}}</div>
|
|
<div class="num">X{{itm.quantity}}</div>
|
|
</div>
|
|
<div class="price">￥{{itm.price}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<div class="btns"
|
|
@click="changeGift">{{ '立即领取' }}</div>
|
|
</view>
|
|
</div>
|
|
</u-popup>
|
|
<!-- </van-overlay> -->
|
|
</template>
|
|
|
|
<script>
|
|
import * as act from '@/config/bonus.js'
|
|
export default {
|
|
name: 'Title',
|
|
props: {
|
|
// isAgree: {
|
|
// type: Boolean,
|
|
// default: false,
|
|
// },
|
|
},
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
mode: 'default',
|
|
dotsStyles: {},
|
|
swiperDotIndex: 0,
|
|
newVip: false,
|
|
toChange: false,
|
|
cGiftList: [],
|
|
isChange: '',
|
|
bannerIndex: 0,
|
|
bannerHeight: 0,
|
|
}
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
carouselHand(index) {
|
|
this.bannerIndex = index
|
|
},
|
|
getIndex(e) {
|
|
this.bannerIndex = e.detail.current
|
|
},
|
|
getGiftList(val) {
|
|
act
|
|
.getGiftPack({
|
|
pkBaseId: val,
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.data != undefined) {
|
|
this.newVip = true
|
|
this.cGiftList = res.data
|
|
} else {
|
|
this.newVip = false
|
|
}
|
|
}
|
|
})
|
|
},
|
|
close() {
|
|
this.newVip = false
|
|
},
|
|
changeGift() {
|
|
let rows = this.cGiftList[this.bannerIndex]
|
|
// this.$router.push({
|
|
// path: '/newGiftPay',
|
|
// query: {
|
|
// data: JSON.stringify(rows)
|
|
// },
|
|
// })
|
|
uni.navigateTo({
|
|
url: '/pages/other/newGiftPay?data=' + JSON.stringify(rows),
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.notice ::v-deep .u-popup__content {
|
|
width: 690rpx;
|
|
background: none;
|
|
}
|
|
.kuang {
|
|
width: 100%;
|
|
// margin: 0 auto;
|
|
// padding: 0 20rpx;
|
|
// background: #fff;
|
|
background: url('~@/static/images/nGift.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 500px;
|
|
// text-align: center;
|
|
// margin-top: 150px;
|
|
// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
|
border-radius: 20px;
|
|
position: relative;
|
|
|
|
.cha {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
font-size: 25px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.swiper-box {
|
|
height: 400px;
|
|
}
|
|
.nei {
|
|
padding: 0 20rpx;
|
|
}
|
|
.kuang_t {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
font-size: 34px;
|
|
margin: 20px 0;
|
|
// padding-top: 40px;
|
|
}
|
|
.n_kuang {
|
|
border-radius: 8px;
|
|
border: 2px dashed #ccc;
|
|
// height: 330px;
|
|
// width: 388px;
|
|
margin: 0 auto;
|
|
padding: 0 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 10px;
|
|
.n_kuang_t {
|
|
flex: 1;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
// ::-webkit-scrollbar {
|
|
// width: 0 !important;
|
|
// }
|
|
// ::-webkit-scrollbar {
|
|
// width: 0 !important;
|
|
// height: 0;
|
|
// }
|
|
}
|
|
.tit {
|
|
font-size: 24px;
|
|
// margin: 12px 0;
|
|
margin-top: 12px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.btns {
|
|
background: #ffb95c;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
// width: 388px;
|
|
margin: 0 auto;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
// display: none;
|
|
}
|
|
.bao {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
background: rgba(207, 213, 250, 0.4);
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
align-items: center;
|
|
padding: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
.bao_r {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.bao_rl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.num {
|
|
font-size: 12px;
|
|
margin-top: 10px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.price {
|
|
font-size: 16px;
|
|
|
|
font-weight: 600;
|
|
color: #f64e49;
|
|
}
|
|
}
|
|
}
|
|
.img_i {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin-right: 10px;
|
|
}
|
|
* {
|
|
::-webkit-scrollbar {
|
|
/*隐藏滚轮*/
|
|
display: none;
|
|
}
|
|
}
|
|
.zhuanpan1 {
|
|
::v-deep .el-dialog {
|
|
background: transparent !important;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
.switerAll {
|
|
.left_arr {
|
|
position: absolute;
|
|
top: 55%;
|
|
left: 20px;
|
|
z-index: 10;
|
|
img {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
.right_arr {
|
|
position: absolute;
|
|
top: 55%;
|
|
right: 20px;
|
|
z-index: 10;
|
|
img {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.kuang .el-icon-arrow-left {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
.kuang .el-icon-arrow-right {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
.kuang .el-carousel__arrow {
|
|
top: 60%;
|
|
}
|
|
.kuang .el-carousel__button {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
opacity: none;
|
|
}
|
|
.kuang .el-carousel__indicator.is-active button {
|
|
width: 50px;
|
|
border-radius: 10px;
|
|
}
|
|
.kuang .el-carousel__indicators--outside .el-carousel__indicator:hover button {
|
|
opacity: 1;
|
|
}
|
|
::v-deep .uni-swiper-dots-horizontal {
|
|
bottom: 0px;
|
|
}
|
|
</style> |