Skip to content

F
FuLiMini
Commit af5481aa by shibukun
Options

积分详情

parent 032a549b
Showing with 375 additions and 27 deletions
pages.json
...@@ -28,34 +28,42 @@ ...@@ -28,34 +28,42 @@
"subPackages": [{ "subPackages": [{
"root": "pagesA", "root": "pagesA",
"pages": [{ "pages": [{
"path": "login/login", "path": "login/login",
"style": { "style": {
"navigationBarTitleText": "登录", "navigationBarTitleText": "登录",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, { }, {
"path": "integral/integral", "path": "integral/integral",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, { }, {
"path": "selectAccount/selectAccount", "path": "selectAccount/selectAccount",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
{ {
"path": "GoodSkuList/GoodSkuList", "path": "GoodSkuList/GoodSkuList",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}] }, {
"path": "integralDetail/integralDetail",
"style": {
"navigationBarTitleText": "积分明细",
"enablePullDownRefresh": false
}
}
]
}], }],
"preloadRule": { "preloadRule": {
"pagesA/login/login": { "pagesA/login/login": {
......
pages/home/home.vue
...@@ -87,13 +87,16 @@ export default { ...@@ -87,13 +87,16 @@ export default {
goToGoodDetail(brandNo, brandName) { goToGoodDetail(brandNo, brandName) {
if (!this.isLogin) { if (!this.isLogin) {
this.goLogin(); this.goLogin();
return
} }
this.$router.push('GoodSkuList', { brandNo: brandNo, brandName: brandName }); this.$router.push('GoodSkuList', { brandNo: brandNo, brandName: brandName });
}, },
goIntegralDetail() { goIntegralDetail() {
if (!this.isLogin) { if (!this.isLogin) {
this.goLogin(); this.goLogin();
return
} }
this.$router.push('IntegralDetail')
} }
} }
}; };
......
pagesA/integralDetail/integralDetail.vue 0 → 100644
<template>
<view class="layout">
<view class="header">
<view @click="showTimeSelect" class="header-left">
<text class="header-time">{{ applyDate }}</text>
<image class="time-bottom-row" src="../../static/icon-bottom-row.png"></image>
</view>
<view class="header-right">
<text :class="currentTab == 0 ? 'tab-select' : 'tab-unselect'" @click="selectTab(0)">综合</text>
<text :class="currentTab == 200 ? 'tab-select' : 'tab-unselect'" @click="selectTab(200)">支出￥{{ allConsume }}</text>
<text :class="currentTab == 100 ? 'tab-select' : 'tab-unselect'" @click="selectTab(100)">收入￥{{ allIncome }}</text>
</view>
</view>
<view v-if="integralList.length > 0" class="list">
<view class="item" v-for="(item, index) in integralList" :key="index">
<image class="icon" :src="item.img"></image>
<view class="item-right">
<view class="item-right-top">
<view class="item-title">
<text class="item-type">{{ item.tag }}</text>
<text class="item-name">{{ item.title }}</text>
<text class="item-count">{{ item.number <= 0 ? '' : '*' + item.number }}</text>
</view>
<text :class="item.integral > 0 ? 'item-integral' : 'item-integral-income'">{{ item.integral }}</text>
</view>
<view class="item-right-bottom">
<text class="item-time">{{ item.transactionTime }}</text>
<text class="item-integral-rest">积分余额： {{ item.surplusIntegral }}</text>
</view>
<view class="line"></view>
</view>
</view>
<uni-load-more v-if="integralList.length > 0" :status="loadingType"></uni-load-more>
</view>
<view v-else-if="!isLoading && integralList.length <= 0" class="empty">
<image class="empty-icon" src="../../static/integral-empty-icon.png"></image>
<text class="empty-desc">本月暂时没有支出积分哦</text>
</view>
<uni-popup class="pop" ref="timeShow" type="bottom" background-color="#fff" safeArea="true">
<text class="selectTime" @click="selectTime()">确定</text>
<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
<picker-view-column>
<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
</picker-view-column>
</picker-view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
const date = new Date();
const years = [];
const year = date.getFullYear();
const months = [];
const month = date.getMonth() + 1;
const days = [];
const day = date.getDate();
for (let i = year - 4; i <= date.getFullYear(); i++) {
years.push(i);
}
for (let i = 1; i <= date.getMonth() + 1; i++) {
months.push(i);
}
return {
integralList: [],
// 明细类型(0:综合;100:收入;200:支出)
currentTab: 0,
applyDate: '',
page: 1,
pageSize: 20,
loadingType: 'more',
isLoading: true,
allConsume: '',
allIncome: '',
title: 'picker-view',
years,
year,
months,
month,
days,
date: new Date(),
value: [9999, month - 1],
indicatorStyle: `height: 50rpx;`,
tmpYear: '',
tmpMonth: ''
};
},
created() {
this.getData(false);
},
methods: {
getData(isRefresh) {
this.isLoading = true;
if (isRefresh) {
this.page = 1;
this.loadingType = 'more';
this.integralList = [];
}
this.$net
.post('/integral/index', { page: this.page, pageSize: this.pageSize, applyDate: this.applyDate, type: this.currentTab })
.then(res => {
if (res.data.list.length > 0) {
this.integralList = this.integralList.concat(res.data.list);
this.applyDate = res.data.applyDate;
this.allConsume = res.data.allConsume;
this.allIncome = res.data.allIncome;
this.page += 1;
}
this.loadingType = res.data.list.length < this.pageSize ? 'noMore' : 'more';
this.isLoading = false;
})
.catch(err => {
this.isLoading = false;
});
},
selectTab(type) {
this.currentTab = type;
this.getData(true);
},
showTimeSelect() {
this.$refs.timeShow.open()
},
selectTime() {
this.year = this.tmpYear
this.month = this.tmpMonth
this.applyDate = this.year + "-" + this.month
this.$refs.timeShow.close()
this.getData(true)
},
bindChange(e) {
console.log(e);
const val = e.detail.value
this.tmpYear = this.years[val[0]]
if(this.tmpYear == this.date.getFullYear()) {
this.months = []
for (let i = 1; i <= this.date.getMonth() + 1; i++) {
this.months.push(i);
}
} else {
this.months = []
for (let i = 1; i <= 12; i++) {
this.months.push(i);
}
}
if(this.months[val[1]] > this.date.getMonth() + 1) {
this.tmpMonth = this.date.getMonth() + 1
this.month = this.date.getMonth() + 1
} else {
this.tmpMonth = this.months[val[1]]
}
}
}
};
</script>
<style lang="scss" scoped>
.layout {
width: 100%;
height: 100%;
position: relative;
background: #f5f5f5;
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: sticky;
height: 100rpx;
padding-left: 30rpx;
padding-right: 30rpx;
.header-left {
display: flex;
flex-direction: row;
align-items: center;
.header-time {
font-size: 30rpx;
font-weight: bolder;
color: #333333;
}
.time-bottom-row {
width: 20rpx;
height: 14rpx;
margin-left: 15rpx;
}
}
.header-right {
display: flex;
flex-direction: row;
.tab-select {
font-size: 24rpx;
font-weight: bolder;
color: #333333;
margin-left: 24rpx;
}
.tab-unselect {
font-size: 24rpx;
color: #999999;
margin-left: 24rpx;
}
}
}
.list {
display: flex;
flex-direction: column;
height: 100%;
background: #ffffff;
.item {
display: flex;
flex-direction: row;
margin-top: 34rpx;
.icon {
width: 90rpx;
height: 90rpx;
background: #ffffff;
border: 2px solid #efefef;
border-radius: 50%;
margin-left: 30rpx;
}
.item-right {
display: flex;
flex-direction: column;
margin-left: 30rpx;
flex: 1;
.item-right-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-right: 30rpx;
.item-title {
display: flex;
flex-direction: row;
.item-type {
font-size: 30rpx;
color: #333333;
}
.item-name {
max-width: 250rpx;
font-size: 30rpx;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-count {
font-size: 30rpx;
color: #333333;
}
}
.item-integral {
font-size: 30rpx;
font-weight: bolder;
color: #333333;
}
.item-integral-income {
font-size: 30rpx;
font-weight: bolder;
color: #ff0520;
}
}
.item-right-bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 30rpx;
align-items: center;
margin-top: 24rpx;
.item-time {
font-size: 26rpx;
color: #999999;
}
.item-integral-rest {
font-size: 26rpx;
color: #999999;
}
}
.line {
height: 2rpx;
background: #f5f5f5;
width: 100%;
margin-top: 34rpx;
}
}
}
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
background: #ffffff;
.empty-icon {
width: 364rpx;
height: 300rpx;
margin-top: 180rpx;
}
.empty-desc {
font-size: 28rpx;
color: #999999;
line-height: 28rpx;
margin-top: 49rpx;
}
}
.pop {
.selectTime {
text-align: right;
color: #FF0520;
font-size: 24rpx;
position: absolute;
right: 0;
top: 0;
height: 48rpx;
line-height: 48rpx;
margin-right: 30rpx;
z-index: 999;
}
.picker-view {
// width: 750rpx;
height: 500rpx;
margin-top: 20rpx;
}
.item {
height: 50rpx;
align-items: center;
justify-content: center;
text-align: center;
line-height: 50rpx;
}
}
}
</style>
router/router.js
...@@ -6,7 +6,8 @@ const routers = { ...@@ -6,7 +6,8 @@ const routers = {
'Order': '/pages/order/order', 'Order': '/pages/order/order',
'Mine': '/pages/mine/mine', 'Mine': '/pages/mine/mine',
'SelectAccount': '/pagesA/selectAccount/selectAccount', 'SelectAccount': '/pagesA/selectAccount/selectAccount',
'GoodSkuList': '/pagesA/GoodSkuList/GoodSkuList' 'GoodSkuList': '/pagesA/GoodSkuList/GoodSkuList',
'IntegralDetail': '/pagesA/integralDetail/integralDetail'
} }
export function push(routerName, params, events) { export function push(routerName, params, events) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment