139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<template>
|
|
<view class="page-content">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<uni-nav-bar statusBar :border="false" leftIcon="left" fixed title="订单列表" backgroundColor="#f5f7f5"
|
|
@clickLeft="navBack" />
|
|
<!-- #endif -->
|
|
<!--#ifdef MP-ALIPAY -->
|
|
<uni-nav-bar statusBar :border="false" title="订单列表" fixed backgroundColor="#f5f7f5" @clickLeft="navBack" />
|
|
<!-- #endif -->
|
|
<view class="order-search-content">
|
|
<view class="order-search">
|
|
<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
|
|
<input type="text" v-model="vdata.unionOrderId" confirm-type="search" @confirm="search"
|
|
placeholder="请输入订单号查询" />
|
|
</view>
|
|
<image class="screen" src="/static/iconImg/icon-screen.svg" mode="scaleToFill" @tap="refScreen.open" />
|
|
</view>
|
|
<!-- 卡片部分 -->
|
|
<block v-for="v in vdata.orderList" :key="v.payOrderId">
|
|
<OrderCard v-bind="v" @click="toDetails(v.payOrderId)" />
|
|
</block>
|
|
<view class="list-null" v-if="!vdata.hasNext">暂无更多数据</view>
|
|
</view>
|
|
<OrderScreen ref="refScreen" @confirm="search" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { provide, reactive, ref } from 'vue'
|
|
import { onLoad, onReachBottom, onUnload } from '@dcloudio/uni-app'
|
|
import { req, API_URL_PAY_ORDER_LIST } from '@/http/apiManager.js'
|
|
import OrderScreen from './components/OrderScreen'
|
|
import OrderCard from './components/OrderCard.vue'
|
|
const refScreen = ref(null)
|
|
const vdata = reactive({
|
|
orderList: [],
|
|
unionOrderId: '',
|
|
hasNext: true,
|
|
})
|
|
const params = { pageSize: 10, pageNumber: 1, queryDateRange: '' }
|
|
provide('params', params)
|
|
const getList = () => {
|
|
if (!vdata.hasNext) return
|
|
req.list(API_URL_PAY_ORDER_LIST, params).then(({ bizData }) => {
|
|
vdata.orderList.push(...bizData.records)
|
|
vdata.hasNext = bizData.hasNext
|
|
})
|
|
}
|
|
getList()
|
|
const search = () => {
|
|
params.unionOrderId = vdata.unionOrderId
|
|
vdata.orderList = []
|
|
params.pageNumber = 1
|
|
vdata.hasNext = true
|
|
getList()
|
|
}
|
|
onReachBottom(() => {
|
|
params.pageNumber += 1
|
|
getList()
|
|
})
|
|
// 跳转详情页
|
|
const toDetails = (orderId) => uni.navigateTo({ url: '/pages/order/orderDetails?orderId=' + orderId })
|
|
uni.$on('ORDER_LIST', (data) => {
|
|
console.log('刷新列表');
|
|
vdata.orderList = []
|
|
params.pageNumber = 1
|
|
getList()
|
|
})
|
|
const navBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
onUnload(() => {
|
|
uni.$off('ORDER_LIST')
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-content {
|
|
padding: 0.1rpx;
|
|
min-height: calc(100vh - 5rpx);
|
|
background-color: #f5f7f5;
|
|
|
|
.order-search-content {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.order-search {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 30rpx;
|
|
margin-bottom: 0;
|
|
height: 80rpx;
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
|
|
image {
|
|
margin-left: 20rpx;
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 22rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.screen {
|
|
margin-right: 30rpx;
|
|
transform: translateY(15rpx);
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-null {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #666;
|
|
margin: 30rpx 0;
|
|
padding: 0 30rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
|
|
&::after,
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 35%;
|
|
height: 2rpx;
|
|
background-color: #ededed;
|
|
}
|
|
}
|
|
</style>
|