You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
6.2 KiB
280 lines
6.2 KiB
<template>
|
|
<view class="vip">
|
|
<image src="../static/images/img/vipBg.png" mode="" class="vipBg"></image>
|
|
<u-navbar title="超级VIP" :bgColor="'transparent'" :placeholder="true"></u-navbar>
|
|
<view class="vipContent">
|
|
<view class="contentContainer">
|
|
<view class="section1">
|
|
<view class="left">
|
|
<image src="../static/images/img/u1.png" mode="" class="avatar"></image>
|
|
<view class="personInfo">
|
|
<text>李大花</text>
|
|
<image src="../static/images/img/pvip.png" class="pvip" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view>
|
|
超级VIP全年预计省
|
|
</view>
|
|
<view class="price">
|
|
￥<text>2980</text>元
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="section2">
|
|
<image src="../static/images/img/vipFlag.png" class="vipFlag" mode="widthFix"></image>
|
|
<view class="title">
|
|
VIP开卡特权大礼
|
|
</view>
|
|
<view class="vipItem" v-for="(item,index) in list" :key="index">
|
|
<view class="titleContainer">
|
|
<image :src="item.pic" mode=""></image>
|
|
<view class="titleInfo">
|
|
<text class="title">{{item.name}}</text>
|
|
<text class="subTitle">{{item.subTitle}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="desc">
|
|
{{item.desc}}
|
|
</view>
|
|
</view>
|
|
<view class="btn">
|
|
立即开通 <text>￥<text>99</text>元/年</text>
|
|
</view>
|
|
</view>
|
|
<view class="section3">
|
|
<view class="title">
|
|
超V专属商品
|
|
</view>
|
|
<wanl-product :dataList="likeData" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
list:[
|
|
{pic:'../static/images/img/v1.png',name:'送100元',subTitle:'红包/代金券',desc:'升级VIP会员，再送XXX元红包，红包可用于在商城购买商品时当现金使用。'},
|
|
{pic:'../static/images/img/v2.png',name:'高额红包抵用',subTitle:'更高额度的红包使用',desc:'升级为VIP后，可使用更高额度的红包进行购物抵用，购物更划算，更省钱。'},
|
|
{pic:'../static/images/img/v3.png',name:'分享赚钱',subTitle:'邀请新人赚钱',desc:'邀请新人注册成功，送50元红包，被邀请人升级成为VIP得50元余额。'},
|
|
{pic:'../static/images/img/v4.png',name:'VIP专属活动',subTitle:'专属特别活动',desc:'定期或不定期的VIP专属活动，全额抵用或最低限额购买等VIP专属活动等你来拿。'},
|
|
],
|
|
likeData:[]
|
|
}
|
|
},
|
|
methods:{
|
|
async loadlikeData() {
|
|
await uni.request({
|
|
url: '/wanlshop/product/likes?pages=cart',
|
|
data: {
|
|
page: 1,
|
|
},
|
|
success: res => {
|
|
this.likeData = res.data.data;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadlikeData();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.vip{
|
|
position: relative;
|
|
height: calc(100vh);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
::v-deep .wanl-product .product_warter.col-2-20{
|
|
margin:0 !important;
|
|
}
|
|
.vipBg{
|
|
position: absolute;
|
|
width:100%;
|
|
height: 100%;
|
|
z-index:0;
|
|
|
|
}
|
|
.vipContent{
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 0 24rpx;
|
|
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding-bottom: 20rpx;
|
|
.contentContainer{
|
|
.section1{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 70rpx;
|
|
.left{
|
|
display: flex;
|
|
align-items: center;
|
|
.avatar{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
.personInfo{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left:15rpx;
|
|
text{
|
|
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.pvip{
|
|
height: auto;
|
|
width:60rpx;
|
|
margin-top:15rpx;
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
.price{
|
|
margin-top: 10rpx;
|
|
text{
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.section2{
|
|
|
|
background: linear-gradient(-90deg, #DFAD71, #FBD9AE);
|
|
border-radius: 20rpx;
|
|
padding:30rpx;
|
|
position: relative;
|
|
margin-top: 20rpx;
|
|
.vipFlag{
|
|
position: absolute;
|
|
z-index:0;
|
|
width:147rpx;
|
|
height: auto;
|
|
top:8rpx;
|
|
right:0;
|
|
}
|
|
.title{
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #020202;
|
|
}
|
|
.vipItem{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
z-index: 1;
|
|
background: linear-gradient(-90deg, #030303, #2F2F2F);
|
|
border-radius: 20rpx;
|
|
padding:20rpx;
|
|
margin-top: 20rpx;
|
|
.titleContainer{
|
|
display: flex;
|
|
}
|
|
image{
|
|
width:100rpx;
|
|
height:100rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.titleInfo{
|
|
margin-left:15rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.title{
|
|
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #F0C795;
|
|
}
|
|
.subTitle{
|
|
margin-top:19rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #F0C795;
|
|
}
|
|
}
|
|
.desc{
|
|
width:50%;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 300;
|
|
font-size: 20rpx;
|
|
color: #F0C795;
|
|
line-height: 30rpx;
|
|
padding-left:21rpx;
|
|
border-left:1px dashed #3A3A3A;
|
|
}
|
|
}
|
|
.btn{
|
|
width:70%;
|
|
margin-left:15%;
|
|
padding:34rpx 0;
|
|
background: linear-gradient(-90deg, #DDA259, #FBBF73);
|
|
border-radius: 50px;
|
|
text-align: center;
|
|
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #020202;
|
|
margin-top:40rpx;
|
|
&>text{
|
|
color: #C81202;
|
|
text{
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.section3{
|
|
|
|
background: linear-gradient(-90deg, #DFAD71, #FBD9AE);
|
|
border-radius: 20rpx;
|
|
padding:30rpx;
|
|
position: relative;
|
|
margin-top:20rpx;
|
|
.vipFlag{
|
|
position: absolute;
|
|
z-index:0;
|
|
width:147rpx;
|
|
height: auto;
|
|
top:8rpx;
|
|
right:0;
|
|
}
|
|
.title{
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #020202;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
::v-deep.u-navbar__content__left{
|
|
display: none;
|
|
}
|
|
::v-deep .u-navbar__content__title{
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style> |