This commit is contained in:
2020-07-08 18:14:41 +08:00
parent c4fb80d06b
commit 9ffdfa652a
30 changed files with 640 additions and 1271 deletions

View File

@@ -66,6 +66,9 @@ export default {
onLoad() {
this.getUserInfo();
},
onNavigationBarButtonTap(e) {
if( e.index == 0 ) uni.navigateBack();
},
methods: {
changeAvatar() {
const url = this.$u.http.config.baseUrl + '/Upload/uploadfile';

View File

@@ -9,9 +9,12 @@
<view class="title">经验值</view>
<view class="value">{{ memberInfo.member_exppoints }}</view>
</view>
<view>
<view @click="viewProgress">
<view class="title">预计进度</view>
<view class="value">{{ memberInfo.next_grade_exppoints_diff }}</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: integralHeight }">
@@ -47,6 +50,11 @@ export default {
}
})
},
viewProgress() {
this.$u.route({
url: '/pageE/mine/MineProgress'
})
},
},
};
</script>
@@ -74,6 +82,10 @@ export default {
font-size: 48rpx;
font-weight: 500;
color: rgba(255,255,255,1);
> image {
width: 52rpx;
height: 35rpx;
}
}
}
}

View File

@@ -1,8 +1,8 @@
<template>
<view class="member">
<view>
<!-- <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>
<!-- </view> -->
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
<swiper-item class="swiper-item">
<view class="integral">
@@ -15,7 +15,7 @@
<view class="title">经验值</view>
<view class="value">{{ memberInfo.member_exppoints }}</view>
</view>
<view>
<view @click="viewProgress">
<view class="title">预计进度</view>
<view class="value">{{ memberInfo.next_grade_exppoints_diff }}</view>
</view>
@@ -26,21 +26,9 @@
</view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y class="coupon">
<view v-for="(item, index) in couponList" :key="index" class="coupon-item">
<img src="../static/mine/23.png" />
<view class="coupon-main">
<view class="coupon-title">萌店十元优惠券</view>
<view class="coupon-date">
<img src="../static/mine/26.png" />
<view>2020.05.17-2020.06.17</view>
</view>
<view class="coupon-integral">299积分</view>
</view>
<view class="coupon-btn">兑换</view>
</view>
<u-empty text="暂无优惠券" mode="coupon" color="#000" v-if="!couponList.length"></u-empty>
</scroll-view>
<view class="coupon">
<CouponView></CouponView>
</view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y class="details">
@@ -61,6 +49,7 @@
</template>
<script>
import common from '@/static/js/common.js';
import CouponView from "./MemberServeCoupon";
export default {
data() {
return {
@@ -76,11 +65,13 @@ export default {
current: 0,
swiperCurrent: 0,
pointslogList: [],
couponList: [],
memberInfo: {},
nodes: '',
}
},
components: {
CouponView
},
onShow() {
this.getMemberPointsStat();
this.getPointslogList();
@@ -117,6 +108,11 @@ export default {
// console.log(this.richHeight);
this.swiperHeight = res.windowHeight - 88 / 2 + 'px';
},
viewProgress() {
this.$u.route({
url: '/pageE/mine/MineProgress'
})
},
},
}
</script>
@@ -171,55 +167,6 @@ export default {
}
.coupon {
height: 100%;
.coupon-item {
padding: 30rpx;
background-color: #ffffff;
display: flex;
align-items: flex-end;
margin-bottom: 2rpx;
> img {
width: 180rpx;
height: 160rpx;
border-radius: 10rpx;
margin-right: 30rpx;
}
.coupon-main {
.coupon-title {
font-size: 30rpx;
color: rgba(51,51,51,1);
}
.coupon-date {
display: flex;
align-items: center;
margin: 29rpx 0 20rpx;
> img {
width: 24rpx;
height: 24rpx;
margin-right: 15rpx;
}
> view {
font-size: 24rpx;
color: rgba(153,153,153,1);
}
}
.coupon-integral {
font-size: 30rpx;
font-weight: 500;
color: rgba(255,120,15,1);
}
}
.coupon-btn {
margin-left: auto;
width: 85rpx;
// height: 42rpx;
border: 2rpx solid rgba(255,120,15,1);
border-radius: 10rpx;
font-size: 26rpx;
color: rgba(255,120,15,1);
line-height: 42rpx;
text-align: center;
}
}
}
.details {
height: 100%;

View File

@@ -0,0 +1,161 @@
<template>
<view class="coupon-swiper">
<u-tabs-swiper ref="coupon" :list="couponGroupList" :is-scroll="true" active-color="#FF780F" :current="couponCurrent" font-size="24" :show-bar="false" @change="couponTabsChange" height="88" ></u-tabs-swiper>
<swiper :current="swiperCouponCurrent" @animationfinish="couponAnimationFinish" :style="{ height: swiperHeight }">
<swiper-item class="swiper-coupon-item" v-for="(_, i) in couponGroupList" :key="i">
<scroll-view scroll-y style="height: 100%;">
<view v-for="(coupon, index) in couponList" :key="index" class="coupon-item">
<!-- <img src="../static/mine/23.png" />
<view class="coupon-main">
<view class="coupon-title">萌店十元优惠券</view>
<view class="coupon-date">
<img src="../static/mine/26.png" />
<view>2020.05.17-2020.06.17</view>
</view>
<view class="coupon-integral">299积分</view>
</view>
<view class="coupon-btn">兑换</view> -->
<Coupon :couponInfo="coupon" :status='0' :type="0" @exchange="exchangeCoupon($event)"></Coupon>
</view>
<u-empty text="暂无优惠券" mode="coupon" color="#000" v-if="!couponList.length"></u-empty>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import Coupon from "@/components/mine/coupon/index";
export default {
data() {
return {
swiperHeight: '',
couponCurrent: 0,
swiperCouponCurrent: 0,
couponGroupList: [
{
name: '平台'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}, {
name: '分类名称'
}
],
couponList: [
{
index: 0
},
{
index: 1
},
],
}
},
components: {
Coupon
},
created() {
this.setViewHeight();
},
methods: {
exchangeCoupon(id) {
console.log(id);
},
couponTabsChange(index) {
this.couponCurrent = index;
},
couponAnimationFinish(e) {
const current = e.detail.current;
this.swiperCouponCurrent = current;
this.couponCurrent = current;
},
setViewHeight() {
const res = uni.getSystemInfoSync();
this.swiperHeight = res.windowHeight - ((88 + 10 + 88) / 2) + 'px';
},
},
};
</script>
<style lang="scss" scoped>
.coupon-swiper {
.swiper-coupon-item {
box-sizing: border-box;
background-color: #ffffff;
padding: 30rpx {
top: 0;
};
.coupon-item {
margin-bottom: 20rpx;
}
// .coupon-item {
// padding: 30rpx;
// background-color: #ffffff;
// display: flex;
// align-items: flex-end;
// // margin-bottom: 2rpx;
// > img {
// width: 180rpx;
// height: 160rpx;
// border-radius: 10rpx;
// margin-right: 30rpx;
// }
// .coupon-main {
// .coupon-title {
// font-size: 30rpx;
// color: rgba(51,51,51,1);
// }
// .coupon-date {
// display: flex;
// align-items: center;
// margin: 29rpx 0 20rpx;
// > img {
// width: 24rpx;
// height: 24rpx;
// margin-right: 15rpx;
// }
// > view {
// font-size: 24rpx;
// color: rgba(153,153,153,1);
// }
// }
// .coupon-integral {
// font-size: 30rpx;
// font-weight: 500;
// color: rgba(255,120,15,1);
// }
// }
// .coupon-btn {
// margin-left: auto;
// width: 85rpx;
// // height: 42rpx;
// border: 2rpx solid rgba(255,120,15,1);
// border-radius: 10rpx;
// font-size: 26rpx;
// color: rgba(255,120,15,1);
// line-height: 42rpx;
// text-align: center;
// }
// }
}
}
</style>

View File

@@ -41,7 +41,7 @@ export default {
userInfo: {}
}
},
onLoad() {
onShow() {
this.getUserInfo();
},
onNavigationBarButtonTap() {

172
pageE/mine/MineProgress.vue Normal file
View File

@@ -0,0 +1,172 @@
<template>
<view class="progress">
<view class="header">
<view class="line-progress">
<view class="rank-value">lv1</view>
<view class="line-box">
<u-line-progress :percent="70" :show-percent="false" inactive-color="#FFFFFF" active-color="#F1A36B" height="30"></u-line-progress>
<text>78/99</text>
</view>
<view class="rank-value">lv2</view>
</view>
<view class="exp-value">经验值<span>78</span></view>
<view class="distance">距离下一级还需要21经验值</view>
</view>
<view class="body">
<view class="title">
<image src="/static/image/mine/34.png"></image>
<text>等级定义</text>
</view>
<view class="rank-list">
<view v-for="(rank, index) in rank" :key="index" class="list-item">
<view class="rank-value">lv{{ rank.level }}</view>
<view class="rank-interval"><span>经验值:</span>{{ rank.max == '--' ? rank.min + '及以上' : rank.min + '~' + rank.max }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
rank: [
{
level: 1,
min: 50,
max: 99,
},
{
level: 2,
min: 100,
max: 199,
},
{
level: 3,
min: 200,
max: 399,
},
{
level: 4,
min: 400,
max: 999,
},
{
level: 5,
min: 1000,
max: 1999,
},
{
level: 6,
min: 2000,
max: 4999,
},
{
level: 7,
min: 5000,
max: '--',
}
]
}
}
};
</script>
<style lang="scss" scoped>
.progress {
.header {
width: 750rpx;
height: 271rpx;
background: url('/static/image/mine/33.png') no-repeat left top / contain;
padding: 30rpx {
top: 82rpx;
};
color: #FFF;
.line-progress {
display: flex;
align-items: flex-start;
margin-bottom: 5rpx;
.rank-value {
height: 30rpx;
line-height: 30rpx;
box-sizing: content-box;
background:rgba(255,213,101,1);
border-radius: 6rpx;
padding: 0 10rpx;
}
.line-box {
width: 400rpx;
display: flex;
flex-direction: column;
align-items: flex-end;
margin: 0 16rpx;
/deep/ .u-progress {
.u-active {
box-sizing: border-box;
border: 4rpx solid #FFF;
border-radius: 50rpx;
}
}
> text {
margin-top: 12rpx;
font-size: 20rpx;
color: rgba(255,255,255,1);
}
}
}
.exp-value {
font-size: 28rpx;
margin-bottom: 32rpx;
> span {
margin-left: 20rpx;
font-size: 32rpx;
}
}
.distance {
font-size: 22rpx;
}
}
.body {
.title {
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 500;
color: rgba(51,51,51,1);
border-bottom: #ECECEC 1rpx solid;
> image {
width: 29rpx;
height: 36rpx;
margin-right: 20rpx;
}
}
.rank-list {
padding: 30rpx;
.list-item {
margin-bottom: 40rpx;
display: flex;
align-items: center;
.rank-value {
color: #FFF;
height: 30rpx;
line-height: 30rpx;
box-sizing: content-box;
background:rgba(255,213,101,1);
border-radius: 6rpx;
padding: 0 10rpx;
margin-right: 15rpx;
}
.rank-interval {
font-size: 28rpx;
color: #999999;
> span {
margin-right: 10rpx;
color: rgba(51,51,51,1);
}
}
}
}
}
}
</style>

105
pageE/tool/MineCoupon.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<view class="coupon">
<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>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
<swiper-item class="swiper-item" v-for="(_, index) in list" :key="index">
<scroll-view scroll-y class="scroll-coupon">
<view class="coupon-item" v-for="(coupon, c_index) in test" :key="c_index">
<Coupon :couponInfo="coupon" :status='index' :type="1" @use="useCoupon($event)"></Coupon>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import Coupon from "@/components/mine/coupon/index"
export default {
data() {
return {
list: [{
name: '未使用'
}, {
name: '已使用'
}, {
name: '已过期'
}],
current: 0,
swiperCurrent: 0,
swiperHeight: '',
test: [
{
index: 0
},
{
index: 1
},
{
index: 2
},
{
index: 3
},
{
index: 4
},
{
index: 5
},
{
index: 6
},
{
index: 7
}
]
}
},
components: {
Coupon
},
onLoad() {
this.setViewHeight();
},
methods: {
useCoupon(id) {
console.log(id);
},
setViewHeight() {
const res = uni.getSystemInfoSync();
this.swiperHeight = res.windowHeight - (88 / 2 + 11 / 2) + 'px';
},
tabsChange(index) {
this.swiperCurrent = index;
},
animationfinish(e) {
let current = e.detail.current;
this.swiperCurrent = current;
this.current = current;
},
},
};
</script>
<style lang="scss" scoped>
.coupon {
overflow: hidden;
.u-tabs {
border: {
top: 1rpx #ECECEC solid;
bottom: 10rpx #ECECEC solid;
};
}
.swiper-item {
box-sizing: border-box;
padding: 20rpx 30rpx;
.scroll-coupon {
height: 100%;
.coupon-item {
margin-bottom: 20rpx;
// position: relative;
// z-index: 9;
}
}
}
}
</style>