Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Sign in
Toggle navigation
X
xzf_uniapp-wechat-web
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
李智书
xzf_uniapp-wechat-web
Commits
588a862c
Commit
588a862c
authored
Aug 29, 2023
by
袁玲利
Browse files
Options
Browse Files
Download
Plain Diff
校园报告
parents
18617d76
4cbe4991
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
1902 additions
and
11 deletions
+1902
-11
src/components/canlendar.vue
src/components/canlendar.vue
+326
-0
src/pages.json
src/pages.json
+9
-0
src/pages/ApplyConsumption/Home/Home.vue
src/pages/ApplyConsumption/Home/Home.vue
+16
-11
src/pages/ApplyConsumption/campusReport/campusReport.vue
src/pages/ApplyConsumption/campusReport/campusReport.vue
+1550
-0
src/pages/ConsumptionReport/ConsumptionReport.vue
src/pages/ConsumptionReport/ConsumptionReport.vue
+1
-0
No files found.
src/components/canlendar.vue
0 → 100644
View file @
588a862c
<
template
>
<div
class=
"calendar-wrapper"
>
<div
class=
"calendar-week"
>
<div
class=
"week-item"
v-for=
"item of weekList"
:key=
"item"
>
{{
item
}}
</div>
</div>
<div
class=
"calendar-inner"
>
<div
class=
"calendar-item"
v-for=
"(item, index) of calendarList"
:key=
"index"
:class=
"[item.disable ? 'disabled' : '',item.signdate ? 'signdate':'',item.value===currentDay?'today':'']"
@
click=
"changeToday_(item)"
>
<!--
<div
v-if=
"item.value=='2023-08-23'||item.value=='2023-08-18'||item.value=='2023-08-28'"
class=
"icons"
>
<span
v-if=
"item.value=='2023-08-23'"
>
早中
</span>
<span
v-else-if=
"item.value=='2023-08-18'"
>
早中晚
</span>
<span
v-else
>
晚
</span>
</div>
-->
<div
class=
"show"
>
{{
item
.
date
}}
</div>
</div>
</div>
</div>
</
template
>
<
script
>
export
default
{
props
:
{
currentDate
:
{
type
:
Object
,
default
:
function
()
{
return
{
year
:
''
,
month
:
''
};
}
},
shareDate_
:
{
type
:
String
,
default
:
""
},
cateringAbnormalTypeGroupList
:
{
type
:
Array
,
default
:
function
()
{
return
[];
}
},
changeToday
:
{
type
:
Function
,
default
:
function
()
{
}
}
},
data
()
{
return
{
current
:
{},
// 当前时间
weekList
:
[
'
一
'
,
'
二
'
,
'
三
'
,
'
四
'
,
'
五
'
,
'
六
'
,
'
日
'
],
calendarList
:
[],
// 用于遍历显示
shareDate
:
new
Date
(),
groupList
:
[],
}
},
computed
:
{
// 显示当前时间
currentDateStr
()
{
let
{
year
,
month
}
=
this
.
current
;
return
`
${
year
}
年
${
this
.
pad
(
month
)}
月`
;
}
},
mounted
()
{
this
.
init
();
},
computed
:
{
currentDay
()
{
let
month
=
(
this
.
current
.
month
+
1
)
<
10
?
'
0
'
+
(
this
.
current
.
month
+
1
)
:
(
this
.
current
.
month
+
1
);
return
this
.
current
.
year
+
'
-
'
+
month
+
'
-
'
+
this
.
current
.
date
;
}
},
methods
:
{
init
()
{
console
.
log
(
this
.
shareDate_
,
)
this
.
shareDate
=
new
Date
(
this
.
shareDate_
);
this
.
current
=
this
.
currentDate
;
this
.
groupList
=
this
.
cateringAbnormalTypeGroupList
// this.shareDate = new Date('2023-05-01')
console
.
log
(
this
.
shareDate
,
'
shareDate11111
'
)
// 初始化当前时间
// this.setCurrent();
this
.
calendarCreator
();
},
changeToday_
(
item
)
{
this
.
$emit
(
'
changeToday
'
,
item
)
},
// 判断当前月有多少天
getDaysByMonth
(
year
,
month
)
{
return
new
Date
(
year
,
month
+
1
,
0
).
getDate
();
},
getFirstDayByMonths
(
year
,
month
)
{
return
new
Date
(
year
,
month
,
1
).
getDay
();
},
getLastDayByMonth
(
year
,
month
)
{
return
new
Date
(
year
,
month
+
1
,
0
).
getDay
();
},
// 对小于 10 的数字,前面补 0
pad
(
str
)
{
return
str
<
10
?
`0
${
str
}
`
:
str
;
},
// 点击上一月
prevMonth
()
{
this
.
current
.
month
--
;
// 因为 month的变化 会超出 0-11 的范围, 所以需要重新计算
this
.
correctCurrent
();
// 生成新日期
this
.
calendarCreator
();
},
// 点击下一月
nextMonth
()
{
this
.
current
.
month
++
;
this
.
correctCurrent
();
this
.
calendarCreator
();
},
// 格式化时间,与主逻辑无关
stringify
(
year
,
month
,
date
)
{
let
str
=
[
year
,
this
.
pad
(
month
+
1
),
this
.
pad
(
date
)].
join
(
'
-
'
);
return
str
;
},
// 设置或初始化 current
setCurrent
(
d
=
new
Date
())
{
let
t
=
new
Date
(
this
.
current
.
year
)
console
.
log
(
d
,
'
setCurrent
'
)
let
year
=
d
.
getFullYear
();
let
month
=
d
.
getMonth
();
let
date
=
d
.
getDate
();
this
.
current
=
{
year
,
month
,
date
}
},
// 修正 current
correctCurrent
()
{
let
{
year
,
month
,
date
}
=
this
.
current
;
let
maxDate
=
this
.
getDaysByMonth
(
year
,
month
);
// 预防其他月跳转到2月,2月最多只有29天,没有30-31
date
=
Math
.
min
(
maxDate
,
date
);
let
instance
=
new
Date
(
year
,
month
,
date
);
this
.
setCurrent
(
instance
);
},
// 生成日期
calendarCreator
()
{
// 一天有多少毫秒
const
oneDayMS
=
24
*
60
*
60
*
1000
;
console
.
log
(
this
.
groupList
,
'
groupList
'
)
let
list
=
[];
let
{
year
,
month
}
=
this
.
current
;
// 当前月份第一天是星期几, 0-6
let
firstDay
=
this
.
getFirstDayByMonths
(
year
,
month
);
// 填充多少天
let
prefixDaysLen
=
firstDay
===
0
?
6
:
firstDay
-
1
;
// 毫秒数
let
begin
=
new
Date
(
year
,
month
,
1
).
getTime
()
-
oneDayMS
*
prefixDaysLen
;
// 当前月份最后一天是星期几, 0-6
let
lastDay
=
this
.
getLastDayByMonth
(
year
,
month
);
// 填充多少天, 和星期的排放顺序有关
let
suffixDaysLen
=
lastDay
===
0
?
0
:
7
-
lastDay
;
// 毫秒数
let
end
=
new
Date
(
year
,
month
+
1
,
0
).
getTime
()
+
oneDayMS
*
suffixDaysLen
;
// 默认每月第一天
let
currentToday
=
{
month
:
this
.
current
.
month
,
unrecordedZao
:
false
,
unrecordedWu
:
false
,
unrecordedWan
:
false
}
while
(
begin
<=
end
)
{
this
.
shareDate
.
setTime
(
begin
);
let
year
=
this
.
shareDate
.
getFullYear
();
let
curMonth
=
this
.
shareDate
.
getMonth
();
let
date
=
this
.
shareDate
.
getDate
();
let
obj
=
{
year
:
year
,
month
:
curMonth
,
date
:
date
,
disable
:
curMonth
!==
month
,
value
:
this
.
stringify
(
year
,
curMonth
,
date
),
signdate
:
false
}
if
(
curMonth
==
month
)
{
let
f
=
this
.
groupList
.
filter
(
y
=>
y
.
date
==
date
)
if
(
f
.
length
)
{
obj
.
signdate
=
true
if
(
f
[
0
].
date
==
1
){
currentToday
=
Object
.
assign
(
currentToday
,
f
[
0
])
}
}
}
list
.
push
(
obj
);
begin
+=
oneDayMS
;
}
console
.
log
(
currentToday
,
'
currentToday
'
)
this
.
changeToday_
(
currentToday
)
this
.
calendarList
=
list
;
console
.
log
(
list
,
'
calendarList
'
)
}
},
watch
:
{
currentDate
(
val
,
oldVal
)
{
if
(
val
!==
oldVal
)
{
this
.
current
=
val
;
this
.
calendarCreator
();
}
},
shareDate_
(
val
,
oldVal
)
{
if
(
val
!==
oldVal
)
{
this
.
shareDate
=
new
Date
(
val
)
this
.
calendarCreator
();
}
},
cateringAbnormalTypeGroupList
(
val
,
oldVal
)
{
if
(
val
!==
oldVal
)
{
this
.
groupList
=
val
this
.
calendarCreator
();
}
}
},
}
</
script
>
<
style
>
.calendar-wrapper
{
width
:
100%
;
height
:
auto
;
overflow
:
hidden
;
}
.calendar-week
{
display
:
flex
;
align-items
:
center
;
text-align
:
center
;
width
:
690
rpx
;
height
:
74
rpx
;
background
:
#F7FAF8
;
font-size
:
26
rpx
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-weight
:
600
;
color
:
rgba
(
0
,
0
,
0
,
0.85
);
line-height
:
37
rpx
}
.calendar-week
.week-item
{
flex
:
1
;
}
.calendar-week
.week-item
:first-child
,
.week-item
:last-child
{
color
:
rgba
(
0
,
0
,
0
,
0.25
);
}
.calendar-inner
{
display
:
flex
;
flex-wrap
:
wrap
;
justify-content
:
center
;
align-items
:
center
;
}
.calendar-item
{
display
:
flex
;
width
:
88
rpx
;
height
:
88
rpx
;
box-sizing
:
border-box
;
/* padding-top: 28rpx; */
border-radius
:
22
rpx
;
margin
:
5
rpx
;
justify-content
:
center
;
align-items
:
center
;
font-size
:
32
rpx
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-weight
:
600
;
color
:
rgba
(
0
,
0
,
0
,
0.75
);
line-height
:
88
rpx
;
flex-direction
:
column
;
}
.calendar-item.disabled
{
color
:
rgba
(
0
,
0
,
0
,
0.1
);
}
.signdate
{
border-radius
:
22
rpx
;
background-color
:
rgba
(
249
,
121
,
63
,
0.1
);
color
:
#F9793F
;
line-height
:
28
rpx
;
height
:
87
rpx
;
padding-top
:
0
rpx
;
}
.icons
{
font-size
:
20
rpx
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-weight
:
400
;
color
:
#F9793F
;
line-height
:
28
rpx
;
margin-bottom
:
4
rpx
;
}
.today
{
background
:
rgba
(
0
,
0
,
0
,
0.1
);
}
.calendar-item.checked
{
color
:
red
;
}
</
style
>
\ No newline at end of file
src/pages.json
View file @
588a862c
...
...
@@ -598,6 +598,15 @@
}
}
,{
"path"
:
"pages/ApplyConsumption/campusReport/campusReport"
,
"style"
:
{
"navigationBarTitleText"
:
"校园报告"
,
"enablePullDownRefresh"
:
false
}
}
],
"globalStyle"
:
{
"navigationBarTextStyle"
:
"black"
,
...
...
src/pages/ApplyConsumption/Home/Home.vue
View file @
588a862c
...
...
@@ -79,7 +79,7 @@
<view
class=
"sketch"
>
{{
item
.
sketch
||
''
}}
</view>
</view>
<view
class=
"icon"
>
<image
:src=
"i
tem.icon
"
mode=
"aspectFit"
></image>
<image
:src=
"i
ndex+1 != 5 ? item.icon : 'https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/applyCons/menu3.png'
"
mode=
"aspectFit"
></image>
</view>
</view>
</view>
...
...
@@ -122,20 +122,21 @@
return
{
ImgUrl
:
this
.
$ImgUrl
,
ImgUrl2
:
this
.
$ImgUrl
+
'
xzfalipay/
'
,
menuList
:
Array
(
4
).
fill
(
1
).
map
((
v
,
index
)
=>
{
menuList
:
Array
(
5
).
fill
(
1
).
map
((
v
,
index
)
=>
{
return
{
path
:
[
'
../ConsumptIoninfo/ConsumptIoninfo
'
,
'
../ConsumptionQuota/ConsumptionQuota
'
,
'
/pages/ConsumptionSystem/AbnormalConsumption/AbnormalConsumption
'
,
'
../CommonProblem/CommonProblem
'
'
../CommonProblem/CommonProblem
'
,
'
../campusReport/campusReport
'
][
index
],
title
:
[
'
消费记录
'
,
'
消费限额
'
,
'
消费异常
'
,
'
常见问题
'
][
index
],
sketch
:
[
'
消费记录 笔笔可查
'
,
'
设置额度 管控消费
'
,
'
消费异常 每日提醒
'
,
'
使用疑问 一一解答
'
][
index
],
title
:
[
'
消费记录
'
,
'
消费限额
'
,
'
消费异常
'
,
'
常见问题
'
,
'
校园报告
'
][
index
],
sketch
:
[
'
消费记录 笔笔可查
'
,
'
设置额度 管控消费
'
,
'
消费异常 每日提醒
'
,
'
使用疑问 一一解答
'
,
'
校园报告
'
][
index
],
icon
:
this
.
$ImgUrl
+
`applyCons/menu
${
index
+
1
}
.png`
,
// 是否需要鉴权
auth
:
[
true
,
true
,
true
,
false
][
index
],
auth
:
[
true
,
true
,
true
,
false
,
true
][
index
],
// 鉴权服务项code
serviceItemCode
:
[
config
[
'
ServiceEnum
'
][
'
Auth10
'
],
config
[
'
ServiceEnum
'
][
'
Auth8
'
],
config
[
'
ServiceEnum
'
][
'
Auth11
'
],
''
]
'
ServiceEnum
'
][
'
Auth11
'
],
''
,
config
[
'
ServiceEnum
'
][
'
Auth02
'
]]
[
index
]
}
}),
...
...
@@ -170,7 +171,8 @@
// 学校 学生id
userInfo
:
{
schoolId
:
''
,
userId
:
''
userId
:
''
,
userType
:
''
,
},
// 消费会员弹框
contractMenber
:
false
,
...
...
@@ -236,8 +238,9 @@
return
}
this
.
userInfo
=
{
schoolId
:
data
.
data
[
'
schoolId
'
],
userId
:
data
.
data
[
'
userId
'
]
schoolId
:
data
.
data
[
'
schoolId
'
]
||
''
,
userId
:
data
.
data
[
'
userId
'
],
userType
:
data
.
data
[
'
userType
'
]
||
''
}
return
data
.
data
[
'
result
'
]
},
...
...
@@ -264,6 +267,7 @@
}
data
.
data
[
'
schoolConsumption
'
]
=
schoolConsumption
this
.
HomeDataInfo
=
data
.
data
sessionStorage
.
setItem
(
'
HomeDataInfo
'
,
JSON
.
stringify
(
this
.
HomeDataInfo
))
sessionStorage
.
setItem
(
'
accountId
'
,
this
.
HomeDataInfo
[
'
accountId
'
])
// 查询消费会员权益项
this
.
QueryProductContractItem
()
...
...
@@ -310,7 +314,8 @@
}
}
const
query
=
`?name=
${
this
.
HomeDataInfo
[
'
userName
'
]}
&userId=
${
this
.
userInfo
[
'
userId
'
]}
&schoolId=
${
this
.
userInfo
[
'
schoolId
'
]}
&membershipStatus=
${
this
.
HomeDataInfo
[
'
membershipStatus
'
]}
`
`?name=
${
this
.
HomeDataInfo
[
'
userName
'
]}
&accountId=
${
this
.
HomeDataInfo
[
'
accountId
'
]}
&userId=
${
this
.
userInfo
[
'
userId
'
]}
&schoolId=
${
this
.
userInfo
[
'
schoolId
'
]}
&userType=
${
this
.
userInfo
[
'
userType
'
]}
`
console
.
log
(
item
.
path
+
query
)
uni
.
switchTab
({
url
:
item
.
path
+
query
,
fail
:
()
=>
{
...
...
src/pages/ApplyConsumption/campusReport/campusReport.vue
0 → 100644
View file @
588a862c
<
template
>
<view
class=
"campusReport"
>
<view
class=
"info"
>
<view
class=
"left"
>
<img
:src=
"ImgUrl+'user/student.png'"
alt=
""
>
<view
class=
"message"
>
<span
class=
"name"
>
{{
homeDataInfo
[
'
userName
'
]
||
'
安小智
'
}}
</span>
<span
class=
"classInfo"
>
{{
homeDataInfo
[
'
gradeName
'
]
+
'
'
+
homeDataInfo
[
'
className
'
]
}}
</span>
</view>
</view>
<view
class=
"right"
@
click=
"choosePicker"
>
<span>
{{
dataRangeArr
[
dataRangeIndex
].
month
}}
</span>
<img
:src=
"ImgUrl+'user/triangle.png'"
alt=
""
>
</view>
<!--
<picker
@
change=
"dateRangeChange"
:value=
"dataRangeIndex"
:range=
"dataRangeArr"
>
<view
class=
"uni-input"
>
{{
dataRangeArr
[
dataRangeIndex
].
month
}}
</view>
</picker>
-->
<van-popup
v-model=
"pickerShow"
round
position=
"bottom"
>
<van-picker
show-toolbar
:columns=
"columns"
@
cancel=
"pickerShow = false"
@
confirm=
"confrimDate"
/>
</van-popup>
</view>
<view
class=
"select"
>
<view
class=
"consume"
>
<span>
消费报告
</span>
<i
class=
"underline"
></i>
</view>
<view
class=
"share"
>
<img
:src=
"ImgUrl+'user/share.png'"
alt=
""
>
<span>
分享
</span>
</view>
</view>
<view
class=
"main"
>
<view
class=
"main1"
>
<view
class=
"head"
>
<img
:src=
"ImgUrl+'user/head.png'"
alt=
""
>
</view>
<!-- 消费报告 -->
<view
class=
"consume_report"
>
<img
:src=
"ImgUrl+'user/report.png'"
alt=
""
>
<view
class=
"mesg"
>
<view>
<li>
本月生活费
<text
class=
"light"
>
{{
campusConsumerReportInfo
.
consumerGrossAmountF
}}
</text>
元,超过同年级
<text
class=
"light"
>
{{
campusConsumerReportInfo
.
gtGraderate
}}
%
</text>
的学生。
{{
campusConsumerReportInfo
.
reportAbnormalMessage
}}
</li>
</view>
<view>
<li>
食堂消费
<text
class=
"light"
>
{{
campusConsumerReportInfo
.
canteenAmountF
}}
</text>
元,超市和其他消费
<text
class=
"light"
>
{{
campusConsumerReportInfo
.
otherAmountF
}}
</text>
元。
{{
campusConsumerReportInfo
.
reportPreferenceMessage
}}
</li>
</view>
<view>
<li>
本月有
<text
v-if=
"isShow"
><text
class=
"light"
>
{{
cateringAbnormalTypeGroupList
.
length
}}
</text>
天
</text><text
v-else
><text
class=
"light"
>
{{
campusConsumerReportInfo
.
notEatingCount
}}
</text>
次
</text>
在食堂的消费出现异常,
{{
campusConsumerReportInfo
.
avgMessage
}}
</li>
</view>
</view>
</view>
<!-- 遮罩层 -->
<template
v-if=
"!isVip"
>
<div
class=
"Covers"
>
<div
class=
"Covers_head"
@
click=
"openAzMenber"
>
<span>
开通消费会员,查看完整消费报告
<img
:src=
"ImgUrl+'user/covericon.png'"
alt=
""
>
</span>
</div>
<div
class=
"Covers_body"
>
<img
:src=
"ImgUrl+'user/rep.png'"
alt=
""
>
</div>
</div>
</
template
>
</view>
<
template
v-if=
"isVip"
>
<!-- 生活费额度 -->
<view
class=
"living"
>
<view
class=
"hed"
>
<img
:src=
"ImgUrl+'user/cardBg.png'"
alt=
""
>
<span>
生活费额度
</span>
</view>
<view
class=
"living_mesg"
>
<span>
孩子本月消费
<text
class=
"light"
>
{{
campusConsumerReportInfo
.
avgText
}}
</text>
同年级中间学生的消费金额,
{{
campusConsumerReportInfo
.
avgMessage
}}
</span>
</view>
<view
class=
"litable"
>
<view
class=
"living_table"
>
<view
class=
"living_data"
>
<view
class=
"living_school"
>
<text>
{{
campusConsumerReportInfo
.
schoolAvgAmountF
}}
</text>
<img
:src=
"ImgUrl+'user/drection.png'"
alt=
""
>
</view>
<span>
全校
</span>
</view>
<view
class=
"living_data"
>
<view
class=
"living_class"
>
<text>
{{
campusConsumerReportInfo
.
gradeAvgAmountF
}}
</text>
<img
:src=
"ImgUrl+'user/drection.png'"
alt=
""
>
</view>
<span>
同年级
</span>
</view>
<view
class=
"living_data"
>
<view
class=
"living_people"
>
<text>
{{
campusConsumerReportInfo
.
consumerGrossAmountF
}}
</text>
<img
:src=
"ImgUrl+'user/drection.png'"
alt=
""
>
</view>
<span>
本人
</span>
</view>
</view>
</view>
</view>
<!-- 就餐情况 -->
<view
class=
"dining"
>
<view
class=
"hed"
>
<img
:src=
"ImgUrl+'user/cardBg.png'"
alt=
""
>
<span>
未就餐情况
</span>
</view>
<view
class=
"dining_mesg"
>
<span>
本月共
<text
class=
"dining_txt"
>
5
</text>
天就餐异常
</span>
<view
class=
"mesg_tips"
>
<text
class=
"dining_txt"
><i
class=
"mesg_dot"
></i>
未就餐
</text>
</view>
</view>
<!-- 日历 -->
<view
class=
"canlendar"
>
<Canlendar
:currentDate=
"currentDate"
:shareDate_=
"shareDate"
:cateringAbnormalTypeGroupList=
"cateringAbnormalTypeGroupList"
@
changeToday=
"changeToday"
></Canlendar>
</view>
<!-- 底部 -->
<view
class=
"dining_footer"
>
<img
:src=
"ImgUrl+'user/rectangle.png'"
alt=
""
>
<view
class=
"dining_date"
>
{{
today
.
date
}}
</view>
<view
class=
"dining_info"
>
<view
class=
"item dingbre"
>
<span>
早餐
</span>
<view
class=
"dining_img"
v-if=
"!today.zao"
>
<img
:src=
"ImgUrl+'user/eat.png'"
alt=
""
>
</view>
<view
class=
"dining_icon"
v-else
>
<span>
缺
</span>
</view>
</view>
<view
class=
"item"
>
<span>
中餐
</span>
<view
class=
"dining_img"
v-if=
"!today.wu"
>
<img
:src=
"ImgUrl+'user/eat.png'"
alt=
""
>
</view>
<view
class=
"dining_icon"
v-else
>
<span>
缺
</span>
</view>
</view>
<view
class=
"item"
>
<span>
晚餐
</span>
<view
class=
"dining_img"
v-if=
"!today.wan"
>
<img
:src=
"ImgUrl+'user/eat.png'"
alt=
""
>
</view>
<view
class=
"dining_icon"
v-else
>
<span>
缺
</span>
</view>
</view>
</view>
</view>
</view>
<!-- 消费偏好 -->
<view
class=
"prefer"
>
<view
class=
"hed1"
>
<img
:src=
"ImgUrl+'user/cardBg.png'"
alt=
""
>
<span>
消费偏好
</span>
</view>
<view
class=
"prefer_mesg"
>
<span>
食堂消费占比
<text
class=
"prefer_light"
>
{{
campusConsumerReportInfo
.
preferenceText
}}
</text>
,
{{
campusConsumerReportInfo
.
preferenceMessage
}}
</span>
</view>
<view
class=
"prefer_table"
>
<div
ref=
"prefers"
style=
"width: 100%;height:325rpx;"
>
</div>
</view>
</view>
<!-- 未展示消费明细时 -->
<view
class=
"unconsume"
@
click=
"show"
v-if=
"!isShow"
>
<view
class=
"hed1"
>
<img
:src=
"ImgUrl+'user/cardBg.png'"
alt=
""
>
<span>
消费明细
</span>
</view>
<view
class=
"unconsumeTip"
>
<span>
了解更多?
<span
class=
"unconsume_special"
>
点击查看每日餐别明细
<img
:src=
"ImgUrl+'user/covericon.png'"
alt=
""
>
</span>
</span>
</view>
</view>
<!-- 消费明细 -->
<template
v-if=
"isShow"
>
<view
class=
"consume_detail"
>
<view
class=
"hed1"
>
<img
:src=
"ImgUrl+'user/cardBg.png'"
alt=
""
>
<span>
消费明细
</span>
</view>
<view
class=
"consume_detail_mesg"
>
<span>
早餐
<text
class=
"prefer_light"
>
{{
userDealReportListAndSumObj
.
zaoSumAmount
}}
</text>
元,午餐
<text
class=
"prefer_light"
>
{{
userDealReportListAndSumObj
.
wuSumAmount
}}
</text>
元,晚餐
<text
class=
"prefer_light"
>
{{
userDealReportListAndSumObj
.
wanSumAmount
}}
</text>
元
</span>
</view>
<view
class=
"detail_lists"
>
<view
class=
"listsHead"
v-if=
"userDealReportListAndSumObj.list.length"
>
<span>
日期
</span>
<span>
早餐
</span>
<span>
午餐
</span>
<span>
晚餐
</span>
<span>
其他
</span>
</view>
<view
class=
"listsBody"
>
<ul
class=
"listItem"
>
<li
class=
"detailItem"
v-for=
"item in userDealReportListAndSumObj.list"
:key=
"item.reportDate"
>
<span>
{{
item
.
reportDate
}}
</span>
<span>
{{
item
.
zaoAmount
}}
</span>
<span>
{{
item
.
wuAmount
}}
</span>
<span>
{{
item
.
wanAmount
}}
</span>
<span>
{{
item
.
otherAmount
}}
</span>
</li>
</ul>
</view>
</view>
<!--
<view
class=
"detailTips"
>
<span>
下滑查看更多
</span>
<img
:src=
"ImgUrl+'user/toRight.png'"
alt=
""
>
</view>
-->
</view>
</
template
>
<!-- 底部部分 -->
<view
class=
"footer"
>
<view
class=
"footer_left"
>
<view
class=
"footer_left_top"
>
到期后将无法查看完整报告
</view>
<view
class=
"footer_left_bottom"
>
有效期至
<span
class=
"special"
>
{{vipExpiredDt}}
</span>
,剩余
<span
class=
"special"
>
{{homeDataInfo['vipDaysRemaining']}}
</span>
天
</view>
</view>
<view
class=
"footer_right"
@
click=
"openAzMenber"
>
<span>
延长权益
</span>
</view>
</view>
</template>
</view>
<van-dialog
v-model=
"dialogShow"
:showConfirmButton=
"false"
close-on-click-overlay
style=
"width: 90%;background: linear-gradient(225deg, #0ADD80 0%, #04B871 100%);margin: 100rpx 0 0;"
>
<view
class=
"htmlCanvasTxt"
>
<view
class=
"htmlCanvasTxt1"
>
<text>
长按下方图片分享
</text>
</view>
<view
class=
"htmlCanvasTxt2"
>
<text>
您可以分享给好友,或者保存到手机
</text>
</view>
</view>
<view
class=
"htmlCanvasBox"
>
<view
class=
"htmlCanvas"
id=
"htmlCanvas"
ref=
"imgCanvas"
>
</view>
</view>
</van-dialog>
</view>
</template>
<
script
>
var
gHost
=
"
https://
"
+
window
.
location
.
host
;
var
gHost1
=
"
https://
"
+
window
.
location
.
host
;
if
(
window
.
location
.
protocol
!=
"
https:
"
)
{
gHost
=
"
https://fpdev.xiaopay.net
"
;
gHost1
=
"
https://dev-az-cloud-api.xiaopay.net/
"
}
//获取参数
function
getQueryParams
(
params
)
{
let
href
=
window
.
location
.
href
let
query
=
href
.
substring
(
href
.
indexOf
(
'
?
'
)
+
1
);
let
vars
=
query
.
split
(
"
&
"
);
for
(
var
i
=
0
;
i
<
vars
.
length
;
i
++
)
{
let
pair
=
vars
[
i
].
split
(
"
=
"
);
if
(
pair
[
0
]
==
params
)
{
return
pair
[
1
];
}
}
return
(
false
);
}
import
html2cancas
from
"
html2canvas
"
import
Canlendar
from
'
@/components/canlendar.vue
'
// 时间处理模块
import
moment
from
'
moment
'
import
{
Dialog
,
Toast
}
from
'
vant
'
;
export
default
{
name
:
'
campusReport
'
,
data
()
{
return
{
dialogShow
:
false
,
shareDate
:
""
,
currentDate
:
{
year
:
''
,
month
:
''
},
// 是否为会员
isVip
:
false
,
// 是否展示消费明细
isShow
:
false
,
ImgUrl
:
this
.
$ImgUrl
,
pickerShow
:
false
,
// 日期范围列表
dataRangeArr
:
[{
month
:
""
,
startDate
:
""
,
endDate
:
""
}],
consumerNameIndex
:
0
,
dataRangeIndex
:
0
,
consumerNameArr
:
[],
// 学生姓名列表
consumerInfo
:
[],
//家长关联的学生信息
specifiedConsumerInfo
:
{},
//选择学生的信息
columns
:
[],
// picker数据列表
campusConsumerReportInfo
:
{},
// 校园消费报告统计信息
cateringAbnormalTypeGroupList
:
[],
// 用户消费未就餐信息列表
userDealReportListAndSumObj
:
{
list
:
[]
},
//订单流水用户分餐明细及汇总统计
today
:
{
date
:
""
,
zao
:
false
,
wu
:
false
,
wan
:
false
,
},
homeDataInfo
:
{},
vipExpiredDt
:
""
,
// 有效期
}
},
components
:
{
Canlendar
},
computed
:
{
// 获取最近半年的月份
repastDateTimeFormat
()
{
return
function
(
dataRangeArr
)
{
let
arr
=
[]
for
(
let
i
=
1
;
i
<=
6
;
i
++
)
{
let
obj
=
{
month
:
""
,
startDate
:
""
,
endDate
:
""
}
obj
.
month
=
moment
().
subtract
(
i
,
'
months
'
).
format
(
'
YYYY年M月
'
);
// 6月前
obj
.
startDate
=
moment
().
subtract
(
i
,
'
months
'
).
startOf
(
'
month
'
).
format
(
'
YYYY-MM-DD
'
);
obj
.
endDate
=
moment
().
subtract
(
i
,
'
months
'
).
endOf
(
"
month
"
).
format
(
"
YYYY-MM-DD
"
);
arr
.
push
(
obj
)
}
return
arr
}
}
},
created
()
{
this
.
dataRangeArr
=
this
.
repastDateTimeFormat
()
this
.
currentDate
.
month
=
moment
(
this
.
dataRangeArr
[
this
.
dataRangeIndex
].
startDate
).
month
()
this
.
currentDate
.
year
=
moment
(
this
.
dataRangeArr
[
this
.
dataRangeIndex
].
startDate
).
year
()
this
.
currentDate
.
date
=
moment
(
this
.
dataRangeArr
[
this
.
dataRangeIndex
].
startDate
).
date
()
this
.
shareDate
=
moment
(
this
.
dataRangeArr
[
this
.
dataRangeIndex
].
startDate
).
format
(
'
YYYY-MM-DD 00:00:00
'
)
this
.
today
.
date
=
(
this
.
currentDate
.
month
+
1
)
+
'
月1日
'
console
.
log
(
this
.
currentDate
,
'
currentDate1111111111111
'
,
this
.
shareDate
,
'
this.homeDataInfo
'
,
this
.
homeDataInfo
)
},
async
mounted
()
{
console
.
log
(
this
.
dataRangeArr
,
'
dataRangeArr
'
)
this
.
homeDataInfo
=
JSON
.
parse
(
sessionStorage
.
getItem
(
'
HomeDataInfo
'
))
if
(
this
.
homeDataInfo
.
vipStatus
===
1
)
{
this
.
isVip
=
true
;
this
.
vipExpiredDt
=
moment
(
this
.
homeDataInfo
.
vipExpiredDt
).
format
(
'
YYYY年MM月DD日
'
)
console
.
log
(
this
.
vipExpiredDt
,
'
this.vipExpiredDt
'
)
}
console
.
log
(
this
.
isVip
,
'
isVip
'
)
this
.
columns
=
this
.
dataRangeArr
.
map
(
x
=>
x
.
month
)
console
.
log
(
this
.
columns
,
'
columns
'
)
await
this
.
getCampusConsumerReport
()
await
this
.
initPieCharts
()
await
this
.
getCateringAbnormalTypeGroupList
()
// await this.getUserDealReportListAndSum()
},
methods
:
{
shareHandler
:
function
()
{
let
htmlCanvasImg
=
document
.
getElementsByClassName
(
"
htmlCanvasImg
"
)[
0
];
if
(
htmlCanvasImg
)
{
htmlCanvasImg
.
parentNode
.
removeChild
(
htmlCanvasImg
);
}
this
.
toImage
();
this
.
dialogShow
=
true
;
},
toImage
:
function
()
{
this
.
$nextTick
(()
=>
{
html2cancas
(
document
.
getElementsByClassName
(
"
campusReport
"
)[
0
],
{
useCORS
:
true
,
// 解决截图不完整问题
scale
:
1
,
height
:
document
.
getElementsByClassName
(
"
campusReport
"
)[
0
].
scrollHeight
,
windowHeight
:
document
.
getElementsByClassName
(
"
campusReport
"
)[
0
].
scrollHeight
}).
then
((
canvas
)
=>
{
let
htmlCanvas
=
document
.
getElementById
(
'
htmlCanvas
'
);
let
url
=
canvas
.
toDataURL
(
'
image/png
'
);
this
.
imgUrl
=
url
;
let
img
=
document
.
createElement
(
"
img
"
);
img
.
setAttribute
(
'
src
'
,
this
.
imgUrl
);
img
.
setAttribute
(
'
class
'
,
'
htmlCanvasImg
'
);
img
.
style
.
width
=
'
83vw
'
;
img
.
style
.
borderRadius
=
'
15px
'
;
htmlCanvas
.
appendChild
(
img
);
})
})
},
// 切换日期
changeToday
(
today
){
this
.
today
.
date
=
(
today
.
month
+
1
)
+
'
月
'
+
today
.
date
+
'
日
'
if
(
Reflect
.
has
(
today
,
'
unrecordedZao
'
)){
this
.
today
.
zao
=
today
.
unrecordedZao
}
if
(
Reflect
.
has
(
today
,
'
unrecordedWu
'
)){
this
.
today
.
wu
=
today
.
unrecordedWu
}
if
(
Reflect
.
has
(
today
,
'
unrecordedWan
'
)){
this
.
today
.
wan
=
today
.
unrecordedWan
}
},
dateRangeChange
(
e
)
{
console
.
log
(
e
)
},
async
confrimDate
(
date
)
{
console
.
log
(
date
,
'
date
'
)
const
self
=
this
;
let
obj
=
this
.
dataRangeArr
.
filter
((
x
,
idx
)
=>
(
x
.
month
==
date
)
&&
(
self
.
dataRangeIndex
=
idx
))
this
.
currentDate
.
month
=
moment
(
this
.
dataRangeArr
[
this
.
dataRangeIndex
].
startDate
).
month
()
this
.
currentDate
.
year
=
moment
(
this
.
dataRangeArr
[
this
.
dataRangeIndex
].
startDate
).
year
()
this
.
currentDate
.
date
=
moment
(
this
.
dataRangeArr
[
this
.
dataRangeIndex
].
startDate
).
date
()
this
.
shareDate
=
moment
(
this
.
dataRangeArr
[
this
.
dataRangeIndex
].
startDate
).
format
(
'
YYYY-MM-DD 00:00:00
'
)
console
.
log
(
this
.
currentDate
,
'
currentDate222222222222222
'
,
this
.
shareDate
)
console
.
log
(
obj
,
'
obj
'
,
this
.
dataRangeIndex
)
await
this
.
getCampusConsumerReport
()
await
this
.
initPieCharts
()
this
.
getCateringAbnormalTypeGroupList
()
// this.getUserDealReportListAndSum()
// this.dataRangeIndex = indexOf(this.dataRangeArr, obj[0])
this
.
pickerShow
=
!
this
.
pickerShow
;
},
choosePicker
()
{
this
.
pickerShow
=
!
this
.
pickerShow
},
consumerChange
(
e
)
{
this
.
consumerNameIndex
=
e
.
target
.
value
this
.
specifiedConsumerInfo
=
this
.
consumerInfo
[
this
.
consumerNameIndex
]
// this.queryDayConsumerTrend()
// this.queryWeekConsumerAmout()
// this.queryStudentConsumerPreference()
// this.queryNotRepastDetails()
},
// 校园消费报告统计
async
getCampusConsumerReport
()
{
const
this_
=
this
;
let
params
=
{
userId
:
getQueryParams
(
'
userId
'
),
//'2882955',
schoolId
:
getQueryParams
(
'
schoolId
'
),
//'90118',
userType
:
getQueryParams
(
'
userType
'
),
startDate
:
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
]
?
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
].
startDate
:
""
,
endDate
:
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
]
?
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
].
endDate
:
""
,
timeType
:
2
,
// 时间类型(1按周,2按月)
statisticalMonth
:
moment
(
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
].
startDate
).
format
(
'
YYYYMM
'
)
};
try
{
let
data
=
await
this
.
$http
.
post
({
header
:
{
'
Authorization
'
:
uni
.
getStorageSync
(
'
Authorization
'
)
||
''
,
'
AuthOauthToken
'
:
uni
.
getStorageSync
(
'
AuthOauthToken
'
)
||
''
,
'
Content-Type
'
:
'
application/x-www-form-urlencoded
'
},
url
:
`
${
gHost1
}
/cloud-gateway/bill/campusConsumerReport/getCampusConsumerReport`
,
},
params
)
if
(
data
.
code
!=
10000
)
{
uni
.
showToast
({
icon
:
'
none
'
,
title
:
data
.
message
||
'
发生异常!
'
})
return
}
this
.
campusConsumerReportInfo
=
data
.
data
;
}
catch
(
e
)
{
console
.
warn
(
e
)
//TODO handle the exception
uni
.
showToast
({
icon
:
'
none
'
,
title
:
"
发生异常错误!
"
})
}
return
},
// 用户消费未就餐信息
async
getCateringAbnormalTypeGroupList
()
{
const
this_
=
this
;
let
params
=
{
abnormalType
:
1
,
cateringTypes
:
'
1,2,3
'
,
userId
:
getQueryParams
(
'
userId
'
),
//'4145529', //
schoolId
:
getQueryParams
(
'
schoolId
'
),
// '197', //
userType
:
getQueryParams
(
'
userType
'
),
// 1,
startDate
:
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
]
?
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
].
startDate
:
""
,
endDate
:
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
]
?
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
].
endDate
:
""
};
try
{
let
data
=
await
this
.
$http
.
post
({
header
:
{
'
Authorization
'
:
uni
.
getStorageSync
(
'
Authorization
'
)
||
''
,
'
AuthOauthToken
'
:
uni
.
getStorageSync
(
'
AuthOauthToken
'
)
||
''
,
'
Content-Type
'
:
'
application/x-www-form-urlencoded
'
},
url
:
`
${
gHost1
}
/cloud-gateway/bill/cateringAbnormal/getCateringAbnormalTypeGroupList`
,
},
params
)
if
(
data
.
code
!=
10000
)
{
uni
.
showToast
({
icon
:
'
none
'
,
title
:
data
.
message
||
'
发生异常!
'
})
return
}
let
res
=
data
.
data
;
console
.
log
(
res
,
'
res
'
)
if
(
res
.
length
){
res
=
res
.
map
(
x
=>
{
x
.
date
=
moment
(
x
.
statisticalDate
).
date
();
return
x
})
}
this
.
cateringAbnormalTypeGroupList
=
res
;
console
.
log
(
res
,
'
用户消费未就餐信息
'
)
}
catch
(
e
)
{
console
.
warn
(
e
)
//TODO handle the exception
uni
.
showToast
({
icon
:
'
none
'
,
title
:
"
发生异常错误!
"
})
}
return
},
// 跳转云平台权益中心
async
openAzMenber
()
{
jWeixin
.
miniProgram
.
navigateTo
({
url
:
'
/pages/nationalCenterForLesbianRights/index
'
})
},
// 查询订单流水用户分餐明细及汇总统计
async
getUserDealReportListAndSum
()
{
const
this_
=
this
;
let
params
=
{
accountId
:
61
,
userId
:
getQueryParams
(
'
userId
'
),
//'2882955', //getQueryParams('userId'),
schoolId
:
getQueryParams
(
'
schoolId
'
),
// '90118', //getQueryParams('schoolId'),
userType
:
getQueryParams
(
'
userType
'
),
//1,
startDate
:
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
]
?
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
].
startDate
:
""
,
endDate
:
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
]
?
this_
.
dataRangeArr
[
this_
.
dataRangeIndex
].
endDate
:
""
};
try
{
let
data
=
await
this
.
$http
.
post
({
header
:
{
'
Authorization
'
:
uni
.
getStorageSync
(
'
Authorization
'
)
||
''
,
'
AuthOauthToken
'
:
uni
.
getStorageSync
(
'
AuthOauthToken
'
)
||
''
,
'
Content-Type
'
:
'
application/x-www-form-urlencoded
'
},
url
:
`
${
gHost1
}
/cloud-gateway/statement/getUserDealReportListAndSum`
,
},
params
)
if
(
data
.
code
!=
10000
)
{
uni
.
showToast
({
icon
:
'
none
'
,
title
:
data
.
message
||
'
发生异常!
'
})
return
}
this
.
userDealReportListAndSumObj
=
data
.
data
;
console
.
log
(
this
.
userDealReportListAndSumObj
,
'
查询订单流水用户分餐明细及汇总统计
'
)
}
catch
(
e
)
{
console
.
warn
(
e
)
//TODO handle the exception
uni
.
showToast
({
icon
:
'
none
'
,
title
:
"
发生异常错误!
"
})
}
return
},
// 获取日期范围列表
getDataRangeArr
()
{
console
.
log
(
this
.
dataRangeArr
,
'
dataRangeArr
'
)
},
init
()
{
this
.
initPieCharts
();
},
show
()
{
this
.
getUserDealReportListAndSum
()
this
.
isShow
=
!
this
.
isShow
;
},
formatDate
(
date
)
{
return
`
${
date
.
getMonth
()
+
1
}
/
${
date
.
getDate
()}
`
;
},
onConfirm
(
date
)
{
this
.
show
=
false
;
this
.
date
=
this
.
formatDate
(
date
);
},
chooseDate
()
{
this
.
calendarShow
=
true
},
//日历选择
confrimCalendar
(
date
)
{
},
// 消费偏好
initPieCharts
()
{
let
dom
=
this
.
$refs
.
prefers
;
let
myChart
=
this
.
$echarts
.
init
(
dom
);
var
colors
=
""
;
var
option
=
{
title
:
{
left
:
'
center
'
,
top
:
'
center
'
},
series
:
[{
type
:
'
pie
'
,
data
:
[{
value
:
this
.
campusConsumerReportInfo
.
supermarketAmountF
,
name
:
'
超市
'
},
{
value
:
this
.
campusConsumerReportInfo
.
canteenAmountF
,
name
:
'
食堂
'
},
{
value
:
this
.
campusConsumerReportInfo
.
otherAmountF
,
name
:
'
其他
'
}
],
radius
:
[
'
40%
'
,
'
67%
'
],
label
:
{
show
:
true
,
formatter
:
function
(
params
)
{
const
dot1
=
`{dot1|●}{v|
${
params
.
data
.
name
}
} \n{m|
${
params
.
data
.
value
}
}元`
;
const
dot2
=
`{dot2|●}{v|
${
params
.
data
.
name
}
} \n{m|
${
params
.
data
.
value
}
}元`
;
const
dot3
=
`{dot3|●}{v|
${
params
.
data
.
name
}
} \n{m|
${
params
.
data
.
value
}
}元`
;
if
(
params
.
data
.
name
==
'
超市
'
)
{
return
dot1
;
}
if
(
params
.
data
.
name
==
'
食堂
'
)
{
return
dot2
;
}
if
(
params
.
data
.
name
==
'
其他
'
)
{
return
dot3
;
}
},
rich
:
{
dot1
:
{
color
:
'
#F6C723
'
,
align
:
'
center
'
},
dot2
:
{
color
:
'
#00C47C
'
,
align
:
'
center
'
},
dot3
:
{
color
:
'
#FF8646
'
,
align
:
'
center
'
},
v
:
{
align
:
'
center
'
,
padding
:
[
0
,
5
,
0
,
5
],
},
m
:
{
align
:
'
center
'
,
padding
:
[
0
,
0
,
0
,
12
],
}
},
textStyle
:
{
color
:
"
rgba(0,0,0,0.85)
"
,
fontSize
:
12
,
fontFamily
:
'
PingFangSC-Regular, PingFang SC
'
,
fontWeight
:
400
,
lineHeight
:
16
,
},
},
itemStyle
:
{
borderRadius
:
1
,
borderColor
:
'
#fff
'
,
borderWidth
:
2
},
color
:
[
"
#F6C723
"
,
"
#00C47C
"
,
"
#FF8646
"
],
labelLine
:
{
show
:
true
,
length
:
33
,
length2
:
20
}
},
{
type
:
'
pie
'
,
data
:
[{
value
:
620
,
},
{
value
:
240
,
},
{
value
:
100
,
}
],
radius
:
[
'
69%
'
,
'
82%
'
],
itemStyle
:
{
borderRadius
:
1
,
borderColor
:
'
#fff
'
,
borderWidth
:
2
},
color
:
[
"
rgba(246,199,35,0.20)
"
,
"
rgba(0,196,124,0.20)
"
,
"
rgba(255,134,70,0.20)
"
],
labelLine
:
{
show
:
false
,
}
}
]
};
// 绘制图表
myChart
.
setOption
(
option
);
},
},
}
</
script
>
<
style
lang=
"scss"
scoped
>
.info
{
height
:
88rpx
;
margin-top
:
30rpx
;
font-family
:
PingFangSC-Medium
;
}
.left
{
float
:
left
;
margin-left
:
40rpx
;
}
.left
img
{
height
:
88rpx
;
width
:
88rpx
;
}
.left
.message
{
display
:
inline-block
;
margin-left
:
9rpx
;
}
.message
.name
{
display
:
block
;
font-size
:
34rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
#1B1B1B
;
line-height
:
48rpx
;
}
.message
.classInfo
{
display
:
block
;
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.25
);
line-height
:
40rpx
;
}
.right
{
float
:
right
;
display
:
flex
;
align-items
:
center
;
height
:
100%
;
}
.right
span
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
#1B1B1B
;
line-height
:
40rpx
;
}
.right
img
{
margin-left
:
16rpx
;
margin-right
:
30rpx
;
width
:
21rpx
;
height
:
10rpx
;
}
.select
{
display
:
flex
;
position
:
relative
;
height
:
84rpx
;
margin-left
:
40rpx
;
margin-top
:
38rpx
;
font-size
:
28rpx
;
font-weight
:
700
;
text-align
:
center
;
line-height
:
84rpx
;
}
.select
.consume
{
position
:
relative
;
width
:
172rpx
;
height
:
84rpx
;
background
:
#FEF1D7
;
border-radius
:
20rpx
20rpx
0rpx
0rpx
}
.consume
span
{
font-size
:
30rpx
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-weight
:
600
;
color
:
#7E4600
;
line-height
:
28rpx
;
}
.underline
{
position
:
absolute
;
height
:
7rpx
;
width
:
49rpx
;
background
:
#FBB535
;
border-radius
:
4rpx
;
bottom
:
0
;
left
:
50%
;
transform
:
translateX
(
-50%
);
}
.share
{
position
:
absolute
;
right
:
0
;
bottom
:
12rpx
;
width
:
155rpx
;
height
:
64rpx
;
line-height
:
64rpx
;
background
:
#FFE4B7
;
border-radius
:
32rpx
0rpx
0rpx
32rpx
;
}
.share
img
{
width
:
26rpx
;
height
:
24rpx
;
vertical-align
:
middle
;
}
.share
span
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
#512C19
;
line-height
:
40rpx
;
margin-left
:
11rpx
;
}
.head
img
{
width
:
100%
;
height
:
452rpx
;
}
.main
{
width
:
100%
;
/* height: 4180rpx; */
height
:
auto
;
background
:
#FFF5E2
;
}
.main1
{
position
:
relative
;
width
:
100%
;
height
:
967rpx
;
}
/* 消费报告 */
.consume_report
{
position
:
absolute
;
top
:
429rpx
;
width
:
690rpx
;
height
:
538rpx
;
background
:
#FFFFFF
;
border-radius
:
16rpx
;
margin
:
0
30rpx
0
30rpx
;
}
.consume_report
img
{
position
:
absolute
;
bottom
:
282rpx
;
left
:
131rpx
;
width
:
428rpx
;
height
:
427rpx
;
}
.main1
.mesg
{
margin
:
163rpx
18rpx
41rpx
69rpx
;
}
.mesg
view
li
{
text-indent
:
-32rpx
;
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
line-height
:
40rpx
;
margin-bottom
:
32rpx
;
}
.
mesg
view
li
:
:
marker
{
font-size
:
10rpx
;
color
:
#FBB535
;
}
.mesg
view
li
.light
{
color
:
#FBB535
;
padding
:
0
10rpx
;
}
/* 就餐情况 */
.dining
{
position
:
relative
;
width
:
690rpx
;
height
:
auto
;
background
:
#FFFFFF
;
border-radius
:
16rpx
;
margin
:
25rpx
30rpx
0
30rpx
;
overflow
:
hidden
;
}
.dining_mesg
{
box-sizing
:
border-box
;
width
:
100%
;
height
:
40rpx
;
line-height
:
40rpx
;
margin-top
:
40rpx
;
padding
:
0
40rpx
0
30rpx
;
}
.dining_mesg
span
{
float
:
left
;
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
)
}
.dining_mesg
.mesg_tips
{
float
:
right
;
display
:
inline-block
;
}
.mesg_dot
{
display
:
inline-block
;
width
:
12rpx
;
height
:
12rpx
;
background
:
#F9793F
;
border-radius
:
12rpx
;
margin-bottom
:
6rpx
;
margin-right
:
24rpx
;
}
.dining_mesg
.dining_txt
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
#F9793F
;
}
.canlendar
{
margin-top
:
31rpx
;
margin-bottom
:
31rpx
;
width
:
100%
;
height
:
auto
;
}
.dining_footer
{
position
:
relative
;
width
:
100%
;
height
:
128rpx
;
}
.dining_footer
img
{
width
:
100%
;
height
:
100%
;
}
.dining_footer
.dining_date
{
position
:
absolute
;
width
:
130rpx
;
height
:
43rpx
;
border-radius
:
4rpx
;
border
:
1rpx
solid
rgba
(
0
,
0
,
0
,
0
.25
);
top
:
55rpx
;
left
:
30rpx
;
font-size
:
28rpx
;
font-family
:
FontName
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
line-height
:
43rpx
;
text-align
:
center
;
white-space
:
nowrap
;
}
.dining_info
{
position
:
absolute
;
top
:
54rpx
;
right
:
31rpx
;
width
:
434rpx
;
height
:
42rpx
;
display
:
flex
;
justify-content
:
space-between
;
line-height
:
42rpx
;
}
.dingbre
{
display
:
flex
;
flex-direction
:
row
;
}
.dining_info
.dining_img
{
display
:
inline-block
;
}
.dining_info
.dining_img
img
{
width
:
49rpx
;
height
:
39rpx
;
margin-left
:
7rpx
;
margin-bottom
:
0
;
}
.dining_info
.item
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
line-height
:
42rpx
;
}
.dining_icon
{
display
:
inline-block
;
width
:
40rpx
;
height
:
40rpx
;
background
:
#F9793F
;
border-radius
:
12rpx
;
background
:
rgba
(
249
,
121
,
63
,
0
.17
);
margin-left
:
8rpx
;
}
.dining_icon
span
{
display
:
flex
;
font-size
:
24rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
#F9793F
;
line-height
:
42rpx
;
justify-content
:
center
;
}
/* 消费偏好 */
.prefer
{
position
:
relative
;
width
:
690rpx
;
height
:
526rpx
;
background
:
#FFFFFF
;
border-radius
:
16rpx
;
margin
:
24rpx
30rpx
0
30rpx
;
}
.hed1
{
width
:
100%
;
height
:
62rpx
;
box-sizing
:
border-box
;
padding
:
0
186rpx
;
}
.hed1
img
{
width
:
318rpx
;
height
:
62rpx
;
}
.hed1
span
{
position
:
absolute
;
top
:
0
;
left
:
0
;
display
:
inline-block
;
width
:
100%
;
height
:
62rpx
;
text-align
:
center
;
font-size
:
32rpx
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-weight
:
600
;
color
:
#915100
;
line-height
:
62rpx
;
}
.prefer_mesg
{
position
:
absolute
;
box-sizing
:
border-box
;
padding
:
0
30rpx
;
top
:
101rpx
;
width
:
100%
;
height
:
auto
;
}
.prefer_mesg
span
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
line-height
:
40rpx
;
}
.prefer_light
{
color
:
#EF7B00
;
}
.prefer_table
{
position
:
absolute
;
width
:
100%
;
height
:
284rpx
;
margin-top
:
136rpx
;
}
/* 生活费额度 */
.living
{
position
:
relative
;
margin
:
24rpx
30rpx
0rpx
30rpx
;
width
:
690rpx
;
height
:
536rpx
;
background
:
#FFFFFF
;
border-radius
:
16rpx
;
}
.hed
{
width
:
100%
;
height
:
62rpx
;
box-sizing
:
border-box
;
padding
:
0
176rpx
;
}
.hed
img
{
width
:
338rpx
;
height
:
62rpx
;
}
.hed
span
{
position
:
absolute
;
top
:
0
;
left
:
0
;
display
:
inline-block
;
width
:
100%
;
height
:
62rpx
;
text-align
:
center
;
font-size
:
32rpx
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-weight
:
600
;
color
:
#915100
;
line-height
:
62rpx
;
}
.living_mesg
{
width
:
100%
;
margin-top
:
36rpx
;
}
.living_mesg
span
{
display
:
inline-block
;
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
line-height
:
40rpx
;
padding-left
:
30rpx
;
padding-right
:
41rpx
;
}
.living_mesg
text
{
color
:
rgba
(
239
,
123
,
0
,
0
.85
);
}
.litable
{
display
:
inline-block
;
width
:
430rpx
;
height
:
294rpx
;
padding
:
0
130rpx
64rpx
130rpx
;
}
.living_table
{
display
:
flex
;
justify-content
:
space-between
;
height
:
294rpx
;
}
.living_data
{
align-self
:
flex-end
;
text-align
:
center
;
}
.living_school
{
width
:
110rpx
;
height
:
170rpx
;
background
:
linear-gradient
(
360deg
,
#1DCD74
0%
,
#0DB38E
100%
);
border-radius
:
16rpx
16rpx
0rpx
0rpx
;
}
.living_class
{
width
:
110rpx
;
height
:
163rpx
;
background
:
linear-gradient
(
360deg
,
#F6C723
0%
,
#F3A211
100%
);
border-radius
:
16rpx
16rpx
0rpx
0rpx
;
}
.living_people
{
width
:
110rpx
;
height
:
192rpx
;
background
:
linear-gradient
(
360deg
,
#FF8646
0%
,
#F0662B
100%
);
border-radius
:
16rpx
16rpx
0rpx
0rpx
;
}
.living_table
span
{
display
:
inline-block
;
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.5
);
line-height
:
40rpx
;
margin-top
:
16rpx
;
}
.living_table
text
{
display
:
inline-block
;
font-size
:
28rpx
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-weight
:
600
;
color
:
#FFFFFF
;
line-height
:
40rpx
;
margin-top
:
12rpx
;
}
.living_table
img
{
width
:
52rpx
;
height
:
105rpx
;
margin-left
:
29rpx
;
margin-right
:
29rpx
;
}
/* 消费明细 */
.consume_detail
{
position
:
relative
;
margin
:
25rpx
30rpx
0rpx
30rpx
;
width
:
690rpx
;
min-height
:
600rpx
;
background
:
#FFFFFF
;
border-radius
:
16rpx
;
}
.consume_detail_mesg
{
position
:
absolute
;
box-sizing
:
border-box
;
padding
:
0
30rpx
;
top
:
102rpx
;
width
:
100%
;
height
:
auto
;
}
.consume_detail_mesg
span
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
line-height
:
40rpx
;
}
.detail_lists
{
position
:
absolute
;
margin-top
:
111rpx
;
width
:
100%
;
height
:
auto
;
}
.listsHead
{
width
:
690rpx
;
height
:
74rpx
;
background
:
#F0F0F0
;
line-height
:
74rpx
;
padding
:
0
8rpx
;
box-sizing
:
border-box
;
}
.listsHead
>
span
,
.listItem
>
li
>
span
{
display
:
inline-block
;
text-align
:
center
;
width
:
20%
;
}
.listsBody
{
padding
:
0
8rpx
;
}
.listsHead
span
{
font-size
:
26rpx
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-weight
:
600
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
}
ul
{
padding
:
0
;
}
.listItem
li
{
list-style
:
none
;
width
:
100%
;
height
:
74rpx
;
border-radius
:
47rpx
;
line-height
:
74rpx
;
margin-top
:
16rpx
;
font-size
:
26rpx
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-weight
:
400
;
color
:
rgba
(
0
,
0
,
0
,
0
.75
);
}
.listItem
li
span
:first-child
{
font-size
:
26rpx
;
font-family
:
DINPro-Medium
,
DINPro
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
}
.listItem
li
:nth-child
(
2n
)
{
background
:
#F7F7F8
;
border-radius
:
47rpx
;
}
.detailTips
{
position
:
absolute
;
left
:
0
;
bottom
:
30rpx
;
width
:
100%
;
height
:
57rpx
;
box-sizing
:
border-box
;
padding
:
16rpx
230rpx
0
237rpx
;
}
.detailTips
span
{
display
:
inline-block
;
font-size
:
28rpx
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-weight
:
400
;
color
:
rgba
(
0
,
0
,
0
,
0
.31
);
line-height
:
0
;
}
.detailTips
img
{
display
:
inline-block
;
width
:
38rpx
;
height
:
29rpx
;
margin-left
:
17rpx
;
}
/* 未展示消费明细时 */
.unconsume
{
position
:
relative
;
margin
:
25rpx
30rpx
0rpx
30rpx
;
width
:
690rpx
;
height
:
171rpx
;
background
:
#FFFFFF
;
border-radius
:
16rpx
;
}
.showCon
{
display
:
none
;
}
.unconsumeTip
{
position
:
absolute
;
box-sizing
:
border-box
;
width
:
100%
;
height
:
40rpx
;
margin-top
:
40rpx
;
padding
:
0
121rpx
0
125rpx
;
font-size
:
28rpx
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-weight
:
400
;
color
:
rgba
(
0
,
0
,
0
,
0
.87
);
line-height
:
40rpx
;
}
.unconsume_special
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-weight
:
400
;
color
:
#915100
;
line-height
:
40rpx
;
}
.unconsume_special
img
{
width
:
17rpx
;
height
:
15rpx
;
margin-left
:
7rpx
;
}
/* 遮罩层*/
.Covers
{
position
:
absolute
;
top
:
450rpx
;
width
:
750rpx
;
height
:
729rpx
;
background
:
linear-gradient
(
180deg
,
rgba
(
255
,
255
,
255
,
0
)
0%
,
rgba
(
255
,
255
,
255
,
0
.97
)
38%
,
#FFFFFF
100%
);
}
.Covers_head
{
width
:
100%
;
height
:
40rpx
;
margin-top
:
289rpx
;
text-align
:
center
;
}
.Covers_head
span
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-weight
:
400
;
color
:
#965300
;
line-height
:
40rpx
;
}
.Covers_head
span
img
{
width
:
17rpx
;
height
:
15rpx
;
margin-left
:
10rpx
;
}
.Covers_body
{
margin
:
25rpx
29rpx
39rpx
24rpx
;
}
.Covers_body
img
{
width
:
702rpx
;
height
:
347rpx
;
}
/* 底部部分 */
.footer
{
display
:
flex
;
width
:
708rpx
;
height
:
169rpx
;
background-color
:
pink
;
margin
:
24rpx
21rpx
24rpx
21rpx
;
background
:
url("https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/user/priority.png")
center
top
no-repeat
;
background-size
:
100%
100%
;
justify-content
:
space-around
;
align-items
:
center
;
}
.footer_left
{
width
:
420rpx
;
height
:
auto
;
}
.footer_right
{
width
:
180rpx
;
height
:
61rpx
;
background
:
linear-gradient
(
360deg
,
#F0662B
0%
,
#FF8646
100%
);
border-radius
:
49rpx
;
}
.footer_right
span
{
font-size
:
28rpx
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-weight
:
600
;
color
:
#FFFFFF
;
line-height
:
61rpx
;
padding
:
0
34rpx
;
}
.footer_left_top
{
font-size
:
34rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0
.85
);
line-height
:
48rpx
;
}
.footer_left_bottom
{
font-size
:
24rpx
;
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
font-weight
:
500
;
color
:
rgba
(
123
,
80
,
53
,
0
.85
);
line-height
:
33rpx
;
margin-top
:
8rpx
;
}
.special
{
color
:
#F9793F
;
}
</
style
>
\ No newline at end of file
src/pages/ConsumptionReport/ConsumptionReport.vue
View file @
588a862c
...
...
@@ -486,6 +486,7 @@
})
}
this
.
dataRangeArr
=
tmpArr
},
methods
:
{
consumerChange
(
e
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment