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

add style

voice
刘嘉炜 5 years ago
parent
fa161a8da5
commit
34f3207798
7 changed files with 645 additions and 7 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. 132
      src/components/order/integral/integral.vue
  2. 132
      src/components/order/membership/membership.vue
  3. 148
      src/components/order/reservation/reservation.vue
  4. 6
      src/pages.json
  5. 150
      src/pages/order_list/order_list.vue
  6. 82
      src/pages/order_search/order_search.vue
  7. BIN
      src/static/images/icon/no_order.png

132
src/components/order/integral/integral.vue
View File

@ -0,0 +1,132 @@
<template>
<view class="integral-order">
<view class="il-header">
<view>欧轩智能羽毛球馆(永泰店)</view>
<text class="ih-active">待使用</text>
</view>
<view class="il-section">
<view class="is-line">
<view>订单编号：</view>
<view>
<view>20195175645666</view>
</view>
</view>
<view class="is-line">
<view>用户昵称：</view>
<view>
<view>周大强</view>
</view>
</view>
<view class="is-line">
<view>支付时间：</view>
<view>
<view>2019-05-17 11:12:50</view>
</view>
</view>
<view class="is-line">
<view>规格：</view>
<view>
<view>1只装</view>
</view>
</view>
</view>
<view class="il-bot">
<view>邮费：¥0.00</view>
<view>实付款： 2000积分</view>
</view>
<view class="il-btns">
<view hover-class="hover-active">发货</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../style/public.scss";
.integral-order{
padding-bottom: 10upx;
border-radius: 10upx;
background-color: #fff;
.il-header{
margin-bottom: 18upx;
padding: 0 20upx;
height: 98upx;
line-height: 96upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
flex-grow: 1;
font-size: 28upx;
color: #1a1a1a;
@include textHide(1);
}
>text{
margin-left: 20upx;
flex-shrink: 0;
font-size: 28upx;
color: #9C9C9F;
}
.ih-active{
color: $themeColor;
}
}
.il-section{
padding: 0 20upx 20upx;
.is-line{
display: flex;
view{
line-height: 40upx;
font-size: 24upx;
color: #9c9c9f;
}
>view{
&:first-child{
flex-shrink: 0;
}
&+view{
flex-grow: 1;
>view{
@include textHide(1);
}
}
}
}
}
.il-bot{
padding: 20upx;
border-top: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
line-height: 40upx;
font-size: 24upx;
color: #9c9c9f;
min-width: 50%;
@include textHide(1);
&+view{
text-align: right;
}
}
}
.il-btns{
padding-bottom: 20upx;
padding-right: 36upx;
@include centerFlex(flex-end);
>view{
width: 176upx;
height: 72upx;
line-height: 68upx;
text-align: center;
border-radius: 10upx;
border: 2upx solid $themeColor;
font-size: 28upx;
color: $themeColor;
}
}
}
</style>

132
src/components/order/membership/membership.vue
View File

@ -0,0 +1,132 @@
<template>
<view class="membership-order">
<view class="mo-header">
<view>欧轩智能羽毛球馆(永泰店)</view>
<text>使用中</text>
</view>
<view class="mo-section">
<view class="ms-line">
<view>订单编号：</view>
<view>
<view>20195175645666 </view>
</view>
</view>
<view class="ms-line">
<view>用户昵称：</view>
<view>
<view>周大强 </view>
</view>
</view>
<view class="ms-line">
<view>支付时间：</view>
<view>
<view>2019-05-17 11:12:50</view>
</view>
</view>
<view class="ms-line">
<view>会员卡信息：</view>
<view>
<view>3000元会员卡</view>
</view>
</view>
<view class="ms-line">
<view>会员卡余额：</view>
<view>
<view><text>¥2800</text></view>
</view>
</view>
<view class="ms-line">
<view>场地折扣：</view>
<view>
<view>九折</view>
</view>
</view>
<view class="ms-line">
<view>购买途径：</view>
<view>
<view>升级</view>
</view>
</view>
</view>
<view class="mo-bot">
<view>支付方式：微信支付</view>
<view>实付款： ¥3000</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../style/public.scss";
.membership-order{
padding: 0 20upx;
background-color: #fff;
border-radius: 10upx;
.mo-header{
margin-bottom: 18upx;
height: 98upx;
line-height: 96upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
font-size: 28upx;
font-weight: 500;
color: #1a1a1a;
@include textHide(1);
}
>text{
flex-shrink: 0;
font-size: 28upx;
color: $themeColor;
}
}
.mo-section{
padding-bottom: 30upx;
.ms-line{
display: flex;
view{
line-height: 40upx;
font-size: 24upx;
color: #9c9c9f;
}
>view{
&:first-child{
flex-shrink: 0;
}
&+view{
flex-grow: 1;
>view{
>text{
color: #1A1A1A;
}
@include textHide(1);
}
}
}
}
}
.mo-bot{
height: 90upx;
border-top: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
line-height: 40upx;
font-size: 24upx;
color: #9c9c9f;
&:first-child{
flex-shrink: 0;
}
&:last-child{
flex-grow: 1;
text-align: right;
@include textHide(1);
}
}
}
}
</style>

