APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add tid1553 style

tid1731
刘嘉炜 9 months ago
parent
a639ebeab1
commit
319f3c2e0d
12 changed files with 456 additions and 124 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/pages.json
  2. 36
      src/subpackage/order/components/kvs_line.vue
  3. 44
      src/subpackage/order/pages/timekeeping/modules/order_detail/header_temp.vue
  4. 34
      src/subpackage/order/pages/timekeeping/modules/order_detail/info_temp.vue
  5. 40
      src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
  6. 2
      src/subpackage/order/pages/timekeeping/modules/order_list/item_temp.vue
  7. 6
      src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
  8. 67
      src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
  9. 92
      src/subpackage/order/pages/timekeeping/order_detail/person.vue
  10. 19
      src/subpackage/order/pages/timekeeping/order_list.vue

6
src/pages.json
View File

@ -492,6 +492,12 @@
}
},
{
"path": "pages/timekeeping/order_detail/person",
"style" : {
"navigationBarTitleText": "散客计时订单详情"
}
},
{
"path": "pages/stored_value_card/detail/detail",
"style" : {
"navigationBarTitleText": "储值卡订单详情"

36
src/subpackage/order/components/kvs_line.vue
View File

@ -0,0 +1,36 @@
<template>
<view class="s-line">
<view class="sl-view">{{ label }}</view>
<view class="sl-view">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
props: {
label: {
default: ''
}
}
}
</script>
<style lang="scss">
.s-line{
@include ctf(space-between);
.sl-view{
&:first-child{
flex-shrink: 0;
@include flcw(28upx, 60upx, #1A1A1A);
}
&+.sl-view{
margin-left: 20upx;
@include flcw(24upx, 60upx, #1A1A1A);
@include tHide;
}
}
}
</style>

44
src/subpackage/order/pages/timekeeping/modules/order_detail/header_temp.vue
View File

@ -0,0 +1,44 @@
<template>
<view class="order-detail-header">
<view class="odh-stadium">
<image class="os-img"></image>
<view class="os-name">欧轩智能场馆(羽毛球永泰店)</view>
</view>
<view class="odh-content">
<slot>content</slot>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.order-detail-header{
padding: 0 30upx 40upx;
border-radius: 10upx;
background: #fff;
.odh-stadium{
padding: 26upx 0;
border-bottom: 1px solid #D8D8D8;
@include ctf(flex-start);
.os-img{
flex-shrink: 0;
margin-right: 14upx;
width: 40upx;
height: 40upx;
background: skyblue;
}
.os-name{
@include flcw(28upx, 40upx, #333333, 500);
@include tHide;
}
}
.odh-content{
padding-top: 26upx;
}
}
</style>

34
src/subpackage/order/pages/timekeeping/modules/order_detail/info_temp.vue
View File

@ -0,0 +1,34 @@
<template>
<view class="order-detail-info">
<view class="odi-title">{{ title }}</view>
<view class="odi-content">
<slot name="default">content</slot>
</view>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
}
}
</script>
<style lang="scss">
.order-detail-info{
padding: 30upx;
border-radius: 10upx;
background: #fff;
.odi-title{
@include flcw(28upx, 40upx, #9C9C9F);
@include tHide;
}
.odi-content{
padding-top: 20upx;
}
}
</style>

40
src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
View File

@ -0,0 +1,40 @@
<template>
<list-item-temp>
<template v-slot:default>
<view class="lc-info">
<kv-line label="订单编号：">
<template v-slot:default>qp20200150150245569</template>
<template v-slot:right>
<image class="li-icon"></image>
</template>
</kv-line>
<kv-line label="项目类型：">押金</kv-line>
<kv-line label="创建时间：">2019-08-17 18:02:58</kv-line>
</view>
</template>
</list-item-temp>
</template>
<script>
import kvLine from "../../../../components/kv_line.vue";
import listItemTemp from "./item_temp.vue";
export default {
components: {
'kv-line': kvLine,
'list-item-temp': listItemTemp
}
}
</script>
<style lang="scss">
.lc-info{
padding-top: 12upx;
.li-icon{
margin-left: auto;
flex-shrink: 0;
width: 32upx;
height: 32upx;
background: skyblue;
}
}
</style>

2
src/subpackage/order/pages/timekeeping/modules/list_item_temp.vue → src/subpackage/order/pages/timekeeping/modules/order_list/item_temp.vue
View File

@ -8,7 +8,7 @@
<view class="lit-price">
<text class="lp-txt">支付金额</text>¥240
</view>
<slot name="bottom">bottom</slot>
<slot name="bottom"></slot>
</view>
</template>

6
src/subpackage/order/pages/timekeeping/modules/person_list_item.vue → src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
View File

@ -28,12 +28,10 @@
</template>
<script>
import pLine from "../../../components/p_line/p_line.vue";
import kvLine from "../../../components/kv_line.vue";
import listItemTemp from "./list_item_temp.vue";
import kvLine from "../../../../components/kv_line.vue";
import listItemTemp from "./item_temp.vue";
export default {
components: {
'p-line': pLine,
'kv-line': kvLine,
'list-item-temp': listItemTemp
}

67
src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
View File

@ -0,0 +1,67 @@
<template>
<list-item-temp>
<template v-slot:default>
<view class="lc-info">
<kv-line label="项目类型：">
<template v-slot:default>人时（1号门闸）</template>
<template v-slot:right>
<image class="li-icon"></image>
</template>
</kv-line>
<kv-line label="开始时间：">2019-08-17 18:02:58</kv-line>
<kv-line label="结束时间：">2019-08-17 18:02:58</kv-line>
<kv-line label="时长合计：">
<text style="color: #009874;">1小时58分46秒</text>
</kv-line>
<kv-line label="创建时间：">2019-08-17 18:02:58</kv-line>
</view>
</template>
<template v-slot:bottom>
<view class="lc-btns">
<view class="lb-item">取消预约</view>
<view class="lb-item">结束计费</view>
</view>
</template>
</list-item-temp>
</template>
<script>
import kvLine from "../../../../components/kv_line.vue";
import listItemTemp from "./item_temp.vue";
export default {
components: {
'kv-line': kvLine,
'list-item-temp': listItemTemp
}
}
</script>
<style lang="scss">
.lc-info{
padding-top: 12upx;
.li-icon{
margin-left: auto;
flex-shrink: 0;
width: 32upx;
height: 32upx;
background: skyblue;
}
}
.lc-btns{
margin-top: 24upx;
@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);
&+.lb-item{
margin-left: 24upx;
}
}
}
</style>

92
src/subpackage/order/pages/timekeeping/order_detail/person.vue
View File

@ -0,0 +1,92 @@
<template>
<view class="person-order-detail">
<header-temp>
<kv-line label="订单编号：">
<template v-slot:default>qp20200150150245569qp20200150150245569qp20200150150245569</template>
<template v-slot:right>
<text class="pod-status">已完成</text>
</template>
</kv-line>
<kv-line label="创建时间：">2019-08-17 18:02:58</kv-line>
<kv-line label="手机号码：">18316553478</kv-line>
<kv-line label="用户昵称：">i术生</kv-line>
</header-temp>
<view class="pod-margin"></view>
<info-temp title="计时信息">
<kv-line label="项目类型：">人时(1号门闸)</kv-line>
<kv-line label="进场时间：">2020-01-10 15:02:24</kv-line>
<kv-line label="离场时间：">2020-01-10 17:20:24</kv-line>
<kv-line label="时长合计：">1小时35分9秒 </kv-line>
<view class="pod-pay-info">
<kvs-line label="金额小计">¥10.5</kvs-line>
<kvs-line label="折扣金额">-¥0</kvs-line>
<kvs-line label="积分抵扣">-¥0</kvs-line>
<kvs-line label="优惠券优惠">-¥1</kvs-line>
</view>
<view class="pod-total">
<text class="pt-name">合计支付：</text>￥9.5
</view>
</info-temp>
<view class="pod-margin"></view>
<info-temp title="支付信息">
<kv-line label="支付方式：">微信支付</kv-line>
<kv-line label="支付时间：">2019年6月18日 10:30:40</kv-line>
<kv-line label="微信交易号：">424736746998493847989434</kv-line>
</info-temp>
<view class="pod-margin"></view>
<info-temp title="退款信息1">
<kv-line label="退款金额：">￥7</kv-line>
<kv-line label="退款单号：">TF-20195171564566</kv-line>
<kv-line label="退款时间：">2019-05-17 11:12:58</kv-line>
<kv-line label="退款原因：">商家主动退款</kv-line>
</info-temp>
</view>
</template>
<script>
import headerTemp from "../modules/order_detail/header_temp.vue";
import infoTemp from "../modules/order_detail/info_temp.vue";
import kvLine from "../../../components/kv_line.vue";
import kvsLine from "../../../components/kvs_line.vue";
export default {
components: {
'header-temp': headerTemp,
'info-temp': infoTemp,
'kv-line': kvLine,
'kvs-line': kvsLine
}
}
</script>
<style lang="scss">
.person-order-detail{
padding: 24upx;
@include isPd(24upx);
.pod-status{
margin-left: auto;
flex-shrink: 0;
@include flcw(28upx, 40upx, #9C9C9F);
}
}
.pod-margin{
height: 24upx;
background: transparent;
}
.pod-pay-info{
margin-top: 20upx;
border-top: 1px solid #D8D8D8;
}
.pod-total{
padding-top: 10upx;
text-align: right;
@include flcw(28upx, 50upx, #1A1A1A, 500);
@include tHide;
.pt-name{
color: #9A9A9D;
font-weight: 400;
}
}
</style>

19
src/subpackage/order/pages/timekeeping/order_list.vue
View File

@ -10,6 +10,12 @@
<view class="tl-item">
<person-list-item></person-list-item>
</view>
<view class="tl-item">
<site-list-item></site-list-item>
</view>
<view class="tl-item">
<deposit-list-item></deposit-list-item>
</view>
</view>
<!-- 时间段选择 -->
<period-modal
@ -24,7 +30,11 @@
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 personListItem from "./modules/order_list/person.vue";
import siteListItem from "./modules/order_list/site.vue";
import depositListItem from "./modules/order_list/deposit.vue";
import { ORDER_API } from '../../js/api';
import server from '../../js/server';
import { showLoad, hideLoad } from '@/utils/util';
@ -33,7 +43,9 @@ export default {
'order-list-header': orderListHeader,
'period-modal': periodModal,
'filter-modal': filterModal,
'person-list-item': personListItem
'person-list-item': personListItem,
'site-list-item': siteListItem,
'deposit-list-item': depositListItem
},
async onLoad(options){
let _list = await this.$refs.orderListHeader.initStadiumSelect(options.brand_id)
@ -76,6 +88,9 @@ export default {
</script>
<style lang="scss">
.timekeeping-order-list{
@include isPd(20upx);
}
.tol-list{
padding: 0 24upx;
.tl-item + .tl-item{

Write Preview
Loading…
Cancel
Save