1. 列表样式一 ，下拉翻页查询，效果图及代码

1. <template><z-paging ref="paging" v-model="dataList" @query="queryList"><!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" --><!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 --><template #top><view class="searchForm"><view><uni-easyinput :focus="true" prefixIcon="scan" v-model="baseFormData.orderNumber" placeholder="请扫描或输入送货单号" @confirm="submit" /></view><view><uni-easyinput v-model="baseFormData.supplier" placeholder="输入供应商名称" @confirm="submit" /></view><view><uni-datetime-picker type="date" :clear-icon="true" v-model="baseFormData.insPlanEndDate"  @confirm="submit"/></view><view><button type="primary" @click="submit">查 询</button></view></view></template><!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 --><view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)"><view class="item-title"><view class="listItme"><view class="listTitle">送货单号</view><view class="listContent">{{item.orderNumber}}</view></view><view class="listItme"><view class="listTitle">预计到货日期</view><view class="listContent">{{item.insPlanEndDate}}</view></view></view><view class="item-arrow"><uni-icons type="right" size="25" color="gray"></uni-icons></view></view></z-paging>
   </template>
   <script setup>import {reactive,ref,getCurrentInstance} from 'vue';import {receiptConfirm} from "@/api/receiptConfirm";const instance = getCurrentInstance();const formRef = ref();const baseFormData = ref({orderNumber: '',supplier: '',insPlanEndDate: ''});const paging = ref();const dataList = ref([]);// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可const queryList = (pageNo, pageSize) => {// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可// 模拟请求服务器获取分页数据，请替换成自己的网络请求let params = {"attrSet": [],"condition": [],"sorts": [{"name": "createAt","sort": "desc"}],"page": {"pageNo": pageNo,"pageSize": pageSize}};if (baseFormData.value.orderNumber != null && baseFormData.value.orderNumber != '') {params.condition.push({"compare": "LIKE","field": "orderNumber","value": baseFormData.value.orderNumber});}if (baseFormData.value.supplier != null && baseFormData.value.supplier != '') {params.condition.push({"compare": "LIKE","field": "supplier","value": baseFormData.value.supplier});}if (baseFormData.value.insPlanEndDate != null&& baseFormData.value.insPlanEndDate != '') {params.condition.push({"compare": "EQUAL","field": "insPlanEndDate","value": baseFormData.value.insPlanEndDate});}receiptConfirm.queryPage(params).then(res => {console.log("============", JSON.stringify(res));if (res.code == 0) {// 将请求的结果数组传递给z-pagingpaging.value.complete(res.data);} else { //异常信息paging.value.complete(false);uni.showToast({icon:"none",title: res.msg});}}).catch(res => {// 如果请求失败写paging.value.complete(false);// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可paging.value.complete(false);});}const itemClick = (item) => {instance.appContext.config.globalProperties.$setGlobalData(item);//let newStr = JSON.stringify(item);//console.log("newStr-----------", newStr);// 设置数据页面//newStr = encodeURIComponent(newStr);//console.log("data-----------", newStr);//console.log("-----------", newStr.length);// uni.navigateTo({// 	url: '/pages/receiptConfirm/confirm?data=' + newStr// });uni.navigateTo({url: '/pages/receiptConfirm/confirm'});// console.log('点击了', item);};//查询const submit = (ref) => {console.log("baseFormData====", JSON.stringify(baseFormData));paging.value.reload();};
   </script><style scoped lang="scss">view {box-sizing: border-box;color: $uni-text-color;}button {font-size: $uni-btn-font-size !important;}.searchForm {padding: 15rpx 20rpx;background-color: $uni-bg-color;}.searchForm>view {margin: 12rpx 0;}.item {z-index: 1;position: relative;height: 150rpx;display: flex;align-items: center;justify-content: space-between;padding: 0rpx 30rpx;border: 1px solid #ddd;border-radius: 6px;z-index: 1;background-color: $uni-bg-color;margin: 8rpx 8rpx 0px 8rpx;}//蓝色条块.blueBar::before {white-space: pre;content: " ";background-color: $uni-border-bar-color; // $uni-color-primary ;width: 4px;margin-left: -4px;/* 竖块的宽度 */height: 12px;border-radius: 10px;}.item>view:first-child {flex: 1;}.item-arrow {z-index: 1;}.item-line {position: absolute;bottom: 0rpx;left: 0rpx;height: 1px;background-color: $uni-bg-color;}.listItme {display: flex;justify-content: row;align-items: center;}.listItme>view:nth-child(1) {-webkit-flex: 1;flex: 40%;}.listItme>view:nth-child(2) {-webkit-flex: 1;flex: 60%;}.listTitle {font-weight: bold;padding-right: 10rpx;text-align: right;}.listTitle::after {white-space: pre;content: " ";}.listContent {white-space: nowrap;/* 禁止换行 */overflow: hidden;/* 隐藏溢出内容 */text-overflow: ellipsis;/* 使用省略号表示溢出 */}
   </style>

2. 详情页面 样式一 ，效果及代码

<template><view class="content"><uni-section title="收货信息" type="line"><view class="itmeContent"><view class="listItme"><view class="listTitle">发货单号</view><view>{{item.orderNumber}}</view></view><view class="listItme"><view class="listTitle">发货地址</view><view>{{item.deliveryAddress}}</view></view><view class="listItme"><view class="listTitle">联系人</view><view>{{item.deliveryUser}}</view></view><view class="listItme"><view class="listTitle">联系电话</view><view>{{item.deliveryPhone}}</view></view><view class="listItme"><view class="listTitle">发出日期</view><view>{{item.sendDate}}</view></view><view class="listItme"><view class="listTitle">总件数</view><view>{{item.allQuantity}}</view></view></view></uni-section><uni-section title="收货备注" type="line"><view style="margin: 20rpx;"><uni-easyinput type="textarea" placeholder="请输入收货备注" maxlength="100" :disabled="BtnDisabled"v-model="item.remark" /></view></uni-section><view class="btnGroup"><view><button type="primary" @click="submit" :disabled="BtnDisabled" :loading="loginLoading">确 认</button></view><view><button type="primary" plain="true">送货单补打</button></view></view></view><!-- 提示信息弹窗 --><uni-popup ref="refMessage" type="message"><uni-popup-message :type="msgType" :message="messageText" :duration="3000"></uni-popup-message></uni-popup>
</template><script setup lang="ts">import { nextTick, onMounted, reactive, ref, getCurrentInstance } from "vue";import {deliveryConfirm} from "@/api/receiptConfirm";const instance = getCurrentInstance();const loginLoading = ref<boolean>(false);const item = ref({});const BtnDisabled = ref(false);//消息提示开始const refMessage = ref();const messageText = ref('这是一条成功提示');const msgType = ref('warn');const messageToggle = (type, msg) => {messageText.value = msg;msgType.value = type;refMessage.value.open('top');}//消息提示结束const submit = () => {console.log("remark.value ========", item.value.remark);// if (item.value.remark == null || item.value.remark == "") {// 	messageToggle('warn', '备注不能为空！');// 	return;// }if (item.value.objId == null || item.value.objId == "") {messageToggle('warn', 'objId不能为空！');return;}let params = {"objId": item.value.objId,"remark": item.value.remark};console.log("params========", params);loginLoading.value = true;deliveryConfirm(params).then(res => {loginLoading.value = false;if (res.code == 0) {messageToggle('success', '确认成功！');BtnDisabled.value = true;}else {messageToggle('error', '操作异常'+res.msg);console.log("接口返回结果============", JSON.stringify(res));				}}).catch(res => {loginLoading.value = false;});}onMounted(() => {//取全局变量参数const globalData = instance.appContext.config.globalProperties.$getGlobalData();console.log("globalData -------------------", JSON.stringify(globalData));if (globalData != null) {item.value = globalData;if (item.value.remark != null && item.value.remark != "") {//BtnDisabled.value = true;}}/* // 获取数据页面const pages = getCurrentPages();const currentPage = pages[pages.length - 1]; // 当前页面console.log("currentPage --------", currentPage);//父页面data参数if (currentPage.options &&