148
src/components/order/reservation/reservation.vue
View File

@ -0,0 +1,148 @@
<template>
<view class="reservation-order">
<view class="ro-header">
<view>欧轩智能羽毛球馆(永泰店)</view>
<text class="rh-active">待使用</text>
</view>
<view class="ro-section">
<view class="rs-line">
<view>订单编号：</view>
<view>
<view>20195175645666</view>
</view>
</view>
<view class="rs-line">
<view>用户昵称：</view>
<view>
<view>周大强</view>
</view>
</view>
<view class="rs-line">
<view>支付时间：</view>
<view>
<view>2019-05-17 11:12:50</view>
</view>
</view>
<view class="rs-line">
<view>预定日期：</view>
<view>
<view>2019-05-18 周五</view>
</view>
</view>
<view class="rs-line">
<view>预定场次：</view>
<view>
<view>1号馆 10:00-11:00；11:00-12:00</view>
<view>1号馆 10:00-11:00；11:00-12:00</view>
<view>1号馆 10:00-11:00；11:00-12:00</view>
<view>1号馆 10:00-11:00；11:00-12:00</view>
</view>
</view>
</view>
<view class="ro-bot">
<view class="rb-line">
<view>支付方式：微信支付</view>
<view>共5场次 合计：¥240</view>
</view>
<view class="rb-total">实付款<text>¥240</text>(折扣0)</view>
</view>
<view class="ro-bot-line">核销方式：商家扫码 2019-05-18 09:50:30</view>
<view class="ro-bot-line">退款时间：2019-05-18 09:50:30</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../style/public.scss";
.reservation-order{
padding: 0 24upx;
border-radius: 10upx;
background-color: #fff;
.ro-header{
margin-bottom: 18upx;
height: 98upx;
line-height: 96upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
font-size: 28upx;
color: #1a1a1a;
}
>text{
flex-shrink: 0;
font-size: 28upx;
color: #9C9C9F;
}
.rh-active{
color: $themeColor;
}
}
.ro-section{
padding-bottom: 20upx;
.rs-line{
display: flex;
view{
line-height: 40upx;
font-size: 24upx;
color: #9c9c9f;
}
>view{
&:first-child{
flex-shrink: 0;
}
&+view{
flex-grow: 1;
>view{
@include textHide(1);
}
}
}
}
}
.ro-bot{
padding-top: 20upx;
padding-bottom: 30upx;
border-top: 2upx solid #D8D8D8;
.rb-line{
@include centerFlex(space-between);
>view{
line-height: 40upx;
font-size: 24upx;
color: #9c9c9f;
&:first-child{
margin-right: 20upx;
flex-shrink: 0;
}
&+view{
flex-grow: 1;
text-align: right;
@include textHide(1);
}
}
}
.rb-total{
line-height: 40upx;
text-align: right;
font-size: 24upx;
color: #9c9c9f;
>text{
color: #1A1A1A;
}
}
}
.ro-bot-line{
height: 90upx;
line-height: 90upx;
border-top: 2upx solid #D8D8D8;
font-size: 24upx;
color: #9c9c9f;
@include textHide(1);
}
}
</style>

6
src/pages.json
View File

