标签：32rpx color margin 接口 customerInfo item background 后台 数据

<template>
	<view class="content-box" style="min-height: 100vh;  background: #F5F5F5;">
		<common-header>申请发货清单</common-header>
		<view class="address-box">
			<view v-if="customerInfo.consignee_name">
				<view class="line1"> <span>{{customerInfo.consignee_name}}</span><span
						style="margin-left: 10rpx;">{{customerInfo.consignee_phone}}</span> </view>
				<view class="line2"> {{customerInfo.consignee_area}}<br>{{customerInfo.consignee_address}}</view>
				<image @click="confirmWrite('edit')" src="../../../../static/yl_img/edit.png"></image>
			</view>
			<view v-if="!customerInfo.consignee_name">
				配置收货地址
				<u-icon @click="confirmWrite()" name="arrow-rightward" size='36' color="#ED9756"></u-icon>
			</view>
		</view>

		<view class="deliveryTab-box">
			<view class="deliveryTab">
				<view :class="activeTab==1?'tab-item active':'tab-item'" @click="handleTab(1)">
					<image :src="activeTab==1? '../../../../static/radio.png':'../../../../static/noradio.png'"
						mode="aspectFit"></image>
					<view>消耗库存</view>
				</view>
				<view v-if="canAllCar" :class="activeTab==2?'tab-item active':'tab-item'" @click="handleTab(2)">
					<image :src="activeTab==2? '../../../../static/radio.png':'../../../../static/noradio.png'"
						mode="aspectFit"></image>
					<view>整车装发</view>
				</view>
			</view>
			<view class="tab-detail">
				<view v-show="activeTab==1">
					当前组件可用库存满足实际需求。
					该清单中，逆变器和并网箱，需单独物流配送。
				</view>
				<view v-show="activeTab==2">
					<view class="tab-line">
						<view class="line-key">车型匹配：</view>
						<view class="line-value">
							<view>{{carModelDetailVO.carModelName}}</view>
							<image src="../../../../static/help.png" mode="aspectFit" @click="handleHelp()"></image>
						</view>

					</view>
					<view class="tab-line">
						<view class="line-key">组件实际需求(块)：</view>
						<view class="line-value">{{carModelDetailVO.actualCount}}</view>
					</view>
					<view class="tab-line">
						<view class="line-key">组件整车请购(块)：</view>
						<view class="line-value">{{carModelDetailVO.numberOfMaxPallets}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- projectNumberList.split(',').length -->
		<view class="num-total">
			项目数量：<text>{{projectCount}}</text>
		</view>

		<view class="cell_box">
			<view class="cell-tab">
				<view v-for="(item,index) in cellList" :class="cellTab==index?'cell-tab-item active':'cell-tab-item'"
					@click="handleCellTab(item)">{{item.text}}</view>

			</view>
		</view>

		<view class="cell_detail_box">
			<view v-if="cellTab==0">
				<view class="cell_detail_item" v-for="(item,index) in moduleList" :key="index">
					<view class="cell_title">{{item.moudleName}}</view>
					<view class="cell_actualCount">实际需求(块)：{{item.allCount}}</view>
					<view class="brandList_box" v-if="activeTab==1">
						<model :brand="item.brandList" :subList="item.subList"></model>
					</view>
				</view>
			</view>
			<view>
				<view v-if="cellTab==1">
					<view class="cell_item" v-for="(item,index) in cellList[1].list" :key="index">
						<view class="cell_title">
							{{item.equipmentModel}}
						</view>
						<view class="cell_num">
							实际需求(台)：{{item.allCount}}
						</view>
					</view>

				</view>

				<view v-if="cellTab==2">
					<view class="cell_item">
						<view class="cell_title">
							并网箱
						</view>
						<view class="cell_num">
							该清单中，并网箱相关数量规格，默认同逆变器一比一匹配。
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-checked">
			<view>
				<!-- (customerInfo.consignee_name) && !canSubmit -->
				<!-- :disabled="(!canSubmit) && activeTab!=2" -->
				<u-button :class="(!canSubmit && activeTab!=2 )?'disable-button':''"  @click="submitDeliverGoods"
					type="primary">提交发货申请</u-button>
			</view>
		</view>
		<u-modal ref="uModal" @confirm="confirmWrite()" :async-close="true" border-radius='32'
			:confirm-style="{'color':'#1C1C28','border-left':'1rpx solid #e4e7ed'}" :show-cancel-button='true'
			:confirm-text='confirmText' :show-title='false' v-model="editAddressModal">
			<view class="slot-content">
				<rich-text :nodes="editAddressContent"></rich-text>
			</view>
		</u-modal>
		<u-modal ref="uModal" @confirm="handleOk()" :async-close="true" border-radius='32'
			:confirm-style="{'color':'#1C1C28','border-left':'1rpx solid #e4e7ed'}" :show-cancel-button='false'
			confirm-text='知道了' :show-title='false' v-model="showpopupModal">
			<view class="showpopupModal-slot">
				<rich-text :nodes="showpopupContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getOnlineDetail
	} from '@/api/common.js'
	import {
		getGoodsInfo,
		submitGoodsInfo
	} from '@/api/goods.js'
	import model from './modelCompontens.vue'
	export default {
		components: {
			model,
		},
		data() {
			return {
				customerInfo: {},
				deviceList: [{
						deviceName: '逆变器(台)',
						show: true,
						list: []
					},
					{
						deviceName: '并网箱(台)',
						show: true,
						list: []
					},
					{
						deviceName: '组件(块)',
						show: true,
						list: []
					}
				],
				editAddressModal: false,
				showpopupModal: false,
				confirmText: '',
				editAddressContent: '',
				oldData: {},
				projectNumberList: [],
				activeTab: 1,
				cellTab: 0,
				showpopupContent: '',
				deliveryTabList: [{
					text: '消耗库存'
				}],
				confirmShipMentVO: {},
				canAllCar: '',
				carModelDetailVO: {},
				customerStockList: [],
				distributionListVOS: [],
				projectCount: '',
				cellList: [{
						text: '组件',
						value: 0,
						list: []
					},
					{
						text: '逆变器',
						value: 1,
						list: []
					}, {
						text: '并网箱',
						value: 2,
						list: []
					}
				],
                //传到组件里的是这样的数据
				moduleList: [{
					moudleName: '540W',
					allCount: 34,
					brandList: [],
					subList: []  //主要是组件循环用
				}]
			}
		},
		computed: {
			canSubmit() {
				var isCan = true
				this.moduleList.forEach((item, index) => {
					if (item.subList.some((v) => !v.brand || !v.useCount)) {
						isCan = false
					} else if(item.subList.some((v) => v.usableStocks==0)){ //库存为零
						isCan = false
					}else {
						var all = item.subList.reduce((prev, v) => {
							return prev + Number(v.useCount)
						}, 0)
						if (item.allCount != all) {
							isCan = false
						}
					}
				})
				return isCan
			}
		},
		methods: {
			handleTab(index) {
				this.activeTab = index
			},
			handleCellTab(item) {
				this.cellTab = item.value
			},
			handleOk() {
				this.showpopupModal = false
			},
			handleHelp() {
				this.showpopupModal = true
				this.showpopupContent = `${this.carModelDetailVO.carModelName}` + `<br>` + `组件方案：${this.carModelDetailVO.loadingScheme}` + `<br>` + `单托块数：${this.carModelDetailVO.numberOfSinglePallets}` + `<br>` +
					`可申请装载组件(托)：${this.carModelDetailVO.minLoadableComponents}～${this.carModelDetailVO.maxLoadableComponents}` + `<br>` + `可申请装载组件(块)：${this.carModelDetailVO.numberOfMinPallets}～${this.carModelDetailVO.numberOfMaxPallets}`
			},
			Confirm() {

			},
			handleCell(index) {
				this.deviceList[index].show = !this.deviceList[index].show
			},
			submitDeliverGoods() {
				console.log(this.canSubmit)
				if(this.activeTab==1){
					if(!this.canSubmit){
						uni.showToast({
							icon:'none',
							title:'选择消耗的品牌组件数量，与实际需求不符/库存无法满足',
							duration: 2000
						})
						return
					}
				}
				
				if (this.customerInfo.consignee_name) {
					this.confirmText = '确认提交'
					this.editAddressContent = `收货信息：` + this.customerInfo.consignee_name + this.customerInfo
						.consignee_phone + `<br>` + this.customerInfo.consignee_area + `<br>` + this.customerInfo
						.consignee_address
				} else {
					this.confirmText = '去填写'
					this.editAddressContent = `请在“我的-企业信息”中完善<br>收货地址，用于收货`
				}
				this.editAddressModal = true
			},
			confirmWrite(type) {
				var that = this
				if (this.confirmText == '确认提交' && type != 'edit') {
					// console.log(this.oldData)
					let inventoryBurnParams = []
					this.moduleList.forEach(v => {
						v.subList.forEach(list => {
							inventoryBurnParams.push({
								componentModel: v.moudleName,
								componentBrand: list.brand,
								componentNumber: list.useCount,
								actualMatchModel:v.moudleName
							})
						})
					})
				
					console.log(inventoryBurnParams, "inventoryBurnParams")	
					// return
					let params = {
						projectNumberList: this.projectNumberList,
						projectCount: this.oldData.projectCount,
						consigneeName: this.customerInfo.consignee_name,
						consigneePhone: this.customerInfo.consignee_phone,
						consigneeArea: this.customerInfo.consignee_area,
						consigneeAddress: this.customerInfo.consignee_address,
						sendGoodType:this.activeTab==1?'STORAGE':'CAR',
						confirmShipMentVO: this.confirmShipMentVO,
						inventoryBurnParams: inventoryBurnParams,
						// distributionListVOS: this.oldData.distributionListVOS
					}
					console.log(params)
					// return
					submitGoodsInfo(params).then(res => {
						uni.showToast({
							icon: 'none',
							title: '发货申请提交成功!'
						})
						setTimeout(() => {
							that.$Nav.back(1)
						}, 1000)
					}).catch(res => {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					})
				} else {
					var onlyShow = false
					let obj = {
						formCode: 'dealer_shipping_address',
						onlineCode: this.$KEY.CUSTOMER_CODE,
						onlineId: uni.getStorageSync('customerId'),
						onlyShow,
						valueInfo: JSON.stringify(this.customerInfo),
						title: '收货地址',
					}
					this.editAddressModal = false
					this.$Nav.go('/pages/form/index', obj)
				}
			},
			//获取详情
			getGoodsInfo() {
				let params = {
					projectNumberList: this.projectNumberList
				}
				getGoodsInfo(params).then(res => {
					let {
						code,
						result: {
							canAllCar,
							carModelDetailVO,
							customerStockList,
							distributionListVOS,
							projectCount
						}
					} = res.data
					this.confirmShipMentVO = res.data.result //调取确认发货接口入参用
					this.canAllCar = canAllCar
					this.carModelDetailVO = carModelDetailVO //整车装发实体
					this.customerStockList = customerStockList //组件列表
					this.distributionListVOS = distributionListVOS
					this.projectCount = projectCount
					// distributionListVOS.push({
					// 	allCount: 18,
					// 	brand: "尚德",
					// 	equipmentModel: "545W",
					// 	equipmentType: "COMPONENT"
					// })
					// distributionListVOS.push({
					// 	allCount: 100,
					// 	brand: "晶澳",
					// 	equipmentModel: "545W",
					// 	equipmentType: "COMPONENT"
					// })
					// customerStockList.push({
					// 	brand: "尚德1",
					// 	customerId: "1456440974795419649",
					// 	customerName: "测试xuan",
					// 	id: "1494549380877271043",
					// 	model: "545W",
					// 	usableStocks: 500
					// })
					let modalNameList = [] // 品牌列表
					let modalCountList = []
					distributionListVOS.forEach((item,index)=>{
						if (item.equipmentType == 'COMPONENT'){
							let ind = modalNameList.indexOf(item.equipmentModel)
							if (ind == -1){ //如果没有就push
								modalNameList.push(item.equipmentModel)
								modalCountList.push(item.allCount)
							}else{  //如果有的话就 数量要加起来
								modalCountList[ind] += item.allCount
							}
						}else if(item.equipmentType == 'INVERTER'){
							this.cellList[1].list.push(item)
						}else{
							this.cellList[2].list.push(item)
						}
					})
					let tempArr = []
					modalNameList.forEach((name, index) => {
						tempArr.push({
							moudleName:name,
							allCount:modalCountList[index],
							brandList:customerStockList.filter(_model=>{return _model.model == name }).map(v=>{return {text:v.brand, id:v.id,usableStocks:v.usableStocks}}),
							subList:[{brand:'',useCount:''}]
						})
					})
					this.moduleList = tempArr
					console.log(tempArr)
				
				}).catch()
			},
			formatAllcount(list) {
				let allNumber = 0
				list.forEach(item => {
					allNumber += item.allCount
				})
				return allNumber
			}
		},
		onLoad(option) {
			console.log(option, "onLoad：option")
			this.projectNumberList = option.projectNumberArr
			this.getGoodsInfo()
		},
		onShow() {
			console.log('showhshowshhow')
			getOnlineDetail(this.$KEY.CUSTOMER_CODE, uni.getStorageSync('customerId')).then(res => {
				this.customerInfo = res.data.result
			}).catch(err => {})
		},

	}
