aiot-app/pages/invoiceConfirm/index.vue

<template>
	<view class="maintenance-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="发货确认单" background-color="#157A2C" color="#fff" @clickLeft="back"></uni-nav-bar>
		<view class="maintenance-wrapper">
			<scroll-view :scroll-y='true' class="kd-baseInfo">
				<view class="kd-cell">
					<text class="kd-label">发货单:</text>
					<text class="kd-content">
						{{info.sendNo}}
						
						<!-- <u-input disabled v-mode='info.sendNo'>
							<template slot="suffix">
								
						 </template>
						</u-input> -->
					</text>
					<button
					class="search_btn"
					@click="handleInvoiceList"
					text="选择"
					type="primary"
					size="mini"
					>选择</button>
					
				</view>
				<template>
					<view class="kd-cell">
						<text class="kd-label">回执附件:</text>
						<file-doc v-model="info.repliedFiles"></file-doc>
						<text class="kd-content text-warning"></text>
					</view>
				</template>
			</scroll-view>
			<template>
				<button class="btn-execute" type="primary" @click="handleSubmit">提交</button>
				<button class="btn-reassignment" type="error" @click="back">取消</button>
			</template>
		</view>

	</view>
</template>

<script>
	import fileDoc from '../doc/index.vue'
	import {
		saleordersendrecordInfo
	} from '@/api/saleManage/saleorder/index.js'
	
	export default {
		components: {fileDoc},
		data() {
			return {
				
		
				info: {
					sendNo:'',
					repliedFiles:[],
				},
				
			}
		},
		onLoad(options={}) {
			console.log(options,'====')
			// 详情
			if(options.id){
				this.getInfo(options.id)
			}
		

		},
		computed: {
		
		},

		methods: {
			back() {
				uni.navigateBack({
					url: '/pages/index/index'
				})
			},
			async getInfo(id) {
		
				      const data = await saleordersendrecordInfo(id);
				    
				      if (data) {
				       this.info = data;
				       this.info.sendId = this.info.id
				       this.info.sendNo = this.info.docNo
				        this.info.docNo = ''
				        this.info.id = ''
				      
				      }

			},
			handleSubmit() {
				if(!this.info.sendNo){
					uni.showModal({
						title: `请选择发货单`,
						content: '',
						icon: 'error',
						confirmText: '确认',
						showCancel: false, // 是否显示取消按钮，默认为 true
						success: res => {
							if (res.confirm) {
								this.back()
							}
						}
					})
				}
				if(!this.info.repliedFiles.length){
					uni.showModal({
						title: `请上传回执附件`,
						content: '',
						icon: 'error',
						confirmText: '确认',
						showCancel: false, // 是否显示取消按钮，默认为 true
						success: res => {
							if (res.confirm) {
								this.back()
							}
						}
					})
				}
				// this.currentRow.status = status
				// logistictraklistnoteUpdateAPI(this.currentRow)
				// uni.showModal({
				// 	title: `此工单执行成功`,
				// 	content: '',
				// 	confirmText: '确认',
				// 	showCancel: false, // 是否显示取消按钮，默认为 true
				// 	success: res => {
				// 		if (res.confirm) {
				// 			this.back()
				// 		}
				// 	}
				// })
			},
			handleInvoiceList() {
				uni.navigateTo({
					url: `/pages/invoiceConfirm/invoice`
				})
			},
			handleAssign() {
				this.$refs.transferRef.open(this.currentRow)
			},
		}
	}
</script>

<style lang="scss" scoped>
	

	.list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: $uni-text-color-grey;
		padding: 5rpx 20rpx;
	}

	.font-sm {
		font-size: $uni-font-size-sm;
	}

	.font-text {
		color: $uni-text-color;
	}

	.btn-execute {
		background-color: $j-primary-border-green;
		width: 450rpx;
		margin-top: 10vh;
	}

	.btn-sparepart {
		width: 450rpx;
		margin-top: 20rpx;
	}

	.btn-reassignment {
		color: $uni-color-error;
		background-color: transparent;
		border: none;
		box-shadow: none;

		&::after {
			display: none;
		}
	}

	.maintenance-container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;

		/deep/.u-popup {
			flex: none !important;
		}
	}

	.maintenance-wrapper {
		position: relative;
		flex: 1;
		
	}

	.maintenance-content {
		padding-top: 40rpx;
		box-sizing: border-box;
		// height: calc(100vh - 88rpx);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
	}

	.kd-cell {
		line-height: 90rpx;
		border-bottom: 1px dashed #dadada;
		display: flex;
		justify-content: space-between;
       align-items: center;
		.kd-label {
			display: inline-block;
			width: 5em;
			font-weight: bold;
		}

		.kd-content {
			flex: 1;
			text-align: left;
			word-break: break-all;
			 padding:  0 30rpx 0 0;
		}
	}

	.kd-baseInfo {
		padding: 0 32rpx;
		font-size: 28rpx;
		height: 70%;
	}

	.kd-equipment {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.kd-type-box {
			text-align: center;
			padding: 26rpx 0;

			view {
				position: relative;
				display: inline-block;
				width: 120rpx;
				padding: 4rpx 0;
				color: #747474;
				margin: 0 20rpx;
				background-color: rgba(215, 215, 215, 0.5);

				&.type—active {
					background-color: #1e7f35;
					color: #fff;
				}

				.count {
					position: absolute;
					top: -9px;
					right: -9px;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					font-size: 12px;
					background-color: red;
					color: #fff;
				}
			}
		}

		.kd-list-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			padding: 12rpx 18rpx;
			background-color: $page-bg;

			.u-list {
				flex: 1;
				height: 100% !important;
			}
		}
	}

	.spare-parts {
		flex: 1;
		overflow: hidden;
	}

	.kd-card {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 8rpx 0;
		font-size: 28rpx;
		word-break: break-all;

		.kd-card-wrapper {
			padding: 0 30rpx;
			border-bottom: 1px solid #dadada;
		}

		.kd-cell {
			line-height: 60rpx;
		}

		.kd-cell:last-of-type {
			border-bottom: none;
		}

		.status-box {
			margin-right: 16rpx;
		}

		.card-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 8rpx 0 20rpx;

			button {
				width: 180rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				margin: 0 8rpx;
			}

			.primary-btn {
				background-color: $j-primary-border-green;
			}
		}
	}

	.apply-box {
		width: 70%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		height: 88rpx;
		padding: 16rpx 0;
		align-items: center;
		gap: 16rpx;
	
		/deep/.uni-section {
			margin-top: 0px;
		}
	
		/deep/.uni-section-header {
			padding: 0px;
	
		}
	
		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 50rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}
	
		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}
	.search_btn {
		width: 120rpx;
		height: 70rpx;
		padding: 0 24rpx;
		background: $theme-color;
		font-size: 32rpx;
		color: #fff;
		
		transform: translate(-25px, 0px);
	}
</style>