|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
+ <view class="order-content">
|
|
|
<view class="step">
|
|
|
<uni-steps :options="[{title: '停车'}, {title: '检查'}, {title: '下单'}]" :active="stepIndex" active-color="rgb(255,0,0)"></uni-steps>
|
|
|
</view>
|
|
@@ -65,7 +65,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="step-footer">
|
|
|
- <button @click="nextStep" v-if="stepIndex!=2" type="warn">下一步</button>
|
|
|
+ <button class="next-button" @click="nextStep" v-if="stepIndex!=2" type="warn">下一步</button>
|
|
|
<view v-else class="pay">
|
|
|
<text>合计:</text>
|
|
|
<text class="amount">¥10:00</text>
|
|
@@ -110,6 +110,7 @@
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
+ uni.removeStorageSync('stepIndex')
|
|
|
// 注册全局监听事件
|
|
|
uni.$once('read', this.read)
|
|
|
},
|
|
@@ -119,6 +120,7 @@
|
|
|
onShow() {
|
|
|
const index = uni.getStorageSync('stepIndex')
|
|
|
this.stepIndex = index ? index : 0
|
|
|
+ console.log(this.stepIndex)
|
|
|
},
|
|
|
methods: {
|
|
|
// 选择服务项目
|
|
@@ -151,11 +153,11 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang="scss">
|
|
|
page{
|
|
|
height: 100%;
|
|
|
}
|
|
|
- .content{
|
|
|
+ .order-content{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
@@ -178,14 +180,8 @@
|
|
|
.step-one{
|
|
|
text{
|
|
|
color: #999;
|
|
|
- margin-top: 40rpx;
|
|
|
- margin-bottom: 15%;
|
|
|
- }
|
|
|
- image{
|
|
|
- width: 40%;
|
|
|
- height: 60%;
|
|
|
+ margin: 40rpx 0;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
.step-two{
|
|
|
background-color: #F8F8F8;
|
|
@@ -229,7 +225,7 @@
|
|
|
.choose{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
- padding-bottom: 80rpx;
|
|
|
+ padding-bottom: 60rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
@@ -241,17 +237,22 @@
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
+ padding: 0 20rpx;
|
|
|
.item{
|
|
|
- width: 28%;
|
|
|
- height: 180rpx;
|
|
|
+ width: 30%;
|
|
|
+ height: 140rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
border: 1px solid #eee;
|
|
|
- border-radius: 30rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
margin-top: 30rpx;
|
|
|
color: #999;
|
|
|
+ .price{
|
|
|
+ font-size: 34rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
.avtive{
|
|
|
color: #333;
|
|
@@ -267,8 +268,10 @@
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
.choose-item{
|
|
|
- padding-left: 20rpx;
|
|
|
width: 100%;
|
|
|
+ .item{
|
|
|
+ padding: 0 30rpx;
|
|
|
+ }
|
|
|
}
|
|
|
.item{
|
|
|
width: 100%;
|
|
@@ -301,12 +304,15 @@
|
|
|
}
|
|
|
.step-footer{
|
|
|
width: 100%;
|
|
|
- height: 100rpx;
|
|
|
background-color: #fff;
|
|
|
+ .next-button{
|
|
|
+ margin: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
.pay{
|
|
|
- padding-top: 20rpx;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ padding: 10rpx;
|
|
|
border-top: 1px solid #eee;
|
|
|
display: flex;
|
|
|
align-items: center;
|