Skip to content

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

充值消费明细页面新增

parent de553b2a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1199 additions and 0 deletions
src/pages.json
View file @ 763c770e
...@@ -533,6 +533,42 @@ ...@@ -533,6 +533,42 @@
} }
} }
,{
"path" : "pages/ApplyConsumption/pendingOrder/pendingOrder",
"style" :
{
"navigationBarTitleText": "待还款订单",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/consumptionDetail/consumptionDetail",
"style" :
{
"navigationBarTitleText": "消费详情",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/rechargeDetail/rechargeDetail",
"style" :
{
"navigationBarTitleText": "充值详情",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ApplyConsumption/topupDetail/topupDetail",
"style" :
{
"navigationBarTitleText": "充值明细",
"enablePullDownRefresh": false
}
}
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
......
src/pages/ApplyConsumption/consumptionDetail/consumptionDetail.vue 0 → 100644
View file @ 763c770e
<template>
<view class="consumptionDetail">
<view class="contentWrapper">
<view class="wrapper">
<view class="topBg" :style="'background-image: url('+this.$ImgUrl + 'user/greyBgTop.png'+')'">
<view class="line"></view>
</view>
<view class="title">东门食堂-早餐</view>
<view class="amount">-24.50</view>
<view class="status">待支付</view>
<view class="rowItem">
<view class="label">学生姓名</view>
<view class="value">安小智</view>
</view>
<view class="rowItem">
<view class="label">年级班级</view>
<view class="value">三年级/101班</view>
</view>
<view class="rowItem">
<view class="label">手续费</view>
<view class="value"> 0.02</view>
</view>
<view class="rowItem">
<view class="label">消费设备</view>
<view class="value">消费机-1</view>
</view>
<view class="rowItem">
<view class="label">消费场景</view>
<view class="value">食堂</view>
</view>
<view class="rowItem">
<view class="label">消费时间</view>
<view class="value">2022-06-11 07:00.00</view>
</view>
<view class="rowItem">
<view class="label">交易订单号</view>
<view class="value">4202000000000000000000</view>
</view>
<view class="btn">
<view class="button">对此订单有疑问？</view>
</view>
</view>
<view class="bottomBg" :style="'background-image: url('+this.$ImgUrl + 'user/greyBgBottom.png'+')'"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ImgUrl: this.$ImgUrl,
}
},
methods: {
}
}
</script>
<style lang="scss">
.consumptionDetail {
width: 100%;
height: 100%;
min-height: 100vh;
background: #F1F1F3;
.contentWrapper {
padding: 25rpx 22rpx 0 25rpx;
display: flex;
flex-direction: column;
.wrapper {
margin: 0 8rpx;
padding-top: 59rpx;
width: 686rpx;
display: flex;
flex-direction: column;
background: white;
font-family: PingFangSC-Regular, PingFang SC;
position: relative;
.topBg {
position: absolute;
top: 0;
left: -8rpx;
width: 703rpx;
height: 59rpx;
background-size: cover;
background-position: center center;
z-index: 1;
.line {
width: 686rpx;
height: 22rpx;
margin-top: 9rpx;
margin-left: 8rpx;
background: linear-gradient(180deg, #D9D9D9 0%, #FFFFFF 100%);
opacity: 0.75;
}
}
.title {
margin-top: 46rpx;
width: 100%;
height: 42rpx;
font-size: 30rpx;
font-weight: 400;
color: #333333;
line-height: 42rpx;
text-align: center;
}
.amount {
margin-top: 4rpx;
width: 100%;
height: 90rpx;
font-size: 64rpx;
color: #333333;
line-height: 90rpx;
text-align: center;
}
.status {
width: 100%;
height: 45rpx;
font-size: 32rpx;
color: #FA6400;
line-height: 45rpx;
text-align: center;
margin-bottom: 92rpx;
}
.rowItem {
padding: 0 32rpx;
margin-bottom: 37rpx;
display: inline-flex;
justify-content: space-between;
height: 42rpx;
line-height: 42rpx;
font-size: 30rpx;
color: #333333;
.value {
color: rgba(0, 0, 0, 0.5);
}
}
.btn {
padding: 49rpx 0 35rpx;
.button {
margin: 0 auto;
width: 622rpx;
height: 71rpx;
line-height: 71rpx;
background: #F1F1F3;
border-radius: 12rpx;
text-align: center;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
}
}
}
.bottomBg {
width: 686rpx;
height: 29rpx;
background-size: cover;
background-position: center center;
margin: 0 8rpx;
}
}
}
</style>
\ No newline at end of file
src/pages/ApplyConsumption/pendingOrder/pendingOrder.vue 0 → 100644
View file @ 763c770e
This diff is collapsed.
src/pages/ApplyConsumption/rechargeDetail/rechargeDetail.vue 0 → 100644
View file @ 763c770e
<template>
<view class="rechargeDetail">
<view class="contentWrapper">
<view class="wrapper">
<view class="topBg" :style="'background-image: url('+this.$ImgUrl + 'user/greyBgTop.png'+')'">
<view class="line"></view>
</view>
<view class="title">东门食堂-早餐</view>
<view class="amount">-24.50</view>
<view class="rowItem">
<view class="label">学生姓名</view>
<view class="value">安小智</view>
</view>
<view class="rowItem">
<view class="label">年级班级</view>
<view class="value">三年级/101班</view>
</view>
<view class="rowItem">
<view class="label">服务费</view>
<view class="value"> 0.02</view>
</view>
<view class="rowItem">
<view class="label">消费时间</view>
<view class="value">2022-06-11 07:00.00</view>
</view>
<view class="rowItem">
<view class="label">交易订单号</view>
<view class="value">4202000000000000000000</view>
</view>
<view class="rowItem">
<view class="label">支付订单号</view>
<view class="value">4202000000000000000000</view>
</view>
<view class="btn">
<view class="button">对此订单有疑问？</view>
</view>
</view>
<view class="bottomBg" :style="'background-image: url('+this.$ImgUrl + 'user/greyBgBottom.png'+')'"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ImgUrl: this.$ImgUrl,
}
},
methods: {
}
}
</script>
<style lang="scss">
.rechargeDetail {
width: 100%;
height: 100%;
min-height: 100vh;
background: #F1F1F3;
.contentWrapper {
padding: 25rpx 22rpx 0 25rpx;
display: flex;
flex-direction: column;
.wrapper {
margin: 0 8rpx;
padding-top: 59rpx;
width: 686rpx;
display: flex;
flex-direction: column;
background: white;
font-family: PingFangSC-Regular, PingFang SC;
position: relative;
.topBg {
position: absolute;
top: 0;
left: -8rpx;
width: 703rpx;
height: 59rpx;
background-size: cover;
background-position: center center;
z-index: 1;
.line {
width: 686rpx;
height: 22rpx;
margin-top: 9rpx;
margin-left: 8rpx;
background: linear-gradient(180deg, #D9D9D9 0%, #FFFFFF 100%);
opacity: 0.75;
}
}
.title {
margin-top: 78rpx;
width: 100%;
height: 42rpx;
font-size: 30rpx;
font-weight: 400;
color: #333333;
line-height: 42rpx;
text-align: center;
}
.amount {
margin-top: 4rpx;
width: 100%;
height: 90rpx;
font-size: 64rpx;
color: #333333;
font-weight: 600;
line-height: 90rpx;
text-align: center;
margin-bottom: 87rpx;
}
.rowItem {
padding: 0 32rpx;
margin-bottom: 37rpx;
display: inline-flex;
justify-content: space-between;
height: 42rpx;
line-height: 42rpx;
font-size: 30rpx;
color: #333333;
.value {
color: rgba(0, 0, 0, 0.5);
}
}
.btn {
padding: 165rpx 0 35rpx;
.button {
margin: 0 auto;
width: 622rpx;
height: 71rpx;
line-height: 71rpx;
background: #F1F1F3;
border-radius: 12rpx;
text-align: center;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
}
}
}
.bottomBg {
width: 686rpx;
height: 29rpx;
background-size: cover;
background-position: center center;
margin: 0 8rpx;
}
}
}
</style>
\ No newline at end of file
src/pages/ApplyConsumption/topupDetail/topupDetail.vue 0 → 100644
View file @ 763c770e
<template>
<view class="topupDetail">
<view class="firstLine">
<view class="left" @click="show = true">
<view>2023年5月</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>
<scroll-view scroll-y="true" class="scrollY">
<view class="pannels">
<view class="item">
<view class="p1">
<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>线下充值</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>线下充值</view>
<view class="num">10.00</view>
</view>
<view class="p2">08-09 08:02:01</view>
</view>
</view>
<view class="bottomTip">— 已展示全部数据 —</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 {
DatetimePicker
} from 'vant';
export default {
data() {
return {
ImgUrl: this.$ImgUrl,
minDate: new Date(1919, 0, 1),
maxDate: new Date(2999, 10, 1),
currentDate: new Date(),
show: false,
}
},
methods: {
}
}
</script>
<style lang="scss">
.topupDetail {
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 - 91rpx - calc(44px + env(safe-area-inset-top)));
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;
.num {
color: #E02020;
}
}
.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
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