394 lines
7.3 KiB
Vue
394 lines
7.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<uni-nav-bar left-icon="left" title="会员中心" color="#fff" backgroundColor="transparent" :fixed="true"
|
||
:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar>
|
||
<view class="head justify-center align-end">
|
||
<view class="user-card br20 relative">
|
||
<view class="">
|
||
<view class="">LV.{{ userinfo.vip }}</view>
|
||
<view class="">当前权益：{{ userinfo.notice || '(无)' }}</view>
|
||
<view class="mt30">
|
||
<cmd-progress stroke-shape="round" style="height: 100%;background: rgba(255,255,255,0.45);border-radius: 30rpx;" :percent="userinfo.jin_du || 0" :show-info="false"
|
||
stroke-color="#FFFFFF"
|
||
:strokxxeWidth="5"></cmd-progress>
|
||
</view>
|
||
<view class="">还需消费{{ userinfo.upgrade_money }}可升级至V{{ userinfo.last_vip }}</view>
|
||
</view>
|
||
<view class="flex">
|
||
<image class="img100" :src="$img1('my/zuan1.png')"></image>
|
||
<text>{{userinfo.vip}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quanyi relative">
|
||
<view class="list-title ziti">
|
||
<text>会员权益</text>
|
||
</view>
|
||
<view class="">
|
||
<view class="coupon_item" v-for="(item, index) in config" :key="index">
|
||
<view class="icon common_bg" :style="{
|
||
'background-image': `url(${$img1('my/zuan.png')})`
|
||
}">{{item.title}}</view>
|
||
<view class="coupon_r">
|
||
<view class="title">{{ item.title }}</view>
|
||
<view class="rule">获得条件：累计消费{{ item.condition }}</view>
|
||
<view class="desc">权益说明：{{ item.notice || '(无)' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
z_imgPath: this.$z_img2 + 'mine/vip/',
|
||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||
userinfo: {},
|
||
config: {},
|
||
show: 0,
|
||
type: ''
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
getData() {
|
||
// 模拟接口
|
||
let that = this
|
||
that.req({
|
||
url: 'vip_list',
|
||
Loading: true,
|
||
success(res) {
|
||
that.userinfo = res.data.userinfo
|
||
that.config = res.data.data
|
||
}
|
||
})
|
||
},
|
||
back() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.footer {
|
||
width: 702rpx;
|
||
height: 88rpx;
|
||
background: #ff5029;
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
position: fixed;
|
||
bottom: 57rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.wenben>view:nth-of-type(1) {
|
||
font-size: 32rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.wenben {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.coupon_head {
|
||
width: 372rpx;
|
||
height: 71rpx;
|
||
margin: 70rpx auto 0;
|
||
display: block;
|
||
}
|
||
.header_user>view:nth-of-type(2)>view:nth-of-type(2) {
|
||
font-size: 24rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.header_user>view:nth-of-type(2)>view:nth-of-type(1) {
|
||
margin-left: 20rpx;
|
||
font-size: 36rpx;
|
||
text-shadow: 0px 0px 10px rgba(255, 150, 254, 0.7);
|
||
}
|
||
|
||
.header_user {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 37rpx;
|
||
margin-bottom: 80rpx;
|
||
}
|
||
|
||
.xietiao {
|
||
width: 714rpx;
|
||
height: 274rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
|
||
.vip-icon {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: -10rpx;
|
||
|
||
width: 216rpx;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.header_bot {
|
||
text-align: center;
|
||
margin-right: 100rpx;
|
||
margin-bottom: -80rpx;
|
||
|
||
font-size: 32rpx;
|
||
font-family: zihun147hao-xingyuanhei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.jifen {
|
||
position: absolute;
|
||
bottom: 66rpx;
|
||
left: 51rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
// opacity: 0.6;
|
||
}
|
||
|
||
.xian {
|
||
position: absolute;
|
||
bottom: 112rpx;
|
||
left: 51rpx;
|
||
width: 600rpx;
|
||
height: 1px;
|
||
background: linear-gradient(94deg, #ffffff, #ffffff, #ffffff);
|
||
opacity: 0.2;
|
||
border-radius: 1rpx;
|
||
}
|
||
|
||
.jp_headimg>image {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.content {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
padding-bottom: 40rpx;
|
||
|
||
.head {
|
||
width: 686rpx;
|
||
height: 372rpx;
|
||
background: #121317;
|
||
border-radius: 34rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.user-card {
|
||
width: 622rpx;
|
||
height: 330rpx;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 50rpx 0;
|
||
position: relative;
|
||
background: linear-gradient(138deg, #fe622b 7%, #ffa246 100%);
|
||
>view:nth-child(1){
|
||
>view:nth-child(1){
|
||
font-size: 68rpx;
|
||
color: #F4C783;
|
||
font-weight: bold;
|
||
}
|
||
>view:nth-child(2){
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
>view:nth-child(3){
|
||
width: 294rpx;
|
||
height: 14rpx;
|
||
}
|
||
>view:nth-child(4){
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
>view:nth-child(2){
|
||
width: 216rpx;
|
||
height: 216rpx;
|
||
position: absolute;
|
||
top: -14rpx;
|
||
right: 34rpx;
|
||
>text{
|
||
width: 120rpx;
|
||
height: 74rpx;
|
||
font-weight: 700;
|
||
font-size: 68rpx;
|
||
color: #FFFFFF;
|
||
position: absolute;
|
||
text-align: center;
|
||
line-height: 74rpx;
|
||
right: 30rpx;
|
||
bottom: 60rpx;
|
||
}
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
background: #9d9d9d;
|
||
border: 1px solid #cccccc;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
width: 250rpx;
|
||
margin-left: 20rpx;
|
||
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.cur-desc {
|
||
margin-top: 20rpx;
|
||
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
text {
|
||
color: #08F6BB;
|
||
}
|
||
}
|
||
|
||
.need-lv {
|
||
margin-top: 30rpx;
|
||
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
text {
|
||
color: #08F6BB;
|
||
}
|
||
}
|
||
|
||
.lv {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 20rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
>image {
|
||
width: 174rpx;
|
||
height: 174rpx;
|
||
}
|
||
}
|
||
}
|
||
.quanyi{
|
||
width: 750rpx;
|
||
margin: -100rpx auto 0;
|
||
z-index: 20;
|
||
background: url($imgurl+'my/vipBg.png') no-repeat 0 0 / 100% 1192rpx;
|
||
}
|
||
|
||
.list-title {
|
||
margin-top: 20rpx;
|
||
padding-left: 30rpx;
|
||
padding-top: 100rpx;
|
||
|
||
text {
|
||
font-size: 40rpx;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.coupon_item {
|
||
position: relative;
|
||
padding: 24rpx 20rpx;
|
||
box-sizing: border-box;
|
||
margin: 20rpx auto 0;
|
||
width: 680rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
width: 108rpx;
|
||
height: 94rpx;
|
||
}
|
||
|
||
.coupon_r {
|
||
position: relative;
|
||
padding-left: 60rpx;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 1px;
|
||
height: 86rpx;
|
||
background: #666;
|
||
}
|
||
|
||
.title {
|
||
font-weight: 700;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.rule,
|
||
.desc {
|
||
margin-top: 10rpx;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #dddddd;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |