FleetManagement-MPWEIXIN/Enter/pages/send/index.vue

<template>
	<view class="send-body flex column">
		<order-item v-if="orderData" :order-data='orderData' type="card"></order-item>
		<view class="oneflex">
			<view class="send-form">
				<view class="send-form-title">信息录入：</view>
				<view class="send-form-item flex ac">
					<view class="send-form-item-label"><text style="color: red;">*</text>发货日期</view>
					<view class="send-form-item-value oneflex">
						<uni-datetime-picker v-model="submitData.departureDate">
							{{submitData.departureDate||'选择发货日期'}}
						</uni-datetime-picker>
					</view>
				</view>
				<view class="send-form-item flex ac">
					<view class="send-form-item-label"><text style="color: red;">*</text>货物重量(吨)</view>
					<view class="send-form-item-value oneflex">
						<input v-model="submitData.weight" placeholder="请输入货物重量" />
					</view>
				</view>
				<view class="send-form-item flex ac">
					<view class="send-form-item-label"> <text style="color: red;">*</text> 发货单</view>
					<view class="send-form-item-value oneflex">
						<view class="upload-container flex warp ">
							<view class="upload-item" :key='index' v-for="(item,index) in submitData.proofsList">
								<view @click="imageRemove(submitData.proofsList,index)" class="colse">
									<uni-icons type="closeempty" size="15" color="#686868"></uni-icons>
								</view>
								<image style="width: 100%; height: 100%;" @click="previewImage(submitData.proofsList,index)"
									:src="item.imageUrl"> </image>
							</view>
							<view v-if="submitData.proofsList.length<3" @click="uploadImagesFn"
								class="upload-tip flex ac jc column">
								<uni-icons type="camera" size="20" color=""></uni-icons>
								<text> 最多三张</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="send-footer flex around">
			<view @click="cancel" class="cancel flex jc ac">撤单</view>
			<view @click="submit" class="submit flex jc ac">提交</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import orderApi from '@/api/order.js'
	import orderItem from "@/components/orderItem/orderItem.vue";
	export default {
		components: {
			orderItem
		},
		data() {
			return {
				checkPage: { 
					departureDate: {
						tacitly: '',
						WrongText: '发货时间不能为空'
					},
					weight:{
						tacitly: '',
						custom:/^\d+(?=\.{0,1}\d+$|$)/,
						WrongText: '重量不能为空且必须为数字'
					},
					proofsList:{
						minLength:1,
						WrongText: '图片不能为空'
					}
				},
				submitData: { 
					"id": "",
					"motion":'1',
					"departureDate": "",
					"unloadingDate": "",
					"weight":"",
					"proofsList": []
				},
				orderData: null,  
			}
		},
		onLoad(e) {
			if (e.orderData){
				this.orderData = JSON.parse(decodeURIComponent(e.orderData));
				({id:this.submitData.id=""}=this.orderData);
			}
		},
		methods: {
			cancel(){
				orderApi.cancelOrder({
					"id": this.submitData.id
				}).then(res=>{
					if(res.code==20000){
						uni.showToast({
							title:'操作成功',
							icon:"success"
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
			submit() {
				 let chenkResult = this.tool.checkFn(this.submitData,[],this.checkPage);
				 if(chenkResult.result){
					orderApi.cargoMotion(this.submitData).then(res=>{
						if(res.code==20000){
							uni.showToast({
								icon:"success",
								title:"操作成功"
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
					})
				 }else{
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: 'error',
						message: chenkResult.WrongText,
					}) 
				 } 
			},
			imageRemove(uploadImages = this.submitData.proofsList, index) {
				this.submitData.proofsList.splice(index, 1);
			},
			previewImage(uploadImages = this.submitData.proofsList, index = undefined) {
				if (index !== undefined && uploadImages[index] !== undefined) { 
					uni.previewImage({
						current: index,
						urls:uploadImages.map(item=>item.imageUrl),
						longPressActions: {
							success: function(data) { },
							fail: function(err) { }
						}
					});
				} else {
					console.log('数据错误=>', ...arguments)
				}
			},
			uploadImagesFn() {
				this.tool.chooseImage((imageUrl) => {
					this.submitData.proofsList.push({
						imageUrl
					});
				})
			},
			 
		}
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>