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