Browse Source

add order list

account
刘嘉炜 3 years ago
parent
commit
915b929aa9
  1. 6
      README.md
  2. 35
      src/components/order_list/a_header/a_header.vue
  3. 55
      src/components/order_list/a_line/a_line.vue
  4. 31
      src/components/order_list/curriculum/curriculum.vue
  5. 13
      src/components/order_list/spectacular_monent/spectacular_monent.vue
  6. 33
      src/components/order_list/value_card/value_card.vue
  7. 32
      src/pages/order_list/order_list.vue

6
README.md

@ -39,9 +39,9 @@ npm run build:mp-weixin
### ipx 底部适配高度函数
```css
padding-bottom: 0;
padding-bottom: calc( 0 + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 0 + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
padding-bottom: 0upx;
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
```
### [蓝湖](https://lanhuapp.com/web/#/item/project/board?pid=9ab56cc5-0b3b-4a9c-8cd0-0cf57751010a)

35
src/components/order_list/a_header/a_header.vue

@ -0,0 +1,35 @@
<template>
<view class="header-container">
<view class="hc-view">欧轩智能羽毛球馆(永泰店)</view>
<view class="hc-view">使用中</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '~style/public.scss';
.header-container{
padding: 30upx 0;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
.hc-view{
font-size: 28upx;
line-height: 40upx;
&:first-child{
font-weight: 500;
color: #1a1a1a;
}
&+.hc-view{
flex-shrink: 0;
margin-left: 10upx;
color: $themeColor;
}
}
}
</style>

55
src/components/order_list/a_line/a_line.vue

@ -0,0 +1,55 @@
<template>
<view class="a-line">
<view class="al-name"><slot name="name"></slot></view>
<view class="al-value">
<block v-if="isArrayValue">
<view class="al-p" v-for="(e, i) in value" :key="i">{{ e || '-' }}</view>
</block>
<view class="al-p" v-else> {{ value || '-' }} </view>
</view>
</view>
</template>
<script>
export default {
computed: {
isArrayValue(){
let { value } = this;
return typeof value === 'object'&&value.length
}
},
props: {
value: {
default: ''
}
},
created(){
}
}
</script>
<style lang="scss">
@import '~style/public.scss';
.a-line{
display: flex;
align-items: flex-start;
.al-name{
flex-grow: 0;
flex-shrink: 0;
line-height: 52upx;
font-size: 28upx;
color: #9a9a9d;
}
.al-value{
flex-grow: 1;
.al-p{
line-height: 52upx;
font-size: 28upx;
color: #1a1a1a;
@include textHide(1);
}
}
}
</style>

31
src/components/order_list/curriculum/curriculum.vue

@ -0,0 +1,31 @@
<template>
<view class="value-card-container">
<a-header></a-header>
<view class="vcc-info">
<a-line></a-line>
</view>
</view>
</template>
<script>
import a_header from '../a_header/a_header.vue';
import a_line from '../a_line/a_line.vue';
export default {
components: {
'a-header': a_header,
'a-line': a_line,
}
}
</script>
<style lang="scss">
@import '~style/public.scss';
.value-card-container{
background-color: #fff;
padding: 0 20upx;
border-radius: 10upx;
.vcc-info{
padding: 20upx 0;
}
}
</style>

13
src/components/order_list/spectacular_monent/spectacular_monent.vue

@ -0,0 +1,13 @@
<template>
<view>23</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>

33
src/components/order_list/value_card/value_card.vue

@ -0,0 +1,33 @@
<template>
<view class="value-card-container">
<a-header></a-header>
<view class="vcc-info">
<a-line :value="['白金卡', '白银卡']">
<block slot="name">123</block>
</a-line>
</view>
</view>
</template>
<script>
import a_header from '../a_header/a_header.vue';
import a_line from '../a_line/a_line.vue';
export default {
components: {
'a-header': a_header,
'a-line': a_line,
}
}
</script>
<style lang="scss">
@import '~style/public.scss';
.value-card-container{
background-color: #fff;
padding: 0 20upx;
border-radius: 10upx;
.vcc-info{
padding: 20upx 0;
}
}
</style>

32
src/pages/order_list/order_list.vue

@ -41,13 +41,20 @@
</view>
</view>
<view class="ol-order-list">
<view class="ool-item" v-for="(e,i) in orderList" :key="i" >
<reservation-order :order-info="e" v-if="orderType == 3"></reservation-order>
<membership-order :order-info="e" v-if="orderType == 4"></membership-order>
<integral-order :order-info="e" v-if="orderType == 5"></integral-order>
<timing-order :order-info="e" v-if="orderType == 1"></timing-order>
<organize-order :order-info="e" v-if="orderType == 10" @refreshList="refreshList"></organize-order>
</view>
<view class="ool-item" v-for="(e,i) in orderList" :key="i" >
<reservation-order :order-info="e" v-if="orderType == 3"></reservation-order>
<membership-order :order-info="e" v-if="orderType == 4"></membership-order>
<integral-order :order-info="e" v-if="orderType == 5"></integral-order>
<timing-order :order-info="e" v-if="orderType == 1"></timing-order>
<organize-order :order-info="e" v-if="orderType == 10" @refreshList="refreshList"></organize-order>
</view>
<view class="ool-i">
<spectacular-monent></spectacular-monent>
</view>
<view class="ool-i">
<value-card></value-card>
</view>
</view>
<!-- 分类tab -->
<view class="ox-dark-mask" v-if="isShowClassify" @click="hideClassify">
@ -100,7 +107,10 @@
import membership_order from '../../components/membership_order/membership_order';
import timing_order from '../../components/timing_order/timing_order.vue'
import organize_order from '../../components/organize_order/organize_order.vue'
// 20210910
import spectacular_monent from '../../components/order_list/spectacular_monent/spectacular_monent.vue'
import value_card from '../../components/order_list/value_card/value_card.vue'
import util from '../../utils/util';
import { servers } from '../../js/server';
import { API } from '../../js/api';
@ -115,6 +125,8 @@
'integral-order': integral_order,
'timing-order': timing_order,
'organize-order': organize_order,
'spectacular-monent': spectacular_monent,
'value-card': value_card,
},
computed:{
isStoreInfo(){
@ -428,7 +440,9 @@
<style lang="scss" scoped>
@import "../../style/public.scss";
.order-list{
padding-bottom: 0upx;
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
}
.ol-header{
.oh-cur-store{

Loading…
Cancel
Save