<template>
<view class="main">
<TopBar title="会员中心" bgColor="#2D3239" titleColor="#fff" />
<view class="top_bg">
<view class="swiper_content">
<swiper style="height: 284rpx;" @change="swiperChange">
<swiper-item style="left: -30rpx;" :style="[0 === index ? {'left':0} : null]">
<view class="swiper_card" :class="[{scale: 0 !== index}, `level${member_list[0].grade}`]" :style="[member_list.length === 1 ? {width: '100%'} : null]">
<text class="now_level">{{member_list[0].grade_name}}</text>
<view class="card_flex">
<image :src="member_list[0].portrait || $defaultPortrait"></image>
<view>
<view class="customer_name">{{member_list[0].user_name}}</view>
<view class="card_bar">
<view class="process_bar"
:style="`width: ${Number(member_list[0].total_integral)*100/(Number(member_list[0].total_integral)+member_list[0].growth_diff).toFixed(2)}%`"></view>
</view>
<view class="diff" v-if="member_list.length > 1">{{member_list[0].total_integral}}/{{Number(member_list[0].total_integral)+member_list[0].growth_diff}} 升至{{member_list[1].grade_name}}</view>
</view>
</view>
<view class="card_bottom">
<text class="growth_diff" v-if="member_list.length > 1">您距离下一等级还需{{member_list[0].growth_diff}}经验值</text>
<text v-else></text>
<view class="levelStrategy" @click="$jump('/pages/levelStrategy/levelStrategy' ,2)"><text class="picon" :class="`picon${member_list[0].grade}`"></text><text>升级攻略</text></view>
</view>
</view>
</swiper-item>
<swiper-item style="left: -30rpx;" v-if="member_list.length > 1" :style="[1 === index ? {'left':0} : null]">
<view class="swiper_card" :class="[{scale: 1 !== index}, `level${member_list[1].grade}`]" :style="[member_list.length === 1 ? {width: '100%'} : null]">
<text class="now_level">{{member_list[1].grade_name}}</text>
<view class="card_flex">
<image :src="member_list[1].portrait || $defaultPortrait"></image>
<view>
<view class="customer_name">{{member_list[1].user_name}}</view>
<view class="card_bar"></view>
<view class="diff">{{member_list[1].grade_name}}</view>
</view>
</view>
<view class="card_bottom">
<text></text>
<view class="levelStrategy" @click="$jump('/pages/levelStrategy/levelStrategy' ,2)"><text class="picon" :class="`picon${member_list[1].grade}`"></text><text>升级攻略</text></view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="top_title" v-if="titleFlag">当前等级权益</view>
<view class="now_benefit" v-for="(val, key) in member_list" v-if="key === index && val.grade_list !==null" :key="key" :style="[heightFlag ? {'height': height+'rpx'} : null]" :class="val.grade_list.length > 4 ? 'height1' : 'height2'">
<view class="benefit_item" v-for="(item, k) in val.grade_list" :key="k" :style="[(key === 0 && item.is_next) ? {color: 'rgba(255,255,255,0.4)'} : null]">
{{item.short_title}}
<text class="dia" v-if="(key === 0 && !item.is_next) || (key === 1)"></text>
<text v-else class="unlock"><text class="eosfont"></text>{{val.grade_name.substr(0,2)}}解锁</text>
</view>
</view>
<view class="collapse_btn" @click="moreBenefit()" v-if="moreFlag"><text v-if="!heightFlag">查看更多</text><text v-else>收起</text><text class="eosfont" v-if="!heightFlag"></text><text class="eosfont" v-else></text></text></view>
</view>
<view class="more_bar">
<text class="text1">兑换中心</text>
<!-- <text class="text2">查看更多<text class="eosfont"></text></text> -->
</view>
<view class="goods_box">
<view class="goods_item" v-for="(item, index) in integral_list" :key="index" @click="$jump(`${php}app=my_integral_goods&act=detail&id=${item.goods_id}&integral=${member_list[0].integral}`)">
<image class="goods_img" :src="item.goods_logo || $noGoodsImg"></image>
<text class="goods_name">{{item.goods_name}}</text>
<text class="goods_price">{{item.goods_point}}积分</text>
</view>
</view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
import { php } from '@/common/host.js';
export default {
data() {
return {
height: 336,
heightFlag: false,
animationData: {},
integral_list: [],
member_list: [{
grade: '',
grade_name: '',
grade_list: []
}, {
grade: '',
grade_name: '',
grade_list: []
}],
index: 0,
moreFlag: true,
titleFlag: true,
php: php
}
},
onLoad() {
uni.request({
url: '/uni/api/member/get_member_index',
method: 'get',
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.integral_list = res.data.data.integral_list;
if(res.data.data.member_list[0].grade_list === null) {
res.data.data.member_list[0].grade_list = [];
}
if(res.data.data.member_list[1]) {
let arr = res.data.data.member_list[1].grade_list;
arr.map((item,index) => {
item.is_next = 1;
});
res.data.data.member_list[0].grade_list = res.data.data.member_list[0].grade_list.concat(arr);
}
this.member_list = res.data.data.member_list;
this.changeHeight(res.data.data.member_list[0].grade_list, 0);
} else if (res.data.code === -1) {
// 未登录状态
this.$jump(`${php}app=member&act=login`)
}
}
});
this.animation = uni.createAnimation();
},
methods: {
moreBenefit() {
this.heightFlag = !this.heightFlag;
},
changeHeight(data, index) {
this.index = index;
if(data === null) {
this.moreFlag = false;
this.titleFlag = false;
return
}
this.titleFlag = true;
if(data.length > 8) {
this.moreFlag = true;
} else {
this.moreFlag = false;
}
let n = data.length % 4,
init = Math.ceil(data.length / 4);
this.height = init * 160 + init * 16;
},
swiperChange(e) {
var current = e.detail.current;
this.index = current;
if(this.member_list[current].grade_list === null) {
this.moreFlag = false;
this.titleFlag = false;
return
}
this.titleFlag = true;
let length = this.member_list[current].grade_list.length;
if(length > 8) {
this.moreFlag = true;
} else {
this.moreFlag = false;
}
this.changeHeight(this.member_list[current].grade_list, current);
}
},
components: {
TopBar
}
}
</script>
<style lang="less" scoped>
.main {
padding: 88rpx 0 76rpx;
background-color: #FBFBFB;
.top_bg {
background-color: #2D3239;
overflow: hidden;
margin-top: -8rpx;
padding: 0 24rpx 24rpx;
border-radius: 0 0 24rpx 24rpx;
}
.swiper_content {
margin-top: 16rpx;
height: 284rpx;
.scale {
height: 256rpx !important;
margin-top: 14rpx;
}
.swiper_card {
width: 640rpx;
height: 284rpx;
box-shadow:0px 8rpx 24rpx 0px rgba(255,219,43,0.2);
border-radius:16rpx;
position: relative;
overflow: hidden;
transition: all 0.5s;
.card_flex {
display: flex;
margin: 94rpx 0 0 30rpx;
image {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
margin-right: 24rpx;
}
.customer_name {
color: #000000;
font-size: 28rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
height: 40rpx;
line-height: 40rpx;
}
.card_bar {
width: 200rpx;
height: 8rpx;
border-radius: 4rpx;
background-color: #FFF3B6;
margin: 8rpx 0 ;
overflow: hidden;
.process_bar {
background-color: #6E4C26;
height: 100%;
}
}
.diff {
color: rgba(0,0,0,0.7);
font-size: 24rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
height: 34rpx;
line-height: 34rpx;
}
}
.now_level {
width: 128rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 20rpx 0 0 20rpx;
background-color: red;
color: #000000;
font-size: 24rpx;
position: absolute;
right: 0;
top: 24rpx;
background-color: rgba(255,255,255,0.3);
}
.card_bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 64rpx;
line-height: 64rpx;
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24rpx;
box-sizing: border-box;
background-color: rgba(0,0,0,0.2);
color: rgba(255,255,255,0.8);
.levelStrategy {
font-size: 24rpx;
display: flex;
align-items: center;
.picon {
width: 36rpx;
height: 36rpx;
display: inline-block;
}
.picon1 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p1%403x.png') no-repeat;
background-size: 100% 100%;
}
.picon2 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p2%403x.png') no-repeat;
background-size: 100% 100%;
}
.picon3 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p3%403x.png') no-repeat;
background-size: 100% 100%;
}
.picon4 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p4%403x.png') no-repeat;
background-size: 100% 100%;
}
.picon5 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p5%403x.png') no-repeat;
background-size: 100% 100%;
}
}
.growth_diff {
font-size: 24rpx;
color: rgba(255,255,255,0.8);
}
}
}
.level1 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level1%402x.png') no-repeat;
background-size: 100% 100%;
}
.level2 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level2%402x.png') no-repeat;
background-size: 100% 100%;
}
.level3 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level3%402x.png') no-repeat;
background-size: 100% 100%;
}
.level4 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level4%402x.png') no-repeat;
background-size: 100% 100%;
}
.level5 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level5%402x.png') no-repeat;
background-size: 100% 100%;
}
}
.top_title {
color: #D6A35D;
font-size: 40rpx;
height: 56rpx;
line-height: 56rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
position: relative;
margin-top: 40rpx;
}
.top_title:after {
width: 80rpx;
height: 6rpx;
border-radius: 4rpx;
background-color: #D6A35D;
content: '';
position: absolute;
left: 0;
bottom: -12rpx;
}
.now_benefit {
display: flex;
flex-wrap: wrap;
margin-top: 54rpx;
overflow: hidden;
transition: height 0.3s;
.benefit_item {
width: 160rpx;
height: 160rpx;
background-color: rgba(0,0,0,0.5);
border-radius: 16rpx;
margin-bottom: 16rpx;
color: #F6CA8D;
font-size: 28rpx;
padding: 16rpx;
box-sizing: border-box;
position: relative;
overflow: hidden;
margin-left: 20rpx;
.unlock {
font-size: 16rpx;
color: rgba(255,255,255,0.4);
display: flex;
align-items: center;
justify-content: center;
width: 120rpx;
height: 36rpx;
line-height: 36rpx;
position: absolute;
bottom: 16rpx;
left: 20rpx;
background-color: #2E3136;
border-radius: 18rpx;
}
.dia {
position: absolute;
right: -10rpx;
bottom: -10rpx;
width: 60rpx;
height: 60rpx;
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/dia.png') no-repeat;
background-size: 100% 100%;
}
}
.benefit_item::-webkit-scrollbar {
display: none;
}
.benefit_item:nth-of-type(4n-3) {
margin-left: 0;
}
}
.height1 {
height: 352rpx;
}
.height2 {
height: 176rpx;
}
.collapse_btn {
width: 408rpx;
height: 68rpx;
line-height: 64rpx;
text-align: center;
border-radius: 34rpx;
border: 2px solid #F6CA8D;
box-sizing: border-box;
color: #F6CA8D;
font-size: 28rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin: 24rpx auto 42rpx;
}
.more_bar {
width: 702rpx;
margin: 30rpx auto;
display: flex;
align-items: center;
justify-content: space-between;
.text1 {
font-size: 40rpx;
color: #21232C;
height: 56rpx;
line-height: 56rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.text2 {
color: #333333;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
display: flex;
align-items: center;
text {
color: grey;
font-weight: lighter;
margin-left: 6rpx;
}
}
}
.goods_box {
width: 702rpx;
margin: 0 auto;
background-color: #fff;
padding: 0 24rpx 32rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.goods_item {
width: 208rpx;
margin-top: 24rpx;
.goods_img {
width: 208rpx;
height: 208rpx;
border-radius: 16rpx;
}
.goods_name {
color: #21232C;
font-size: 26rpx;
line-height: 36rpx;
width: 100%;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.goods_price {
color: #C28F4B;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
}
}
.goods_item:nth-of-type(3n-1) {
margin: 24rpx 14rpx 0;
}
}
}
</style>