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

add list item temp

tid1731
刘嘉炜 10 months ago
parent
9b64850131
commit
a639ebeab1
4 changed files with 100 additions and 81 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. 11
      src/subpackage/order/components/kv_line.vue
  2. 55
      src/subpackage/order/pages/timekeeping/modules/list_item_temp.vue
  3. 112
      src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
  4. 3
      src/subpackage/order/pages/timekeeping/order_list.vue

11
src/subpackage/order/components/kv_line.vue
View File

@ -1,14 +1,19 @@
<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>
<view class="kl-name">{{ label || '' }}</view>
<view class="kl-val"><slot name="default">value</slot></view>
<slot name="right"></slot>
</view>
</template>
<script>
export default {
props: {
label: {
type: String,
default: ''
},
}
}
</script>

55
src/subpackage/order/pages/timekeeping/modules/list_item_temp.vue
View File

@ -0,0 +1,55 @@
<template>
<view class="list-item-temp">
<view class="lit-stadium-status">
<view class="lss-stadium">欧轩智能场馆(永泰店)</view>
<view class="lss-status">计费中</view>
</view>
<slot name="default">content</slot>
<view class="lit-price">
<text class="lp-txt">支付金额</text>¥240
</view>
<slot name="bottom">bottom</slot>
</view>
</template>
<script>
export default {
data(){
return{ }
}
}
</script>
<style lang="scss">
.list-item-temp{
padding: 0 20upx 30upx;
border-radius: 10upx;
background: #fff;
.lit-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);
}
}
.lit-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>

112
src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
View File

@ -1,105 +1,67 @@
<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>
<list-item-temp>
<template v-slot:default>
<view class="lc-info">
<kv-line>
<template v-slot:key>订单编号：</template>
<template v-slot:value>qp20200150150245569</template>
<kv-line label="订单编号：">
<template v-slot:default>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 label="项目类型：">
人时（1号门闸）
</kv-line>
<kv-line>
<template v-slot:key>计费时长：</template>
<template v-slot:value><text style="color: #009874;">1小时58分46秒</text></template>
<kv-line label="计费时长：">
<text style="color: #009874;">1小时58分46秒</text>
</kv-line>
<kv-line>
<template v-slot:key>创建时间：</template>
<template v-slot:value>2019-08-17 18:02:58</template>
<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>
<view class="lc-price">
<text class="lp-txt">支付金额</text>¥240
</view>
</view>
</view>
</template>
</list-item-temp>
</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";
export default {
components: {
'p-line': pLine,
'kv-line': kvLine
'kv-line': kvLine,
'list-item-temp': listItemTemp
}
}
</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-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;
}
}
.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);
}
}
</style>

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

@ -76,9 +76,6 @@ export default {
</script>
<style lang="scss">
.timekeeping-order-list{
}
.tol-list{
padding: 0 24upx;
.tl-item + .tl-item{

Write Preview
Loading…
Cancel
Save