127 lines
2.7 KiB
Vue
127 lines
2.7 KiB
Vue
<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" @click="addManicureOrder">确认订单</view>
|
||
<u-picker mode="time" v-model="show" :params="params" @confirm="chooseDate"></u-picker>
|
||
<u-toast ref="uToast" />
|
||
</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: {
|
||
validateValue() {
|
||
if(this.$u.test.isEmpty(this.name)) {
|
||
this.showToast('姓名不能为空', 'warning');
|
||
return false;
|
||
}
|
||
if(this.$u.test.isEmpty(this.time)) {
|
||
this.showToast('日期不能为空', 'warning');
|
||
return false;
|
||
}
|
||
if(new Date() > new Date(this.time)) {
|
||
this.showToast('日期错误', 'warning');
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
addManicureOrder() {
|
||
if(!this.validateValue()) return false;
|
||
this.$u.api.addManicure({
|
||
name: this.name,
|
||
time: new Date(this.time)
|
||
}).then((res)=>{
|
||
let type = res.errCode == 0 ? 'success' : 'error';
|
||
this.showToast(res.message, type);
|
||
})
|
||
},
|
||
chooseDate(e) {
|
||
// let time = e.year + '年' + e.month + '月' + e.day + '日' + e.hour + '时' + e.minute + '分'
|
||
let time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
|
||
this.time = time
|
||
},
|
||
showToast(message, type) {
|
||
this.$refs.uToast.show({
|
||
title: message,
|
||
type: type,
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</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> |