-
列表样式一 ，下拉翻页查询，效果图及代码
-
<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-paging
paging.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>
-
详情页面 样式一 ，效果及代码
<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 &&
