deming/pageE/tool/ManicureOrder.vue

94 lines
1.8 KiB
Vue
Raw Normal View History

2020-06-04 08:21:34 +08:00
<template>
<view class="manicure-order">
<view class="order-form">
<view class="order-name">
<view>美甲人</view>
<input type="text" v-model="name" />
</view>
<view class="order-date" @click="show=true">
<view>美甲时间</view>
<img src="../static/mine/21.png" v-if="!time" />
<view v-else>{{ time }}</view>
</view>
</view>
<view class="order-btn">确认订单</view>
<u-picker mode="time" v-model="show" :params="params" @confirm="chooseDate"></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
time: '',
params: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: false
},
show: false
}
},
methods: {
chooseDate(e) {
let time = e.year + '年' + e.month + '月' + e.day + '日' + e.hour + '时' + e.minute + '分'
this.time = time
}
},
};
</script>
<style lang="scss" scoped>
.manicure-order {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
padding-top: 1rpx;
.order-form {
> view {
height: 98rpx;
background-color: #ffffff;
padding: 35rpx 30rpx;
&:not(:last-child) {
margin-bottom: 2rpx;
}
}
.order-name {
display: flex;
align-items: center;
> view {
font-size: 30rpx;
color: rgba(51,51,51,1);
}
> input {
flex: 1;
text-align: right;
}
}
.order-date {
display: flex;
align-items: center;
justify-content: space-between;
> img {
width: 14rpx;
height :24rpx;
}
}
}
.order-btn {
width: 690rpx;
height: 98rpx;
background: rgba(255,120,15,1);
border-radius: 49rpx;
font-size: 36rpx;
color: rgba(255,255,255,1);
line-height: 98rpx;
text-align: center;
position: absolute;
bottom: 40rpx;
left: 50%;
transform: translate(-50%, 0);
}
}
</style>