</script>

<style scoped lang="scss">
	.content-box {
		padding: 32rpx;
		padding-bottom: 180rpx;
	}

	.address-box {
		padding: 32rpx;
		box-sizing: border-box;
		color: #585b60;
		background-color: #fff;
		margin-bottom: 32rpx;
		border-radius: 16rpx;
		position: relative;

		image {
			position: absolute;
			right: 32rpx;
			top: 32rpx;
			width: 40rpx;
			height: 40rpx;
			cursor: pointer;
		}

		.u-icon {
			position: absolute;
			right: 32rpx;
			top: 32rpx;

			cursor: pointer;
		}

		.line1 {
			font-size: 32rpx;
			margin-bottom: 16rpx;
		}

		.line2 {
			width: 80%;
			font-size: 28rpx;
		}
	}

	.deliveryTab-box {
		background-color: #fff;
		margin-bottom: 32rpx;

		.deliveryTab {
			display: flex;
			align-items: center;

			border-radius: 16rpx;

			.tab-item {
				display: flex;
				height: 100rpx;
				width: 50%;
				align-items: center;
				font-size: 32rpx;
				color: #98989E;
				padding: 0 94rpx 0 32rpx;
				background: #F1F1F1;
				border-bottom-left-radius: 16rpx;

				uni-image {
					width: 34rpx;
					height: 32rpx;
					margin-right: 24rpx;

				}
			}

			.active {
				color: #585B60;
				background: #fff;

			}
		}

		.tab-detail {
			padding: 32rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #585B60;

			.tab-line {
				display: flex;
				justify-content: space-between;
				line-height: 48rpx;

				.line-value {
					display: flex;
					align-items: center;

					uni-image {
						width: 32rpx;
						height: 34rpx;
						margin-left: 32rpx;
						// display: inline-block;
					}
				}
			}
		}
	}

	.num-total {
		margin-bottom: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		color: #585B60;
		overflow: hidden;

		>text {
			display: inline-block;
			font-size: 32rpx;
			color: #1C1C28;
			text-align: right;
			float: right;
		}
	}

	.cell_box {
		margin: 32rpx 0;
	}

	.cell-tab {
		width: 100%;
		height: 112rpx;
		background: #E8F4EE;
		border-radius: 64px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16rpx;

		.cell-tab-item {
			width: 160rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #E8F4EE;
			text-align: center;
			color: #000000;
		}

		.active {
			color: #fff;
			background: rgba(87, 183, 176, 0.7);
			border-radius: 40rpx;

		}
	}

	.cell_detail_box {

		// background-color: #fff;
		// margin-top: 32rpx;
		.cell_detail_item {
			background-color: #fff;
			padding: 32rpx;
			border-radius: 16rpx;
			margin-bottom: 32rpx;
		}

		.cell_title {
			color: #585B60;
			font-size: 32rpx;
		}

		.cell_actualCount {
			color: #585B60;
			font-size: 28rpx;
			margin: 32rpx 0;
		}

		.brandList_box {
			border-radius: 16rpx;
			margin-top: 32rpx;
			display: flex;
			align-items: center;



			.brand_icon {
				margin-left: 18rpx;
			}
		}

	}

	.cell_list {
		.cell {
			margin-bottom: 32rpx;

			.cell_title {
				display: flex;
				justify-content: space-between;
				font-weight: 600;
				height: 80rpx;
				line-height: 80rpx;
				background: #d7e7ff;
				border-radius: 16rpx;
				box-shadow: 0px 2px 6px 0px undefined;
				padding: 0 32rpx;
				font-size: 28rpx;

			}

			.cell_detail {
				margin-top: 10rpx;
				background: #ffffff;
				border-radius: 8px 0px 0px 0px;

				/deep/.u-tr {}

				/deep/.u-th {
					background-color: #fff;
					height: 76rpx;
					font-weight: 400;
				}

				.u-td {
					height: 76rpx;

				}

			}
		}
	}

	.cell_item {
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-bottom: 32rpx;

		.cell_title {
			color: #585B60;
			font-size: 32rpx;
			font-weight: 500;
		}

		.cell_num {
			font-size: 28rpx;
			margin-top: 32rpx;
		}
	}



	.bottom-checked {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		border-radius: 80rpx 80rpx 0 0;
		height: 160rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		uni-button {
			width: 586rpx;
			border-radius: 40rpx;
		}
	}

	.disable-button {
		background-color: #EDEDF2 !important;
	}

	.slot-content {
		padding: 40rpx 50rpx;
		text-align: center;
		color: #000000;
	}

	.showpopupModal-slot {
		padding: 40rpx 50rpx;
		color: #000000;
		text-align: left;
	}
</style>

标签：32rpx,color,margin,接口,customerInfo,item,background,后台,数据
来源： https://blog.csdn.net/qq_42180156/article/details/123620456

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。