Skip to content

X
xzf_uniapp-wechat-web
Commit 8feaa579 authored by 袁玲利's avatar 袁玲利
Browse files
Options

校园报告

parent a22add4e
Hide whitespace changes
Inline Side-by-side
Showing with 1722 additions and 10 deletions
src/components/canlendar.vue 0 → 100644
View file @ 8feaa579
<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.value=='2023-08-23'||item.value=='2023-08-18'||item.value=='2023-08-28'?'signdate':'',item.value===currentDay?'today':'']">
<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 {
data() {
return {
current: {}, // 当前时间
weekList: ['一', '二', '三', '四', '五', '六', '日'],
calendarList: [], // 用于遍历显示
shareDate: new Date()
}
},
computed: {
// 显示当前时间
currentDateStr() {
let {
year,
month
} = this.current;
return `${year}年${this.pad(month + 1)}月`;
}
},
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() {
// 初始化当前时间
this.setCurrent();
this.calendarCreator();
},
// 判断当前月有多少天
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 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;
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;
while (begin <= end) {
this.shareDate.setTime(begin);
let year = this.shareDate.getFullYear();
let curMonth = this.shareDate.getMonth();
let date = this.shareDate.getDate();
list.push({
year: year,
month: curMonth,
date: date,
disable: curMonth !== month,
value: this.stringify(year, curMonth, date)
});
begin += oneDayMS;
}
this.calendarList = list;
console.log(list, 'calendarList')
}
},
}
</script>
<style>
.calendar-wrapper {
width: 100%;
height: auto;
overflow: hidden;
}
.calendar-week {
display: flex;
align-items: center;
text-align: center;
width: 690rpx;
height: 74rpx;
background: #F7FAF8;
font-size: 26rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0,0,0,0.85);
line-height: 37rpx
}
.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: 88rpx;
height: 88rpx;
box-sizing: border-box;
padding-top: 28rpx;
border-radius: 22rpx;
margin: 5rpx;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 0.75);
line-height: 45rpx;
flex-direction: column;
}
.calendar-item.disabled {
color: rgba(0, 0, 0, 0.1);
}
.signdate {
border-radius: 22rpx;
background-color: rgba(249, 121, 63, 0.1);
color: #F9793F;
line-height: 28rpx;
height: 87rpx;
padding-top: 0rpx;
}
.icons {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F9793F;
line-height: 28rpx;
margin-bottom: 4rpx;
}
.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 @ 8feaa579
...@@ -598,6 +598,15 @@ ...@@ -598,6 +598,15 @@
} }
} }
,{
"path" : "pages/ApplyConsumption/campusReport/campusReport",
"style" :
{
"navigationBarTitleText": "校园报告",
"enablePullDownRefresh": false
}
}
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
......
src/pages/ApplyConsumption/Home/Home.vue
View file @ 8feaa579
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
<view class="sketch">{{item.sketch||''}}</view> <view class="sketch">{{item.sketch||''}}</view>
</view> </view>
<view class="icon"> <view class="icon">
<image :src="item.icon" mode="aspectFit"></image> <image :src="index+1 != 5 ? item.icon : 'https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/applyCons/menu3.png'" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
...@@ -122,20 +122,21 @@ ...@@ -122,20 +122,21 @@
return { return {
ImgUrl: this.$ImgUrl, ImgUrl: this.$ImgUrl,
ImgUrl2: this.$ImgUrl + 'xzfalipay/', ImgUrl2: this.$ImgUrl + 'xzfalipay/',
menuList: Array(4).fill(1).map((v, index) => { menuList: Array(5).fill(1).map((v, index) => {
return { return {
path: ['../ConsumptIoninfo/ConsumptIoninfo', '../ConsumptionQuota/ConsumptionQuota', path: ['../ConsumptIoninfo/ConsumptIoninfo', '../ConsumptionQuota/ConsumptionQuota',
'/pages/ConsumptionSystem/AbnormalConsumption/AbnormalConsumption', '/pages/ConsumptionSystem/AbnormalConsumption/AbnormalConsumption',
'../CommonProblem/CommonProblem' '../CommonProblem/CommonProblem', '../campusReport/campusReport'
][index], ][index],
title: ['消费记录', '消费限额', '消费异常', '常见问题'][index], title: ['消费记录', '消费限额', '消费异常', '常见问题', '校园报告'][index],
sketch: ['消费记录 笔笔可查', '设置额度 管控消费', '消费异常 每日提醒', '使用疑问 一一解答'][index], sketch: ['消费记录 笔笔可查', '设置额度 管控消费', '消费异常 每日提醒', '使用疑问 一一解答', '校园报告'][index],
icon: this.$ImgUrl + `applyCons/menu${index+1}.png`, icon: this.$ImgUrl + `applyCons/menu${index+1}.png`,
// 是否需要鉴权 // 是否需要鉴权
auth: [true, true, true, false][index], auth: [true, true, true, false, true][index],
// 鉴权服务项code // 鉴权服务项code
serviceItemCode: [config['ServiceEnum']['Auth10'], config['ServiceEnum']['Auth8'], config[ serviceItemCode: [config['ServiceEnum']['Auth10'], config['ServiceEnum']['Auth8'], config[
'ServiceEnum']['Auth11'], ''] 'ServiceEnum']['Auth11'], '', config[
'ServiceEnum']['Auth02']]
[index] [index]
} }
}), }),
...@@ -166,7 +167,8 @@ ...@@ -166,7 +167,8 @@
// 学校 学生id // 学校 学生id
userInfo: { userInfo: {
schoolId: '', schoolId: '',
userId: '' userId: '',
userType: '',
}, },
// 消费会员弹框 // 消费会员弹框
contractMenber: false, contractMenber: false,
...@@ -233,7 +235,8 @@ ...@@ -233,7 +235,8 @@
} }
this.userInfo = { this.userInfo = {
schoolId: data.data['schoolId'], schoolId: data.data['schoolId'],
userId: data.data['userId'] userId: data.data['userId'],
userType: data.data['userType'] || ''
} }
return data.data['result'] return data.data['result']
}, },
...@@ -304,7 +307,8 @@ ...@@ -304,7 +307,8 @@
} }
} }
const query = const query =
`?name=${this.HomeDataInfo['userName']}&userId=${this.userInfo['userId']}&schoolId=${this.userInfo['schoolId']}` `?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({ uni.switchTab({
url: item.path + query, url: item.path + query,
fail: () => { fail: () => {
......
src/pages/ApplyConsumption/campusReport/campusReport.vue 0 → 100644
View file @ 8feaa579
<template>
<view>
<view class="info">
<view class="left">
<img :src="ImgUrl+'user/student.png'" alt="">
<view class="message">
<span class="name">宁哲言</span>
<span class="classInfo">三年级 2班</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">
<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></Canlendar>
</view>
<!-- 底部 -->
<view class="dining_footer">
<img :src="ImgUrl+'user/rectangle.png'" alt="">
<view class="dining_date">
12月26日
</view>
<view class="dining_info">
<view class="item dingbre">
<span>早餐</span>
<view class="dining_img">
<img :src="ImgUrl+'user/eat.png'" alt="">
</view>
</view>
<view class="item">
<span>中餐</span>
<view class="dining_icon">
<span>缺</span>
</view>
</view>
<view class="item">
<span>晚餐</span>
<view class="dining_icon">
<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">2023年12月31</span>日，剩余<span
class="special">8</span>天</view>
</view>
<view class="footer_right">
<span>延长权益</span>
</view>
</view>
</template>
</view>
</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 Canlendar from '@/components/canlendar.vue'
// 时间处理模块
import moment from 'moment'
import {
Dialog,
Toast
} from 'vant';
export default {
name: 'campusReport',
data() {
return {
// 是否为会员
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: []
}, //订单流水用户分餐明细及汇总统计
}
},
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()
},
async mounted() {
console.log(this.dataRangeArr, 'dataRangeArr')
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: {
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))
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: '2882955', //getQueryParams('userId'),
schoolId: '90118', //getQueryParams('schoolId'),
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: '4145529', //getQueryParams('userId'),
schoolId: '90118', //getQueryParams('schoolId'),
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
}
this.cateringAbnormalTypeGroupList = data.data;
console.log(data, '用户消费未就餐信息')
} catch (e) {
console.warn(e)
//TODO handle the exception
uni.showToast({
icon: 'none',
title: "发生异常错误!"
})
}
return
},
// 查询订单流水用户分餐明细及汇总统计
async getUserDealReportListAndSum() {
const this_ = this;
let params = {
accountId: 61,
userId: '2882955', //getQueryParams('userId'),
schoolId: '90118', //getQueryParams('schoolId'),
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
},
// 获取当前日期
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())
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;
}
.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 @ 8feaa579
...@@ -486,6 +486,7 @@ ...@@ -486,6 +486,7 @@
}) })
} }
this.dataRangeArr = tmpArr this.dataRangeArr = tmpArr
}, },
methods: { methods: {
consumerChange(e) { consumerChange(e) {
......
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