Skip to content

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

学生消费报告

parent 61ae8d1f
Hide whitespace changes
Inline Side-by-side
Showing with 571 additions and 4 deletions
src/main.js
View file @ e7193ddb
......@@ -26,8 +26,8 @@ Vue.use(Vant);
// echarts图标
// var echarts = require('echarts')
// Vue.prototype.$echarts = echarts
var echarts = require('echarts')
Vue.prototype.$echarts = echarts
// console.log(echarts);
// 微信JSSDK
......
src/pages.json
View file @ e7193ddb
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/ConsumptionReport/ConsumptionReport",
"style": {
"navigationBarTitleText": "消费报告",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/index",
"style": {
......@@ -12,7 +20,8 @@
"titleNView": "transparent"
}
}
}, {
},
{
"path": "pages/WxworkTearch/WxworkTearch",
"style": {
"navigationBarTitleText": "企业微信教职工采集签约助手",
......@@ -20,7 +29,8 @@
"navigationStyle": "custom"
}
}, {
},
{
"path": "pages/wxWorkAuth/wxWorkAuth",
"style": {
"navigationBarTitleText": "校智付",
......
src/pages/ConsumptionReport/ConsumptionReport.vue 0 → 100644
View file @ e7193ddb
<template>
<view class="consumption-report-container">
<view class="consumption-report-header">
<view class="consumption-report-header-item">
<van-dropdown-menu active-color="#1989fa" :overlay="isoverlay">
<van-dropdown-item @change="handlerStudentNameChange" :value="studentNameValue"
:options="studentNameOption" />
</van-dropdown-menu>
</view>
<view class="consumption-report-header-item consumption-report-date">
<van-dropdown-menu active-color="#1989fa" :overlay="isoverlay">
<van-dropdown-item :value="dateValue" @change="handlerDateChange" :options="dateOption" />
</van-dropdown-menu>
</view>
</view>
<view class="consumption-report-context">
<view class="consumption-report-card-one">
<view class="consumption-report-card-one-item">
<view class="consumption-total-number">
<view class="consumption-total-number-item">
650.80
</view>
<view class="consumption-total-number-trend">
<view class="consumption-total-number-trend-item">
+142.50
</view>
<view class="consumption-total-number-trend-item consumption-total-number-trend-percent">
20%
</view>
</view>
</view>
<view class="consumption-total-text">
<view class="consumption-total-text-item">
本周消费总金额(元)
</view>
<view class="consumption-total-text-contrast">
<view class="consumption-total-text-contrast-item">
环比上周
</view>
<view class="consumption-total-text-contrast-img">
<image class="consumption-total-text-trend-img" src="../../static/images/trend.png">
</image>
</view>
</view>
</view>
</view>
<view class="consumption-report-card-one-item">
<view class="no-eatting-total-detail">
<view class="no-eatting-total-detail-item">
<text class="no-eatting-total-detail-item-num">
9
</text>次
</view>
<view class="no-eatting-total-detail-item">
<text class="no-eatting-total-detail-item-num">
5
</text>天
</view>
</view>
<view class="no-eatting-total-text">
<view class="no-eatting-total-text-item">
未就餐次数
</view>
<view class="no-eatting-total-text-item">
未就餐次数
</view>
</view>
</view>
</view>
<view class="consumption-report-card-two">
<view class="consumption-report-card-two-title">
<view class="consumption-report-card-two-title-image">
<image class="consumption-report-card-two-title-img"
src="../../static/images/dailyConsumptionTrend.png"></image>
</view>
<view class="consumption-report-card-two-title-text">
日消费趋势
<view class="consumption-report-card-two-title-text-deline">
</view>
</view>
</view>
<view class="average-daily-consumption">
<view class="average-daily-consumption-item">
<text>¥</text>
<text class="average-daily-consumption-item-num">150.20</text>
</view>
<view class="average-daily-consumption-item average-daily-consumption-item-orange">
<text>¥</text>
<text class="consumption-daily-trend-item-num">185.25</text>
</view>
</view>
<view class="average-daily-consumption-contrast">
<view class="average-daily-consumption-student">
</view>
<view class="average-daily-consumption-class">
</view>
</view>
</view>
<view class="consumption-report-card-three">
<view class="consumption-report-card-three-title">
<view class="consumption-report-card-three-title-image">
<image class="consumption-report-card-three-title-img"
src="../../static/images/consumerPreferences.png"></image>
</view>
<view class="consumption-report-card-three-title-text">
消费偏好
<view class="consumption-report-card-three-title-text-deline">
</view>
</view>
</view>
</view>
<view class="consumption-report-card-four">
<view class="consumption-report-card-four-title">
<view class="consumption-report-card-four-title-image">
<image class="consumption-report-card-four-title-img" src="../../static/images/notEatting.png">
</image>
</view>
<view class="consumption-report-card-four-title-text">
未就餐详情
<view class="consumption-report-card-four-title-text-deline">
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ConsumptionReport',
data() {
return {
isoverlay: false,
studentNameValue: 0,
dateValue: 'a',
studentNameOption: [{
text: '宁哲桂',
value: 0
},
{
text: '张三',
value: 1
},
{
text: '李四',
value: 2
},
],
dateOption: [{
text: '12月06日~12月12日',
value: 'a'
},
{
text: '11月29日~12月05日',
value: 'b'
},
{
text: '11月22日~11月28日',
value: 'c'
},
],
}
},
methods: {
handlerStudentNameChange(value) {
this.studentNameValue = value
},
handlerDateChange(value) {
this.dateValue = value
}
}
}
</script>
<style lang="scss" scoped>
*{
margin: 0;
padding: 0;
}
.consumption-report-container {
width: 750rpx;
height: 2616rpx;
background: #F6F6F6;
position: relative;
.consumption-report-header {
height: 330rpx;
width: 100%;
background: url(../../static/images/headerbgm.png) no-repeat;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-top: 54rpx;
.consumption-report-header-item {
width: 200rpx;
line-height: 48rpx;
/deep/ .van-dropdown-menu__item {
display: flex;
justify-content: flex-start;
align-items: center;
}
/deep/ .van-dropdown-menu__title {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
padding: 0 16rpx 0 0;
}
/deep/ .van-dropdown-menu__bar {
background: rgb(18, 201, 174);
}
/deep/ .van-dropdown-item__content {
position: absolute;
}
&.consumption-report-date {
width: 280rpx;
/deep/ .van-dropdown-menu__title {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
}
}
}
.consumption-report-context {
padding: 0 20rpx;
box-sizing: border-box;
.consumption-report-card-one {
height: 357rpx;
width: 710rpx;
background: #FFFFFF;
border-radius: 24rpx;
position: absolute;
top: 122rpx;
padding: 47rpx 42rpx 38rpx 39rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-direction: column;
.consumption-report-card-one-item {
height: 110rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
.consumption-total-number {
height: 74rpx;
display: flex;
justify-content: space-between;
align-items: center;
.consumption-total-number-item {
font-size: 60rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #000000;
line-height: 74rpx;
flex: 1;
}
.consumption-total-number-trend {
flex: 1;
display: flex;
justify-content: flex-end;
.consumption-total-number-trend-item {
height: 42rpx;
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #FA8C15;
line-height: 42rpx;
&.consumption-total-number-trend-percent {
color: #EF7D00;
margin-left: 22rpx;
}
}
}
}
.consumption-total-text {
height: 37rpx;
display: flex;
justify-content: space-between;
align-items: center;
.consumption-total-text-item {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 37rpx;
}
.consumption-total-text-contrast {
display: flex;
justify-content: flex-end;
align-items: center;
.consumption-total-text-contrast-item {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 37rpx;
}
.consumption-total-text-contrast-img {
margin: -8rpx 0 0 10rpx;
width: 20rpx;
height: 25rpx;
line-height: 0;
.consumption-total-text-trend-img {
width: 100%;
height: 100%;
}
}
}
}
.no-eatting-total-detail {
display: flex;
justify-content: space-between;
height: 70rpx;
.no-eatting-total-detail-item {
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #000000;
line-height: 70rpx;
.no-eatting-total-detail-item-num {
font-size: 60rpx;
margin-right: 10rpx;
}
}
}
.no-eatting-total-text {
display: flex;
justify-content: space-between;
height: 40rpx;
.no-eatting-total-text-item {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
}
}
}
}
.consumption-report-card-two {
height: 621rpx;
width: 710rpx;
background: #FFFFFF;
border-radius: 24rpx;
position: absolute;
top: 504rpx;
padding: 0 32rpx;
box-sizing: border-box;
.consumption-report-card-two-title {
height: 60rpx;
margin: 21rpx 0 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.consumption-report-card-two-title-image {
width: 32rpx;
height: 32rpx;
.consumption-report-card-two-title-img {
width: 100%;
height: 100%;
}
}
.consumption-report-card-two-title-text {
margin-left: 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
position: relative;
.consumption-report-card-two-title-text-deline {
width: 152rpx;
height: 11rpx;
background: rgba(38, 169, 106, 0.24);
border-radius: 6rpx;
position: absolute;
top: 30rpx;
}
}
}
.average-daily-consumption {
height: 56rpx;
padding: 0 40rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.average-daily-consumption-item {
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #13D088;
line-height: 42rpx;
.average-daily-consumption-item-num {
font-size: 48rpx;
}
&.average-daily-consumption-item-orange {
color: #FA8C15;
}
}
}
.average-daily-consumption-contrast {
display: flex;
height: 49rpx;
.average-daily-consumption-student {
flex: 1;
background: #13D088;
border-radius: 25rpx 0rpx 0rpx 25rpx;
}
.average-daily-consumption-class {
flex: 1;
background: #FAAD15;
border-radius: 0rpx 25rpx 25rpx 0rpx;
}
}
}
.consumption-report-card-three {
width: 710rpx;
height: 460rpx;
background: #FFFFFF;
border-radius: 24rpx;
position: absolute;
top: 1148rpx;
padding: 0 32rpx;
box-sizing: border-box;
.consumption-report-card-three-title {
height: 60rpx;
margin: 21rpx 0 0;
box-sizing: border-box;
display: flex;
align-items: center;
.consumption-report-card-three-title-image {
width: 34rpx;
height: 33rpx;
.consumption-report-card-three-title-img {
width: 100%;
height: 100%;
}
}
.consumption-report-card-three-title-text {
margin-left: 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
position: relative;
.consumption-report-card-three-title-text-deline {
width: 125rpx;
height: 11rpx;
background: rgba(38, 169, 106, 0.24);
border-radius: 6rpx;
position: absolute;
top: 30rpx;
}
}
}
}
.consumption-report-card-four {
width: 710rpx;
height: 730rpx;
background: #FFFFFF;
border-radius: 24rpx;
position: absolute;
top: 1632rpx;
padding: 0 32rpx;
box-sizing: border-box;
.consumption-report-card-four-title {
height: 60rpx;
margin: 21rpx 0 0;
box-sizing: border-box;
display: flex;
align-items: center;
.consumption-report-card-four-title-image {
width: 35rpx;
height: 26rpx;
line-height: 0;
.consumption-report-card-four-title-img {
width: 100%;
height: 100%;
}
}
.consumption-report-card-four-title-text {
margin-left: 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
position: relative;
.consumption-report-card-four-title-text-deline {
width: 152rpx;
height: 11rpx;
background: rgba(38, 169, 106, 0.24);
border-radius: 6rpx;
position: absolute;
top: 30rpx;
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment