Skip to content

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

消费明细界面新增

parent 78421bc6
Hide whitespace changes
Inline Side-by-side
Showing with 280 additions and 7 deletions
src/pages.json
View file @ 55e1d66a
......@@ -569,6 +569,15 @@
}
}
,{
"path" : "pages/ApplyConsumption/consumptionRecord/consumptionRecord",
"style" :
{
"navigationBarTitleText": "消费记录",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
......
src/pages/ApplyConsumption/consumptionRecord/consumptionRecord.vue 0 → 100644
View file @ 55e1d66a
<template>
<view class="consumptionRecord">
<view class="firstLine">
<view class="left" @click="show = true">
<view>{{currentDate}}</view>
<view class="arrowImg" :style="'background-image: url('+ImgUrl + 'user/arrowDown.png'+')'"></view>
</view>
<view class="right">
<view class="font28">¥</view>
<view class="font40"> 40.00</view>
</view>
</view>
<van-tabs v-model="active" title-active-color="#323233" title-inactive-color="#969799" line-height="4px"
color="#04B871">
<van-tab title="全部" :title-style="active == 0 ? 'font-weight: bold' : ''"></van-tab>
<van-tab title="待支付" :title-style="active == 1 ? 'font-weight: bold' : ''"></van-tab>
<van-tab title="已支付" :title-style="active == 2 ? 'font-weight: bold' : ''"></van-tab>
<van-tab title="已退款" :title-style="active == 3 ? 'font-weight: bold' : ''"></van-tab>
</van-tabs>
<scroll-view scroll-y="true" class="scrollY">
<view class="pannels">
<view class="item">
<view class="p1">
<view class="left">
<view>二食堂卤面小炒</view>
<view class="meal">早餐</view>
</view>
<view class="num">-10.00</view>
</view>
<view class="p2">08-09 08:02:01</view>
</view>
<view class="item">
<view class="p1">
<view class="left">
<view>二食堂卤面小炒</view>
<view class="meal">早餐</view>
</view>
<view class="num">-10.00</view>
</view>
<view class="p2">2023-08-09 08:02:01</view>
</view>
<view class="item">
<view class="p1">
<view class="left">
<view>二食堂卤面小炒</view>
<view class="meal">早餐</view>
</view>
<view class="num">-10.00</view>
</view>
<view class="p2">08-09 08:02:01</view>
</view>
</view>
<view class="bottomTip">— 已展示全部数据 —</view>
<view class="popup" v-if="show">
<van-datetime-picker :value="currentDate" type="year-month" title="选择年月" :min-date="minDate"
position="bottom" :max-date="maxDate" :formatter="formatter" @confirm="onConfirm"
@cancel="onCancel" />
</view>
</scroll-view>
</view>
</template>
<script>
import moment from "moment";
import {
DatetimePicker
} from 'vant';
export default {
data() {
return {
active: 0,
ImgUrl: this.$ImgUrl,
minDate: new Date(2022, 10, 0),
maxDate: new Date(2999, 10, 1),
currentDate: '',
show: false,
}
},
created() {
this.currentDate = moment(new Date()).format('YYYY年M月');
},
methods: {
formatter(type, val) {
if (type === 'year') {
return `${val}年`;
} else if (type === 'month') {
return `${val}月`;
}
return val;
},
onConfirm(val) {
this.currentDate = moment(val).format('YYYY年M月')
this.show = false
},
onCancel() {
this.show = false
}
}
}
</script>
<style lang="scss">
.consumptionRecord {
width: 100%;
height: 100%;
min-height: calc(100vh - calc(44px + env(safe-area-inset-top)));
background: #F1F1F3;
font-family: PingFangSC-Regular, PingFang SC;
.firstLine {
display: inline-flex;
justify-content: space-between;
height: 88rpx;
line-height: 88rpx;
width: calc(100% - 130rpx);
padding: 0 38rpx 0 92rpx;
background: #FFFFFF;
border-top: 1rpx solid #E5E5E5;
border-bottom: 1rpx solid #E5E5E5;
font-size: 30rpx;
color: #333333;
.left,
.right {
display: inline-flex;
height: 100%;
view {
align-self: center;
}
.arrowImg {
margin-left: 12rpx;
width: 17rpx;
height: 11rpx;
background-size: cover;
background-position: center center;
}
.font28 {
font-size: 28rpx;
}
.font40 {
font-size: 40rpx;
margin-left: 15rpx;
}
}
}
.scrollY {
position: fixed;
height: calc(100vh - 178rpx - calc(44px + env(safe-area-inset-top)));
bottom: 0;
left: 0;
right: 0;
}
.popup {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.pannels {
width: 100%;
background-color: white;
display: flex;
flex-direction: column;
.item {
margin-left: 32rpx;
width: calc(100% - 32rpx);
border-bottom: 1px solid #E5E5E5;
display: flex;
flex-direction: column;
.p1 {
margin-top: 26rpx;
margin-bottom: 6rpx;
width: calc(100% - 40rpx);
height: 45rpx;
line-height: 45rpx;
display: flex;
justify-content: space-between;
color: #333333;
font-size: 32rpx;
padding-right: 40rpx;
.left {
display: flex;
view {
align-self: center;
}
.meal {
width: 80rpx;
height: 34rpx;
line-height: 34rpx;
background: rgba(4, 184, 113, 0.09);
border-radius: 5rpx;
font-size: 24rpx;
color: #04B871;
margin-left: 20rpx;
text-align: center;
}
}
}
.p2 {
width: calc(100% - 40rpx);
height: 37rpx;
font-size: 26rpx;
color: rgba(0, 0, 0, 0.35);
line-height: 37rpx;
padding-right: 40rpx;
margin-bottom: 24rpx;
}
}
}
.bottomTip {
margin-top: 32rpx;
padding-bottom: 32rpx;
width: 100%;
height: 33rpx;
font-size: 24rpx;
color: rgba(0, 0, 0, 0.25);
line-height: 33rpx;
text-align: center;
}
}
</style>
\ No newline at end of file
src/pages/ApplyConsumption/topupDetail/topupDetail.vue
View file @ 55e1d66a
......@@ -2,7 +2,7 @@
<view class="topupDetail">
<view class="firstLine">
<view class="left" @click="show = true">
<view>2023年5月</view>
<view>{{currentDate}}</view>
<view class="arrowImg" :style="'background-image: url('+ImgUrl + 'user/arrowDown.png'+')'"></view>
</view>
<view class="right">
......@@ -35,13 +35,18 @@
</view>
</view>
<view class="bottomTip">— 已展示全部数据 —</view>
<view class="popup" v-if="show">
<van-datetime-picker :value="currentDate" type="year-month" title="选择年月" :min-date="minDate"
position="bottom" :max-date="maxDate" :formatter="formatter" @confirm="onConfirm" @cancel="onCancel"
/>
</view>
</scroll-view>
<van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate"
:max-date="maxDate" :formatter="formatter" v-if="show"/>
</view>
</template>
<script>
import moment from "moment";
import {
DatetimePicker
} from 'vant';
......@@ -49,14 +54,31 @@
data() {
return {
ImgUrl: this.$ImgUrl,
minDate: new Date(1919, 0, 1),
minDate: new Date(2022, 10, 0),
maxDate: new Date(2999, 10, 1),
currentDate: new Date(),
currentDate: '',
show: false,
}
},
created() {
this.currentDate = moment(new Date()).format('YYYY年M月');
},
methods: {
formatter(type, val) {
if (type === 'year') {
return `${val}年`;
} else if (type === 'month') {
return `${val}月`;
}
return val;
},
onConfirm(val) {
this.currentDate = moment(val).format('YYYY年M月')
this.show = false
},
onCancel() {
this.show = false
}
}
}
</script>
......@@ -117,7 +139,12 @@
left: 0;
right: 0;
}
.popup {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.pannels {
width: 100%;
......
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