7 changed files with 414 additions and 4 deletions
-
5src/js/api.js
-
14src/pages.json
-
226src/pages/time_select/date/date.vue
-
107src/pages/time_select/month/month.vue
-
53src/pages/time_select/year/year.vue
-
11src/pages/turnover/turnover.vue
-
2src/pages/write_off/confirm/confirm.vue
@ -0,0 +1,226 @@ |
|||||
|
<template> |
||||
|
<view class="time-date"> |
||||
|
<view class="td-day"> |
||||
|
<view>日</view> <view>一</view> |
||||
|
<view>二</view> <view>三</view> |
||||
|
<view>四</view> <view>五</view> |
||||
|
<view>六</view> |
||||
|
</view> |
||||
|
<view class="td-tip">仅保留最近半年日报数据</view> |
||||
|
<view class="td-list"> |
||||
|
<view class="tl-item" v-for="(e,i) in calendarData" :key="i"> |
||||
|
<view class="ti-title"><text>{{e.showMonth}}</text></view> |
||||
|
<view class="ti-list"> |
||||
|
<view class="tl-item" v-for="(item,k) in e.dateArr" :key="k"> |
||||
|
<view :class="[isSameDay(item.defineDate || '')?'active':'']" @click="timeChange(item.defineDate)"> |
||||
|
<view>{{item.showDate}}</view> |
||||
|
<view> |
||||
|
<text v-if="item.money>0">¥{{item.money}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { API } from '../../../js/api' |
||||
|
import { servers } from '../../../js/server' |
||||
|
import util from '../../../utils/util' |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
recordInfo: {}, |
||||
|
calendarData: [], |
||||
|
curDay: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
isSameDay(){ |
||||
|
let { curDay } = this; |
||||
|
return (date='')=>util.isSameDay(new Date(curDay.replace(/\-/,'/')).getTime(),new Date(date.replace(/\-/,'/')).getTime()) |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options){ |
||||
|
this.curDay = options.date || '' |
||||
|
this.getRecord(); |
||||
|
// this.getDateArr({}); |
||||
|
}, |
||||
|
methods: { |
||||
|
timeChange(time){ |
||||
|
util.previousPageFunction({ |
||||
|
fnName: 'timeChange', |
||||
|
query: { |
||||
|
detail: { |
||||
|
value: time |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
util.routeTo(); |
||||
|
}, |
||||
|
getMonthArr(serverArr){ |
||||
|
const TOTAL_MONTH = 6; // 需要加载月份数量 |
||||
|
let dateObj = new Date(); |
||||
|
let _curYear = dateObj.getFullYear(); |
||||
|
let _curMonth = dateObj.getMonth()+1; |
||||
|
let _monthArr = new Array(TOTAL_MONTH).fill(1).map((e,i)=>_curMonth-i); |
||||
|
let _calendarData = _monthArr.map(e=>{ |
||||
|
return { |
||||
|
showMonth: `${e > 0?util.formatNumber(e):util.formatNumber( 12 + e)}月`, |
||||
|
dateArr: this.getDateArr({ |
||||
|
year: e > 0 ? _curYear : _curYear-1, |
||||
|
month: e > 0 ? e : 12 + e, |
||||
|
serverArr: serverArr || [], |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
return _calendarData || []; |
||||
|
// this.calendarData = _calendarData; |
||||
|
}, |
||||
|
getCalendar({ |
||||
|
curYear, |
||||
|
monthArr, |
||||
|
}){ |
||||
|
return monthArr.map((e,i)=>{ |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
getDateArr({ |
||||
|
year = 2020, |
||||
|
month = 9, |
||||
|
serverArr = [], |
||||
|
}){ |
||||
|
let _dateAmount = new Date(year, month, 0).getDate(); // 当月天总数 |
||||
|
|
||||
|
let _dateArr = new Array(_dateAmount).fill(1).map((e,i)=>{ |
||||
|
let _obj = { |
||||
|
defineDate: `${year}-${util.formatNumber(month)}-${util.formatNumber(i+1)}`, |
||||
|
showDate: util.formatNumber(i+1), |
||||
|
money: 0 |
||||
|
} |
||||
|
|
||||
|
try{ // 后台金额赋值显示 |
||||
|
let _sameDayObj = serverArr.filter(ele=>{ |
||||
|
return util.isSameDay(new Date(_obj.defineDate.replace(/\-/g,'/')).getTime(), new Date(ele.date.replace(/\-/g,'/')).getTime()); |
||||
|
})[0] || {} |
||||
|
if(JSON.stringify(_sameDayObj)!='{}'&&_sameDayObj.amount !=0)_obj.money = _sameDayObj.amount; |
||||
|
}catch(err){console.warn(err)}; |
||||
|
|
||||
|
return _obj |
||||
|
}) |
||||
|
let _firstDay = new Date(_dateArr[0].defineDate).getDay(); // 填补首日星期空缺 |
||||
|
new Array(_firstDay).fill(1).forEach(e=>_dateArr.unshift({})); |
||||
|
|
||||
|
return _dateArr |
||||
|
}, |
||||
|
getRecord(){ |
||||
|
util.showLoad(); |
||||
|
servers.get({ |
||||
|
url: API.turnoverDay, |
||||
|
data: {}, |
||||
|
failMsg: '加载失败！', |
||||
|
}) |
||||
|
.then(e=>{ |
||||
|
this.recordInfo = e; |
||||
|
this.calendarData = this.getMonthArr(e || []); |
||||
|
this.$nextTick(util.hideLoad); |
||||
|
}) |
||||
|
.catch(util.hideLoad); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "../../../style/public.scss"; |
||||
|
page{ |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.time-date{ |
||||
|
padding-top: 118upx; |
||||
|
} |
||||
|
.td-day{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 64upx; |
||||
|
background-color: #f2f2f7; |
||||
|
@include centerFlex(center); |
||||
|
>view{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 1; |
||||
|
text-align: center; |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
} |
||||
|
.td-tip{ |
||||
|
margin-bottom: 40upx; |
||||
|
text-align: center; |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
.td-list{ |
||||
|
>.tl-item{ |
||||
|
margin-bottom: 68upx; |
||||
|
.ti-title{ |
||||
|
margin-bottom: 36upx; |
||||
|
@include centerFlex(center); |
||||
|
>text{ |
||||
|
margin: 0 30upx; |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
&::before,&::after{ |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
width: 120upx; |
||||
|
height: 2upx; |
||||
|
background-color: #d8d8d8; |
||||
|
} |
||||
|
} |
||||
|
.ti-list{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.tl-item{ |
||||
|
padding: 0 2upx; |
||||
|
flex-shrink: 0; |
||||
|
height: 112upx; |
||||
|
width: 14.28%; |
||||
|
@include centerFlex(center); |
||||
|
>view{ |
||||
|
padding: 2upx 8upx; |
||||
|
border-radius: 10upx; |
||||
|
>view{ |
||||
|
text-align: center; |
||||
|
@include textHide(1); |
||||
|
&:first-child{ |
||||
|
line-height: 40upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
&+view{ |
||||
|
height: 28upx; |
||||
|
line-height: 28upx; |
||||
|
font-size: 20upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.active{ |
||||
|
background-color: #f2f2f7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,107 @@ |
|||||
|
<template> |
||||
|
<view class="time-month"> |
||||
|
<view class="tm-tip">仅保留最近3年日报数据</view> |
||||
|
<view class="tm-data-list"> |
||||
|
<view class="tdl-item" v-for="k in 3" :key="k"> |
||||
|
<view class="ti-title"> |
||||
|
<text>2019年</text> |
||||
|
</view> |
||||
|
<view class="ti-list"> |
||||
|
<view class="tl-item" v-for="e in 10" :key="e"> |
||||
|
<view :class="[e==2?'active':'']"> |
||||
|
<view>9月</view> |
||||
|
<view>¥0.00</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "../../../style/public.scss"; |
||||
|
page{ |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.time-month{ |
||||
|
.tm-tip{ |
||||
|
padding: 64upx 0 40upx; |
||||
|
text-align: center; |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
.tm-data-list{ |
||||
|
.tdl-item{ |
||||
|
margin-bottom: 60upx; |
||||
|
.ti-title{ |
||||
|
margin-bottom: 20upx; |
||||
|
@include centerFlex(center); |
||||
|
>text{ |
||||
|
margin: 0 20upx; |
||||
|
line-height: 44upx; |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
&::before{ |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
width: 120upx; |
||||
|
height: 2upx; |
||||
|
background-color: #d8d8d8; |
||||
|
} |
||||
|
&::after{ |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
width: 120upx; |
||||
|
height: 2upx; |
||||
|
background-color: #d8d8d8; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ti-list{ |
||||
|
padding: 0 40upx; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.tl-item{ |
||||
|
padding: 0 6upx; |
||||
|
height: 138upx; |
||||
|
width: 25%; |
||||
|
@include centerFlex(center); |
||||
|
>view{ |
||||
|
padding: 20upx; |
||||
|
padding-top: 10upx; |
||||
|
border-radius: 10upx; |
||||
|
>view{ |
||||
|
text-align: center; |
||||
|
max-width: 100%; |
||||
|
@include textHide(1); |
||||
|
&:first-child{ |
||||
|
margin-bottom: 2upx; |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
&+view{ |
||||
|
font-size: 20upx; |
||||
|
line-height: 28upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.active{ |
||||
|
background-color: #f2f2f7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue