Skip to content

X
xzf_uniapp-wechat-web
Commit 31ee4c1e authored by 李智书's avatar 李智书
Browse files
Options

Merge branch 'develop'

parents f429832e ee825aea
Hide whitespace changes
Inline Side-by-side
Showing with 1468 additions and 27 deletions
src/main.js
View file @ 31ee4c1e
...@@ -26,8 +26,8 @@ Vue.use(Vant); ...@@ -26,8 +26,8 @@ Vue.use(Vant);
// echarts图标 // echarts图标
// var echarts = require('echarts') var echarts = require('echarts')
// Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
// console.log(echarts); // console.log(echarts);
// 微信JSSDK // 微信JSSDK
......
src/pages.json
View file @ 31ee4c1e
...@@ -6,13 +6,22 @@ ...@@ -6,13 +6,22 @@
"navigationBarTitleText": "校智付电子校园卡", "navigationBarTitleText": "校智付电子校园卡",
"navigationStyle": "custom", "navigationStyle": "custom",
"usingComponents": { "usingComponents": {
}, },
"h5": { "h5": {
"titleNView": "transparent" "titleNView": "transparent"
} }
} }
}, { },
{
"path": "pages/ConsumptionReport/ConsumptionReport",
"style": {
"navigationBarTitleText": "周消费报告",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/WxworkTearch/WxworkTearch", "path": "pages/WxworkTearch/WxworkTearch",
"style": { "style": {
"navigationBarTitleText": "企业微信教职工采集签约助手", "navigationBarTitleText": "企业微信教职工采集签约助手",
...@@ -20,7 +29,8 @@ ...@@ -20,7 +29,8 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, { },
{
"path": "pages/wxWorkAuth/wxWorkAuth", "path": "pages/wxWorkAuth/wxWorkAuth",
"style": { "style": {
"navigationBarTitleText": "校智付", "navigationBarTitleText": "校智付",
...@@ -127,28 +137,7 @@ ...@@ -127,28 +137,7 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, { }, {
"path": "pages/AccessControlModular/SchoolAttendance/SchoolAttendance",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
"path": "pages/AccessControlModular/StudentAttendance/StudentAttendance",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
"path": "pages/AccessControlModular/TeacherAttendance/TeacherAttendance",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
"path": "pages/StudentsGraduate/StudentsGraduate", "path": "pages/StudentsGraduate/StudentsGraduate",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
......
src/pages/ConsumptionReport/ConsumptionReport.vue 0 → 100644
View file @ 31ee4c1e
<template>
<view>
<view class="consumption-report-container">
<view class="consumption-report-header">
<view class="consumption-report-header-item">
<view class="consumption-report-info">
<view class="consumption-report-consumer">
<view class="consumer-list">
<picker @change="consumerChange" :value="consumerNameIndex" :range="consumerNameArr">
<view class="uni-input">{{consumerNameArr[consumerNameIndex]}}</view>
</picker>
</view>
</view>
<view class="consumption-report-triangle">
<image class="consumption-report-triangle-img" src="../../static/images/Triangle.png"
mode="">
</image>
</view>
</view>
<view class="consumption-report-info">
<view class="consumption-report-data">
<view class="consumer-list">
<picker @change="dataRangeChange" :value="dataRangeIndex" :range="dataRangeArr"
range-key="week">
<view class="uni-input">{{dataRangeArr[dataRangeIndex].week||""}}</view>
</picker>
</view>
</view>
<view class="consumption-report-triangle consumption-report-triangle-location">
<image class="consumption-report-triangle-img" src="../../static/images/Triangle.png"
mode="">
</image>
</view>
</view>
</view>
</view>
<view class="consumption-report-context">
<view class="consumption-report-card-one">
<view class="consumption-report-card-one-item">
<view class="consumption-total-number">
<view class="consumption-total-number-item">
{{weekConsumerAmout.consumerAmount}}
</view>
<view class="consumption-total-number-trend">
<view class="consumption-total-number-trend-item">
<text>{{['','+','-'][weekConsumerAmout.compareStatus]}}</text>
{{weekConsumerAmout.compareAmount}}
</view>
<view
class="consumption-total-number-trend-item consumption-total-number-trend-percent">
{{weekConsumerAmout.rate+'%'}}
</view>
</view>
</view>
<view class="consumption-total-text">
<view class="consumption-total-text-item">
本周消费总金额(元)
</view>
<view class="consumption-total-text-contrast">
<view class="consumption-total-text-contrast-item">
环比上周
</view>
<view class="consumption-total-text-contrast-img">
<image class="consumption-total-text-trend-img"
v-if="weekConsumerAmout.compareStatus==0" src="../../static/images/trend0.png">
</image>
<image class="consumption-total-text-trend-img"
v-if="weekConsumerAmout.compareStatus==1" src="../../static/images/trend.png">
</image>
<image class="consumption-total-text-trend-img"
v-if="weekConsumerAmout.compareStatus==2" src="../../static/images/trend2.png">
</image>
</view>
</view>
</view>
</view>
<view class="consumption-report-card-one-item">
<view class="no-eatting-total-detail">
<view class="no-eatting-total-detail-item">
<text class="no-eatting-total-detail-item-num">
{{notRepastNumber}}
</text>次
</view>
<view class="no-eatting-total-detail-item">
<text class="no-eatting-total-detail-item-num">
{{notRepastDay}}
</text>天
</view>
</view>
<view class="no-eatting-total-text">
<view class="no-eatting-total-text-item">
未就餐次数
</view>
<view class="no-eatting-total-text-item">
未就餐天数
</view>
</view>
</view>
</view>
<view class="consumption-report-card-two">
<view class="consumption-report-card-two-title">
<view class="consumption-report-card-two-title-image">
<image class="consumption-report-card-two-title-img"
src="../../static/images/dailyConsumptionTrend.png"></image>
</view>
<view class="consumption-report-card-two-title-text">
日消费趋势
<view class="consumption-report-card-two-title-text-deline">
</view>
</view>
</view>
<view class="average-daily-consumption">
<view class="average-daily-consumption-item">
<text>¥</text>
<text
class="average-daily-consumption-item-num">{{dayConsumerTrend.userWeekAvgAmount}}</text>
</view>
<view class="average-daily-consumption-item average-daily-consumption-item-orange">
<text>¥</text>
<text
class="average-daily-consumption-item-num">{{dayConsumerTrend.classWeekAvgAmount}}</text>
</view>
</view>
<view class="average-daily-consumption-contrast">
<view class="average-daily-consumption-student">
<view class="average-daily-consumption-student-text">
孩子日均消费
</view>
<view class="average-daily-consumption-student-tag">
V
</view>
</view>
<view class="average-daily-consumption-class">
<view class="average-daily-consumption-class-tag">
S
</view>
<view class="average-daily-consumption-class-text">
班级日均消费
</view>
</view>
</view>
<view class="average-daily-consumption-chart">
<view class="average-daily-consumption-chart-item-box">
<view v-for="(item,index) in dailyConsumptionData"
class="average-daily-consumption-chart-item">
<view class="average-daily-consumption-chart-item-data" @click="click">
{{item.value}}
</view>
<view class="average-daily-consumption-chart-item-shape"
:style="{height:item.shapeSizeArr+'rpx'}">
</view>
<view class="average-daily-consumption-chart-item-date">
{{item.time}}
</view>
</view>
<!-- -->
<view class="noConsumptionData" v-if="dailyConsumptionData.length==0">
暂无更多数据
</view>
</view>
</view>
</view>
<view class="consumption-report-card-three">
<view class="consumption-report-card-three-title">
<view class="consumption-report-card-three-title-image">
<image class="consumption-report-card-three-title-img"
src="../../static/images/consumerPreferences.png"></image>
</view>
<view class="consumption-report-card-three-title-text">
消费偏好
<view class="consumption-report-card-three-title-text-deline">
</view>
</view>
</view>
<view class="consumption-preferences">
<!-- 食堂消费 -->
<view class="consumption-preferences-list">
<view class="consumption-preferences-list-img">
<image class="consumption-preferences-img" src="../../static/images/canteen.png"
mode="">
</image>
</view>
<view class="consumption-preferences-list-item">
<view class="consumption-preferences-list-item-text">
<view class="consumption-preferences-list-item-text-item">
<view class="consumption-preferences-list-item-text-item-title">
食堂消费
</view>
<view class="consumption-preferences-list-item-text-item-percent">
{{percentArr(1,consumptionPreferencesData)}}
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData.canteenAmount}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
<view class="consumption-preferences-list-item-proportion-active"
:style="{width:widthArr(1,consumptionPreferencesData)+'rpx'}">
</view>
</view>
</view>
</view>
<!-- 超市消费 -->
<view class="consumption-preferences-list">
<view class="consumption-preferences-list-img">
<image class="consumption-preferences-img" src="../../static/images/supermarket.png"
mode="">
</image>
</view>
<view class="consumption-preferences-list-item">
<view class="consumption-preferences-list-item-text">
<view class="consumption-preferences-list-item-text-item">
<view class="consumption-preferences-list-item-text-item-title">
超市消费
</view>
<view class="consumption-preferences-list-item-text-item-percent">
{{percentArr(2,consumptionPreferencesData)}}
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData.supermarketAmount}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
<view class="consumption-preferences-list-item-proportion-active"
:style="{width:widthArr(2,consumptionPreferencesData)+'rpx'}">
</view>
</view>
</view>
</view>
<!-- 其他消费 -->
<view class="consumption-preferences-list">
<view class="consumption-preferences-list-img">
<image class="consumption-preferences-img" src="../../static/images/other.png" mode="">
</image>
</view>
<view class="consumption-preferences-list-item">
<view class="consumption-preferences-list-item-text">
<view class="consumption-preferences-list-item-text-item">
<view class="consumption-preferences-list-item-text-item-title">
其他消费
</view>
<view class="consumption-preferences-list-item-text-item-percent">
{{percentArr(3,consumptionPreferencesData)}}
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData.otherAmount}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
<view class="consumption-preferences-list-item-proportion-active"
:style="{width:widthArr(3,consumptionPreferencesData)+'rpx'}">
</view>
</view>
</view>
</view>
</view>
</view>
<view class="consumption-report-card-four">
<view class="consumption-report-card-four-header">
<view class="consumption-report-card-four-title">
<view class="consumption-report-card-four-title-image">
<image class="consumption-report-card-four-title-img"
src="../../static/images/notEatting.png">
</image>
</view>
<view class="consumption-report-card-four-title-text">
未就餐详情
<view class="consumption-report-card-four-title-text-deline">
</view>
</view>
</view>
<view class="noeatting-total">
<view class="noeatting-total-item">
本周
</view>
<view class="noeatting-number">
{{notRepastNumber}}次
</view>
<view class="noeatting-total-item">
未就餐
</view>
</view>
</view>
<view class="noeatting-details">
<view class="noeatting-details-header">
<view class="noeatting-details-header-item">
日期
</view>
<view class="noeatting-details-header-meal">
<view>早餐</view>
<view>中餐</view>
<view>晚餐</view>
</view>
<view class="noeatting-details-header-item">
未就餐次数
</view>
</view>
<view class="noeatting-details-ul">
<view class="noeatting-details-list" v-for="(item,index) in notRepastDetailsDTOS"
:key="index">
<view class="noeatting-details-list-item">
{{repastDateTimeFormat(item.repastDate)}}
</view>
<view class="noeatting-details-list-meal">
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
:src="HaveamealImg[item.breakfastStatus]" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
:src="HaveamealImg[item.lunchStatus]" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
:src="HaveamealImg[item.supperStatus]" mode=""></image>
</view>
</view>
<view class="noeatting-details-list-item noeatting-details-list-num">
{{item.dayNotEatNumber}}
</view>
</view>
<!-- ds -->
<view class="noConsumptionData" v-if="notRepastDetailsDTOS.length==0">
暂无更多数据
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
var gHost = "https://dev-az-order-api.xiaopay.net";
if (window.location.host.indexOf("dev")) {
gHost = "https://dev-az-order-api.xiaopay.net";
} else if (window.location.host.indexOf("uat")) {
gHost = "https://uat.xiaopay.net";
} else {
gHost = "https://pay.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 dayjs from 'dayjs'
import {
Dialog,
Toast
} from 'vant';
export default {
name: 'ConsumptionReport',
data() {
return {
consumerNameIndex: 0,
dataRangeIndex: 0,
consumerNameArr: [], // 学生姓名列表
consumerInfo: [], //家长关联的学生信息
specifiedConsumerInfo: {}, //选择学生的信息
dayConsumerTrend: {}, //日消费趋势数据
// 周消费要点数据
weekConsumerAmout: {},
condition: '',
trendimg: '',
// 日期范围列表
dataRangeArr: [{
week: "",
startDate: "",
endDate: ""
}],
// 日消费趋势图表数据
dailyConsumptionData: [],
dailyConsumptionDate: [],
// 消费偏好数据
consumptionPreferencesData: {},
// 未就餐详情
notRepastDetailsDTOS: [],
// 未就餐天数
notRepastDay: '0',
// 未就餐总数
notRepastNumber: '5',
HaveamealImg: ['../../static/images/noeat.png', '../../static/images/eat.png']
}
},
computed: {
repastDateTimeFormat() {
return function(repastDateTime) {
if (!repastDateTime) {
return '';
}
return dayjs(repastDateTime).format("MM月DD日")
}
},
percentArr() {
return function(type, data2) {
if (!data2.grossAmount || data2.grossAmount == 0) {
return 0;
}
let {
canteenAmount,
grossAmount,
supermarketAmount,
otherAmount
} = data2
switch (type) {
case 1:
return (Math.round((canteenAmount / grossAmount) * 100)) + '%'
break;
case 2:
return (Math.round((supermarketAmount / grossAmount) * 100)) + '%'
break;
case 3:
return (Math.round((otherAmount / grossAmount) * 100)) + '%'
break;
default:
return ''
break;
}
}
},
widthArr() {
return function(type, data2) {
if (!data2.grossAmount || data2.grossAmount == 0) {
return 0;
}
let {
canteenAmount,
grossAmount,
supermarketAmount,
otherAmount
} = data2
switch (type) {
case 1:
return ((canteenAmount / grossAmount)) * 472
break;
case 2:
return ((supermarketAmount / grossAmount)) * 472
break;
case 3:
return ((otherAmount / grossAmount)) * 472
break;
default:
return 0
break;
}
}
}
},
mounted() {
this.queryPatriarchByStudent().then(() => {
this.queryDayConsumerTrend()
this.queryWeekConsumerAmout()
this.queryStudentConsumerPreference()
this.queryNotRepastDetails()
})
this.getDataRangeArr()
let tmpArr = []
// 获取时间
for (let i = 1; i <= 4; i++) {
let startWeek = dayjs().subtract(i, 'week').startOf('week').add(1, 'day');
let endWeek = dayjs().subtract(i, 'week').endOf('week').add(1, 'day');
// console.warn("一周开始-----", dayjs().subtract(i, 'week').startOf('week').add(1, 'day').format("YYYY年MM月DD日"))
// console.warn("一周结束-----", dayjs().subtract(i, 'week').endOf('week').add(1, 'day').format("YYYY年MM月DD日"))
tmpArr.push({
week: (startWeek.format("MM月DD日")) + '~' + (endWeek.format("MM月DD日")),
startDate: startWeek.format("YYYY-MM-DD"),
endDate: endWeek.format("YYYY-MM-DD")
})
}
this.dataRangeArr = tmpArr
},
methods: {
consumerChange(e) {
this.consumerNameIndex = e.target.value
this.specifiedConsumerInfo = this.consumerInfo[this.consumerNameIndex]
this.queryDayConsumerTrend()
this.queryWeekConsumerAmout()
this.queryStudentConsumerPreference()
this.queryNotRepastDetails()
},
dataRangeChange(e) {
this.dataRangeIndex = e.target.value
this.queryDayConsumerTrend()
this.queryWeekConsumerAmout()
this.queryStudentConsumerPreference()
this.queryNotRepastDetails()
},
// 获取当前日期
getNowFormatDate() {
var date = new Date()
var seperator = '-'
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (day >= 1 && day <= 9) {
day = '0' + day
}
var currentdate = year + seperator + month + seperator + day
return currentdate
},
// 获取日期范围列表
getDataRangeArr() {
console.log(this.getNowFormatDate())
},
// 查询家长关联的学生
queryPatriarchByStudent() {
let this_ = this
Toast.loading({
message: '加载中...',
forbidClick: true,
});
return new Promise((resolve, reject) => {
$.ajax({
url: gHost + '/report-push/student-consumer-report/queryPatriarchByStudent',
type: 'get',
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
phone: getQueryParams('phone'),
schoolId: getQueryParams('schoolId'),
userId: getQueryParams('userId'),
sessionid: getQueryParams('sessionid'),
wechattype: 1,
},
success: function(res) {
if (res.code == 200) {
this_.consumerNameArr = res.obj.map(element => element.name)
this_.consumerInfo = res.obj
this_.specifiedConsumerInfo = this_.consumerInfo[this_
.consumerNameIndex]
}
resolve()
},
error: function(error) {
reject(error)
}
})
})
},
// 查询未就餐详情
async queryNotRepastDetails() {
let this_ = this
try {
Toast.loading({
message: '加载中...',
forbidClick: true,
});
await new Promise((resolve, reject) => {
$.ajax({
url: gHost +
'/report-push/student-consumer-report/queryNotRepastDetails',
type: 'get',
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
userId: this_.specifiedConsumerInfo.id || "",
schoolId: this_.specifiedConsumerInfo.schoolid || "",
startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
.dataRangeArr[this_.dataRangeIndex].startDate : "",
endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
this_.dataRangeIndex].endDate : "",
sessionid: getQueryParams('sessionid'),
wechattype: 1,
},
success: function(res) {
if (res.code == 200) {
if (!res.obj) {
reject(res.msg)
return
}
this_.notRepastDay = res.obj.notRepastDay;
this_.notRepastDetailsDTOS = res.obj.notRepastDetailsDTOS;
this_.notRepastNumber = res.obj.notRepastNumber;
resolve()
return
}
reject(res.msg)
},
error: function(error) {
reject(error)
}
})
})
} catch (e) {
console.warn(e)
Dialog({
title: '系统提示',
message: e.message || e
});
}
},
// 查询学生消费偏好类型
async queryStudentConsumerPreference() {
let this_ = this
try {
Toast.loading({
message: '加载中...',
forbidClick: true,
});
await new Promise((resolve, reject) => {
$.ajax({
url: gHost +
'/report-push/student-consumer-report/queryStudentConsumerPreference',
type: 'get',
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
userId: this_.specifiedConsumerInfo.id || "",
schoolId: this_.specifiedConsumerInfo.schoolid || "",
startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
.dataRangeArr[this_.dataRangeIndex].startDate : "",
endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
this_.dataRangeIndex].endDate : "",
sessionid: getQueryParams('sessionid'),
wechattype: 1,
},
success: function(res) {
if (res.code == 200) {
if (!res.obj) {
reject(res.msg)
return
}
this_.consumptionPreferencesData = res.obj
resolve()
return
}
reject(res.msg)
},
error: function(error) {
reject(error)
}
})
})
} catch (e) {
console.warn(e)
Dialog({
title: '系统提示',
message: e.message || e
});
}
},
// 查询周要点，消费金额
async queryWeekConsumerAmout() {
let this_ = this
try {
Toast.loading({
message: '加载中...',
forbidClick: true,
});
await new Promise((resolve, reject) => {
$.ajax({
url: gHost + '/report-push/student-consumer-report/queryWeekConsumerAmout',
type: 'get',
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
userId: this_.specifiedConsumerInfo.id || "",
schoolId: this_.specifiedConsumerInfo.schoolid || "",
startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
.dataRangeArr[this_.dataRangeIndex].startDate : "",
endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
this_.dataRangeIndex].endDate : "",
sessionid: getQueryParams('sessionid'),
wechattype: 1,
},
success: function(res) {
if (res.code == 200) {
if (!res.obj) {
reject(res.msg)
return
}
this_.weekConsumerAmout = res.obj
resolve()
return
}
reject(res.msg)
},
error: function(error) {
reject(error)
}
})
})
} catch (e) {
console.warn(e)
Dialog({
title: '系统提示',
message: e.message || e
});
}
},
// 日消费趋势
async queryDayConsumerTrend() {
let this_ = this
try {
Toast.loading({
message: '加载中...',
forbidClick: true,
});
await new Promise((resolve, reject) => {
$.ajax({
url: gHost + '/report-push/student-consumer-report/queryDayConsumerTrend',
type: 'get',
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
userId: this_.specifiedConsumerInfo.id || "",
schoolId: this_.specifiedConsumerInfo.schoolid || "",
startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
.dataRangeArr[this_.dataRangeIndex].startDate : "",
endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
this_.dataRangeIndex].endDate : "",
sessionid: getQueryParams('sessionid'),
wechattype: 1,
},
success: function(res) {
if (res.code == 200) {
if (!res.obj) {
reject(res.msg)
return
}
let timeArr = Object.keys(res.obj.dayConsumerMap).sort(
function(a, b) {
return b < a ? 1 : -1
})
let tmpData = [],
MaxValue = Object.values(res.obj.dayConsumerMap);
for (let timeItem of timeArr) {
tmpData.push({
time: timeItem.substr(5).replace('-', '/'),
value: res.obj.dayConsumerMap[timeItem],
shapeSizeArr: res.obj.dayConsumerMap[
timeItem] == 0 ? 0 : (res.obj
.dayConsumerMap[
timeItem] / Math.max(...MaxValue)
) *
266
})
}
console.warn(tmpData)
this_.dayConsumerTrend = res.obj
this_.dailyConsumptionData = tmpData
resolve()
return
}
reject(res.msg)
},
error: function(error) {
reject(error)
}
})
})
} catch (e) {
console.warn(e)
Dialog({
title: '系统提示',
message: e.message || e
});
}
},
// 消费偏好百分比
consumerPreferencePercent(num) {
return (Math.round(num / this.consumptionPreferencesData.grossAmount * 10000) / 100).toFixed(1) + '%'
}
}
}
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.consumption-report-container {
width: 100%;
height: 100%;
overflow: scroll;
background: #F6F6F6;
.consumption-report-header {
height: 338rpx;
width: 100%;
background: url(../../static/images/headerbgm.png) no-repeat;
background-size: 100%;
box-sizing: border-box;
position: relative;
.consumption-report-header-item {
height: 48rpx;
width: 90%;
padding: 0 41rpx;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top:54rpx;
left: 0;
.consumption-report-info {
display: flex;
.consumption-report-consumer {
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.consumption-report-triangle {
width: 31rpx;
height: 15rpx;
margin-left: 12rpx;
.consumption-report-triangle-img {
max-width: 100%;
max-height: 100%;
}
&.consumption-report-triangle-location {
margin-top: -5rpx;
}
}
.consumption-report-data {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
}
}
}
.consumption-report-context {
padding: 0 20rpx;
box-sizing: border-box;
.consumption-report-card-one {
height: 357rpx;
width: 710rpx;
background: #FFFFFF;
border-radius: 24rpx;
padding: 47rpx 42rpx 38rpx 39rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-direction: column;
position: absolute;
top: 122rpx;
.consumption-report-card-one-item {
height: 110rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
.consumption-total-number {
height: 74rpx;
display: flex;
justify-content: space-between;
align-items: center;
.consumption-total-number-item {
font-size: 60rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #000000;
line-height: 74rpx;
flex: 1;
}
.consumption-total-number-trend {
flex: 1;
display: flex;
justify-content: flex-end;
.consumption-total-number-trend-item {
height: 42rpx;
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #FA8C15;
line-height: 42rpx;
&.consumption-total-number-trend-percent {
color: #EF7D00;
margin-left: 22rpx;
}
}
}
}
.consumption-total-text {
height: 37rpx;
display: flex;
justify-content: space-between;
align-items: center;
.consumption-total-text-item {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 37rpx;
}
.consumption-total-text-contrast {
display: flex;
justify-content: flex-end;
align-items: center;
.consumption-total-text-contrast-item {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 37rpx;
}
.consumption-total-text-contrast-img {
margin: -8rpx 0 0 10rpx;
width: 20rpx;
height: 25rpx;
line-height: 0;
.consumption-total-text-trend-img {
width: 100%;
height: 100%;
}
}
}
}
.no-eatting-total-detail {
display: flex;
justify-content: space-between;
height: 70rpx;
.no-eatting-total-detail-item {
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #000000;
line-height: 70rpx;
.no-eatting-total-detail-item-num {
font-size: 60rpx;
margin-right: 10rpx;
}
}
}
.no-eatting-total-text {
display: flex;
justify-content: space-between;
height: 40rpx;
.no-eatting-total-text-item {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
}
}
}
}
.consumption-report-card-two {
height: 621rpx;
width: 710rpx;
background: #FFFFFF;
border-radius: 24rpx;
padding: 21rpx 32rpx 0;
margin-top: 165rpx;
box-sizing: border-box;
.consumption-report-card-two-title {
height: 60rpx;
margin: 0 0 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.consumption-report-card-two-title-image {
width: 32rpx;
height: 32rpx;
.consumption-report-card-two-title-img {
width: 100%;
height: 100%;
}
}
.consumption-report-card-two-title-text {
margin-left: 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
position: relative;
.consumption-report-card-two-title-text-deline {
width: 152rpx;
height: 11rpx;
background: rgba(38, 169, 106, 0.24);
border-radius: 6rpx;
position: absolute;
top: 30rpx;
}
}
}
.average-daily-consumption {
height: 56rpx;
padding: 0 40rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.average-daily-consumption-item {
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #13D088;
line-height: 42rpx;
.average-daily-consumption-item-num {
font-size: 48rpx;
margin-left: 12rpx;
}
&.average-daily-consumption-item-orange {
color: #FA8C15;
}
}
}
.average-daily-consumption-contrast {
display: flex;
height: 49rpx;
margin: 11rpx 0 44rpx;
.average-daily-consumption-student {
flex: 1;
background: #13D088;
border-radius: 25rpx 0rpx 0rpx 25rpx;
display: flex;
justify-content: space-between;
align-items: center;
.average-daily-consumption-student-text {
height: 37rpx;
width: 156rpx;
font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left: 40rpx;
line-height: 37rpx;
}
.average-daily-consumption-student-tag {
height: 45rpx;
font-size: 40rpx;
font-family: Arial-BoldItalicMT, Arial;
font-weight: normal;
color: #FFFFFF;
line-height: 45rpx;
margin-right: 3rpx;
}
}
.average-daily-consumption-class {
flex: 1;
background: #FAAD15;
border-radius: 0rpx 25rpx 25rpx 0rpx;
display: flex;
justify-content: space-between;
align-items: center;
.average-daily-consumption-class-tag {
height: 45rpx;
font-size: 40rpx;
font-family: Arial-BoldItalicMT, Arial;
font-weight: normal;
color: #FFFFFF;
line-height: 45rpx;
margin-left: 2rpx;
}
.average-daily-consumption-class-text {
height: 37rpx;
width: 156rpx;
font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-right: 40rpx;
line-height: 37rpx;
}
}
}
.average-daily-consumption-chart {
padding: 0 6rpx 38rpx;
.average-daily-consumption-chart-item-box {
display: flex;
justify-content: space-between;
.average-daily-consumption-chart-item {
width: 80rpx;
height: 310rpx;
display: flex;
flex-direction: column;
align-items: center;
.average-daily-consumption-chart-item-data {
flex: 1;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column-reverse;
}
.average-daily-consumption-chart-item-shape {
margin: 8rpx 0 13rpx 0;
width: 24rpx;
background: #13D088;
border-radius: 16rpx;
}
.average-daily-consumption-chart-item-date {
font-size: 22rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
}
}
}
}
}
.consumption-report-card-three {
width: 710rpx;
height: 460rpx;
background: #FFFFFF;
border-radius: 24rpx;
padding: 21rpx 32rpx 0;
margin: 25rpx 0 0;
box-sizing: border-box;
.consumption-report-card-three-title {
height: 60rpx;
margin: 0 0 35rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.consumption-report-card-three-title-image {
width: 34rpx;
height: 33rpx;
.consumption-report-card-three-title-img {
width: 100%;
height: 100%;
}
}
.consumption-report-card-three-title-text {
margin-left: 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
position: relative;
.consumption-report-card-three-title-text-deline {
width: 125rpx;
height: 11rpx;
background: rgba(38, 169, 106, 0.24);
border-radius: 6rpx;
position: absolute;
top: 30rpx;
}
}
}
.consumption-preferences {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 295rpx;
.consumption-preferences-list {
display: flex;
justify-content: space-between;
.consumption-preferences-list-img {
width: 100rpx;
height: 74rpx;
.consumption-preferences-img {
max-width: 100%;
max-height: 100%;
}
}
.consumption-preferences-list-item {
display: flex;
justify-content: space-between;
flex-direction: column;
.consumption-preferences-list-item-text {
display: flex;
justify-content: space-between;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 40rpx;
.consumption-preferences-list-item-text-item {
display: flex;
.consumption-preferences-list-item-text-item-title {
color: #343434;
margin-right: 8rpx;
}
.consumption-preferences-list-item-text-item-percent {
color: #999999;
}
}
.consumption-preferences-list-item-text-cash {
font-weight: 600;
color: #333333;
}
}
.consumption-preferences-list-item-proportion {
width: 472rpx;
height: 12rpx;
background: #F5F5F5;
border-radius: 6rpx;
position: relative;
.consumption-preferences-list-item-proportion-active {
height: 12rpx;
background: #13D088;
border-radius: 6rpx;
position: absolute;
left: 0;
top: 0;
}
}
}
}
}
}
.consumption-report-card-four {
width: 710rpx;
background: #FFFFFF;
border-radius: 24rpx;
padding: 21rpx 32rpx 48rpx;
margin: 25rpx 0 32rpx;
box-sizing: border-box;
.consumption-report-card-four-header {
width: 646rpx;
height: 60rpx;
margin: 0 0 50rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.consumption-report-card-four-title {
display: flex;
align-items: center;
.consumption-report-card-four-title-image {
width: 35rpx;
height: 26rpx;
line-height: 0;
.consumption-report-card-four-title-img {
width: 100%;
height: 100%;
}
}
.consumption-report-card-four-title-text {
margin-left: 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
position: relative;
.consumption-report-card-four-title-text-deline {
width: 152rpx;
height: 11rpx;
background: rgba(38, 169, 106, 0.24);
border-radius: 6rpx;
position: absolute;
top: 30rpx;
}
}
}
.noeatting-total {
flex:1;
display: flex;
justify-content: flex-end;
.noeatting-total-item {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 40rpx;
}
.noeatting-number {
height: 40rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 40rpx;
margin: 0 10rpx;
}
}
}
.noeatting-details {
width: 100%;
.noeatting-details-header {
height: 68rpx;
background: #F8F8F8;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.45);
display: flex;
justify-content: space-between;
.noeatting-details-header-item {
display: flex;
justify-content: center;
align-items: center;
width: 25%;
}
.noeatting-details-header-meal {
display: flex;
justify-content: space-around;
align-items: center;
width: 50%;
}
}
.noeatting-details-ul {
width: 100%;
.noeatting-details-list {
height: 96rpx;
background: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #DDDDDD;
.noeatting-details-list-item {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
width: 25%;
display: flex;
justify-content: center;
&.noeatting-details-list-num {
font-size: 32rpx;
}
}
.noeatting-details-list-meal {
width: 50%;
display: flex;
justify-content: space-around;
.noeatting-details-list-meal-item {
width: 50rpx;
height: 40rpx;
.noeatting-details-list-meal-img {
max-width: 100%;
max-height: 100%;
}
}
}
}
}
}
}
}
.noConsumptionData {
width: 100%;
text-align: center;
line-height: 260rpx;
}
}
</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