deming/pageE/mine/MemberServe.vue
2020-08-09 18:39:35 +08:00

222 lines
5.4 KiB
Vue

<template>
<view class="member">
<view>
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
<swiper-item class="swiper-item">
<view class="integral">
<view class="integral-top">
<view>
<view class="title">总积分</view>
<view class="value">{{ memberInfo.member_points }}</view>
</view>
<view>
<view class="title">经验值</view>
<view class="value">{{ memberInfo.member_exppoints }}</view>
</view>
<view @click="viewProgress">
<view class="title">预计进度</view>
<!-- <view class="value">{{ memberInfo.next_grade_exppoints_diff }}</view> -->
<view class="value">
<image src="/static/image/mine/32.png"></image>
</view>
</view>
</view>
<scroll-view scroll-y class="integral-botom" :style="{ height: richHeight }">
<rich-text :nodes="nodes"></rich-text>
</scroll-view>
</view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="coupon">
<CouponView></CouponView>
</view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y class="details">
<view v-for="(item, index) in pointslogList" :key="index" class="details-item">
<view class="item-left">
<view class="item-title u-line-1">{{ item.pl_desc }}</view>
<view class="item-date">{{ item.pl_addtime }}</view>
</view>
<view class="item-right" :class="[item.pl_points < 0 ? 'negative' : 'positive']">
{{ Number(item.pl_points) > 0 ? '+' + item.pl_points : item.pl_points }}
</view>
</view>
<u-empty text="暂无明细" mode="data" color="#000" v-if="!pointslogList.length"></u-empty>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import common from '@/static/js/common.js';
import CouponView from "./MemberServeCoupon";
export default {
data() {
return {
list: [{
name: '积分数'
}, {
name: '兑换优惠券'
}, {
name: '积分明细'
}],
richHeight: '',
swiperHeight: '',
current: Number,
swiperCurrent: 0,
pointslogList: [],
memberInfo: {},
nodes: '',
}
},
components: {
CouponView
},
onLoad(option) {
this.setViewHeight();
if(option.current) this.current = option.current;
else this.current = 0;
},
watch: {
current(value) {
this.swiperCurrent = value;
if(value == 2) {
this.getPointslogList();
} else if(value == 0) {
this.getMemberPointsStat();
}
}
},
methods: {
tabsChange(index) {
this.swiperCurrent = index;
},
animationfinish(e) {
let current = e.detail.current;
this.swiperCurrent = current;
this.current = current;
},
getMemberPointsStat() {
this.$u.api.getMemberPointsStat().then((res)=>{
if(res.errCode == 0) {
this.memberInfo = res.data;
this.nodes = common.unescapeHTML(this.memberInfo.points_rule.document_content);
}
})
},
getPointslogList() {
this.$u.api.getPointslogList().then((res)=>{
if (res.errCode == 0) {
this.pointslogList = res.data;
}
})
},
setViewHeight() {
const res = uni.getSystemInfoSync();
// console.log(res.windowHeight);
this.richHeight = res.windowHeight - (88 + 250) * (res.windowWidth / 750) + 'px';
// console.log(this.richHeight);
this.swiperHeight = res.windowHeight - (res.windowWidth / 750) * 88 + 'px';
},
viewProgress() {
this.$u.route({
url: '/pageE/mine/MineProgress'
})
},
},
}
</script>
<style lang="scss" scpoed>
.member {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
display: flex;
flex-direction: column;
// > uni-swiper {
// flex: 1;
// height: calc()
// }
.swiper-item {
padding-top: 10rpx;
.integral {
height: 100%;
position: relative;
overflow: hidden;
.integral-top {
padding: 79rpx 88rpx;
width: 750rpx;
height: 270rpx;
background: linear-gradient(0deg,rgba(246,211,119,1) 1%,rgba(240,154,105,1) 100%);
display: flex;
justify-content: space-between;
> view {
flex: 1;
text-align: center;
.title {
font-size: 28rpx;
color: rgba(255,255,255, 0.6);
margin-bottom: 29rpx;
}
.value {
font-size: 48rpx;
font-weight: 500;
color: rgba(255,255,255,1);
> image {
width: 52rpx;
height: 35rpx;
}
}
}
}
.integral-botom {
box-sizing: border-box;
padding: 30rpx;
position: absolute;
width: 100%;
background: rgba(255,255,255,1);
border-radius: 20rpx 20rpx 0rpx 0rpx;
top: 250rpx;
z-index: 9;
}
}
.coupon {
height: 100%;
}
.details {
height: 100%;
.details-item {
background-color: #ffffff;
padding: 23rpx 30rpx;
margin-bottom: 2rpx;
display: flex;
align-items: center;
justify-content: space-between;
.item-left {
.item-title {
width: 450rpx;
font-size: 32rpx;
color: rgba(51,51,51,1);
margin-bottom: 23rpx;
}
.item-date {
font-size: 24rpx;
color: rgba(153,153,153,1);
}
}
.item-right {
font-size: 32rpx;
}
.positive {
color: rgba(56,199,70,1);
}
.negative {
color: rgba(255,49,49,1);
}
}
}
}
}
</style>