Skip to content

X
xzf_uniapp-wechat-web
Commit 6b116a0e authored by aifen@azjy1.onexmail.com's avatar aifen@azjy1.onexmail.com
Browse files
Options

校园报告—消费报告1

parent 216f052d
Show whitespace changes
Inline Side-by-side
Showing with 844 additions and 0 deletions
src/pages.json
View file @ 6b116a0e
...@@ -414,6 +414,14 @@ ...@@ -414,6 +414,14 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},{
"path": "pages/SchoolReport/SchoolReport",
"style": {
"navigationBarTitleText": "校园报告",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
} }
], ],
......
src/pages/SchoolReport/SchoolReport.vue 0 → 100644
View file @ 6b116a0e
<template>
<view class="tainer">
<view class="school-report-header">
<view class="school-report-header-item">
<view class="user-avatar">
</view>
<view class="user-info">
<view class="user-name">
<text>宁哲言</text>
</view>
<view class="class-name">
<text>三年级 2班</text>
</view>
</view>
</view>
<view class="school-report-header-item">
<view class="school-report-screen">
<view class="school-report-screen-item">
<view class="school-report-type">
<picker @change="schoolReportChange" :value="reportTypeIndex" :range="reportTypeArr">
<view class="uni-input">{{reportTypeArr[reportTypeIndex]}}</view>
</picker>
</view>
<view class="triangle">
</view>
</view>
<view class="school-report-screen-item-two">
<view class="school-report-date">
<picker @change="dataRangeChange" :value="dataRangeIndex" :range="dataRangeArr"
range-key="week">
<view class="uni-input">{{dataRangeArr[dataRangeIndex].weekstr||""}}</view>
</picker>
</view>
<view class="triangle">
</view>
</view>
</view>
</view>
</view>
<view class="school-report-context">
<view class="school-report-context-tab">
<view class="school-report-context-tab-item">
<view class="school-report-context-tab-item-one active">
<text>消费报告</text>
</view>
<view class="school-report-context-tab-item-one">
<text>门禁报告</text>
</view>
<view class="school-report-context-tab-item-one">
<text>公话报告</text>
</view>
</view>
<view class="school-report-context-tab-item-two">
<view class="share-button">
<view class="share-button-img">
</view>
<view class="share-button-txt">
<text>分享</text>
</view>
</view>
</view>
</view>
<view class="school-report-context-bgImg">
</view>
<view class="school-report-context-card">
<view class="school-report-context-card-one">
<view class="school-report-context-card-one-img">
</view>
<view class="school-report-context-card-one-context">
<view class="school-report-context-card-one-context-item">
<view class="school-report-context-card-one-context-dot">
<view class="school-report-context-card-one-context-dot-item">
</view>
</view>
<view class="school-report-context-card-one-context-txt">
共<text class="txt-important">5</text>次未吃晚餐,请提醒<text class="txt-important">宁哲言</text>
晚餐好好吃,身体才能更健康
</view>
</view>
<view class="school-report-context-card-one-context-item">
<view class="school-report-context-card-one-context-dot">
<view class="school-report-context-card-one-context-dot-item">
</view>
</view>
<view class="school-report-context-card-one-context-txt">
食堂消费占比<text class="txt-important-two">过低</text>,请及时调整饮食习惯
</view>
</view>
<view class="school-report-context-card-one-context-item">
<view class="school-report-context-card-one-context-dot">
<view class="school-report-context-card-one-context-dot-item">
</view>
</view>
<view class="school-report-context-card-one-context-txt">
消费总额 <text class="txt-important">990</text>元,超过全校 <text class="txt-important">80%</text>
的同学,请及时评估生活费是否合理
</view>
</view>
<view
class="school-report-context-card-one-context-item school-report-context-card-one-context-item-last">
<view class="school-report-context-card-one-context-dot">
<view class="school-report-context-card-one-context-dot-item">
</view>
</view>
<view class="school-report-context-card-one-context-txt">
<text class="txt-important-two">12月17日、12月22日</text>的消费金额存在异常,请及时关注
</view>
</view>
</view>
</view>
<view class="school-report-context-card-two">
<view class="school-report-context-card-title">
<view class="school-report-context-card-title-img">
<text>就餐情况</text>
</view>
</view>
<view class="school-report-context-card-two-conclusion">
<view class="school-report-context-card-two-conclusion-txt">
<text>本月共<text class="abnormal-days">5</text>天就餐异常</text>
</view>
<view class="school-report-context-card-two-conclusion-logo">
<view class="school-report-context-card-two-conclusion-logo-item">
<view class="school-report-context-card-two-conclusion-logo-item-dot">
</view>
</view>
<view
class="school-report-context-card-two-conclusion-logo-item school-report-context-card-two-conclusion-logo-item-right">
<text>未就餐</text>
</view>
</view>
</view>
<view class="school-report-context-card-two-calendar">
<van-calendar :min-date="minDate" :max-date="maxDate" :default-date="minDate" :row-height="44" :show-title="false" :show-subtitle="false"
:show-mark="false" :poppable="false" :show-confirm="false" :style="{ height: '575rpx' }" />
</view>
<view class="school-report-context-card-two-details">
<view class="school-report-context-card-two-details-item">
<view class="school-report-context-card-two-details-date">
<text>12月26日</text>
</view>
<view class="school-report-context-card-two-details-meal">
<view class="school-report-context-card-two-details-meal-txt">
<text>早餐</text>
</view>
<view class="school-report-context-card-two-details-meal-logo">
<view class="school-report-context-card-two-details-meal-img">
<image src="../../static/images/eatted.png" mode=""></image>
</view>
</view>
<view class="school-report-context-card-two-details-meal-txt">
<text>中餐</text>
</view>
<view
class="school-report-context-card-two-details-meal-logo school-report-context-card-two-details-meal-logo-two">
<view class="school-report-context-card-two-details-meal-noeat">
<text>缺</text>
</view>
</view>
<view class="school-report-context-card-two-details-meal-txt">
<text>晚餐</text>
</view>
<view
class="school-report-context-card-two-details-meal-logo school-report-context-card-two-details-meal-logo-three">
<view class="school-report-context-card-two-details-meal-noeat">
<text>缺</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="school-report-context-card-three">
<view class="school-report-context-card-title">
<view class="school-report-context-card-title-img">
<text>消费偏好</text>
</view>
</view>
<view class="school-report-context-card-three-conclusion">
<view class="school-report-context-card-three-conclusion-item">
<text>食堂消费占比<text
class="school-report-context-card-three-conclusion-item-describe">过低</text>，请及时调整饮食习惯</text>
</view>
</view>
</view>
<view class="school-report-context-card-four">
<view class="school-report-context-card-title">
<view class="school-report-context-card-title-img">
<text>消费总额</text>
</view>
</view>
<view class="school-report-context-card-four-conclusion">
<view class="school-report-context-card-four-conclusion-item">
<text>消费总额<text class="consume-total">990</text>元，超过全校<text
class="consume-total">80%</text>的同学，请及时评估生活费是否合理</text>
</view>
</view>
</view>
<view class="school-report-context-card-five">
<view class="school-report-context-card-title">
<view class="school-report-context-card-title-img">
<text>消费趋势</text>
</view>
</view>
<view class="school-report-context-card-five-conclusion">
<view class="school-report-context-card-five-conclusion-item">
<text><text class="abnormal-date">12月17日、12月22日</text>的消费金额存在异常，请及时关注</text>
</view>
</view>
</view>
<view class="school-report-footer">
<view class="school-report-footer-item">
<view class="school-report-footer-item-txt">
<text>到期后将无法查看完整报告</text>
</view>
<view class="school-report-validity">
<text>有效期至<text class="validity-date">2023年12月31日</text>,剩余<text
class="validity-date">8天</text></text>
</view>
</view>
<view class="school-report-footer-item-two">
<view class="school-report-footer-item-btn">
<text>延长权益</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
// 时间处理模块
import dayjs from 'dayjs'
export default {
name: 'SchoolReport',
data() {
return {
reportTypeIndex: 0,
reportTypeArr: ['月报', '周报'],
dataRangeIndex: 0,
dataRangeArr: [{
week: "",
weekstr: "",
startDate: "",
endDate: ""
}],
minDate: new Date('1970/01/01'),
maxDate: new Date(),
}
},
mounted() {
let tmpArr = []
// 获取时间
for (let i = 0; i <= 11; i++) {
let startWeek = dayjs().subtract(i, 'month').startOf('month');
let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d.getTime() ? dayjs()
.subtract(i, 'month').endOf('month') : dayjs();
tmpArr.push({
week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
startDate: startWeek.format("YYYY-MM-DD"),
endDate: endWeek.format("YYYY-MM-DD")
})
}
this.dataRangeArr = tmpArr
this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
},
methods: {
schoolReportChange: function(e) {
this.reportTypeIndex = e.target.value;
this.getDataRangeArr(this.reportTypeIndex);
},
dataRangeChange: function(e) {
this.dataRangeIndex = e.target.value;
this.getDataRangeArr(this.reportTypeIndex);
},
getDataRangeArr: function(num) {
if (num) {
let tmpArr = []
for (let i = 0; i <= 52; i++) {
let startWeek = dayjs().subtract(i, 'week').startOf('week');
let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'week').endOf('week').$d.getTime() ?
dayjs().subtract(i, 'week').endOf('week') : dayjs();
tmpArr.push({
week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
startDate: startWeek.format("YYYY-MM-DD"),
endDate: endWeek.format("YYYY-MM-DD")
})
}
this.dataRangeArr = tmpArr;
this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
} else {
let tmpArr = []
for (let i = 0; i <= 11; i++) {
let startWeek = dayjs().subtract(i, 'month').startOf('month');
let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d.getTime() ?
dayjs().subtract(i, 'month').endOf('month') : dayjs();
tmpArr.push({
week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
startDate: startWeek.format("YYYY-MM-DD"),
endDate: endWeek.format("YYYY-MM-DD")
})
}
this.dataRangeArr = tmpArr;
this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
}
},
},
}
</script>
<style lang="scss" scope>
.tainer {
.school-report-header {
height: 88rpx;
margin: 72rpx 0 48rpx 40rpx;
display: flex;
justify-content: space-between;
.school-report-header-item {
display: flex;
.user-avatar {
width: 88rpx;
height: 88rpx;
background: no-repeat center/100% url(../../static/images/avatar.png);
}
.user-info {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 9rpx;
.user-name {
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1B1B1B;
}
.class-name {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.25);
}
}
.school-report-screen {
display: flex;
.school-report-screen-item {
width: 156rpx;
display: flex;
justify-content: center;
align-items: center;
.school-report-type {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1B1B1B;
margin-right: 12rpx;
}
.triangle {
width: 21rpx;
height: 10rpx;
background: no-repeat center/100% url(../../static/images/grayTriangle.png);
}
}
.school-report-screen-item-two {
width: 270rpx;
display: flex;
justify-content: center;
align-items: center;
.school-report-date {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1B1B1B;
margin-right: 17rpx;
}
.triangle {
width: 21rpx;
height: 10rpx;
background: no-repeat center/100% url(../../static/images/grayTriangle.png);
}
}
}
}
}
.school-report-context {
.school-report-context-tab {
height: 84rpx;
padding-left: 40rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.school-report-context-tab-item {
display: flex;
.school-report-context-tab-item-one {
width: 172rpx;
background: #F9F9F9;
border-radius: 20rpx 20rpx 0rpx 0rpx;
font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
&.active {
background: #E4F9F2;
}
}
}
.school-report-context-tab-item-two {
width: 155rpx;
margin: 8rpx 0 0;
.share-button {
width: 155rpx;
height: 64rpx;
background: rgba(4, 184, 113, .13);
border-radius: 32rpx 0rpx 0rpx 32rpx;
display: flex;
justify-content: center;
align-items: center;
.share-button-img {
width: 26rpx;
height: 26rpx;
background: no-repeat center/100% url(../../static/images/share.png);
margin-right: 11rpx;
}
.share-button-txt {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #04B871;
}
}
}
}
.school-report-context-bgImg {
width: 100%;
height: 452rpx;
background: no-repeat center/100% url(../../static/images/consumeReportBg.png);
}
.school-report-context-card {
width: 100%;
background: #E5F8F1;
padding: 0 30rpx;
position: absolute;
top: 654rpx;
box-sizing: border-box;
.school-report-context-card-one {
width: 100%;
height: 598rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-bottom: 40rpx;
.school-report-context-card-one-img {
width: 428rpx;
height: 428rpx;
background: no-repeat center/100% url(../../static/images/consumeReport.png);
position: absolute;
top: -172rpx;
left: 160rpx;
}
.school-report-context-card-one-context {
width: 613rpx;
margin: 0 30rpx 0 47rpx;
position: absolute;
top: 163rpx;
.school-report-context-card-one-context-item {
margin: 0 0 32rpx;
display: flex;
.school-report-context-card-one-context-dot {
height: 40rpx;
display: flex;
align-items: center;
.school-report-context-card-one-context-dot-item {
width: 10rpx;
height: 10rpx;
background: #04B871;
border-radius: 10rpx;
margin-right: 16rpx;
}
}
.school-report-context-card-one-context-txt {
line-height: 40rpx;
.txt-important {
color: #04B871;
margin: 0 4rpx;
}
.txt-important-two {
color: #04B871;
}
}
&.school-report-context-card-one-context-item-last {
margin: 0;
}
}
}
}
.school-report-context-card-title {
height: 62rpx;
display: flex;
justify-content: center;
.school-report-context-card-title-img {
width: 318rpx;
background: no-repeat center/100% url(../../static/images/cardBg.png);
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 45rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.school-report-context-card-two {
height: 876rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-bottom: 40rpx;
.school-report-context-card-two-conclusion {
height: 40rpx;
padding: 0 40rpx 0 30rpx;
box-sizing: border-box;
margin: 40rpx 0 32rpx;
display: flex;
justify-content: space-between;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
.school-report-context-card-two-conclusion-txt {
.abnormal-days {
color: #F9793F;
margin: 0 5rpx;
}
}
.school-report-context-card-two-conclusion-logo {
display: flex;
.school-report-context-card-two-conclusion-logo-item {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F9793F;
display: flex;
align-items: center;
.school-report-context-card-two-conclusion-logo-item-dot {
width: 12rpx;
height: 12rpx;
background: #F9793F;
border-radius: 12rpx;
}
&.school-report-context-card-two-conclusion-logo-item-right {
margin-left: 14rpx;
}
}
}
}
.school-report-context-card-two-calendar {
height: 575rpx;
/deep/ .van-calendar__month-title{
display: none;
}
/deep/ .van-calendar__days{
margin: 10rpx 0 0;
}
/deep/ .van-calendar__day, .van-calendar__selected-day{
margin:0 0 8rpx;
}
/deep/ .van-calendar__selected-day{
background: rgba(0, 0, 0, .1);
color: #F9793F;
}
}
.school-report-context-card-two-details {
height: 128rpx;
background: no-repeat center/100% url(../../static/images/diningSituations.png);
padding: 55rpx 42rpx 30rpx 29rpx;
box-sizing: border-box;
border-radius: 0 0 16rpx 16rpx;
.school-report-context-card-two-details-item {
display: flex;
height: 43rpx;
.school-report-context-card-two-details-date {
width: 130rpx;
height: 43rpx;
border-radius: 4rpx;
border: 1rpx solid #04B871;
font-size: 28rpx;
font-family: FontName;
color: #04B871;
margin-right: 65rpx;
}
.school-report-context-card-two-details-meal {
display: flex;
.school-report-context-card-two-details-meal-txt {
width: 56rpx;
margin-right: 8rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
}
.school-report-context-card-two-details-meal-logo {
display: flex;
align-items: center;
margin-right: 48rpx;
&.school-report-context-card-two-details-meal-logo-two {
margin-right: 56rpx;
}
&.school-report-context-card-two-details-meal-logo-three {
margin: 0;
}
.school-report-context-card-two-details-meal-img {
width: 48rpx;
height: 40rpx;
image {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
}
.school-report-context-card-two-details-meal-noeat {
width: 40rpx;
height: 40rpx;
background: rgba(249, 121, 63, 0.17);
border-radius: 12rpx;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F9793F;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
.school-report-context-card-three {
height: 526rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-bottom: 40rpx;
.school-report-context-card-three-conclusion {
margin: 40rpx 0 57rpx 0;
.school-report-context-card-three-conclusion-item {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
margin-left: 30rpx;
.school-report-context-card-three-conclusion-item-describe {
color: #04B871;
}
}
}
}
.school-report-context-card-four {
height: 536rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-bottom: 40rpx;
.school-report-context-card-four-conclusion {
margin: 36rpx 0 46rpx;
.school-report-context-card-four-conclusion-item {
height: 80rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
margin: 0 40rpx 0 30rpx;
.consume-total {
color: #04B871;
margin: 0 6rpx;
}
}
}
}
.school-report-context-card-five {
height: 634rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-bottom: 37rpx;
.school-report-context-card-five-conclusion {
margin: 40rpx 0 0;
.school-report-context-card-five-conclusion-item {
margin: 0 40rpx 0 30rpx;
height: 130rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
.abnormal-date {
color: #04B871;
}
}
}
}
.school-report-footer {
height: 169rpx;
margin: 0 0 43rpx;
padding: 33rpx 34rpx 42rpx 42rpx;
box-sizing: border-box;
background: no-repeat center/100% url(../../static/images/extendPermissionsBg.png);
display: flex;
justify-content: space-between;
.school-report-footer-item {
display: flex;
flex-direction: column;
justify-content: space-between;
.school-report-footer-item-txt {
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.school-report-validity {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(123, 80, 53, 0.85);
.validity-date {
color: #F9793F;
}
}
}
.school-report-footer-item-two {
display: flex;
align-items: center;
.school-report-footer-item-btn {
width: 180rpx;
height: 61rpx;
background: linear-gradient(360deg, #F0662B 0%, #FF8646 100%);
border-radius: 49rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
</style>
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