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

add style

course
刘嘉炜 4 years ago
parent
eeceb8207a
commit
4f2ce27ddc
4 changed files with 317 additions and 42 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. 167
      src/components/site/order_modal/order_modal.vue
  2. 6
      src/pages.json
  3. 151
      src/pages/site/manage/manage.vue
  4. 35
      src/pages/site/occupy_success/occupy_success.vue

167
src/components/site/order_modal/order_modal.vue
View File

@ -0,0 +1,167 @@
<template>
<view class="order-modal">
<view class="om-title">小程序预定</view>
<image class="om-close"></image>
<view class="om-name-line">
<view class="onl-view">欧轩智能羽毛球馆（永泰店）</view>
<view class="onl-view">待使用</view>
</view>
<view class="om-info-line">
<view class="oil-view">订单编号：</view>
<view class="oil-view">
<view class="ov-view">12345</view>
</view>
</view>
<view class="om-info-line">
<view class="oil-view">创建时间：</view>
<view class="oil-view">
<view class="ov-view">2019-05-17 11:12:58</view>
</view>
</view>
<view class="om-info-line">
<view class="oil-view">手机号码：</view>
<view class="oil-view">
<view class="ov-view">18316553872</view>
</view>
</view>
<view class="om-info-line">
<view class="oil-view">验证码：</view>
<view class="oil-view">
<view class="ov-view">1223 5512 4534</view>
</view>
</view>
<view class="om-border"></view>
<view class="om-name-line">
<view class="onl-view">预订信息</view>
</view>
<view class="om-info-line">
<view class="oil-view">预订项目：</view>
<view class="oil-view">
<view class="ov-view">羽毛球</view>
</view>
</view>
<view class="om-info-line">
<view class="oil-view">预订日期：</view>
<view class="oil-view">
<view class="ov-view">2019-07-16（周五）</view>
</view>
</view>
<view class="om-info-line">
<view class="oil-view">预订场次：</view>
<view class="oil-view">
<view class="ov-view">1号馆 10:00-12:00 （￥80 ）</view>
<view class="ov-view">1号馆 10:00-12:00 （￥80 ）</view>
</view>
</view>
<view class="om-total">实付款 ￥240</view>
<view class="om-btns">
<view class="ob-view">分享给朋友</view>
<view class="ob-view">取消占用</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style scoped lang="scss">
@import '~style/public.scss';
.order-modal{
position: relative;
padding-left: 30upx;
padding-right: 30upx;
padding-top: 48upx;
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 */
background-color: #f00;
.om-close{
position: absolute;
right: 30upx;
top: 30upx;
width: 34upx;
height: 34upx;
background-color: skyblue;
}
.om-title{
margin-bottom: 34upx;
text-align: center;
font-size: 32upx;
line-height: 44upx;
color: #1a1a1a;
font-weight: 500;
}
.om-name-line{
margin-bottom: 12upx;
@include centerFlex(space-between);
.onl-view{
&:first-child{
line-height: 40upx;
font-size: 28upx;
color: #1a1a1a;
}
&+.onl-view{
line-height: 40upx;
font-size: 28upx;
color: $themeColor;
}
}
}
.om-info-line{
display: flex;
align-items: baseline;
.oil-view{
font-size: 28upx;
line-height: 40upx;
color: #9C9C9F;
&:first-child{
flex-shrink: 0;
}
&+.oil-view{
flex-grow: 1;
.ov-view{
font-size: 28upx;
line-height: 40upx;
color: #1a1a1a;
@include textHide(1);
}
}
}
}
.om-border{
margin-top: 20upx;
margin-bottom: 18upx;
height: 2upx;
background-color: #D8D8D8;
}
.om-total{
margin-top: 20upx;
margin-bottom: 40upx;
text-align: right;
line-height: 40upx;
font-size: 28upx;
color: #1a1a1a;
}
.om-btns{
margin-bottom: 10upx;
@include centerFlex(flex-end);
.ob-view{
margin-left: 20upx;
width: 210upx;
height: 80upx;
border: 2upx solid $themeColor;
text-align: center;
line-height: 76upx;
border-radius: 10upx;
font-size: 32upx;
font-weight: 500;
color: $themeColor;
}
}
}
</style>

