6 changed files with 879 additions and 265 deletions
-
14src/pages.json
-
3src/pages/index/index.vue
-
197src/pages/site/confirm/confirm.vue
-
175src/pages/site/manage/manage.vue
-
237src/pages/site/order_list/order_list.vue
@ -0,0 +1,197 @@ |
|||
<template> |
|||
<view class="site-confirm"> |
|||
<view class="sc-section"> |
|||
<view class="sc-address"> |
|||
<view class="sa-name"> |
|||
<image mode="aspectFit"></image> |
|||
<text>欧轩智能场馆(羽毛球馆永泰店)</text> |
|||
</view> |
|||
<view class="sa-detail"> |
|||
<view>地址：</view> |
|||
<view>深圳市南山区南山街道阳光棕榈社区桂庙路</view> |
|||
</view> |
|||
</view> |
|||
<view class="sc-order-info"> |
|||
<view class="soi-line"> |
|||
<view>预定日期：</view> |
|||
<view><view>羽毛球</view></view> |
|||
</view> |
|||
<view class="soi-line"> |
|||
<view>预定日期：</view> |
|||
<view><view>周五(05月17日)</view></view> |
|||
</view> |
|||
<view class="soi-line"> |
|||
<view>预定场次：</view> |
|||
<view> |
|||
<view>1号馆 10:00-11:00 (¥80)</view> |
|||
<view>1号馆 10:00-11:00 (¥80)</view> |
|||
<view>1号馆 10:00-11:00 (¥80)</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="sc-ipt"> |
|||
<view class="si-price"> |
|||
<view class="sp-tit">收取金额</view> |
|||
<view class="sp-frame"><input /></view> |
|||
</view> |
|||
<view class="si-reason"> |
|||
<view class="sr-tit">占用原因</view> |
|||
<view class="sr-frame"> |
|||
<textarea placeholder="多行输入…"></textarea> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="sc-fixed-bot"> |
|||
<view hover-class="hover-active">确定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~style/public.scss"; |
|||
.site-confirm{ |
|||
|
|||
.sc-section{ |
|||
background-color: #fff; |
|||
} |
|||
.sc-address{ |
|||
padding: 24upx 24upx 20upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
.sa-name{ |
|||
margin-bottom: 24upx; |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
@include textHide(1); |
|||
>image{ |
|||
margin-right: 2upx; |
|||
vertical-align: middle; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
.sa-detail{ |
|||
display: flex; |
|||
>view{ |
|||
line-height: 40upx; |
|||
color: #9a9a9d; |
|||
font-size: 28upx; |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-grow: 1; |
|||
word-break: break-all; |
|||
@include textHide(2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sc-order-info{ |
|||
padding: 22upx 0; |
|||
margin: 0 auto; |
|||
width: 702upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
.soi-line{ |
|||
display: flex; |
|||
margin-bottom: 8upx; |
|||
>view{ |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
margin-right: 8upx; |
|||
line-height: 52upx; |
|||
font-size: 28upx; |
|||
color: #9a9a9d; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-grow: 1; |
|||
>view{ |
|||
font-size: 28upx; |
|||
line-height: 52upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sc-ipt{ |
|||
margin: 0 auto; |
|||
padding-top: 54upx; |
|||
padding-bottom: 62upx; |
|||
width: 682upx; |
|||
.si-price{ |
|||
margin-bottom: 12upx; |
|||
@include centerFlex(flex-start); |
|||
.sp-tit{ |
|||
flex-shrink: 0; |
|||
margin-right: 28upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
.sp-frame{ |
|||
padding: 0 20upx; |
|||
width: 262upx; |
|||
height: 56upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
>input{ |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
.si-reason{ |
|||
.sr-tit{ |
|||
margin-bottom: 18upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
.sr-frame{ |
|||
padding: 20upx 10upx; |
|||
width: 682upx; |
|||
height: 260upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
.sc-fixed-bot{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding-top: 10upx; |
|||
padding-bottom: 10upx; |
|||
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
background-color: #fff; |
|||
>view{ |
|||
margin: 0 auto; |
|||
width: 702upx; |
|||
height: 88upx; |
|||
line-height: 88upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
background-color: #FF873D; |
|||
color: #fff; |
|||
border-radius: 44upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,237 @@ |
|||
<template> |
|||
<view class="site-order-list"> |
|||
<view class="sol-bar"> |
|||
<picker> |
|||
<view class="sb-picker"> |
|||
<input placeholder="请选择门店" disabled /> |
|||
<image></image> |
|||
</view> |
|||
</picker> |
|||
<view class="sb-icon"></view> |
|||
</view> |
|||
<view class="sol-list"> |
|||
<view class="sl-item" v-for="i in 10" :key="i"> |
|||
<view class="si-bar"> |
|||
<view class="sa-address"> |
|||
<image></image> |
|||
<text>欧轩智能场馆(羽毛球馆永泰店)</text> |
|||
</view> |
|||
<view class="sa-status">待使用</view> |
|||
</view> |
|||
<view class="si-detail"> |
|||
<view class="sd-line"> |
|||
<view>占用编号:</view> |
|||
<view> |
|||
<view>20195171564566</view> |
|||
</view> |
|||
</view> |
|||
<view class="sd-line"> |
|||
<view>项目:</view> |
|||
<view> |
|||
<view>20195171564566</view> |
|||
</view> |
|||
</view> |
|||
<view class="sd-line"> |
|||
<view>日期:</view> |
|||
<view> |
|||
<view>2020-10-10</view> |
|||
</view> |
|||
</view> |
|||
<view class="sd-line"> |
|||
<view>场次:</view> |
|||
<view> |
|||
<view>3号馆 10:00-11:00 (80元)</view> |
|||
<view>3号馆 10:00-11:00 (80元)</view> |
|||
<view>3号馆 10:00-11:00 (80元)</view> |
|||
<view>3号馆 10:00-11:00 (80元)</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="si-info"> |
|||
<view class="si-line"><text>收取金额: </text>¥324</view> |
|||
<view class="si-line"><text>操作人: </text>¥324</view> |
|||
<view class="si-line"><text>占用原因: </text>¥324</view> |
|||
</view> |
|||
<view class="si-btns"> |
|||
<view hover-class="hover-active">取消占用</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="sol-fixed-bar"> |
|||
<view hover-class="hover-active" @click="toSiteManage">新增占用</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../utils/util' |
|||
export default { |
|||
methods: { |
|||
toSiteManage(){ |
|||
util.routeTo(`/pages/site/manage/manage`, 'nT'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~style/public.scss"; |
|||
.site-order-list{ |
|||
padding-bottom: 108upx; |
|||
padding-bottom: calc( 108upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 108upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
.sol-bar{ |
|||
padding: 0 30upx; |
|||
height: 112upx; |
|||
background-color: #fff; |
|||
@include centerFlex(space-between); |
|||
.sb-picker{ |
|||
padding: 0 30upx; |
|||
width: 578upx; |
|||
height: 72upx; |
|||
border-radius: 36upx; |
|||
background-color: #EDEDF5; |
|||
@include centerFlex(space-between); |
|||
>input{ |
|||
flex-grow: 1; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
.sb-icon{ |
|||
flex-shrink: 0; |
|||
margin-left: 48upx; |
|||
width: 60upx; |
|||
height: 60upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
.sol-list{ |
|||
padding: 24upx; |
|||
.sl-item{ |
|||
margin-bottom: 24upx; |
|||
border-radius: 10upx; |
|||
padding: 0 28upx 20upx; |
|||
background-color: #fff; |
|||
.si-bar{ |
|||
margin-bottom: 20upx; |
|||
padding: 20upx 0; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
@include centerFlex(space-between); |
|||
.sa-address{ |
|||
flex-grow: 1; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
@include textHide(1); |
|||
>image{ |
|||
margin-right: 10upx; |
|||
vertical-align: middle; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
.sa-status{ |
|||
flex-shrink: 0; |
|||
margin-left: 10upx; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
.si-detail{ |
|||
padding: 20upx 0; |
|||
.sd-line{ |
|||
display: flex; |
|||
>view{ |
|||
&:first-child{ |
|||
margin-right: 34upx; |
|||
flex-shrink: 0; |
|||
line-height: 52upx; |
|||
font-size: 28upx; |
|||
color: #9A9A9D; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-grow: 1; |
|||
>view{ |
|||
line-height: 52upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.si-info{ |
|||
padding-top: 20upx; |
|||
border-top: 2upx solid #D8D8D8; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.si-line{ |
|||
flex-grow: 1; |
|||
margin-bottom: 20upx; |
|||
min-width: 40%; |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
&:nth-child(2){ |
|||
text-align: right; |
|||
} |
|||
&:not(:nth-child(3)){ |
|||
max-width: 50%; |
|||
} |
|||
>text{ |
|||
margin-right: 10upx; |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
} |
|||
.si-btns{ |
|||
padding: 10upx 0; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
width: 200upx; |
|||
height: 72upx; |
|||
line-height: 68upx; |
|||
text-align: center; |
|||
border-radius: 36upx; |
|||
border: 2upx solid $themeColor; |
|||
font-size: 28upx; |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sol-fixed-bar{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
padding: 10upx 0; |
|||
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
>view{ |
|||
margin: 0 auto; |
|||
width: 702upx; |
|||
height: 88upx; |
|||
line-height: 88upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
color: #fff; |
|||
background-color: $themeColor; |
|||
border-radius: 44upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue