Skip to content

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

Merge branch 'v_c_application_feature_240102' into develop

parents 837f132f 0ed6e242
Show whitespace changes
Inline Side-by-side
Showing with 4235 additions and 175 deletions
src/common/css/weui.min.css
View file @ 7aab796c
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/canlendar.vue 0 → 100644
View file @ 7aab796c
<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,
unrecordedZao: false,
unrecordedWu: false,
unrecordedWan: false
}
if (curMonth == currentToday.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])
}
obj = Object.assign(obj, f[0])
}
}
list.push(obj);
begin += oneDayMS;
}
this.changeToday_(currentToday)
this.calendarList = list;
}
},
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: 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: 88rpx;
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 @ 7aab796c
......@@ -440,8 +440,7 @@
"enablePullDownRefresh": false
}
}
, {
}, {
"path": "pages/commonProblem/commonProblem",
"style": {
"navigationBarTitleText": "常见问题",
......@@ -449,154 +448,147 @@
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/problemDetail/problemDetail",
"style" :
{
}, {
"path": "pages/problemDetail/problemDetail",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/socialmailbox/socialmailbox",
"style" :
{
}, {
"path": "pages/socialmailbox/socialmailbox",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "匿名投递故事"
}
}
,{
"path" : "pages/h520221116/h520221116",
"style" :
{
}, {
"path": "pages/h520221116/h520221116",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "亲子沟通，由你定义",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ConsumptionSystem/AbnormalConsumption/AbnormalConsumption",
"style" :
{
}, {
"path": "pages/ConsumptionSystem/AbnormalConsumption/AbnormalConsumption",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "消费异常",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/Home/Home",
"style" :
{
}, {
"path": "pages/ApplyConsumption/Home/Home",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "校园消费",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/CommonProblem/CommonProblem",
"style" :
{
}, {
"path": "pages/ApplyConsumption/CommonProblem/CommonProblem",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "常见问题",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/ConsumptIoninfo/ConsumptIoninfo",
"style" :
{
}, {
"path": "pages/ApplyConsumption/ConsumptIoninfo/ConsumptIoninfo",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "消费记录",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/ConsumptionQuota/ConsumptionQuota",
"style" :
{
}, {
"path": "pages/ApplyConsumption/ConsumptionQuota/ConsumptionQuota",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "消费限额",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/OrderClearSuspicions/OrderClearSuspicions",
"style" :
{
}, {
"path": "pages/ApplyConsumption/OrderClearSuspicions/OrderClearSuspicions",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "待还款订单",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/pendingOrder/pendingOrder",
"style" :
{
}, {
"path": "pages/ApplyConsumption/pendingOrder/pendingOrder",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "待还款订单",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/consumptionDetail/consumptionDetail",
"style" :
{
}, {
"path": "pages/ApplyConsumption/consumptionDetail/consumptionDetail",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "消费详情",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/rechargeDetail/rechargeDetail",
"style" :
{
}, {
"path": "pages/ApplyConsumption/rechargeDetail/rechargeDetail",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "充值详情",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/topupDetail/topupDetail",
"style" :
{
}, {
"path": "pages/ApplyConsumption/topupDetail/topupDetail",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "充值明细",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/consumptionRecord/consumptionRecord",
"style" :
{
}, {
"path": "pages/ApplyConsumption/consumptionRecord/consumptionRecord",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "消费记录",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/pendingOrderDetail/pendingOrderDetail",
"style" :
{
}, {
"path": "pages/ApplyConsumption/pendingOrderDetail/pendingOrderDetail",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "消费详情",
"enablePullDownRefresh": false
}
}, {
"path": "pages/ApplyConsumption/campusReport/campusReport",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/ApplyConsumption/businessRecord/consumeRecord/consumeRecord",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "校园消费数据",
"enablePullDownRefresh": false
}
},
{
"path": "pages/ApplyConsumption/businessRecord/transactionDetails/transactionDetails",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "设备交易明细",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
......
src/pages/ApplyConsumption/Home/Home.vue
View file @ 7aab796c
......@@ -3,7 +3,7 @@
<!-- 头部卡片 -->
<view class="cardInfo"
:style="'background-image: url('+this.$ImgUrl + (HomeDataInfo['vipStatus']==1? 'applyCons/bgm.png':'applyCons/bgm1.png')+')'">
<view class="userInfo">
<view class="userInfo" v-if="!path">
<view class="left">
<view class="useravatar" :style="'background-image: url('+this.$ImgUrl + 'applyCons/icon.png'+')'">
</view>
......@@ -24,7 +24,7 @@
</view>
</view>
<!-- 消费数据 -->
<view class="cdatabox">
<view class="cdatabox" v-if="!path">
<view class="cdatal">
<span class="integer">{{HomeDataInfo['schoolConsumption']['dailySpend_integer']}}</span>
<span class="decimal">.{{HomeDataInfo['schoolConsumption']['dailySpend_decimal']}}</span>
......@@ -41,7 +41,7 @@
</view>
</view>
<!-- -->
<view class="cdatabox2">
<view class="cdatabox2" v-if="!path">
<view class="cdatal"
:style="HomeDataInfo['schoolConsumption']['pendingcharge_decimal']>0?'color: red;':''"
@click="goToPage(1)">
......@@ -72,14 +72,16 @@
</view>
</view>
<!-- 功能菜单 -->
<view class="menuList">
<view class="menuList" v-if="!path">
<view class="menuitem" v-for="(item,index) in menuList" :key="index" @click="menuClick(item,index+1)">
<view class="">
<view class="title">{{item.title||''}}</view>
<view class="sketch">{{item.sketch||''}}</view>
</view>
<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>
......@@ -116,26 +118,29 @@
requestGet,
requestPost
} from '../common/request.js'
// 判断是否支付宝小程序
const AliAppMini = navigator.userAgent.indexOf('AliApp') > -1
export default {
name: "CampusConsumption",
data() {
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']['Auth2']]
[index]
}
}),
......@@ -170,10 +175,15 @@
// 学校 学生id
userInfo: {
schoolId: '',
userId: ''
userId: '',
userType: '',
},
// 消费会员弹框
contractMenber: false,
// 跳转内部页面path
path: '',
// 支付宝小程序
aliMini: AliAppMini
};
},
onLoad(options) {
......@@ -188,6 +198,9 @@
return;
}
this.UserLogin(options['token'])
if (options['path']) {
this.path = options['path'] || ""
}
},
methods: {
// 弹框点击事情
......@@ -199,7 +212,7 @@
}
if (type == 2) {
jWeixin.miniProgram.navigateTo({
url: '/pages/nationalCenterForLesbianRights/index'
url: '/pages/nationalCenterForLesbianRights/index?productId=3'
})
}
this.contractMenber = false
......@@ -219,7 +232,7 @@
return
}
uni.setStorageSync('token', data.data['token'])
this.HomePageData()
await this.HomePageData()
},
// 查询消费会员权益项
async QueryProductContractItem(serviceItemCode = '1008') {
......@@ -236,8 +249,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,9 +278,20 @@
}
data.data['schoolConsumption'] = schoolConsumption
this.HomeDataInfo = data.data
sessionStorage.setItem('HomeDataInfo', JSON.stringify(this.HomeDataInfo))
sessionStorage.setItem('accountId', this.HomeDataInfo['accountId'])
// 查询消费会员权益项
this.QueryProductContractItem()
await this.QueryProductContractItem()
// 20231031
if (this['path']) {
if ('/pages/ApplyConsumption/campusReport/campusReport' == this['path']) {
this.menuClick(this.menuList[4], 5)
return
}
uni.redirectTo({
url: this['path']
})
}
},
// 跳转页面
async goToPage(value) {
......@@ -291,7 +316,7 @@
// 跳转云平台权益中心
async openAzMenber() {
jWeixin.miniProgram.navigateTo({
url: '/pages/nationalCenterForLesbianRights/index'
url: '/pages/nationalCenterForLesbianRights/index?productId=3'
})
},
// 菜单跳转
......@@ -310,7 +335,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: () => {
......@@ -328,6 +354,7 @@
page {
width: 100%;
background: #F1F1F3;
line-height: 1.6;
}
.CampusConsumption {
......
src/pages/ApplyConsumption/businessRecord/components/device/device.vue 0 → 100644
View file @ 7aab796c
<template>
<view class="Device">
<!-- 门店数据 -->
<view class="store_data" v-if="!isperiod">
<view class="rowboxh">
<view class="rowl" @tap="selectStore">
<view class="rowltxt2" style="max-width: 219rpx; white-space: nowrap; overflow-x: clip;text-overflow: ellipsis;">{{StoreInfo_['storeName']||'全部门店'}}</view>
<image :class="showPicker?'xiaframes':'xia'" style="margin-left: 16rpx;"
:src="ImgUrl+'xzf/h5/xia.png'" mode="aspectFit"></image>
</view>
<view class="rowr">
当前设备 <text class="text" style="font-weight: bold;">{{storeInfo['onlineDeviceCnt']||0}}</text> 台，离线<text class="text"
style="color: #F65200 !important;font-weight: bold;">{{storeInfo['offlineDeviceCnt']||0}}</text>台
</view>
</view>
<view class="warning" v-if="storeInfo['offlineDeviceCnt']>0">
<image class="warnpng" style="width: 25rpx;height: 25rpx;margin-left: 25rpx;"
:src="ImgUrl+'xzf/h5/warnpng.png'">
</image>
<text
style="display: inline-block;margin-left: 8rpx;">有{{storeInfo['offlineDeviceCnt']||0}}台设备离线，无法统计准确数据，请尽快处理</text>
</view>
</view>
<!-- 门店交易明细 -->
<view class="store_data_detail" v-if="!isperiod">
<!-- 数据列表 -->
<view class="dataList">
<view class="dataitem" v-for="(item,index) in deviceList_" :key="index"
:style="((index+1)==deviceList_.length)?'border: none;':''">
<view class="row1">
<view class="name">
{{item['deviceName']}}
<text class="status" v-if="item['onlineStatus']=='online'">在线</text>
<text class="status" v-if="item['onlineStatus']=='offline'"
style="background-color: rgba(246, 82, 0, 0.08);color: #F65200;">离线</text>
</view>
<view class="amount" @tap="transactionDetails(item,index)">
查看明细
<image class="rigth" style="width: 15rpx;height: 25rpx;margin-left: 16rpx;"
:src="ImgUrl+'xzf/h5/rigth.png'" mode="aspectFit"></image>
</view>
</view>
<view class="row2 time">
SN：{{item['snCode']}}
</view>
</view>
<!-- 无数据 -->
<view class="nodata" v-if="deviceList_.length==0" style="margin-top: 0;height: 75vh;">
<image :src="ImgUrl+'xzf/h5/nodata.png'" style="width: 399rpx;height: 211rpx;margin-top: 296rpx;"
mode="aspectFit">
</image>
<view class="text1">暂无数据</view>
</view>
</view>
</view>
<!-- 高峰期文案 无数据 -->
<view class="default">
<!-- 高峰期 -->
<view class="gaofengqi" v-if="isperiod">
<image :src="ImgUrl+'xzf/h5/gaofengqi.png'" mode="aspectFit"></image>
<view class="text1">当前为使用高峰期</view>
<view class="text2">（建议避开就餐时段查询）</view>
</view>
<!-- 无数据 -->
<!-- <view class="nodata" v-if="typecheck==2">
<image :src="ImgUrl+'xzf/h5/nodata.png'" mode="aspectFit"></image>
<view class="text1">暂无数据</view>
</view> -->
</view>
</view>
</template>
<script>
import dayjs from "dayjs"
const starttime = dayjs().subtract(1, 'day').format('YYYY/MM/DD')
const endtime = dayjs().format('YYYY/MM/DD')
export default {
name: "Device",
props: {
isperiod: {
type: Boolean,
default: false
},
StoreInfo_: {
type: Object,
default: Object
},
deviceList_: {
type: Array,
default: Array
},
storeInfo: {
type: Object,
default: Object
},
showPicker: {
type: Boolean,
default: false
},
calendar: {
type: Boolean,
default: false
},
starttime: {
type: String,
default: ""
},
endtime: {
type: String,
default: ""
},
ImgUrl: {
type: String,
default: ""
},
ImgUrl2: {
type: String,
default: ""
},
},
data() {
return {}
},
computed: {
},
mounted() {},
computed: {
},
methods: {
// 查看明细
transactionDetails(item, index) {
this.$emit("transactionDetails", item, index)
},
onConfirmStore(value, index) {
console.warn(`当前值：${value}, 当前索引：${index}`);
this.selectStore()
},
onChangeStore(picker, value, index) {
console.warn(`当前值：${value}, 当前索引：${index}`);
},
onCancelStore() {
this.selectStore()
},
// 选择门店
selectStore() {
this.$emit("selectStore", true)
},
formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
const [start, end] = date;
this.calendar = false;
this.starttime = dayjs(start).format('YYYY/MM/DD')
this.endtime = dayjs(end).format('YYYY/MM/DD')
},
selectTime() {
this.calendar = true
}
}
}
</script>
<style lang="scss">
.Device {
.xiaframes {
display: block;
width: 17rpx;
height: 15rpx;
position: relative;
transform: rotate(-90deg);
}
.warning {
display: flex;
align-items: center;
width: 100%;
height: 44rpx;
background: rgba(246, 82, 0, 0.09);
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F65200;
}
.store_data_detail {
width: 686rpx;
min-height: 400rpx;
background: #FFFFFF;
border-radius: 0 0 16rpx 16rpx;
margin: 0 auto;
/* margin-top: 25rpx; */
margin-bottom: 50px;
.dataList {
width: 100%;
/* background: #FFFFFF; */
.dataitem {
margin-left: 32rpx;
height: 154rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #E2E2E2;
flex-direction: column;
justify-content: center;
.name {
height: 40rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
}
.amount {
display: flex;
align-items: center;
height: 44rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0,0,0,0.5);
line-height: 44rpx;
position: absolute;
right: 24rpx;
}
.row1 {
display: flex;
align-items: center;
width: 100%;
// margin-left: 32rpx;
position: relative;
}
.status {
display: inline-block;
width: 64rpx;
height: 40rpx;
background: rgba(1, 203, 136, 0.08);
border-radius: 8rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #01CB88;
text-align: center;
line-height: 40rpx;
margin-left: 8rpx;
}
.row2 {
width: 100%;
height: 44rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.35);
line-height: 44rpx;
// padding-left: 32rpx;
}
}
}
.jiaoyi {
display: flex;
align-items: center;
height: 100rpx;
/* background: #FFFFFF; */
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
padding-left: 24rpx;
}
}
.select_time {
width: 686rpx;
height: 72rpx;
background: #FFFFFF;
border-radius: 36rpx;
margin: 0 auto;
margin-top: 24rpx;
display: flex;
justify-content: center;
align-items: center;
.xia {
width: 17rpx;
height: 15rpx;
position: relative;
}
.time {
width: 32rpx;
height: 32rpx;
position: relative;
}
.content {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
padding: 0 16rpx;
}
}
.tisp {
height: 33rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #868686;
line-height: 33rpx;
margin-left: 48rpx;
margin-top: 12rpx;
}
.store_data {
width: 686rpx;
/* min-height: 890rpx; */
background: #FFFFFF;
/* border-radius: 16rpx; */
margin: 0 auto;
margin-top: 25rpx;
border-radius: 16rpx 16rpx 0 0;
.rowboxh {
width: 638rpx;
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
.rowl {
display: flex;
align-items: center;
}
.rowr {
height: 33rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
line-height: 33rpx;
.text {
color: rgba(0, 0, 0, 0.85) !important;
}
}
.xia {
width: 17rpx;
height: 15rpx;
position: relative;
}
}
.dataList {
width: 638rpx;
/* height: 72rpx; */
margin: 0 auto;
.catering {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 42rpx;
}
.count {
font-size: 24rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: rgba(0, 0, 0, 0.35);
line-height: 28rpx;
margin-left: 22rpx;
}
.amount {
font-size: 28rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: rgba(0, 0, 0, 0.85);
line-height: 32rpx;
position: absolute;
right: 0;
}
.dataitem {
height: 120rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.line {
width: 542rpx;
height: 0.5px;
background-color: #E2E2E2;
position: absolute;
bottom: -30rpx;
}
.ritbox {
position: relative;
width: 542rpx;
}
.weuiicon {
width: 72rpx;
height: 72rpx;
position: relative;
}
}
.rowbox {
height: 168rpx;
display: flex;
align-items: center;
padding-left: 18rpx;
padding-right: 25rpx;
justify-content: space-between;
.rowltxt {
height: 28rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 28rpx;
}
.rowltxt2 {
height: 54rpx;
font-size: 60rpx;
font-family: AlibabaSans102Ver2-Medium, AlibabaSans102Ver2;
font-weight: 500;
color: #333333;
line-height: 54rpx;
margin-top: 18rpx;
}
.rowl {
text-align: left;
height: 100rpx;
margin-top: 18rpx;
}
.rowr {
text-align: right;
height: 100rpx;
}
}
}
.default {}
.gaofengqi,
.nodata {
text-align: center;
margin-top: 341rpx;
}
.gaofengqi {
image {
width: 500rpx;
height: 254rpx;
position: relative;
}
}
.text1 {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.45);
line-height: 40rpx;
}
.text2 {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.25);
line-height: 40rpx;
}
.nodata {
image {
width: 499rpx;
height: 311rpx;
position: relative;
}
}
}
</style>
\ No newline at end of file
src/pages/ApplyConsumption/businessRecord/components/store/store.vue 0 → 100644
View file @ 7aab796c
<template>
<view class="Store">
<!-- 选择时间 -->
<view class="select_time" @tap="selectTime" v-if="!isperiod">
<image class="time" :src="ImgUrl+'xzf/h5/time.png'" mode="aspectFit"></image>
<view class="content">{{starttime}}~{{endtime}}</view>
<image :class="calendar?'xiaframes':'xia'" :src="ImgUrl+'xzf/h5/xia.png'" mode="aspectFit"></image>
</view>
<!-- 门店数据 -->
<view class="store_data" v-if="!isperiod">
<view class="rowboxh">
<view class="rowl" @tap="selectStore">
<view class="rowltxt2"
style="max-width: 219rpx; white-space: nowrap; overflow-x: clip;text-overflow: ellipsis;">
{{StoreInfo_['storeName']||'全部门店'}}</view>
<image :class="showPicker?'xiaframes':'xia'" style="margin-left: 16rpx;"
:src="ImgUrl+'xzf/h5/xia.png'" mode="aspectFit"></image>
</view>
<view class="rowr">
当前设备 <text class="text" style="font-weight: bold;">{{storeInfo['onlineDeviceCnt']||0}}</text>
台，离线<text class="text"
style="color: #F65200 !important;font-weight: bold;">{{storeInfo['offlineDeviceCnt']||0}}</text>台
</view>
</view>
<view class="warning" v-if="storeInfo['offlineDeviceCnt']>0">
<image class="warnpng" style="width: 25rpx;height: 25rpx;margin-left: 25rpx;"
:src="ImgUrl+'xzf/h5/warnpng.png'">
</image>
<text
style="display: inline-block;margin-left: 8rpx;">有{{storeInfo['offlineDeviceCnt']||0}}台设备离线，无法统计准确数据，请尽快处理</text>
</view>
<view class="rowbox">
<view class="rowl">
<view class="rowltxt">交易笔数(笔)</view>
<view class="rowltxt2">{{storeInfo['totalCnt']||0}}</view>
</view>
<view class="rowr">
<view class="rowltxt">营业额(元)</view>
<view class="rowltxt2">{{storeInfo['totalAmount']||0}}</view>
</view>
</view>
<!-- 数据列表 -->
<view class="dataList" v-if="!isperiod">
<view class="dataitem" v-for="(item,index) in storeInfo['cateringData']" :key="index">
<image class="weuiicon" :src="ImgUrl+item['mealTypePng']||'xzf/h5/zao.png'" mode="aspectFit">
</image>
<view class="ritbox">
<view class="" style="display: flex;align-items: center;position: relative;">
<view class="catering">{{item['mealType']}}</view>
<view class="count">{{item['dealCnt']}}笔</view>
<view class="amount">{{item['dealAmount']}}元</view>
</view>
<van-progress style="margin-top: 10rpx;height: 8rpx;" pivot-text="" pivot-color="#E9E7E7;"
color="#01CB88" :percentage="item['perc']" />
<view class="line" v-if="!((index+1)==storeInfo['cateringData'].length)"></view>
</view>
</view>
</view>
</view>
<view class="tisp" v-if="!isperiod">
<text>因校园设备网络波动，数据可能延迟更新</text>
</view>
<!-- 门店交易明细 -->
<view class="store_data_detail" v-if="!isperiod">
<view class="jiaoyi">
交易明细
</view>
<!-- 数据列表 -->
<view class="dataList">
<view class="dataitem" v-for="(item,index) in flowsList" :key="index"
:style="((index+1)==flowsList.length)?'border: none;':''" @tap="transactionDetails(item,index)">
<view class="row1">
<view class="name">
{{item.deviceName||''}}
</view>
<view class="amount">
{{item.amount||''}}元
<image class="rigth" style="width: 15rpx;height: 25rpx;margin-left: 16rpx;"
:src="ImgUrl+'xzf/h5/rigth.png'" mode="aspectFit"></image>
</view>
</view>
<view class="row2 time">
{{item.dealTime||''}}
</view>
</view>
<div class="van-list__finished-text" v-if="totalCnt>0&&(totalCnt==flowsList.length)">没有更多了</div>
<div class="van-list__error-text" v-if="totalCnt!=flowsList.length" @tap="Loadmore">点击加载更多...</div>
<!-- 无数据 -->
<view class="nodata" v-if="flowsList.length==0" style="margin-top: 0;">
<image :src="ImgUrl+'xzf/h5/nodata.png'" style="width: 399rpx;height: 211rpx;" mode="aspectFit">
</image>
<view class="text1">暂无数据</view>
</view>
</view>
</view>
<!-- 高峰期文案 无数据 -->
<view class="default">
<!-- 高峰期 -->
<view class="gaofengqi" v-if="isperiod">
<image :src="ImgUrl+'xzf/h5/gaofengqi.png'" mode="aspectFit"></image>
<view class="text1">当前为使用高峰期</view>
<view class="text2">（建议避开就餐时段查询）</view>
</view>
<!-- 无数据 -->
<!-- <view class="nodata" v-if="typecheck==2">
<image :src="ImgUrl+'xzf/h5/nodata.png'" mode="aspectFit"></image>
<view class="text1">暂无数据</view>
</view> -->
</view>
</view>
</template>
<script>
export default {
name: "Store",
props: {
totalCnt: {
type: Number,
default: 0
},
isperiod: {
type: Boolean,
default: false
},
StoreInfo_: {
type: Object,
default: Object
},
flowsList: {
type: Array,
default: Array
},
storeInfo: {
type: Object,
default: Object
},
showPicker: {
type: Boolean,
default: false
},
calendar: {
type: Boolean,
default: false
},
starttime: {
type: String,
default: ""
},
endtime: {
type: String,
default: ""
},
ImgUrl: {
type: String,
default: ""
},
ImgUrl2: {
type: String,
default: ""
},
},
data() {
return {
typecheck: 2,
}
},
computed: {
},
mounted() {},
computed: {
},
methods: {
// 查看明细
transactionDetails(item, index) {
console.log(11111111);
this.$emit("transactionDetails", item, index)
},
Loadmore() {
this.$emit("Loadmore", true)
},
onConfirmStore(value, index) {
console.warn(`当前值：${value}, 当前索引：${index}`);
this.selectStore()
},
onChangeStore(picker, value, index) {
console.warn(`当前值：${value}, 当前索引：${index}`);
},
onCancelStore() {
this.selectStore()
},
// 选择门店
selectStore() {
this.$emit("selectStore", true)
},
onConfirm(date) {
const [start, end] = date;
// this.calendar = false;
this.starttime = dayjs(start).format('YYYY/MM/DD')
this.endtime = dayjs(end).format('YYYY/MM/DD')
},
selectTime() {
// this.calendar = true
this.$emit("selectTime", true)
}
}
}
</script>
<style lang="scss">
.Store {
.xiaframes {
display: block;
width: 17rpx;
height: 15rpx;
position: relative;
transform: rotate(-90deg);
}
.warning {
display: flex;
align-items: center;
width: 100%;
height: 44rpx;
background: rgba(246, 82, 0, 0.09);
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F65200;
}
.store_data_detail {
width: 686rpx;
min-height: 400rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin: 0 auto;
margin-top: 25rpx;
margin-bottom: 50px;
.dataList {
width: 100%;
/* background: #FFFFFF; */
.dataitem:nth-child(1) {
border-top: 1rpx solid #E2E2E2;
}
.dataitem {
margin-left: 32rpx;
height: 154rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #E2E2E2;
flex-direction: column;
justify-content: center;
.name {
height: 40rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
}
.amount {
display: flex;
align-items: center;
height: 44rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 44rpx;
position: absolute;
right: 22rpx;
}
.row1 {
display: flex;
align-items: center;
width: 100%;
// margin-left: 32rpx;
position: relative;
}
.row2 {
width: 100%;
height: 44rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.35);
line-height: 44rpx;
// padding-left: 32rpx;
}
}
}
.jiaoyi {
display: flex;
align-items: center;
height: 100rpx;
/* background: #FFFFFF; */
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
padding-left: 24rpx;
}
}
.select_time {
width: 686rpx;
height: 72rpx;
background: #FFFFFF;
border-radius: 36rpx;
margin: 0 auto;
margin-top: 24rpx;
display: flex;
justify-content: center;
align-items: center;
.xia {
width: 17rpx;
height: 15rpx;
position: relative;
}
.time {
width: 32rpx;
height: 32rpx;
position: relative;
}
.content {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
padding: 0 16rpx;
}
}
.tisp {
height: 33rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #868686;
line-height: 33rpx;
margin-left: 48rpx;
margin-top: 12rpx;
}
.store_data {
width: 686rpx;
min-height: 890rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin: 0 auto;
margin-top: 25rpx;
.rowboxh {
width: 638rpx;
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
.rowl {
display: flex;
align-items: center;
}
.rowr {
height: 33rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
line-height: 33rpx;
.text {
color: rgba(0, 0, 0, 0.85) !important;
}
}
.xia {
width: 17rpx;
height: 15rpx;
position: relative;
}
}
.dataList {
width: 638rpx;
/* height: 72rpx; */
margin: 0 auto;
.catering {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 42rpx;
}
.count {
font-size: 24rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: rgba(0, 0, 0, 0.35);
line-height: 28rpx;
margin-left: 22rpx;
}
.amount {
font-size: 28rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: rgba(0, 0, 0, 0.85);
line-height: 32rpx;
position: absolute;
right: 0;
}
.dataitem {
height: 120rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.line {
width: 542rpx;
height: 0.5px;
background-color: #E2E2E2;
position: absolute;
bottom: -30rpx;
}
.ritbox {
position: relative;
width: 542rpx;
}
.weuiicon {
width: 72rpx;
height: 72rpx;
position: relative;
}
}
.rowbox {
height: 168rpx;
display: flex;
align-items: center;
padding-left: 18rpx;
padding-right: 25rpx;
justify-content: space-between;
.rowltxt {
height: 28rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 28rpx;
}
.rowltxt2 {
height: 54rpx;
font-size: 60rpx;
font-family: AlibabaSans102Ver2-Medium, AlibabaSans102Ver2;
font-weight: 500;
color: #333333;
line-height: 54rpx;
margin-top: 18rpx;
}
.rowl {
text-align: left;
height: 100rpx;
margin-top: 18rpx;
}
.rowr {
text-align: right;
height: 100rpx;
}
}
}
.default {}
.gaofengqi,
.nodata {
text-align: center;
margin-top: 341rpx;
}
.gaofengqi {
image {
width: 500rpx;
height: 254rpx;
position: relative;
}
}
.text1 {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.45);
line-height: 40rpx;
}
.text2 {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.25);
line-height: 40rpx;
}
.nodata {
image {
width: 499rpx;
height: 311rpx;
position: relative;
}
}
}
</style>
\ No newline at end of file
src/pages/ApplyConsumption/businessRecord/consumeRecord/consumeRecord.vue 0 → 100644
View file @ 7aab796c
<template>
<view class="consumeRecord">
<van-tabs v-model="active" animated sticky color="#01CB88" title-active-color="#1B1B1B"
title-inactive-color="rgba(0,0,0,0.5)" @change="changeTabs">
<van-tab title="门店">
<!-- 标题 -->
<template #title>
<view :class="active!=1?'custstyle':'default'">门店</view>
</template>
<!-- 内容 -->
<template #default>
<Store v-if="active!=1" :totalCnt="totalCnt" :isperiod="isperiod" :StoreInfo_="StoreInfo_"
:flowsList="flowsList" :storeInfo="storeInfo" @transactionDetails="transactionDetails"
@selectTime="selectTime" @selectStore="selectStore" @Loadmore="Loadmore" :starttime="starttime"
:endtime="endtime" :showPicker="showPicker" :calendar="calendar" :ImgUrl="ImgUrl"
:ImgUrl2="ImgUrl2"></Store>
</template>
</van-tab>
<van-tab title="设备">
<!-- 标题 -->
<template #title>
<view :class="active==1?'custstyle':'default'">设备</view>
</template>
<!-- 内容 -->
<template #default>
<Device v-if="active==1" :isperiod="isperiod" :StoreInfo_="StoreInfo_" :deviceList_="deviceList_"
:storeInfo="storeInfo" @transactionDetails="transactionDetails" @selectStore="selectStore"
@selectTime="selectTime" :showPicker="showPicker" :calendar="calendar" :ImgUrl="ImgUrl"
:ImgUrl2="ImgUrl2"></Device>
</template>
</van-tab>
</van-tabs>
<!-- 选择日期组件 -->
<van-calendar v-model="calendar" :allow-same-day="true" :min-date="minDate" :max-range="93" :show-confirm="true" position="bottom"
color="#01CB88" type="range" @confirm="onConfirm" />
<!-- 门店选择 -->
<van-popup v-model="showPicker" round position="bottom">
<view class="" style="height: 600rpx;">
<van-picker title="门店选择" show-toolbar :columns="stores" @confirm="onConfirmStore"
@cancel="onCancelStore" @change="onChangeStore">
<template #option="option">
<view class="" style="white-space: nowrap; text-overflow: ellipsis; width: 100%;text-align: center;">
{{option.storeName}}
</view>
</template>
</van-picker>
</view>
</van-popup>
</view>
</template>
<script>
import Store from "../components/store/store.vue"
import Device from "../components/device/device.vue"
import dayjs from "dayjs"
import isBetween from "dayjs/plugin/isBetween"
dayjs.extend(isBetween)
// const starttime = dayjs().subtract(1, 'day').format('YYYY/MM/DD')
const starttime = dayjs().format('YYYY/MM/DD')
const endtime = dayjs().format('YYYY/MM/DD')
import login from "../mixin/login.js"
// 高峰期限制
// "上午" 06:00:00-08:30:00
// "中午" 11:00:00-13:00:00
// "晚上" 17:00:00-19:00:00
const s1 = dayjs().format('YYYY-MM-DD 06:00:00')
const s2 = dayjs().format('YYYY-MM-DD 08:30:00')
const z1 = dayjs().format('YYYY-MM-DD 11:00:00')
const z2 = dayjs().format('YYYY-MM-DD 13:00:00')
const x1 = dayjs().format('YYYY-MM-DD 17:00:00')
const x2 = dayjs().format('YYYY-MM-DD 19:00:00')
const isperiod = dayjs().isBetween(s1, s2) || dayjs().isBetween(z1, z2) || dayjs().isBetween(x1,
x2)
console.warn("高峰期====>>>", isperiod)
import {
Dialog,
Toast
} from 'vant';
import config from '../../common/config.js'
import {
requestGet,
requestPost
} from '../../common/request.js'
export default {
name: "consumeRecord",
mixins: [login],
components: {
Store,
Device
},
data() {
return {
// 是否高峰期
isperiod,
// 默认时间
starttime,
endtime,
ImgUrl: this.$ImgUrl,
ImgUrl2: this.$ImgUrl + 'xzfalipay/',
active: 0,
// 日历选择弹框
calendar: false,
// 门店选择弹框
showPicker: false,
minDate: new Date(2021, 0, 1),
// 门店列表
stores: [],
// 选择的门店
StoreInfo_: {},
// 门店流水列表数据
flowsList: [],
// 门店流水列表数据
deviceList_: [],
pageIndex: 1,
pageSize: 20,
// 数据总条数
totalCnt: 0
}
},
onLoad: function(options) {
},
methods: {
// 加载更多
Loadmore() {
this.pageIndex += 1
this.StoreFlows(this.StoreInfo_['id'])
},
//门店设备
async DeviceList(storeId) {
// 高峰期禁止请求接口
if (this.isperiod) {
return
}
const loading = Toast.loading('数据加载中...');
let data = await requestPost('/cgi-xpay/app/busi/DeviceList', {
"businessId": 0,
"storeId": storeId || 0
})
loading.clear();
if (data['code'] != 200) {
await Dialog({
title: '温馨提示',
message: "门店设备查询失败",
confirmButtonText: "知道了"
})
return
}
let jsonData = JSON.parse(JSON.stringify(data || {}))
const backData = jsonData.data.backData || []
this.deviceList_ = backData
},
//门店流水
async StoreFlows(storeId) {
// 高峰期禁止请求接口
if (this.isperiod) {
return
}
const loading = Toast.loading('数据加载中...');
let data = await requestPost('/cgi-xpay/app/busi/StoreFlows', {
"businessId": 0,
"startDate": this.starttime.replaceAll("/", "-"),
"endDate": this.endtime.replaceAll("/", "-"),
"pageIndex": this.pageIndex,
"pageSize": this.pageSize,
"storeId": storeId || 0
})
loading.clear();
if (data['code'] != 200) {
await Dialog({
title: '温馨提示',
message: "门店流水查询失败",
confirmButtonText: "知道了"
})
return
}
let jsonData = JSON.parse(JSON.stringify(data || {}))
const backData = jsonData.data.backData || []
this.totalCnt = jsonData.data.totalCnt || 0
if (this.pageIndex == 1) {
this.flowsList = backData.map((v, index) => {
v['amount'] = parseFloat(v.amount / 100).toFixed(2)
return v
})
} else {
const arr = backData.map((v, index) => {
v['amount'] = parseFloat(v.amount / 100).toFixed(2)
return v
})
this.flowsList.push(...arr)
}
},
// 设备查看明细
async transactionDetails(item, index) {
const loading = Toast.loading('数据加载中...');
console.warn(item, index)
uni.setStorageSync("details", item)
uni.navigateTo({
url: `../transactionDetails/transactionDetails?starttime=${this.starttime}&endtime=${this.endtime}`,
success: () => {
loading.clear();
}
})
},
onConfirmStore(value, index) {
this.selectStore()
const StoreInfo_ = this.stores[index]
this.StoreInfo_ = StoreInfo_
// 查询门店交易数据
if (this.active === 0) {
this.StoreFlows(StoreInfo_['id'])
this.StoreData()
} else {
this.DeviceList(StoreInfo_['id'])
this.StoreData()
}
this.showPicker = false
},
onChangeStore(picker, value, index) {
},
onCancelStore() {
this.showPicker = false
},
// 选择门店
selectStore() {
this.showPicker = true
},
// 组件提交时间
onConfirm(date) {
const [start, end] = date;
// this.calendar = false;
this.starttime = dayjs(start).format('YYYY/MM/DD')
this.endtime = dayjs(end).format('YYYY/MM/DD')
this.calendar = false
// 查询门店交易数据
if (this.active === 0) {
this.StoreFlows(this.StoreInfo_['id'])
this.StoreData()
} else {
this.DeviceList(this.StoreInfo_['id'])
this.StoreData()
}
},
// 选择时间
selectTime(status) {
this.calendar = status
},
// tab切换
async changeTabs(e) {
// 清空选择的门店信息
this.StoreInfo_ = {}
this.pageIndex = 1;
this.pageSize = 20;
if (e === 0) {
this.StoreFlows()
this.StoreData()
} else {
this.DeviceList()
this.StoreData()
}
}
}
}
</script>
<style lang="scss">
page {
height: 100vh;
background: #F3F3F3;
}
.consumeRecord {
.default {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
}
.van-tabs__line {
background: #01CB88 !important;
border-radius: 8rpx !important;
width: 68rpx;
height: 6rpx;
}
.custstyle {
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1B1B1B;
}
}
</style>
\ No newline at end of file
src/pages/ApplyConsumption/businessRecord/mixin/login.js 0 → 100644
View file @ 7aab796c
/**
* 支付宝商家端查询门店/设备交易数据
*/
import {
Dialog
} from 'vant';
import config from '../../common/config.js'
import {
requestGet,
requestPost
} from '../../common/request.js'
export default {
data() {
return {
path: "",
// 门店初始化数据
storeInfo: {}
};
},
onLoad: function(options) {
if (!options['token']) {
Dialog({
title: '系统提示',
message: 'token为空！',
confirmButtonText: "知道了"
}).then(res => {
window.close()
})
return;
}
this.UserLogin(options['token'])
if (options['path']) {
this.path = options['path'] || ""
}
},
onShow: function() {
},
onunload: function() {
},
methods: {
//登录获取用户信息
async UserLogin(token) {
let data = await requestPost('/cgi-xpay/app/Login', {
grantType: 'GT_azCloud_business',
code: token,
})
if (data['code'] != 200) {
await Dialog({
title: '温馨提示',
message: data['message'],
confirmButtonText: "知道了"
})
return
}
uni.setStorageSync('token', data.data['token'])
// 门店初始化数据
this.StoreData()
// 门店商家列表
this.StoreList()
},
//门店初始化数据
async StoreData(token) {
let data = await requestPost('/cgi-xpay/app/busi/StoreData', {
"businessId": 0,
"startDate": this.starttime.replaceAll("/", "-"),
"endDate": this.endtime.replaceAll("/", "-"),
"storeId": this.StoreInfo_['id'] || 0
})
if (data['code'] != 200) {
await Dialog({
title: '温馨提示',
message: "门店初始化数据",
confirmButtonText: "知道了"
})
return
}
let jsonData = JSON.parse(JSON.stringify(data.data))
jsonData['offlineDeviceCnt'] = jsonData['offlineDeviceCnt'] || 0
jsonData['onlineDeviceCnt'] = jsonData['onlineDeviceCnt'] || 0
jsonData['totalAmount'] = ((jsonData['totalAmount'] || 0) / 100).toFixed(2)
jsonData['totalCnt'] = jsonData['totalCnt'] || 0
jsonData["cateringData"] = jsonData["cateringData"].map((v, index) => {
if (v['mealType'] == "早餐") {
v['mealTypePng'] = "xzf/h5/zao.png"
}
if (v['mealType'] == "中餐") {
v['mealTypePng'] = "xzf/h5/wu.png"
}
if (v['mealType'] == "晚餐") {
v['mealTypePng'] = "xzf/h5/wan.png"
}
if (v['mealType'] == "夜宵") {
v['mealTypePng'] = "xzf/h5/ye.png"
}
if (v['mealType'] == "夜夜宵") {
v['mealTypePng'] = "xzf/h5/yeye.png"
}
if (parseInt(jsonData['totalAmount'] * 100) === 0) {
v['perc'] = 0
} else {
v['perc'] = parseFloat(v.dealAmount / parseInt(jsonData['totalAmount'] * 100)) * 100
}
v['dealAmount'] = (v['dealAmount'] / 100).toFixed(2)
return v
})
this.storeInfo = jsonData
},
//门商家列表
async StoreList(token) {
let data = await requestPost('/cgi-xpay/app/busi/StoreList', {})
if (data['code'] != 200) {
await Dialog({
title: '温馨提示',
message: "门商家列表查询失败",
confirmButtonText: "知道了"
})
return
}
let jsonData = JSON.parse(JSON.stringify(data.data || []))
this.stores = [{
id: 0,
storeName: "全部门店"
}, ...jsonData]
// 查询门店交易数据
if (this.active === 0) {
this.StoreFlows()
}
}
}
}
\ No newline at end of file
src/pages/ApplyConsumption/businessRecord/transactionDetails/transactionDetails.vue 0 → 100644
View file @ 7aab796c
<template>
<view class="transactionDetails">
<!-- 选择时间 -->
<view class="select_time" @tap="selectTime" v-if="typecheck!=1">
<image class="time" :src="ImgUrl+'xzf/h5/time.png'" mode="aspectFit"></image>
<view class="content">{{starttime}}~{{endtime}}</view>
<image :class="calendar?'xia':'xiaframes'" :src="ImgUrl+'xzf/h5/xia.png'" mode="aspectFit"></image>
</view>
<!-- 门店数据 -->
<view class="store_data" v-if="typecheck!=1">
<view class="rowboxh">
<view class="rowl">
<view class="rowltxt2">{{details['deviceName']||""}}</view>
<view class="status" v-if="onlineStatus=='online'">在线</view>
<view class="status" v-if="onlineStatus=='offline'"
style="background-color: rgba(246, 82, 0, 0.08);color: #F65200;">离线</view>
</view>
</view>
<view class="devices_sn">
SN：{{details['snCode']||''}}
</view>
<view class="warning" v-if="onlineStatus=='offline'">
<image class="warnpng" style="width: 25rpx;height: 25rpx;margin-left: 25rpx;"
:src="ImgUrl+'xzf/h5/warnpng.png'">
</image>
<text style="display: inline-block;margin-left: 8rpx;">当前设备离线，无法统计准确数据，请尽快处理</text>
</view>
<view class="rowbox" :style="onlineStatus=='online'?'border-top: 1rpx solid #E2E2E2;':''">
<view class="rowl">
<view class="rowltxt">交易笔数(笔)</view>
<view class="rowltxt2">{{totalCnt||0}}</view>
</view>
<view class="rowr">
<view class="rowltxt">营业额(元)</view>
<view class="rowltxt2">{{totalAmount||0}}</view>
</view>
</view>
</view>
<!-- 门店交易明细 -->
<view class="store_data_detail" v-if="typecheck!=1">
<!-- 数据列表 -->
<view class="dataList">
<view class="dataitem" v-for="(item,index) in dataList" :key="index"
:style="((index+1)==dataList.length)?'border: none;':''">
<view class="row1">
<view class="name">
{{item['deviceName']}}
</view>
<view class="amount">
{{item['amount']}}元
</view>
</view>
<view class="row2 time">
{{item['dealTime']}}
</view>
</view>
<!-- 无数据 -->
<view class="nodata" v-if="dataList.length==0" style="margin-top: 0;height: 75vh;">
<image :src="ImgUrl+'xzf/h5/nodata.png'" style="width: 399rpx;height: 211rpx;margin-top: 296rpx;"
mode="aspectFit">
</image>
<view class="text1">暂无数据</view>
</view>
<div class="van-list__finished-text" v-if="dataList.length>0&&totalCnt==dataList.length">没有更多了</div>
<div class="van-list__error-text" v-if="dataList.length>0&&totalCnt!=dataList.length" @tap="Loadmore">
点击加载更多...</div>
</view>
</view>
<!-- 高峰期文案 无数据 -->
<view class="default">
<!-- 高峰期 -->
<view class="gaofengqi" v-if="typecheck==1">
<image :src="ImgUrl+'xzf/h5/gaofengqi.png'" mode="aspectFit"></image>
<view class="text1">当前为使用高峰期</view>
<view class="text2">（建议避开就餐时段查询）</view>
</view>
<!-- 无数据 -->
<!-- <view class="nodata" v-if="typecheck==2">
<image :src="ImgUrl+'xzf/h5/nodata.png'" mode="aspectFit"></image>
<view class="text1">暂无数据</view>
</view> -->
</view>
<!-- 选择日期组件 -->
<van-calendar v-model="calendar" :max-range="93" :min-date="minDate" :show-confirm="true" position="bottom"
color="#01CB88" type="range" @confirm="onConfirm" />
</view>
</template>
<script>
import dayjs from "dayjs"
// const starttime = dayjs().subtract(1, 'day').format('YYYY/MM/DD')
const starttime = dayjs().format('YYYY/MM/DD')
const endtime = dayjs().format('YYYY/MM/DD')
import {
Dialog,
Toast
} from 'vant';
import config from '../../common/config.js'
import {
requestGet,
requestPost
} from '../../common/request.js'
export default {
name: "transactionDetails",
mixins: [],
data() {
return {
ImgUrl: this.$ImgUrl,
ImgUrl2: this.$ImgUrl + 'xzfalipay/',
// 默认时间
starttime,
endtime,
// 日历选择弹框
showPicker: false,
calendar: false,
minDate: new Date(2021, 0, 1),
typecheck: 2,
dataList: [],
details: uni.getStorageSync("details"),
totalAmount: '0.00',
totalCnt: 0,
pageIndex: 1,
pageSize: 20,
// 设置状态
onlineStatus: "offline"
}
},
onLoad: function(options) {
if (options['endtime'] && options['starttime']) {
this.starttime = options['starttime']
this.endtime = options['endtime']
}
this.DeviceInfo()
this.DeviceFlows()
},
methods: {
Loadmore() {
this.pageIndex += 1
this.DeviceFlows()
},
//设备详情
async DeviceInfo() {
const loading = Toast.loading('数据加载中...');
let data = await requestPost('/cgi-xpay/app/busi/DeviceInfo', {
"businessId": 0,
"deviceId": this.details['deviceId'] || 0
})
loading.clear();
if (data['code'] != 200) {
await Dialog({
title: '温馨提示',
message: "设备详情查询失败",
confirmButtonText: "知道了"
})
return
}
let jsonData = JSON.parse(JSON.stringify(data || {}))
this.onlineStatus = jsonData.data['backData']['onlineStatus'] || "offline"
},
//设备流水
async DeviceFlows() {
const loading = Toast.loading('数据加载中...');
let data = await requestPost('/cgi-xpay/app/busi/DeviceFlows', {
"businessId": 0,
"startDate": this.starttime.replaceAll("/", "-"),
"endDate": this.endtime.replaceAll("/", "-"),
"pageIndex": this.pageIndex,
"pageSize": this.pageSize,
"deviceId": this.details['deviceId'] || 0
})
loading.clear();
if (data['code'] != 200) {
await Dialog({
title: '温馨提示',
message: "设备流水查询失败",
confirmButtonText: "知道了"
})
return
}
let jsonData = JSON.parse(JSON.stringify(data || {}))
const backData = jsonData.data.backData || []
this.totalAmount = parseFloat(jsonData.data.totalAmount / 100).toFixed(2)
this.totalCnt = jsonData.data.totalCnt || 0
if (this.pageIndex == 1) {
this.dataList = backData.map((v, index) => {
v['amount'] = parseFloat(v.amount / 100).toFixed(2)
return v
})
} else {
const arr = backData.map((v, index) => {
v['amount'] = parseFloat(v.amount / 100).toFixed(2)
return v
})
this.dataList.push(...arr)
}
},
// 组件提交时间
onConfirm(date) {
const [start, end] = date;
this.starttime = dayjs(start).format('YYYY/MM/DD')
this.endtime = dayjs(end).format('YYYY/MM/DD')
this.calendar = false
// 选择时间
this.DeviceFlows()
},
// 选择时间
selectTime() {
this.calendar = true
},
}
}
</script>
<style lang="scss">
page {
height: 100vh;
background: #F3F3F3;
}
.status {
display: inline-block;
width: 64rpx;
height: 40rpx;
background: rgba(1, 203, 136, 0.08);
border-radius: 8rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #01CB88;
text-align: center;
line-height: 40rpx;
margin-left: 8rpx;
}
.devices_sn {
height: 44rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.35);
line-height: 44rpx;
margin-left: 24rpx;
}
.transactionDetails {
.xiaframes {
display: block;
width: 17rpx;
height: 15rpx;
position: relative;
transform: rotate(-90deg);
}
.warning {
display: flex;
align-items: center;
width: 100%;
height: 44rpx;
background: rgba(246, 82, 0, 0.09);
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F65200;
margin-top: 10rpx;
}
.store_data_detail {
width: 686rpx;
min-height: 400rpx;
background: #FFFFFF;
border-radius: 0 0 16rpx 16rpx;
margin: 0 auto;
/* margin-top: 25rpx; */
margin-bottom: 50px;
.dataList {
width: 100%;
/* background: #FFFFFF; */
.dataitem {
margin-left: 32rpx;
height: 154rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #E2E2E2;
flex-direction: column;
justify-content: center;
.name {
height: 40rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
}
.amount {
display: flex;
align-items: center;
height: 44rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 44rpx;
position: absolute;
right: 25rpx;
}
.row1 {
display: flex;
align-items: center;
width: 100%;
// margin-left: 32rpx;
position: relative;
}
.row2 {
width: 100%;
height: 44rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.35);
line-height: 44rpx;
// padding-left: 32rpx;
}
}
}
.jiaoyi {
display: flex;
align-items: center;
height: 100rpx;
/* background: #FFFFFF; */
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
padding-left: 24rpx;
}
}
.select_time {
width: 686rpx;
height: 72rpx;
background: #FFFFFF;
border-radius: 36rpx;
margin: 0 auto;
margin-top: 24rpx;
display: flex;
justify-content: center;
align-items: center;
.xia {
width: 17rpx;
height: 15rpx;
position: relative;
}
.time {
width: 32rpx;
height: 32rpx;
position: relative;
}
.content {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
padding: 0 16rpx;
}
}
.tisp {
height: 33rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #868686;
line-height: 33rpx;
margin-left: 48rpx;
margin-top: 12rpx;
}
.store_data {
width: 686rpx;
/* min-height: 890rpx; */
background: #FFFFFF;
/* border-radius: 16rpx; */
margin: 0 auto;
margin-top: 25rpx;
border-radius: 16rpx 16rpx 0 0;
.rowboxh {
width: 638rpx;
/* height: 100rpx; */
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding-top: 24rpx;
.rowl {
display: flex;
align-items: center;
}
.rowr {
height: 33rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
line-height: 33rpx;
.text {
color: rgba(0, 0, 0, 0.85) !important;
}
}
.xia {
width: 17rpx;
height: 15rpx;
position: relative;
}
}
.dataList {
width: 638rpx;
/* height: 72rpx; */
margin: 0 auto;
.catering {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 42rpx;
}
.count {
font-size: 24rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: rgba(0, 0, 0, 0.35);
line-height: 28rpx;
margin-left: 22rpx;
}
.amount {
font-size: 28rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: rgba(0, 0, 0, 0.85);
line-height: 32rpx;
position: absolute;
right: 0;
}
.dataitem {
height: 120rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.line {
width: 542rpx;
height: 0.5px;
background-color: #E2E2E2;
position: absolute;
bottom: -30rpx;
}
.ritbox {
position: relative;
width: 542rpx;
}
.weuiicon {
width: 72rpx;
height: 72rpx;
position: relative;
}
}
.rowbox {
height: 168rpx;
display: flex;
align-items: center;
padding-left: 18rpx;
padding-right: 25rpx;
justify-content: space-between;
margin-top: 10rpx;
.rowltxt {
height: 28rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 28rpx;
}
.rowltxt2 {
height: 54rpx;
font-size: 60rpx;
font-family: AlibabaSans102Ver2-Medium, AlibabaSans102Ver2;
font-weight: 500;
color: #333333;
line-height: 54rpx;
margin-top: 18rpx;
}
.rowl {
text-align: left;
height: 100rpx;
margin-top: 18rpx;
}
.rowr {
text-align: right;
height: 100rpx;
}
}
}
.default {}
.gaofengqi,
.nodata {
text-align: center;
margin-top: 341rpx;
}
.gaofengqi {
image {
width: 500rpx;
height: 254rpx;
position: relative;
}
}
.text1 {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.45);
line-height: 40rpx;
}
.text2 {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.25);
line-height: 40rpx;
}
.nodata {
image {
width: 499rpx;
height: 311rpx;
position: relative;
}
}
}
</style>
\ No newline at end of file
src/pages/ApplyConsumption/campusReport/campusReport.vue 0 → 100644
View file @ 7aab796c
<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" @click="shareHandler">
<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><text class="light"> {{cateringAbnormalTypeGroupList.length}}
</text>天</text>
在食堂的消费出现异常，{{campusConsumerReportInfo.avgMessage}}
</li>
</view>
</view>
</view>
<!-- 遮罩层 -->
<template v-if="false">
<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 class="toOpen" @click="openAzMenber"><img :src="ImgUrl+'user/toOpen.png'" alt=""
class="img"> </div>
</div>
</div>
</template>
</view>
<template>
<!-- 生活费额度 -->
<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">{{cateringAbnormalTypeGroupList.length}} </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 || 0}}</text>
元，午餐<text
class="prefer_light">{{userDealReportListAndSumObj.wuSumAmount || 0}}</text>元，晚餐<text
class="prefer_light">{{userDealReportListAndSumObj.wanSumAmount || 0}}</text>元</span>
</view>
<view class="detail_lists">
<view class="listsHead"
v-if="userDealReportListAndSumObj.list && 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" :style="aliMini?'visibility: hidden;':''">
<view class="footer_left">
<view class="footer_left_top">到期后将无法查看完整报告</view>
<view class="footer_left_bottom">有效期至<span class="special">{{vipExpiredDt}}</span>，剩余<span
class="special">{{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';
import {
requestGet,
requestPost
} from '../common/request.js'
import config from '../common/config.js'
// 判断是否支付宝小程序
const AliAppMini = navigator.userAgent.indexOf('AliApp') > -1
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: "", // 有效期
vipDaysRemaining: 0, //有效天数
// 支付宝小程序
aliMini: AliAppMini
}
},
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() || 0
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)
},
mounted() {
console.log(this.dataRangeArr, 'dataRangeArr')
this.homeDataInfo = JSON.parse(sessionStorage.getItem('HomeDataInfo'))
this.QueryProductContractItemDetailResp(config['ServiceEnum']['Auth2']);
this.getCampusConsumerReport()
if (this.homeDataInfo.vipStatus === 1) {
this.isVip = true;
}
this.getCateringAbnormalTypeGroupList()
console.log(this.isVip, 'isVip')
this.columns = this.dataRangeArr.map(x => x.month)
console.log(this.columns, 'columns')
},
methods: {
// 查询消费会员权益项
async QueryProductContractItemDetailResp(serviceItemCode = '1002') {
console.log(config['ServiceEnum']['Auth2'], 'Auth2', this.homeDataInfo)
const data = await requestPost('/cgi-xpay/app/h5/QueryProductContractItemDetail', {
accountId: this.homeDataInfo['accountId'],
serviceItemCode
})
if (data['code'] != 200) {
await Dialog({
title: '温馨提示',
message: data['message'],
confirmButtonText: "知道了"
})
return
}
this.vipExpiredDt = data.data.expiredDt ? (moment(data.data.expiredDt).format('YYYY年MM月DD日')) : ''
this.vipDaysRemaining = data.data.daysRemaining || 0
console.log(data.data, 'result')
},
shareHandler: function() {
let htmlCanvasImg = document.getElementsByClassName("htmlCanvasImg")[0];
if (htmlCanvasImg) {
htmlCanvasImg.parentNode.removeChild(htmlCanvasImg);
}
this.toImage();
this.dialogShow = true;
},
toImage: function() {
this.$nextTick(() => {
html2canvas(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 || '1') + '日'
if (Reflect.has(today, 'unrecordedZao')) {
this.today.zao = today.unrecordedZao || false
}
if (Reflect.has(today, 'unrecordedWu')) {
this.today.wu = today.unrecordedWu || false
}
if (Reflect.has(today, 'unrecordedWan')) {
this.today.wan = today.unrecordedWan || false
}
},
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)
this.getCampusConsumerReport()
// if (this.homeDataInfo.vipStatus === 1) {
// this.initPieCharts()
this.getCateringAbnormalTypeGroupList()
// }
this.pickerShow = !this.pickerShow;
this.isShow = false;
},
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'),
header: {
'content-type': 'application/x-www-form-urlencoded'
},
};
try {
let data = await requestPost(
`${gHost}/cgi-xpay/app/ali-app/bill/campusConsumerReport/getCampusConsumerReport`,
params)
if (data.code != 10000) {
uni.showToast({
icon: 'none',
title: data.message || '发生异常!'
})
return
}
this.campusConsumerReportInfo = data.data;
this.initPieCharts()
} catch (e) {
console.warn(e)
//TODO handle the exception
uni.showToast({
icon: 'none',
title: "发生异常错误!"
})
}
return
},
// 用户消费未就餐信息
async getCateringAbnormalTypeGroupList() {
const this_ = this;
this.cateringAbnormalTypeGroupList.length = 0;
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 : "",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
};
try {
let data = await requestPost(
`${gHost}/cgi-xpay/app/ali-app/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?productId=3'
})
},
// 查询订单流水用户分餐明细及汇总统计
async getUserDealReportListAndSum() {
const this_ = this;
let params = {
accountId: this.homeDataInfo.accountId,
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 : "",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
};
try {
let data = await requestPost(`${gHost}/cgi-xpay/app/ali-app/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')
},
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 || 0,
name: '超市'
},
{
value: this.campusConsumerReportInfo.canteenAmountF || 0,
name: '食堂'
},
{
value: this.campusConsumerReportInfo.otherAmountF || 0,
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: 10,
length2: 20
}
},
{
type: 'pie',
data: [{
value: this.campusConsumerReportInfo.supermarketAmountF || 0,
},
{
value: this.campusConsumerReportInfo.canteenAmountF || 0,
},
{
value: this.campusConsumerReportInfo.otherAmountF || 0,
}
],
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>
.campusReport {
width: 100vw;
min-height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.htmlCanvasTxt {
height: 154rpx;
width: 100%;
padding: 42rpx 0 20rpx 29rpx;
box-sizing: border-box;
.htmlCanvasTxt1 {
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 44rpx;
}
.htmlCanvasTxt2 {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 44rpx;
}
}
.htmlCanvasBox {
overflow: scroll;
height: 943rpx;
border-radius: 30rpx;
margin: 0 24rpx 25rpx;
}
.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;
position: relative;
.toOpen {
position: absolute;
right: 19rpx;
top: 16rpx;
width: 126rpx;
height: 47rpx;
.img {
width: 100%;
height: 100%;
}
}
}
.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 @ 7aab796c
......@@ -486,6 +486,7 @@
})
}
this.dataRangeArr = tmpArr
},
methods: {
consumerChange(e) {
......
src/pages/SchoolReport/SchoolReport.vue
View file @ 7aab796c
......@@ -278,7 +278,7 @@
:key="index" class="consumer-details-body"
:style="{background:Number.isInteger(index/2)?'#FFFFFF':'#F8F8F7'}">
<view class="consumer-details-body-item" v-for="(e,i) in item.consumerDetailsArr"
:class="i?'':'consumer-details-body-data'">
:class="i?'':'consumer-details-body-data'" :key="i">
<text>{{e}}</text>
</view>
</view>
......@@ -1169,7 +1169,7 @@
</template>
<script>
import html2cancas from "html2canvas"
// import html2cancas from "html2canvas"
var gHost = "https://" + window.location.host;
if (window.location.protocol != "https:") {
gHost = "https://fpdev.xiaopay.net";
......@@ -1618,7 +1618,7 @@
},
toImage: function() {
this.$nextTick(() => {
html2cancas(document.getElementsByClassName("tainer")[0], {
html2canvas(document.getElementsByClassName("tainer")[0], {
useCORS: true,
// 解决截图不完整问题
scale: 1,
......
src/template.h5.html
View file @ 7aab796c
......@@ -11,6 +11,7 @@
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/src/js/html2canvas.js"></script>
<script src="//xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/src/js/jquery-1.8.0.min.js" async="async"></script>
<script src="//xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/src/js/weui.min.js" async="async"></script>
<script src="//xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/src/js/jweixin-1.6.0.js"></script>
......
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