6
src/pages.json
View File

@ -1,6 +1,12 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/site/occupy_success/occupy_success",
"style": {
"navigationBarTitleText": "占用场地"
}
},
{
"path": "pages/index/index",
"style": {
}

151
src/pages/site/manage/manage.vue
View File

@ -17,14 +17,14 @@
<view class="st-tip">{{curTypeInfo.rule_text || '-'}}</view>
</view>
<view class="sh-date">
<picker>
<picker mode="date">
<view class="sd-box">
<text>2020年5月16日</text>
<view></view>
</view>
</picker>
<text>至</text>
<picker>
<picker mode="date">
<view class="sd-box">
<text>2020年5月16日</text>
<view></view>
@ -53,8 +53,9 @@
</scroll-view>
<view class="sm-venue">
<view class="sv-time-interval">
<view class="sti-item"></view>
<view class="sti-item" v-for="(e,i) in venueList[0].items" :key="i">{{e.duration || '-'}}</view>
<view class="sti-item" v-for="(e,i) in venueTimeList" :key="i">
<view>{{ e || '-' }}</view>
</view>
</view>
<scroll-view class="sti-venue-list" enable-flex scroll-x :style="venueAreaSize">
<view class="svl-list" v-for="(e, i) in venueList" :key="i">
@ -62,7 +63,7 @@
<view class="sl-item" v-for="(k,j) in e.items" :key="j" @click="venueSelect(i,j)">
<view
:class="[
k._isSelect?'green':
k._isSelect?'cyan':
k.is_take_up?'black':
!k.is_valid?'grey':''
]"
@ -93,12 +94,16 @@
</view>
</block>
<view class="sfb-tip-list" v-else>
<view class="stl-item" v-for="(e,i) in ['可预订','已售完','已占用','已选择']" :key="i">
<view></view>
<view>{{e}}</view>
<view
class="stl-item"
v-for="(e,i) in tipArray"
:key="i"
>
<view :class="[ e.c ]"></view>
<view>{{ e.n || '-'}}</view>
</view>
</view>
<view class="sfb-btn-bar">
<view class="sfb-btn-bar" v-if="selectedVenueList.length">
<view class="sbb-price"><text>¥</text>{{totalPrice || '0.00'}}</view>
<view class="sbb-btn" hover-class="hover-active" @click="toOrderConfirm">
{{selectedVenueList.length?'提交订单':'请选择场地'}}
@ -108,15 +113,22 @@
<view class="sm-fixed-tip" v-if="occupyTip!==''">
<text>{{occupyTip || '-'}}</text>
</view>
<view class="sm-fixed-order">
<order-modal></order-modal>
</view>
</view>
</template>
<script>
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import util from '../../../utils/util'
import util from '../../../utils/util';
import order_modal from '../../../components/site/order_modal/order_modal.vue';
let tipTimer = null;
export default {
components: {
'order-modal': order_modal
},
data(){
return {
storeList: [], // 店铺列表
@ -130,10 +142,28 @@ export default {
totalPrice: 0,
occupyTip: '', // 占用提示
venueAreaSize: '', // 场地滚动区域大小
tipArray: [
{ n: '空场', c: '' },
{ n: '小程序预定', c: 'green' },
{ n: '课程预定', c: 'pistac' },
{ n: '固定场锁定', c: 'blue' },
{ n: '已占用', c: 'black' },
],
}
},
computed: {
// 场地时间间隔列表
venueTimeList(){
let { venueList } = this;
console.warn(venueList)
if(!venueList.length || !venueList[0] || !venueList[0].items || !venueList[0].items.length)return [];
let _obj = {};
return ([].concat(...venueList[0].items.map(e=>e.time.split('-')))).filter(e=>{
let _bol = !!_obj[e];
!_bol?_obj[e] = true:'';
return !_bol;
})
}
},
onUnload(){
this.occupyTip = '';
@ -198,6 +228,7 @@ export default {
date: curDateInfo.dateStr || '',
})
if(!_venueList.length)return util.showNone('没有场地信息！');
this.venueList = _venueList || [];
this.$nextTick(_=>{
this.getSelectedVenues();
@ -517,12 +548,21 @@ export default {
.sti-item{
position: relative;
width: 112upx;
height: 84upx;
text-align: center;
line-height: 84upx;
font-size: 24upx;
color: #333;
height: 90upx;
border-right: 2upx solid #d8d8d8;
>view{
position: absolute;
left: 0;
top: 50%;
padding: 0 10upx;
height: 100%;
width: 100%;
text-align: center;
line-height: 84upx;
font-size: 24upx;
color: #333;
@include textHide(1);
}
&::after{
content: '';
position: absolute;
@ -540,7 +580,9 @@ export default {
}
&:first-child{
height: 72upx;
border-right-color: transparent;
>view{
line-height: 72upx;
}
}
}
@ -553,21 +595,22 @@ export default {
white-space: nowrap;
.svl-list{
display: inline-block;
width: 136upx;
width: 196upx;
.sl-item{
height: 84upx;
height: 90upx;
&:not(:first-child){
@include centerFlex(center);
>view{
padding: 0 10upx;
width: 116upx;
height: 44upx;
line-height: 40upx;
width: 176upx;
height: 72upx;
line-height: 68upx;
text-align: center;
border: 2upx solid $themeColor;
border-radius: 22upx;
border-radius: 10upx;
font-size: 28upx;
color: $themeColor;
background-color: #fff;
@include textHide(1);
&.grey{
color: #9A9A9D;
@ -579,21 +622,33 @@ export default {
border-color: $themeColor;
background-color: $themeColor;
}
&.cyan{
background-color: rgba($color: #33CCA9, $alpha: .18);
}
&.black{
color: #FFF;
border-color: #333333;
background-color: #333333;
}
&.blue{
color: #fff;
border-color: #4F7CC7;
background-color: #4F7CC7;
}
.pistac{
color: #fff;
background-color: #68C43B;
border-color: #68C43B;
}
}
}
&:first-child{
height: 72upx;
line-height: 70upx;
text-align: center;
font-size: 24upx;
font-weight: 500;
border-bottom: 2upx solid #F2F2F7;
border-bottom: 2upx solid #D8D8D8;
background-color: #fff;
color: #333;
@include textHide(1);
@ -677,33 +732,38 @@ export default {
height: 182upx;
@include centerFlex(center);
.stl-item{
&:nth-child(2)>view:first-child{
border-color: #D7D7DD;
background-color: #D7D7DD;
}
&:nth-child(3)>view:first-child{
border-color: #333333;
background-color: #333333;
}
&:nth-child(4)>view:first-child{
background-color: $themeColor;
}
>view{
margin: 0 14upx;
&:first-child{
width: 116upx;
height: 44upx;
border-radius: 22upx;
border: 2upx solid $themeColor;
margin-bottom: 14upx;
margin: 0 auto;
width: 40upx;
height: 22upx;
border-radius: 6upx;
border: 1upx solid $themeColor;
margin-bottom: 8upx;
}
&:nth-child(2){
line-height: 40upx;
line-height: 34upx;
text-align: center;
font-size: 28upx;
color: #9a9a9d;
}
&.green{
background-color: $themeColor;
}
&.pistac{
background-color: #68C43B;
border-color: #68C43B;
}
&.blue{
background-color: #4F7CC7;
border-color: #4F7CC7;
}
&.black{
background-color: #333333;
border-color: #333333;
}
}
}
}
@ -753,5 +813,12 @@ export default {
line-height: 44upx;
color: #fff;
}
.sm-fixed-order{
position: fixed;
left: 0;
bottom: 0;
z-index: 2;
width: 100%;
}
}
</style>

35
src/pages/site/occupy_success/occupy_success.vue
View File

@ -0,0 +1,35 @@
<template>
<view class="occupy-success">
<view class="os-address">欧轩智能场馆(羽毛球馆永泰店)</view>
<image class="os-code"></image>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '~style/public.scss';
.occupy-success{
padding: 0 24upx;
.os-address{
margin-bottom: 80upx;
height: 92upx;
line-height: 90upx;
border-bottom: 2upx solid #D8D8D8;
font-size: 32upx;
color: #333;
@include textHide(1);
}
.os-code{
margin: 0 auto 40upx;
display: block;
width: 400upx;
height: 400upx;
background-color: skyblue;
}
}
</style>
Write Preview
Loading…
Cancel
Save