@ -1,6 +1,12 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/order_search/order_search",
"style": {
"navigationBarTitleText": "搜索"
}
},
{
"path": "pages/order_list/order_list",
"style": {
"navigationBarTitleText": "订单列表"

150
src/pages/order_list/order_list.vue
View File

@ -26,17 +26,71 @@
</view>
</view>
</view>
<view class="ox-dark-mask">
<view class="ol-classify"></view>
<view class="ol-order-list">
<view class="ool-item">
<reservation-order></reservation-order>
</view>
<view class="ool-item">
<membership-order></membership-order>
</view>
<view class="ool-item">
<integral-order></integral-order>
</view>
</view>
<!-- 分类tab -->
<view class="ox-dark-mask" v-if="false">
<view class="ol-classify">
<view class="oc-title">
预约订单
</view>
<view class="oc-tabs">
<view class="ot-item">全部</view>
<view class="ot-item">待使用</view>
<view class="ot-item">已使用</view>
<view class="ot-item">已失效</view>
<view class="ot-item">已退款</view>
</view>
</view>
</view>
<!-- 时间段选择 -->
<view class="ox-dark-mask" v-if="false">
<view class="ol-period">
<view>日期范围</view>
<picker>
<view class="op-time">
<text>开始时间</text>
<view>
<input placeholder="选择时间" disabled />
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</view>
</picker>
<picker>
<view class="op-time">
<text>截止时间</text>
<view>
<input placeholder="选择时间" disabled />
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</view>
</picker>
<view class="pl-btn active">确定</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
import reservation_order from '../../components/order/reservation/reservation';
import membership_order from '../../components/order/membership/membership';
import integral_order from '../../components/order/integral/integral';
export default {
components: {
'reservation-order': reservation_order,
'membership-order': membership_order,
'integral-order': integral_order,
}
}
</script>
<style lang="scss" scoped>
@ -125,6 +179,12 @@ export default {
}
}
}
.ol-order-list{
padding: 0 24upx;
.ool-item{
margin-bottom: 24upx;
}
}
.ol-classify{
position: absolute;
right: 0;
@ -133,6 +193,84 @@ export default {
width: 500upx;
padding-left: 42upx;
background-color: #fff;
padding-top: 26upx;
padding-left: 42upx;
.oc-title{
margin-bottom: 58upx;
padding: 50upx 0;
border-bottom: 2upx solid #D8D8D8;
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
.oc-tabs{
.ot-item{
margin-bottom: 50upx;
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
@include textHide(1);
}
}
}
.ol-period{
position: absolute;
left: 0;
top: 0;
padding-left: 38upx;
padding-top: 66upx;
height: 472upx;
width: 100%;
background-color: #fff;
>view:first-child{
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
picker{
width: 100%;
}
.op-time{
padding-right: 40upx;
height: 124upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>text{
flex-shrink: 0;
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
}
>view{
flex-grow: 1;
@include centerFlex(flex-end);
>input{
flex-grow: 1;
height: 100%;
line-height: 44upx;
text-align: right;
font-size: 32upx;
color: #1a1a1a;
}
>image{
flex-shrink: 0;
margin-left: 36upx;
width: 28upx;
height: 28upx;
}
}
}
.pl-btn{
height: 124upx;
line-height: 124upx;
text-align: center;
font-size: 32upx;
font-weight: 500;
color: rgba(0, 152, 116, .2);
&.active{
color: $themeColor;
}
}
}
</style>

82
src/pages/order_search/order_search.vue
View File

@ -0,0 +1,82 @@
<template>
<view class="order-search">
<view class="os-bar">
<view>
<image mode="aspectFit" src="/static/images/icon/search.png"></image>
<input placeholder="你输入订单号" />
<image mode="aspectFit" src="/static/images/icon/round_close.png"></image>
</view>
</view>
<view class="os-none">
<image mode="aspectFit" src="/static/images/icon/no_order.png"></image>
<view>没有该订单数据</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../style/public.scss";
.order-search{
.os-bar{
margin-bottom: 24upx;
height: 144upx;
background-color: #fff;
@include centerFlex(center);
>view{
padding: 0 20upx;
height: 92upx;
width: 702upx;
border-radius: 10upx;
background-color: #f2f2f7;
@include centerFlex(center);
>image{
margin-right: 20upx;
flex-shrink: 0;
width: 40upx;
height: 40upx;
}
>input{
flex-grow: 1;
font-size: 32upx;
line-height: 44upx;
color: #1A1A1A;
&+image{
flex-shrink: 0;
margin-right: 0;
margin-left: 20upx;
width: 32upx;
height: 32upx;
}
}
}
}
.os-none{
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 168upx;
top: calc(168upx + var(--window-top));
padding-top: 164upx;
background-color: #fff;
>image{
margin: 0 auto 12upx;
display: block;
width: 380upx;
height: 380upx;
}
>view{
font-size: 28upx;
line-height: 40upx;
text-align: center;
color: #9c9c9f;
}
}
}
</style>

BIN
src/static/images/icon/no_order.png
View File

Side by Side

After

Width: 380  |  Height: 380  |  Size: 7.7 KiB

Write Preview
Loading…
Cancel
Save