caimei-applets-caimei/supplier/pages/deliver/add-logistics.vue

<template>
	<view class="container logistics" :style="{paddingBottom :isIphoneX ? (236+68)+'rpx' : '236rpx'}" v-if="isChange">
		<view class="logistics-list" v-for="(item,index) in logisticsList" :key="index">
			<view class="item-title">
				<view class="title-left">物流{{index+1}}</view>
				<view class="title-right" v-if="(index+1) > 1" @click="deleteLogistItemFn(item,index)">
					<text class="iconfont icon-shanchu" ></text>删除
				</view>
			</view>
			<view class="item-main">
				<view class="item-main-cell" @click.stop="pageNavigateTo(index)">
					<input class="input" type="text" v-model="item.label" placeholder="物流公司" disabled="true">
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="item-main-cell">
					<input class="input" type="text" v-model="item.number" placeholder="物流单号">
				</view>
				<view class="item-main-cell none" @click.stop="AddScanCode(item)" >
					<text class="iconfont icon-icon-test" ></text><text>扫码录入</text>
				</view>
			</view>
		</view>
		<view class="logistics-btn">
			<view class="btn add-btn" @click="addListFn">添加物流</view>
		</view>
		<view class="logistics-btn-fiexd" :style="{paddingBottom :isIphoneX ? '68rpx' : '34rpx'}">
			<view class="btn-tips" @click.stop="showShowRemarksFn">
				<text class="iconfont icon-xiangxiajiantou" v-if="isShowRemarks"></text>
				<text class="iconfont icon-xiangshangjiantou" v-else></text>
				添加备注
			</view>
			<view class="logistics-remarks" :class="specClass" v-show="isShowRemarks">
				<view class="label">拍照备注</view>
				<view class="remarks-photo clearfix">
					<view class="photo-item" v-for="(item, index) in photoLists" :key="index">
						<image :src="item" mode="aspectFill" @click.stop="previewImg(index)"></image>
						<text class="iconfont icon-iconfontguanbi" @click.stop="deletePhotoFn(index)"></text>
					</view>
					<view class="photo-item add" @click.stop="uploadPhotoFn" v-if="photoLists.length<10 || photoLists.length == 0">
						<text class="iconfont icon-jiahao"></text>
					</view>
				</view>
				<view class="label">文字备注</view>
				<view class="remarks-textarea">
					<textarea class="textarea" v-model="info.note" value="" placeholder="文字备注，200字以内" maxlength="200" @input="conInput"/>
					<text class="limit-text"><text class="red">{{min}}</text>/{{max}}</text>
				</view>
				<view class="remarks-tips">请备注快递单、发货现场和货物的照片，最多10张</view>
			</view>
			<view class="btn confim-btn" @click="confirmDeliverFn">确认发货</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import authorize from '@/common/config/authorize.js' 
	import { uploadFileImage } from "@/api/utils.js"
	var isPreviewImg;
	export default{
		data() {
			return{
				logisticsBatchId:'',
				isIphoneX:this.$store.state.isIphoneX,
				isChange:true,
				isShowRemarks:false,
				specClass:'',
				photoLists:[],
				checkLogicsIndex:0,
				selectID:0,
				addLogisticsType:'',
				info:{
					image:'',
					note:'',
					shopOrderId:''
				},//备注信息
				record:[],//子订单商品信息
				logisticsList:[{
					label:'',
					number:'',
					value:'',
				}],
				min:0,
				max:200
			}
		},
		watch: {
			logisticsList: {
				handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
					this.logisticsList = el
				},
				deep: true
			}
		},
		onLoad(option) {
			if(option.type == 'add'){
				this.addLogisticsType = option.type
				this.info.shopOrderId = option.shopOrderId;
				this.record = JSON.parse(option.data)
			}else{
				let queryData = JSON.parse(option.data);
				this.addLogisticsType = option.type
				this.logisticsBatchId = queryData.logisticsBatchId
				this.info.shopOrderId = option.shopOrderId;
				this.initGetLogisticsInfo()
			}
		},
		methods:{
			...mapMutations(['login']),
			initGetLogisticsInfo(){
				this.ShopService.GetLogisticsInfo({ logisticsBatchId : this.logisticsBatchId, shopOrderId:this.info.shopOrderId }).then(response =>{
					const data = response.data.logisticsBatch
					if(data.remarkImages!=null){
						this.photoLists = data.remarkImages
					}else{
						this.photoLists =[]
					}
					this.info.note = data.remark
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			AddScanCode(item){
				let self = this;
				uni.scanCode({
				    onlyFromCamera: true,
				    success: function (res) {
						item.number= res.result
						self.ShopService.GetExpressInformation({number:res.result}).then(response =>{
							item.label= response.data.label
							item.value= response.data.value
							self.selectID = response.data.id
						}).catch(error =>{
							self.$util.msg(error.msg,2000);
						})
				    }
				});
			},
			addListFn(){//添加
				this.isShowRemarks = false
				let obj ={name:'',number:'',value:''};
				this.logisticsList.push(obj)
			},
			deleteLogistItemFn(item,index){
				this.$util.modal('提示','确认删除物流信息吗？','确定','取消',true,() =>{
					this.logisticsList.splice(index, 1);
				})
			},
			pageNavigateTo(index){//选择物流公司
				this.isChange = false
				this.checkLogicsIndex = index
				this.$api.navigateTo(`/supplier/pages/deliver/logistics-list?selectID=${this.selectID}`)
			},
			showShowRemarksFn(){//显示发货备注
				this.isShowRemarks = !this.isShowRemarks 
				if(this.isShowRemarks){
					this.specClass = 'show';
				}else{
					this.specClass = 'hide';
				}
			},
			uploadPhotoFn(){//添加发货备注图片
				uploadFileImage().then(res =>{
					this.photoLists.push(JSON.parse(res.data).data)
				})
			},
			deletePhotoFn(index){//删除发货备注图片
				this.photoLists.splice(index, 1);
			},
			confirmDeliverFn(){//确认发货
				switch(this.addLogisticsType){
					case 'add':
						this.isNewAddLogisticsFn()
						break;
					case 'reple':
						this.isRepleAddLogisticsFn()
						break;
				}
			},
			isRepleAddLogisticsFn(){//重新添加物流信息
				//统一处理物流单号
				let logisticsArray = []
				let checkRepeat = false
				for (const el of this.logisticsList) {
					 // 检查缓存中是否已经存在
					if (logisticsArray.find(c => c.number === el.number && c.number === el.number)) {
					   // 已经存在
					  checkRepeat = true
					}else{
						// 不存在就说明以前没遇到过，把它记录下来
						let logisticsObj = {
								number:el.number,
								logisticsCompanyName:el.label,
								logisticsCompanyCode:el.value 
							}
						logisticsArray.push(logisticsObj)
					}
				}
				if(checkRepeat){
					this.$util.msg('物流单号重复',2000);
					return
				}
				//统一处理备注图片
				this.photoLists.forEach(el =>{
					this.info.image += el+'##'
				})
				let params = {
						logistics:logisticsArray,
						remarkImage:this.info.image,
						remark:this.info.note,
						logisticsBatchID:this.logisticsBatchId
					}
				this.ShopService.ShopAddLogisticsInfo({params:JSON.stringify(params)}).then(response =>{
					this.$util.msg('添加物流成功',2000,true,'success')
					setTimeout(()=>{
						this.$api.navigateTo(`/supplier/pages/deliver/deliver-record?shopOrderId=${this.info.shopOrderId}`)
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			isNewAddLogisticsFn(){//第一次添加发货物流信息
				if(this.logisticsList[0].label == ''){
					this.$util.msg('请选择物流公司',2000);
					return
				}
				if(this.logisticsList[0].number == ''){
					this.$util.msg('请输入物流单号',2000);
					return
				}
				//统一处理物流单号
				let logisticsArray = []
				let checkRepeat = false
				for (const el of this.logisticsList) {
					 // 检查缓存中是否已经存在
					if (logisticsArray.find(c => c.number === el.number && c.number === el.number)) {
					   // 已经存在
					  checkRepeat = true
					}else{
						// 不存在就说明以前没遇到过，把它记录下来
						let logisticsObj = {
								number:el.number,
								logisticsCompanyName:el.label,
								logisticsCompanyCode:el.value 
							}
						logisticsArray.push(logisticsObj)
					}
				}
				if(checkRepeat){
					this.$util.msg('物流单号重复',2000);
					return
				}
				//统一处理备注图片
				this.photoLists.forEach(el =>{
					this.info.image += el+'##'
				})
				let params = {
						logistics:logisticsArray,
						record:this.record,
						info:this.info
					}
				this.ShopService.ShopAddLogistics({params:JSON.stringify(params)}).then(response =>{
					this.$util.msg('发货成功',2000,true,'success')
					setTimeout(()=>{
						this.$api.navigateTo(`/supplier/pages/deliver/deliver-record?shopOrderId=${this.info.shopOrderId}`)
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			previewImg (index) {//顶部商品图片预览
				isPreviewImg = true
				let previewUrls = this.photoLists
				uni.previewImage({
					current: index, 	//图片索引
					urls: previewUrls, //必须是http图片，本地图片无效
					longPressActions:''
				})
			},
			conInput(e){//备注文字字数限制
				let value = e.detail.value;
				let len = parseInt(value.length);
				if (len > this.max) return;
				this.min = len;
				if(this.min == 200){
					this.$util.msg('您输入的字数已达上限',2000);
				}
			}
		},
		onShow() {
			//处理选择物流公司
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if(currPage.data.select =='select'){
				let SelectData = uni.getStorageSync('selectLogics')
				this.selectID = SelectData.id
				let setNewLogisticsList = this.logisticsList
				setNewLogisticsList.forEach((el,index,arr) =>{
					if(index == this.checkLogicsIndex ){
						arr[this.checkLogicsIndex] = Object.assign({},arr[this.checkLogicsIndex],SelectData)
					}
				})
				this.logisticsList = setNewLogisticsList
			}
			this.isChange = true
		}
	}
</script>

<style lang="scss">
	page {
		height: auto;
		background:#F7F7F7;
	}
	@keyframes showRemarks {
		0% {opacity: 0;}
		20% {opacity: 0.2;}
		40% {opacity: 0.4;}
		60% {opacity: 0.6;}
		80% {opacity: 0.8;}
		100% {opacity: 1;}
	}
	@keyframes hideRemarks {
		0% {opacity: 1;}
		20% {opacity: 0.8;}
		40% {opacity: 0.6;}
		60% {opacity: 0.4;}
		80% {opacity: 0.2;}
		100% {opacity: 0;}
	}
	.logistics{
		border-top: 1px solid #EBEBEB;
	}
	.logistics-list{
		width: 100%;
		height: auto;
		padding: 10rpx 0;
		background-color: #FFFFFF;
		margin-bottom: 24rpx;
		.item-title{
			width: 702rpx;
			height: 80rpx;
			padding: 0 24rpx;
			line-height: 80rpx;
			text-align: left;
			font-size: $font-size-28;
			color: $text-color;
			border-bottom: 1px solid #EBEBEB;
			.title-left{
				float: left;
			}
			.title-right{
				float: right;
				.icon-shanchu{
					font-size: $font-size-30;
					color: #FF2A2A;
				}
			}
		}
		.item-main{
			width: 702rpx;
			padding: 0 24rpx;
			.item-main-cell{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #EBEBEB;
				position: relative;
				&.none{
					border-bottom: none;
					text-align: center;
					font-size: $font-size-28;
					color: $color-system;
				}
				.icon-xiayibu{
					width: 40rpx;
					height: 80rpx;
					display: block;
					position: absolute;
					right: 0;
					top: 0;
					font-size: $font-size-32;
					color: $text-color;
					text-align: center;
				}
				.icon-icon-test{
					color: $color-system;
					font-size: $font-size-28;
					margin-right: 10rpx;
				}
				.input{
					width: 100%;
					height: 44rpx;
					line-height: 44rpx;
					padding: 18rpx 0;
					font-size: $font-size-28;
					color: $text-color;
				}
			}
		}
	}
	.logistics-btn{
		width: 702rpx;
		height: 88rpx;
		margin: 0 auto;
		.btn{
			width: 100%;
			height: 100%;
			background-color: #FFF;
			border-radius: 14rpx;
			border: 1px solid $color-system;
			line-height: 88rpx;
			text-align: center;
			color: $color-system;
		}
	}
	.logistics-btn-fiexd{
		width: 702rpx;
		padding: 0 24rpx;
		height:auto;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0 0;
		box-shadow:0px 3px 10px rgba(51, 51, 51,0.5);
		z-index: 999;
		.btn-tips{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: $font-size-28;
			color: #999999;
		}
		.confim-btn{
			width: 702rpx;
			height: 88rpx;
			background: $btn-confirm;
			line-height: 88rpx;
			text-align: center;
			color: #FFF;
			font-size: $font-size-28;
			border-radius: 14rpx;
		}
		.logistics-remarks{
			width: 100%;
			height: auto;
			&.show {
				animation: showRemarks 0.2s linear both;
			}
			&.hide {
				animation: hideRemarks 0.2s linear both;
			}
			.label{
				height: 44rpx;
				line-height: 44rpx;
				font-size: $font-size-28;
				color: $text-color;
			}
			.remarks-photo{
				width: 100%;
				height: auto;	
				padding: 10rpx 0;
				.photo-item{
					display: inline-block;
					width: 112rpx;
					height: 112rpx;
					margin: 10rpx 0;
					margin-right: 25rpx;
					border-radius: 10rpx;
					border:1px solid #F5F5F5;
					position: relative;
					float: left;
					&.add{
						width: 112rpx;
						height: 112rpx;
						border-color: #FFC684;
						text-align: center;
						line-height: 112rpx;
						margin-right: 0rpx;
						.icon-jiahao{
							font-size: $font-size-44;
							color:#FFC684 ;
							font-weight: bold;
						}
					}
					.icon-iconfontguanbi{
						width: 24rpx;
						height: 24rpx;
						border-radius: 0 10rpx 0 0;
						display: block;
						position: absolute;
						right: 0;
						top: 0;
						background: rgba(51, 51, 51, 0.7);
						text-align: center;
						line-height: 24rpx;
						color: #FFF;
						font-size: $font-size-22;
					}
					image{
						width: 112rpx;
						height: 112rpx;
						border-radius: 10rpx;
					}
				}	
				.photo-list{
					width: 100%;
					height: 116rpx;
					overflow: hidden;
					white-space: nowrap;
					display: flex;
					align-items: flex-start;
				}
				.scoll-wrapper{
					display:flex;
					align-items: flex-start;
				}
			}
			.remarks-textarea{
				width: 652rpx;
				height: 124rpx;
				padding:10rpx 24rpx 24rpx 24rpx;
				margin-top: 20rpx;
				background-color: #F5F5F5;
				border-radius: 10rpx;
				position: relative;
				.textarea{
					width: 100%;
					height: 100%;
					line-height: 36rpx;
					font-size: $font-size-24;
					color: $text-color;
					z-index: 1;
				}
				.limit-text{
					position: absolute;
					right: 20rpx;
					bottom: 0;
					line-height: 44rpx;
					font-size: $font-size-24;
					color: #D0D0D0;
					.red{
						color: $color-system;
					}
				}
			}
			.remarks-tips{
				width: 100%;
				line-height: 70rpx;
				font-size: $font-size-24;
				color: #999999;
			}
		}
	}
</style>