caimei-applets-caimei/pages/seller/remarks/add.vue

<template>
	<view class="container qualifications" :style="{paddingBottom :isIphoneX ? (218+68)+'rpx' : '218rpx'}">
		<view class="qualifications-title">
			若发货商品内存在仪器类商品，建议填写下列商品信息。
		</view>
		<view class="qualifications-content">
			<view class="list" v-for="(item,index) in qualificationsList" :key="index">
				<view class="list-view-title">
					<view class="title-left">商品{{ index+1 }}</view>
					<view class="title-right" v-if="(index+1) > 1" @click="deleteLogistItemFn(item,index)">
						删除商品
					</view>
				</view>
				<view class="list-view">
					<view class="list-view-label">商品</view>
					<view class="list-view-text">
						<picker @change="bindPickerChange(item,$event)" :value="index" :range="productActions" range-key="name">
							<input class="input" type="text" v-model="item.productName" placeholder="请选择商品" disabled="true">
							<text class="iconfont icon-xiayibu"></text>
						</picker>
					</view>
				</view>
				<view class="list-view">
					<view class="list-view-label">SN码</view>
					<view class="list-view-text">
						<input class="input" type="text" v-model="item.sn" placeholder="请输入商品SN码" @blur="hanldSnCodeChecked">
					</view>
				</view>
				<view class="list-view" v-for="(file,fileIndex) in item.fileList" :key="fileIndex">
					<view class="list-view-label">资质文件</view>
					<view class="list-view-text">
						<view class="input">{{ file.fileName }}</view>
						<text class="iconfont icon-iconfontguanbi" @click.stop="deleteFileFn(item.fileList,index)"></text>
					</view>
				</view>	
				<view class="list-view" >
					<view class="list-view-label">资质文件</view>
					<view class="list-view-text">
						<view class="list-view-file" @click="uploadFile(item.fileList)">上传</view>
					</view>
				</view>	
				<view class="list-view-title none">图片<text class="none">(若不方便上传文件，可用图片代替)</text></view>
				<view class="list-view-upload clearfix">
					<view class="photo-item" v-for="(image, imageIndex) in item.imageList" :key="index">
						<image :src="image" mode="aspectFill" @click.stop="previewImg(item.imageList,imageIndex)"></image>
						<text class="iconfont icon-iconfontguanbi" @click.stop="deletePhotoFn(item.imageList,imageIndex)"></text>
					</view>
					<view class="photo-item add" @click.stop="uploadPhotoFn(item.imageList)" v-if="item.imageList.length<10 || item.imageList.length == 0">
						<text class="iconfont icon-jiahao"></text>
					</view>
				</view>
			</view>
			<view class="list-btn" v-if="qualificationsList.length < productActions.length">
				<view class="btn add-btn" @click="addListFn">
					<text class="iconfont icon-jiahao"></text>
					<text>添加商品</text>
				</view>
			</view>
		</view>
		<view class="qualifications-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0'}">
			<view class="edit-button-canel" @click="editButtonCanel">暂不填写</view>
			<view class="edit-button" @click="editButtonConfim">确定</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import authorize from '@/common/config/authorize.js' 
	import { uploadFileImage , uploadFilePdfDocDocx } from "@/services/public.js"
	
	var isPreviewImg;
	export default{
		data() {
			return{
				isIphoneX:this.$store.state.isIphoneX,
				shopOrderId:0,
				logisticsBatchId:0,
				productActions:[],
				qualificationsList:[
					{
						productName:'',
						recordId:'',
						sn:'',
						fileList:[],
						imageList:[]
					}
				]
			}
		},
		onLoad(option) {
			console.log(option)
			if(option.type == 'add'){
				this.logisticsBatchId = option.logisticsBatchId
				this.shopOrderId = option.shopOrderId
				this.GetSupplierLogisticsRecord()
			}else{
				this.logisticsBatchId = option.logisticsBatchId
				this.shopOrderId = option.shopOrderId
				this.GetSupplierLogisticsRecord()
				this.GetSupplierQualificationData()
			}
		},
		methods:{
			...mapMutations(['login']),
			GetSupplierQualificationData(){//编辑回显商品资质信息
				this.ShopService.GetSupplierQualificationData(
					{ 
						logisticsBatchId : this.logisticsBatchId ,
					}
				)
				.then(response =>{
					const data = response.data
					if(data && data.length > 0){
						this.qualificationsList = data
						this.isEmpty = false
					}else{
						this.isEmpty = true
					}
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			GetSupplierLogisticsRecord(){//添加商品资质初始化查询商品信息
				this.ShopService.GetSupplierLogisticsRecord(
					{ 
						logisticsBatchId : this.logisticsBatchId
					}
				)
				.then(response =>{
					const data = response.data
					data.forEach((el,index) => {
						let obj = {
								value : el.id,
								name : el.productName
						}
						this.productActions.push(obj)
					})
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			editButtonConfim(){//确定
				// 校验物流公司不能为空
				let isRecordId = false
				let isSnCode = false
				let isFileList = false
				let isImageList = false
				let params = [];//参数
				this.qualificationsList.forEach((el,index) => {
					if(el.recordId == ''){ isRecordId = true }
					if(el.sn == ''){ isSnCode = true }
					if(el.fileList == ''){ isFileList = true }
					if(el.imageList == ''){ isImageList = true }
					let paramsObject = {
							recordId : el.recordId,
							sn : el.sn,
							files : el.fileList,
							images : el.imageList
						}
					params.push(paramsObject)	
				})
				if(isRecordId){
					this.$util.msg('请选择商品',2000);
					return
				}
				if(isSnCode){
					this.$util.msg('请输入商品SN码',2000);
					return
				}
				if(isFileList && isImageList){
					this.$util.msg('请上传商品资质文件',2000);
					return
				}
				console.log('params========>',params)
				this.ShopService.GetSupplierQualificationUpdata(
					{
						params:JSON.stringify(params)
					}
				)
				.then(response =>{
					this.$util.msg('保存成功',3000,true,'success')
					setTimeout(()=>{
						this.$api.navigateTo(`/pages/supplier/deliver/deliver-record?shopOrderId=${this.shopOrderId}`)
					},2000)
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			bindPickerChange: function(item,e) {//选择筛选条件
				item.recordId =  this.productActions[e.target.value].value
				item.productName = this.productActions[e.target.value].name
			},
			addListFn(){//添加
				let obj ={
						productName:'',
						recordId:'',
						sn:'',
						fileList:[],
						imageList:[]
					};
				this.qualificationsList.push(obj)
			},
			deleteLogistItemFn(item,index){
				this.$util.modal('提示','确认删除物流信息吗？','确定','取消',true,() =>{
					this.qualificationsList.splice(index, 1);
				})
			},
			uploadFile(array){//上传资质文件
				console.log(array)
				uploadFilePdfDocDocx().then(res =>{
					let data =  JSON.parse(res.data).data
					let obj = {
							fileName:uni.getStorageSync('fileName'),
							ossName:data.ossName
						}
					array.push(obj)
					console.log('array',array)
				})
			},
			uploadPhotoFn(array){//添加图片
				uploadFileImage().then(res =>{
					array.push(JSON.parse(res.data).data)
				})
			},
			deleteFileFn(array,index){//删除文件
				this.UploadService.PostFileDelete(
					{
						ossName:array[index].ossName,
					}
				)
				.then(res=>{
					array.splice(index, 1);
				})
				.catch(error =>{
					console.log('删除文件异常提示===>',error.msg)
				})
				
			},
			deletePhotoFn(array,index){//删除图片
				array.splice(index, 1);
			},
			previewImg (image,index) {//顶部商品图片预览
				isPreviewImg = true
				let previewUrls = image
				uni.previewImage({
					current: index, 	//图片索引
					urls: previewUrls, //必须是http图片，本地图片无效
					longPressActions:''
				})
			},
			hanldSnCodeChecked(e){
				if(!this.$reg.isNoChinese(e.detail.value)){
					this.$util.msg('SN码格式错误',2000);
					return
				}
			},
			editButtonCanel(){
				this.$api.navigateTo(`/pages/supplier/deliver/deliver-record?shopOrderId=${this.shopOrderId}`)
			},
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page {
		height: auto;
		background:#F7F7F7;
	}
	.qualifications-title{
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		font-size: $font-size-24;
		background-image: linear-gradient(270deg, #ffffff 0%, rgba(225,86,22,0.1) 51%, #ffffff 100%);
		color: $color-system;
		text-align: center;
	}
	.qualifications-content{
		width: 100%;
		height: auto;
		.list{
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			padding: 0 24rpx;
			.list-view-title{
				width: 100%;
				height: 92rpx;
				border-bottom: 1px solid #E1E1E1;
				line-height: 92rpx;
				font-size: $font-size-30;
				color: #333333;
				text-align: left;
				.title-left{
					float: left;
				}
				.title-right{
					float: right;
					color: $color-system;
					font-size: $font-size-24;
				}
				&.none{
					border-bottom: none;
				}
				.none{
					color: #666666;
				}
			}
			.list-view{
				width: 100%;
				height: 92rpx;
				border-bottom: 1px solid #E1E1E1;
				line-height: 92rpx;
				font-size: $font-size-30;
				.list-view-label{
					width: 192rpx;
					color: #666666;
					float: left;
				}
				.list-view-text{
					width: 510rpx;
					float: right;
					position: relative;
					.input{
						width: 510rpx;
						height: 92rpx;
						box-sizing: border-box;
						line-height: 92rpx;
						color: #333333;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						line-clamp: 1;
						-webkit-box-orient: vertical;
						padding-right: 40rpx;
					}
					.icon-xiayibu{
						width: 40rpx;
						height: 80rpx;
						display: block;
						position: absolute;
						right: 0;
						top: 0;
						font-size: $font-size-32;
						color: #B2B2B2;
						text-align: center;
					}
					.icon-iconfontguanbi{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background-color: #f94b4b;
						display: block;
						position: absolute;
						right: 0;
						top: 28rpx;
						font-size: $font-size-24;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
					}
					.list-view-file{
						width: 88rpx;
						height: 44rpx;
						line-height: 44rpx;
						font-size: $font-size-20;
						text-align: center;
						color: #FFFFFF;
						background-color: $color-system;
						border-radius: 4rpx;
						position: absolute;
						right: 0;
						top: 25rpx;
					}
				}
			}
			.list-view-upload{
				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: #b2b2b2;
						text-align: center;
						line-height: 112rpx;
						margin-right: 0rpx;
						.icon-jiahao{
							font-size: $font-size-44;
							color:#b2b2b2 ;
							font-weight: bold;
						}
					}
					.icon-iconfontguanbi{
						width: 30rpx;
						height: 30rpx;
						border-radius:50%;
						display: block;
						position: absolute;
						right: -10rpx;
						top: -10rpx;
						background: #f94b4b;
						text-align: center;
						line-height: 30rpx;
						color: #FFFFFF;
						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;
				}
			}
		}
		.list-btn{
			width: 702rpx;
			height: 56rpx;
			margin: 0 auto;
			.btn{
				width: 236rpx;
				height: 56rpx;
				border-radius: 28rpx;
				border: 1px solid $color-system;
				line-height: 56rpx;
				text-align: center;
				color: $color-system;
				margin: 0 auto;
			}
		}
	}
	.qualifications-btn{
		width: 100%;
		padding-top: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		.edit-button-canel{
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #e15616;
			font-size: $font-size-24;
		}
		.edit-button{
			width: 600rpx;
			height: 90rpx;
			background: $btn-confirm;
			line-height: 90rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: $font-size-30;
			margin: 0 auto;
			border-radius: 45rpx;
		}
	}
</style>