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

<template>
	<view class="receive-body flex column">
		<order-item v-if="orderData" :order-data='orderData' type="card"></order-item>
		<view class="oneflex">
			<view class="receive-form">
				<view class="receive-form-title">信息录入：</view>
				<view class="receive-form-item flex ac">
					<view class="receive-form-item-label"><text style="color: red;">*</text>卸货日期</view>
					<view class="receive-form-item-value oneflex">
						<uni-datetime-picker v-model="submitData.unloadingDate">
							{{submitData.unloadingDate||'选择卸货日期'}}
						</uni-datetime-picker>
					</view>
				</view>
				 
				<view class="receive-form-item flex ac">
					<view class="receive-form-item-label"> 
					<text style="color: red;">*</text> 卸货单
					</view>
					<view class="receive-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="receive-footer flex around">
			<view @click="back" 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: { 
					unloadingDate: {
						tacitly: '',
						WrongText: '卸货时间不能为空'
					}, 
					proofsList:{
						minLength:1,
						WrongText: '图片不能为空'
					}
				},
				submitData: { 
					"id": "",
					"motion":'2', 
					"unloadingDate": "", 
					"proofsList": []
				},
				orderData: null,  
			}
		},
		onLoad(e) {
			if (e.orderData){
				this.orderData = JSON.parse(decodeURIComponent(e.orderData));
				({id:this.submitData.id=""}=this.orderData);
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			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
					});
				})
			},
			handleAgreePrivacyAuthorization() {

			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			upload() {
				wx.openPrivacyContract()
				// this.$refs.files.upload()
			}
		}
	}
</script>

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