11 changed files with 283 additions and 13 deletions
-
0src/components/order_list/timing/site.vue
-
6src/pages.json
-
27src/subpackage/order/components/kv_line.vue
-
18src/subpackage/order/components/order_list/filter_modal.vue
-
17src/subpackage/order/components/order_list/header.vue
-
14src/subpackage/order/components/order_list/period_modal.vue
-
1src/subpackage/order/js/api.js
-
18src/subpackage/order/pages/order_list/order_list.vue
-
2src/subpackage/order/pages/order_manage/order_manage.vue
-
105src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
-
88src/subpackage/order/pages/timekeeping/order_list.vue
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<view class="kv-line"> |
|||
<view class="kl-name"><slot name="key">key：</slot></view> |
|||
<view class="kl-val"><slot name="value">value</slot></view> |
|||
<slot name="right"></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.kv-line{ |
|||
@include ctf; |
|||
.kl-name{ |
|||
flex-shrink: 0; |
|||
@include flcw(28upx, 48upx, #9C9C9F); |
|||
} |
|||
.kl-val{ |
|||
@include flcw(28upx, 48upx, #1A1A1A); |
|||
@include tHide; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<view class="list-item"> |
|||
<view class="li-content"> |
|||
<view class="lc-stadium-status"> |
|||
<view class="lss-stadium">欧轩智能场馆(永泰店)</view> |
|||
<view class="lss-status">计费中</view> |
|||
</view> |
|||
<view class="lc-info"> |
|||
<kv-line> |
|||
<template v-slot:key>订单编号：</template> |
|||
<template v-slot:value>qp20200150150245569</template> |
|||
<template v-slot:right> |
|||
<image class="li-icon"></image> |
|||
</template> |
|||
</kv-line> |
|||
<kv-line> |
|||
<template v-slot:key>项目类型：</template> |
|||
<template v-slot:value>人时（1号门闸）</template> |
|||
</kv-line> |
|||
<kv-line> |
|||
<template v-slot:key>计费时长：</template> |
|||
<template v-slot:value><text style="color: #009874;">1小时58分46秒</text></template> |
|||
</kv-line> |
|||
<kv-line> |
|||
<template v-slot:key>创建时间：</template> |
|||
<template v-slot:value>2019-08-17 18:02:58</template> |
|||
</kv-line> |
|||
</view> |
|||
<view class="lc-btns"> |
|||
<view class="lb-item">结束计费</view> |
|||
</view> |
|||
<view class="lc-price"> |
|||
<text class="lp-txt">支付金额</text>¥240 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import pLine from "../../../components/p_line/p_line.vue"; |
|||
import kvLine from "../../../components/kv_line.vue"; |
|||
export default { |
|||
components: { |
|||
'p-line': pLine, |
|||
'kv-line': kvLine |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.li-content{ |
|||
padding: 0 20upx 30upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
.lc-stadium-status{ |
|||
padding: 30upx 0 26upx; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
@include ctf(space-between); |
|||
.lss-stadium{ |
|||
@include flcw(28upx, 40upx, #1A1A1A, 500); |
|||
@include tHide; |
|||
} |
|||
.lss-status{ |
|||
flex-shrink: 0; |
|||
margin-left: 12upx; |
|||
@include flcw(28upx, 40upx, #9A9A9D); |
|||
} |
|||
} |
|||
.lc-info{ |
|||
padding-top: 12upx; |
|||
.li-icon{ |
|||
margin-left: auto; |
|||
flex-shrink: 0; |
|||
width: 32upx; |
|||
height: 32upx; |
|||
background: skyblue; |
|||
} |
|||
} |
|||
.lc-btns{ |
|||
margin-top: 8upx; |
|||
@include ctf(flex-end); |
|||
.lb-item{ |
|||
width: 192upx; |
|||
height: 80upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
border: 2upx solid $mColor; |
|||
@include flcw(32upx, 76upx, $mColor, 500); |
|||
} |
|||
} |
|||
|
|||
.lc-price{ |
|||
margin-top: 30upx; |
|||
padding-top: 20upx; |
|||
text-align: right; |
|||
border-top: 1px solid #D8D8D8; |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
@include tHide; |
|||
.lp-txt{ |
|||
margin-right: 6upx; |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<view class="timekeeping-order-list"> |
|||
<order-list-header |
|||
ref="orderListHeader" |
|||
@change:stadium="changeStadium" |
|||
@click:time="showPeriodModal" |
|||
@click:filter="showFilterModal" |
|||
></order-list-header> |
|||
<view class="tol-list"> |
|||
<view class="tl-item"> |
|||
<person-list-item></person-list-item> |
|||
</view> |
|||
</view> |
|||
<!-- 时间段选择 --> |
|||
<period-modal |
|||
ref="periodModal" |
|||
></period-modal> |
|||
<!-- status窗口 --> |
|||
<filter-modal ref="filterModal"></filter-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import orderListHeader from "../../components/order_list/header.vue"; |
|||
import periodModal from "../../components/order_list/period_modal.vue"; |
|||
import filterModal from "../../components/order_list/filter_modal.vue"; |
|||
import personListItem from "./modules/person_list_item.vue"; |
|||
import { ORDER_API } from '../../js/api'; |
|||
import server from '../../js/server'; |
|||
import { showLoad, hideLoad } from '@/utils/util'; |
|||
export default { |
|||
components: { |
|||
'order-list-header': orderListHeader, |
|||
'period-modal': periodModal, |
|||
'filter-modal': filterModal, |
|||
'person-list-item': personListItem |
|||
}, |
|||
async onLoad(options){ |
|||
let _list = await this.$refs.orderListHeader.initStadiumSelect(options.brand_id) |
|||
}, |
|||
methods: { |
|||
showFilterModal(){ |
|||
this.$refs.filterModal.show(); |
|||
}, |
|||
changeStadium(e){ |
|||
console.log('changeStadium:', e) |
|||
}, |
|||
showPeriodModal(){ |
|||
this.$refs.periodModal.init({ |
|||
star: '2020-08-01', |
|||
end: '2020-08-27', |
|||
success: res=>{ |
|||
console.log('success:', res) |
|||
} |
|||
}); |
|||
}, |
|||
getOrderList({ |
|||
brand_id = '', stadium_id = '', |
|||
status = '', start = '', end = '', |
|||
order_type = '' |
|||
}){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: ORDER_API.matchOrderSonList, |
|||
data: { brand_id, stadium_id, status, start, end, order_type }, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
let _list = res.list || []; |
|||
this.sonList = _list; |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.timekeeping-order-list{ |
|||
|
|||
} |
|||
.tol-list{ |
|||
padding: 0 24upx; |
|||
.tl-item + .tl-item{ |
|||
margin-top: 24upx; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue