112 lines
4.2 KiB
Vue
112 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<status-container titlet="订单提交">
|
|
<view slot="content">
|
|
<view class="fon38 tcenter mar-sx50">请完善您的信息</view>
|
|
<view class="pad-zy50 pad-s20">
|
|
<view class="posir fon30 mar-x50">
|
|
<text class="col9 posia pad-zy10 input-title">婚期</text>
|
|
<picker mode="date" @change="chooseTime(0,$event)">
|
|
<input type="text" v-model="lasttime" disabled @tap="chooseEv(0)" class="input-box width100 radius20 pad-zy30" :class="current==0 ? 'focusc' : ''" placeholder="请选择婚期" placeholder-style="color:#000000">
|
|
</picker>
|
|
</view>
|
|
<view class="posir fon30 mar-x50">
|
|
<text class="col9 posia pad-zy10 input-title">希望送到日期</text>
|
|
<picker mode="date" @change="chooseTime(1,$event)">
|
|
<input type="text" v-model="totime" disabled @tap="chooseEv(1)" class="input-box width100 radius20 pad-zy30" :class="current==1 ? 'focusc' : ''" placeholder="请选择送达日期" placeholder-style="color:#000000">
|
|
</picker>
|
|
</view>
|
|
<view class="posir fon30 mar-x50">
|
|
<text class="col9 posia pad-zy10 input-title">收货地址(必填)</text>
|
|
<input type="text" v-model="address" @tap="chooseEv(2)" class="input-box width100 radius20 pad-zy30" :class="current==2 ? 'focusc' : ''" placeholder="请填写收货地址" placeholder-style="color:#000000">
|
|
</view>
|
|
<view class="posir fon30 mar-x50">
|
|
<text class="col9 posia pad-zy10 input-title">收货联系人(必填)</text>
|
|
<input type="text" v-model="name" @tap="chooseEv(3)" class="input-box width100 radius20 pad-zy30" :class="current==3 ? 'focusc' : ''" placeholder="请填写联系人" placeholder-style="color:#000000">
|
|
</view>
|
|
<view class="posir fon30 mar-x50">
|
|
<text class="col9 posia pad-zy10 input-title">收货电话(必填)</text>
|
|
<input type="number" v-model="phone" maxlength="11" @tap="chooseEv(4)" class="input-box width100 radius20 pad-zy30" :class="current==4 ? 'focusc' : ''" placeholder="请填写联系电话" placeholder-style="color:#000000">
|
|
</view>
|
|
<view @tap="submit" class="navigate-to-where radius30 colf fon36 tcenter">提交完成</view>
|
|
</view>
|
|
</view>
|
|
</status-container>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current:6,
|
|
lasttime:'',//婚期
|
|
totime:'',//希望送到日期
|
|
address:'',//收货地址
|
|
name:'',//收货联系人
|
|
phone:'',//收货电话
|
|
flag:true
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log(uni.getStorageSync('buyList'),'缓存数组')
|
|
},
|
|
methods: {
|
|
// 提交
|
|
submit(){
|
|
if(this.checkEmpty() && this.flag){
|
|
this.flag = false;
|
|
let params = {
|
|
sku_list: uni.getStorageSync('buyList'),
|
|
phone: this.phone,
|
|
contacts: this.name,
|
|
address: this.address,
|
|
expected_delivery_date: this.totime,
|
|
wedding_date: this.lasttime,
|
|
}
|
|
this.$requst.post('/api/order/create',params).then(res=>{
|
|
if(res.code==0) {
|
|
uni.reLaunch({
|
|
url:`/pagesB/finish/finish?id=${res.data.id}`
|
|
})
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg);
|
|
}
|
|
})
|
|
}
|
|
},
|
|
checkEmpty(){
|
|
let result = false;
|
|
if(!this.address) {
|
|
this.$toolAll.tools.showToast('请填写收货地址');
|
|
} else if(!this.name) {
|
|
this.$toolAll.tools.showToast('请填写联系人');
|
|
} else if(this.$toolAll.tools.isPhone(this.phone)) {
|
|
this.$toolAll.tools.showToast('请正确填写联系电话');
|
|
} else {
|
|
result = true;
|
|
}
|
|
return result;
|
|
},
|
|
chooseEv(index) {
|
|
this.current = index;
|
|
},
|
|
chooseTime(index,e) {
|
|
let timestr = e.detail.value;
|
|
if(index) {
|
|
this.totime = timestr;
|
|
} else {
|
|
this.lasttime = timestr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.input-title{background-color: #f4f4f4;left: 30rpx;top: -24rpx;}
|
|
.input-box{border: 4rpx solid #dddddd;box-sizing: border-box;height: 84rpx;line-height: 84rpx;}
|
|
.focusc{border-color: #ff3970;}
|
|
.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);position: fixed;bottom: 20rpx;left: 50%;transform: translateX(-50%);width: 620rpx;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .6);}
|
|
</style>
|