mall-applet1/pagesB/settlement/settlement.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'),'缓存数组')
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取默认信息
			getUserInfo(){
				this.$requst.get('/api/user/info').then(res=>{
					console.log(res,'用户信息')
					if(res.code==0) {
						this.address = res.data.address; //地址
						this.name = res.data.contacts; //联系人
						this.phone = res.data.mobile; //电话
					}
				})
			},
			// 提交
			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{
							console.log(res.msg,'提示信息')
							this.$toolAll.tools.showToast(res.msg);
							this.flag = true;
						}
					})
				}
			},
			checkEmpty(){
				let result = false;
				if(!this.lasttime) {
					this.$toolAll.tools.showToast('请选择婚期');
				} else if(!this.totime) {
					this.$toolAll.tools.showToast('请选择希望送到日期');
				} else 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>