Skip to content

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

1.新增-校园消费数据H5

parent 7b9ea81f
Hide whitespace changes
Inline Side-by-side
Showing with 1993 additions and 2 deletions
src/common/css/weui.min.css
View file @ 6bebf5dd
This source diff could not be displayed because it is too large. You can view the blob instead.
src/pages.json
View file @ 6bebf5dd
...@@ -573,6 +573,22 @@ ...@@ -573,6 +573,22 @@
"enablePullDownRefresh": false "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": { "globalStyle": {
......
src/pages/ApplyConsumption/businessRecord/components/device/device.vue 0 → 100644
View file @ 6bebf5dd
<template>
<view class="Device">
<!-- 门店数据 -->
<view class="store_data" v-if="!isperiod">
<view class="rowboxh">
<view class="rowl" @tap="selectStore">
<view class="rowltxt2">{{StoreInfo_['storeName']||'全部门店'}}</view>
<image :class="showPicker?'xia':'xiaframes'" style="margin-left: 16rpx;"
:src="ImgUrl+'xzf/h5/xia.png'" mode="aspectFit"></image>
</view>
<view class="rowr">
当前设备 <text class="text">{{storeInfo['onlineDeviceCnt']||0}}</text> 台，离线<text
class="text">{{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>
.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 {
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: 52rpx;
}
.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: 1rpx;
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 @ 6bebf5dd
<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?'xia':'xiaframes'" :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">{{StoreInfo_['storeName']||'全部门店'}}</view>
<image :class="showPicker?'xia':'xiaframes'" style="margin-left: 16rpx;"
:src="ImgUrl+'xzf/h5/xia.png'" mode="aspectFit"></image>
</view>
<view class="rowr">
当前设备 <text class="text">{{storeInfo['onlineDeviceCnt']||0}}</text> 台，离线<text
class="text">{{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;" pivot-text="" stroke-width="8rpx" 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;':''">
<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>
<!-- 无数据 -->
<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: {
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: {
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>
.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 {
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: 52rpx;
}
.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: 1rpx;
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 @ 6bebf5dd
<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" :isperiod="isperiod" :StoreInfo_="StoreInfo_" :flowsList="flowsList"
:storeInfo="storeInfo" @selectTime="selectTime" @selectStore="selectStore"
:starttime="starttime" :endtime="endtime" :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" :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="">
{{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,
}
},
onLoad: function(options) {
},
methods: {
//门店设备
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 || []
const totalCnt = jsonData.data.totalCnt || 0
this.flowsList = backData.map((v, index) => {
v['amount'] = parseFloat(v.amount / 100).toFixed(2)
return v
})
},
// 设备查看明细
async transactionDetails(item, index) {
const loading = Toast.loading('数据加载中...');
console.warn(item, index)
uni.setStorageSync("details", item)
uni.navigateTo({
url: "../transactionDetails/transactionDetails",
success: () => {
loading.clear();
}
})
},
onConfirmStore(value, index) {
this.selectStore()
const StoreInfo_ = this.stores[index]
this.StoreInfo_ = StoreInfo_
// 查询门店交易数据
if (this.active === 0) {
this.StoreFlows(StoreInfo_['id'])
} else {
this.DeviceList(StoreInfo_['id'])
}
},
onChangeStore(picker, value, index) {
},
onCancelStore() {
this.selectStore()
},
// 选择门店
selectStore() {
this.showPicker = !this.showPicker
},
// 组件提交时间
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'])
} else {
this.DeviceList(this.StoreInfo_['id'])
}
},
// 选择时间
selectTime(status) {
this.calendar = status
},
// tab切换
async changeTabs(e) {
// 清空选择的门店信息
this.StoreInfo_ = {}
if (e === 0) {
this.StoreFlows()
} else {
this.DeviceList()
}
}
}
}
</script>
<style>
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 @ 6bebf5dd
/**
* 支付宝商家端查询门店/设备交易数据
*/
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', {})
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']) === 0) {
v['perc'] = 0
} else {
v['perc'] = parseFloat(v.dealAmount / jsonData['totalAmount'])
}
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 @ 6bebf5dd
<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="details['onlineStatus']=='online'">在线</view>
<view class="status" v-if="details['onlineStatus']=='offline'"
style="background-color: rgba(246, 82, 0, 0.08);color: #F65200;">离线</view>
</view>
</view>
<view class="devices_sn">
SN：{{details['deviceId']||''}}
</view>
<view class="rowbox">
<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>
</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,
}
},
onLoad: function(options) {
this.DeviceFlows()
},
methods: {
//设备流水
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
this.dataList = backData.map((v, index) => {
v['amount'] = parseFloat(v.amount / 100).toFixed(2)
return v
})
},
// 组件提交时间
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>
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;
}
.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 {
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: 52rpx;
}
.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: 1rpx;
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/SchoolReport/SchoolReport.vue
View file @ 6bebf5dd
...@@ -278,7 +278,7 @@ ...@@ -278,7 +278,7 @@
:key="index" class="consumer-details-body" :key="index" class="consumer-details-body"
:style="{background:Number.isInteger(index/2)?'#FFFFFF':'#F8F8F7'}"> :style="{background:Number.isInteger(index/2)?'#FFFFFF':'#F8F8F7'}">
<view class="consumer-details-body-item" v-for="(e,i) in item.consumerDetailsArr" <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> <text>{{e}}</text>
</view> </view>
</view> </view>
......
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