emis-app/pages/tms/customsClearanceScanningNew.vue

<template>
	<tpx-page>
		<tpx-layout>
			<template v-slot:body>
				
				<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pos-abt-all"
				>
				
					<view class="blcok-white-noradius" style="margin-top: 0;">
						<u-row >
							<view style="flex: 1;">
								<tpx-select placeholder="目的国" :isWhite="true"></tpx-select>
							</view>
						</u-row>
						<u-row justify="between" custom-style="margin-top:20rpx;">
							<view style="flex:1;">
								<tpx-date-input v-model:value="submitParam.date" placeholder="请选择时间"></tpx-date-input>
							</view>
						</u-row>
						<view class="mt-20">
							<u-radio-group v-model="submitParam.type"
								@change="groupChange"
							  >
								<u-radio v-for="(item, index) in cusTypeList" :label="item.title" :name="item.val" 
									activeColor="#B12D29" size="30" labelSize="26" :custom-style="`margin-right: ${index+1<cusTypeList.length?100:0}rpx;`"
								>
								</u-radio>
							  </u-radio-group>
						</view>
						<view class="mt-30">
							<u-button @click="handleSubmit()" type="primary" size="large" shape="square"
								custom-style="height:80rpx;font-size: 30rpx;border-radius: 14rpx;">查询</u-button>
						</view>
						
					</view>
					
					<!-- 列表数据 -->
					<view v-for="(orItem) in ordList" class="ord-list-item">
						<view cclass="">
							<view>
								<text class="clr-sub olilabel">批次号</text>
								<text>凭祥口岸批次-20231219-001</text>
							</view>
							<view class="mt-10">
								<text class="clr-sub olilabel">状态</text>
								<text>待清关/清关中/清关完成/清关异常	</text>
							</view>
							<view class="mt-10">
								<text class="clr-sub olilabel">操作时间</text>
								<text>12-18 13:18</text>
							</view>
						</view>	
						<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
						<u-row justify="end" custom-style="margin-top:20rpx;">
							<view style="display: inline-block;white-space: nowrap;">
								<u-row>
									<u-button shape="circle" type="primary" :plain="true"
										custom-style="height: 54rpx;margin-left: 12rpx;">开始清关</u-button>
									<u-button shape="circle" type="primary" :plain="true" 
										custom-style="height: 54rpx;margin-left: 12rpx;">清关完成</u-button>
									<u-button @click="handleFeedSwitch(orItem)" shape="circle" 
										:plain="true" custom-style="height: 54rpx;margin-left: 12rpx;">报告异常</u-button>
								</u-row>
							</view>
									
						</u-row>
									
					</view>
					
					<!-- 加载更多 -->
					<u-loadmore icon-size="28" font-size="28" margin-top="30" v-if="showLoadMore || loadedAll"
						:status="loadedAll ? 'nomore' : 'loading'" />
									
					<!-- 空数据页 -->
					<view v-if="ordList.length == 0" style="padding-top: 100rpx;">
						<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" width="86" height="97">
						</u-empty>
					</view>
					
				</scroll-view>
			</template>
			<template v-slot:footer>
			</template>
		</tpx-layout>
		
		<tpx-com-dialog v-model:show="feedModal.show" title="填写异常" @onSure="handleSubmitFeed">
			<template v-slot:body>
				<u-textarea v-model="otherDes" border="surround" height="120" placeholder="请输入"
					maxlength="50" count></u-textarea>
			</template>
		</tpx-com-dialog>
		
	</tpx-page>
</template>

<script>
	
	export default {
		components:{  },
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		computed: {
			
		},
		data() {
			return {
				submitParam: {
					date: [],
					type: 1,
				},
				cusTypeList: [
					{ title: '待清关', val: 1 },
					{ title: '清关完成', val: 2 }
				],
				ordList: [
					{},{}
					// ,{},{},{},{},{},{},{}
				],
				feedModal: {
					show: false
				},
				showLoadMore: false,
				loadedAll: false
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		onLoad() {
			this.initData();
		},
		onUnload() {

		},
		methods: {
			initData() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
			},
			handleSubmit() {

			},
			handleFeedSwitch(item) {
				this.feedModal.show = true
			},
			handleSubmitFeed() {
				this.feedModal.show = false
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
</style>
<style scoped lang="scss">
	.ord-list-item{
		box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(139,139,139,0.06);
		border-radius: 20rpx;
		padding: 22rpx 30rpx;
		background-color: #fff;
		margin: 30rpx;
	}
	.olilabel{
		display: inline-block;
		width: 120rpx;
		margin-right: 10rpx;
	}
	
</style>