caoliancun/LSM_OIL_SITE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

二维码生成页面中心icon没了的bug

Browse Source 
一次大型分包更新生产了
合作企业路由
/packageQr/pages/partnership/partnership

员工管理路由
/packageStaff/pages/staff/List/List

油站二维码路由
/packageQr/pages/qrsite/QrCode_xy

加油订单路由改成
/packageOrders/pages/orderList/orderList
This commit is contained in:
xk_guohonglei
2021-01-22 17:19:34 +08:00
parent f1210f1a44
commit d2949e657a
46 changed files with 346 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
packageOrders/components/order-item.vue Normal file
View File

@@ -0,0 +1,260 @@
// 可供选择的订单
// 开票列表
<template>
<view class="cu-item radius shadow margin-bottom ">
<!-- <image class="pay-status" :src="baseURL+'static/img/oil-unfinished.png'" alt /> -->
<view class="cu-avatar text-sl" v-if="item.sourceType==='3'" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view>
<view class="cu-avatar text-sl" v-if="item.sourceType==='4'||item.sourceType==='6'" :style="'background-image:url('+baseURL+'static/img/order-xy.png)'"></view>
<view class="cu-avatar text-sl" v-if="item.sourceType==='5'" :style="'background-image:url('+baseURL+'static/img/order-lv.png)'"></view>
<view class="content">
<view class=" solid-bottom padding-bottom-sm">
<view class="flex-treble" @tap="copyId(item.orderID)">
{{item.orderID}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
</text>
</view>
<view class="flex-sub text-right cuIcon-right" @tap="toDetails(item.orderID)">
</view>
</view>
<view class=" text-content text-df">
{{item.oilSiteName}}
</view>
<view class="text-sm padding-top-sm" @tap="toDetails(item.orderID)">
<view class="flex">
<view class="details">
<view class="top1 text-left">
<image class="icon icon-desc " :src="baseURL+'static/img/oil-lf.png'" alt />
<text class="padding-left-xs padding-right-xs" v-if="item.vol"> {{item.vol|numberFilter}}升</text>
<text>
{{item.oilName}}
</text>
</view>
<view class="bottom text-left">
<image class="icon icon-desc " :src="baseURL+'static/img/oil-time.png'" alt />
<text class="padding-left-xs">
{{item.createDatetime.substring(0, 10)}}
</text>
</view>
<view class="bottom text-left">
<image class="icon icon-desc " :src="baseURL+'static/img/mini-car.png'" alt />
<text class="padding-left-xs">
加油车牌： {{item.carNo}}
</text>
</view>
</view>
</view>
</view>
<view class="margin-top-sm flex justify-between" @tap="toDetails(item.orderID)">
<view class="text-gray text-df">
{{item.createDatetime.substring(0,19)}}</view>
<view>
<text class="color-000 text-lg total-money">￥{{item.realamount|numberFilter}}</text>
<view class="round pay-state light bg-olive bg-transparent text-center state-0" v-if="item.istate==0">
<text class="inner-istate round">{{item.istate|formatStr}}</text>
<view class="inner-border">
</view>
</view>
<view class="round pay-state light bg-orange bg-transparent text-center state-1" v-if="item.istate==1">
<text class="inner-istate round">{{item.istate|formatStr}}</text>
<view class="inner-border">
</view>
</view>
<view class="round pay-state light bg-oilve bg-transparent text-center state--1" v-if="item.istate==-1">
<text class="inner-istate round">{{item.istate|formatStr}}</text>
<view class="inner-border">
</view>
</view>
<view class="round pay-state light bg-gray bg-transparent text-center state--2" v-if="item.istate==-2">
<text class="inner-istate round">{{item.istate|formatStr}}</text>
<view class="inner-border">
</view>
</view>
<!-- <text v-show="item.orderType!='9'&&item.orderType!='0'" class="text-sm text-orange">(分单)</text> -->
</view>
</view>
</view>
</view>
<!-- <xkempty v-else></xkempty> -->
<!-- <Empty /> -->
<!-- 评价的弹出层 -->
</template>
<script>
export default {
name: 'oilOrders',
props: {
item: {
type: Object,
default () {}
}
},
data() {
return {
baseURL: this.global.baseURL
}
},
methods: {
copyId(id) {
uni.setClipboardData({
data: id,
success: () => {
uni.showToast({
title: '订单号已复制',
icon: 'none'
})
}
})
},
toDetails(id) {
uni.setStorageSync('orderId', id)
console.log('id', id)
uni.navigateTo({
url: '/pages/orderList/OrderDetail/OrderDetail'
})
}
},
filters: {
toT(value) {
if (value) {
return value / 1000
}
},
dateFormat(value) {
if (value) {
return value.substring(5, 16)
}
},
numberFilter(value) {
value = value - 1 + 1
return value.toFixed(2)
},
formatStr(value) {
switch (parseInt(value)) {
case 1:
return '已支付'
case -1:
return '支付失败'
case -2:
return '退款'
case 0:
return '待支付'
default:
return '待支付'
}
}
}
}
</script>
<style scoped>
.cu-avatar {
background-color: rgba(255, 255, 255, 0);
}
.icon-car {
height: 41px;
background-size: contain;
float: left;
margin-top: -8px;
margin-left: -6px;
}
.car-position {
text-align: left;
}
.bottom {
color: #333;
}
.icon-desc {
display: inline-block;
width: 12px;
height: 12px;
position: relative;
top: 1px;
line-height: 25px;
}
.details {
position: relative;
}
.cu-item {
position: relative;
}
.pay-status {
position: absolute;
z-index: 1;
right: 100upx;
top: 50rpx;
width: 120rpx;
height: 120rpx;
}
.pay-state {
position: absolute;
right: 2rem;
bottom: 1rem;
width: 172upx;
height: 172upx;
line-height: 172upx;
transform: rotate(-30deg);
}
.inner-border {
position: absolute;
width: 142upx;
height: 142upx;
left: 14upx;
border-radius: 800upx;
top: 14upx;
}
.state-0 {
border: 1px solid #8dc63f;
}
.state-1 {
border: 1px solid #f37b1d;
}
.state--1 {
border: 1px solid #f37b1d;
}
.state--2 {
border: 1px solid #666;
}
.state-0 .inner-border {
border: 1px dashed #8dc63f;
}
.state-1 .inner-border {
border: 1px dashed #f37b1d;
}
.state--1 .inner-border {
border: 1px dashed #f37b1d;
}
.state--2 .inner-border {
border: 1px dashed #666;
}
</style>

260
packageOrders/pages/orderList/OrderDetail/OrderDetail.vue Normal file
View File

@@ -0,0 +1,260 @@
<template>
<view class="page-content my-bg">
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">订单详情</block>
</cu-custom>
<view class="padding margin">
</view>
<view class="text-center margin-top icon-container">
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===3" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view>
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===4||orderItem.sourceType===6" :style="'background-image:url('+baseURL+'static/img/order-xy.png)'"></view>
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===5" :style="'background-image:url('+baseURL+'static/img/order-lv.png)'"></view>
</view>
<view class="radius margin margin-top bg-white padding-top padding">
<!-- sourceType 万金油3 老吕5 星油4/6 -->
<!-- <image size="20" v-if="orderItem.sourceType===4||orderItem.sourceType===6" :src="baseURL+'static/img/order-xy.png'"></image>
<image size="20" v-else-if="orderItem.sourceType===3" :src="baseURL+'static/img/order-wjy.png'"></image>
<image size="20" v-else-if="orderItem.sourceType===5" :src="baseURL+'static/img/order-lv.png'"></image> -->
<view class="margin padding">
<view class="text-lg text-center">{{orderItem.istate|formatStr}}</view>
<view class="number text-xl text-center oil-main-color">￥{{orderItem.realamount|numberFormat}}</view>
</view>
<view class="margin-bottom-sm" @tap="copyId(orderItem.userName,'加油司机')">
加油司机
<text class="fr">{{orderItem.userName}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
</text></text>
</view>
<view class="margin-bottom-sm" @tap="copyId(orderItem.carNo,'司机车牌')">
司机车牌
<text class="fr">{{orderItem.carNo}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
</text></text>
</view>
<view class="margin-bottom-sm">
油枪油号
<text class="fr">{{orderItem.bar}}号枪{{orderItem.oilName}}</text>
</view>
<view class="margin-bottom-sm">
加油总金额
<text class="fr">¥ {{orderItem.amount|numberFormat}}</text>
</view>
<view class="margin-bottom-sm">
加油升数
<text class="fr">{{orderItem.vol|numberFormat}} 升</text>
</view>
<view class="margin-bottom-sm">
星卡优惠
<text class="fr">¥ {{orderItem.amount-orderItem.realamount|numberFormat}}</text>
</view>
<view class="margin-bottom-sm">
优惠券
<text class="fr">{{orderItem.coupon|couponFormat}}</text>
</view>
<view class="margin-bottom-sm">
实扣款
<text class="fr oil-main-color">¥ {{orderItem.realamount|numberFormat}}</text>
</view>
</view>
<view class="radius bg-white margin padding ">
<view class="flex padding-bottom-sm">
<view class="basis-sm">
加油站名称
</view>
<view class="basis-lg text-right text-cut">{{orderItem.oilSiteName}}</view>
</view>
<view class="flex padding-bottom-sm">
<view class="basis-xs">
地址
</view>
<view class="basis-xl text-right text-cut">{{orderItem.address}}</view>
</view>
</view>
<view class="radius bg-white margin margin-bottom-0 padding">
<view class="margin-bottom-sm" @tap="copyId(orderItem.orderID,'订单号')">
订单号
<text class=" fr">{{orderItem.orderID}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
</text></text>
</view>
<view class="margin-bottom-sm">
下单时间
<text class="fr">{{orderItem.createDatetime}}</text>
</view>
<!-- <view class="margin-bottom-sm">
扣款时间
<text class="fr">{{orderItem.paydatetime}}</text>
</view> -->
<view class="padding-bottom-sm">
开票状态
<text class="fr" v-if="formQr">未开票</text>
<text class="fr" v-else>{{orderItem.invoiceState|invoiceStateFormat}}</text>
</view>
<!-- <view class="margin-bottom-sm" v-if="orderItem.paydatetime">
支付时间
<text class="fr">{{orderItem.paydatetime}}</text>
</view>-->
</view>
<view class="padding">
</view>
<view class="padding-lg padding-top-0 padding-bottom-xl">
<button v-show="formQr" @tap="scanQr" class="bg-main-oil margin-bottom">
<text class="cuIcon-scan padding-right-xs"></text>
继续加油</button>
<button class="bg-red light margin-bottom" @tap="backHome">
<text class="cuIcon-home padding-right-xs"></text>
返回首页</button>
</view>
</view>
</template>
<script>
import cloudSiteApi from '@/api/cloud-site.js'
export default {
data() {
return {
// orderId:'',
orderId: uni.getStorageSync('orderId'),
formQr: uni.getStorageSync('formQr') ? true : false,
tempOrderInfo: uni.getStorageSync('tempOrderInfo'),
orderItem: {},
baseURL: this.global.baseURL
}
},
created() {
if (this.formQr && !this.tempOrderInfo.payOrderId) {
this.orderItem = {
...this.tempOrderInfo,
orderID: this.tempOrderInfo.payOrderId,
amount: this.tempOrderInfo.standardAmount,
realamount: this.tempOrderInfo.oilAmount,
userName: this.tempOrderInfo.driverId,
carNo: this.tempOrderInfo.plateNumber,
createDatetime: this.tempOrderInfo.createTime,
paydatetime: this.tempOrderInfo.payTime,
bar: this.tempOrderInfo.oilGun,
vol: this.tempOrderInfo.volume,
}
} else {
this.getOrderDetail()
}
},
onHide() {
this.clearStatus()
},
onUnload() {
this.clearStatus()
},
methods: {
clearStatus() {
uni.removeStorageSync('formQr')
},
scanQr() {
var scanUrl = '/pages/station-info/scan-camera/scan-camera'
uni.navigateTo({
url: scanUrl,
fail: (err) => {
console.log(err)
},
success: (res) => {
console.log('chengg', res)
}
})
},
backHome() {
uni.navigateBack({
delta: 2
})
},
copyId(id, name) {
uni.setClipboardData({
data: id,
success: () => {
uni.showToast({
title: name + '已复制',
icon: 'none'
})
}
})
},
getOrderDetail() {
cloudSiteApi.getSiteOrderById(this.orderId).then(res => {
if (res.code === 20000) {
this.orderItem = res.data
}
})
}
},
filters: {
formatStr(value) {
switch (parseInt(value)) {
case 1:
return '订单已支付'
case -1:
return '订单支付失败'
case 3:
return '订单已支付'
case 4:
return '订单支付失败'
case 0:
return '订单待支付'
default:
return '订单待支付'
}
},
couponFormat(value) {
if (value) {
return value
} else {
return '未使用'
}
},
numberFormat(value) {
if (value) {
return value.toFixed(2)
}
},
invoiceStateFormat(value) {
switch (parseInt(value)) {
case 1:
return '已申请'
case 2:
return '已开票'
case -1:
return '开票失败'
case 0:
return '未开票'
default:
return ''
}
}
}
}
</script>
<style scoped>
/* 去付款弹窗 */
.popup-container p.title {
padding: 16px 10px;
}
text.fr {
float: right;
}
.icon-container {
position: relative;
}
.icon-container .text-sl {
position: absolute;
margin-left: -64rpx;
margin-top: -64rpx;
z-index: 2;
}
</style>

241
packageOrders/pages/orderList/dailyOrder/dailyOrder.vue Normal file
View File

@@ -0,0 +1,241 @@
<template>
<view class="content my-bg">
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">加油记录</block>
</cu-custom>
<scroll-view scroll-x class="bg-white nav">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabList" :key="index"
@tap="tabSelect" :data-id="index">{{item}}</view>
</view>
</scroll-view>
<view class="padding　 padding-bottom-0">
<view v-show="TabCur==0" class="order-list">
<view 　v-for="item in allOrder" v-if="allOrder.length" :key="item.orderID">
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
</view>
<view v-if="allOrder.length<1">
<Empty />
</view>
<view v-show="load.isLoadMore1">
<uni-load-more :status="load.loadStatus1"></uni-load-more>
</view>
</view>
<view v-show="TabCur==1" class="order-list">
<view v-for="item in payingOrder" v-if="payingOrder.length" :key="item.orderID">
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
</view>
<view v-if="payingOrder.length<1">
<Empty />
</view>
<view v-show="load.isLoadMore2">
<uni-load-more :status="load.loadStatus2"></uni-load-more>
</view>
</view>
<view v-show="TabCur==2" class="order-list">
<view 　 v-for="item in finishedOrder" v-if="finishedOrder.length" :key="item.orderID">
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
</view>
<view v-if="finishedOrder.length<1">
<Empty />
</view>
<view v-show="load.isLoadMore3">
<uni-load-more :status="load.loadStatus3"></uni-load-more>
</view>
</view>
<view v-show="TabCur==3" class="order-list">
<view 　 v-for="item in refundOrder" v-if="refundOrder.length" :key="item.orderID">
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
</view>
<view v-if="refundOrder.length<1">
<Empty />
</view>
<view v-show="load.isLoadMore4">
<uni-load-more :status="load.loadStatus4"></uni-load-more>
</view>
</view>
</view>
</view>
</template>
<script>
import cloudSiteApi from '@/api/cloud-site.js'
import OrderItem from '@/packageOrders/components/order-item.vue'
import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
components: {
OrderItem,
UniLoadMore
},
data() {
return {
tabList: [
'全部', '待支付', '已支付', '退款'
],
TabCur: 0,
pageNumber: 1,
istate: -3,
scrollLeft: 0,
order: {
istate: 0,
vol: 3,
oilName: '0#',
orderID: '15979997825872',
oilCode: '12396989',
oilSiteName: '疯疯疯加油站',
carNo: '皖A12354',
sourceType: 3,
realamount: 4.66,
credateDatetime: '2020-10-12 12:30:10'
},
allOrder: [],
finishedOrder: [],
payingOrder: [],
refundOrder: [],
loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
isLoadMore: false, //是否加载中
pageNumber1: 1,
pageNumber2: 1,
pageNumber3: 1,
pageNumber4: 1,
load: {
isLoadMore1: false,
loadStatus1: 'loading',
isLoadMore2: false,
loadStatus2: 'loading',
isLoadMore3: false,
loadStatus3: 'loading',
isLoadMore4: false,
loadStatus4: 'loading',
}
}
},
created() {
this.loadList(-3, this.pageNumber1)
this.loadList(0, this.pageNumber2)
this.loadList(1, this.pageNumber3)
this.loadList(-2, this.pageNumber4)
},
onReachBottom() { //上拉触底函数
if (this.TabCur === 0) {
if (!this.load.isLoadMore1) { //此处判断，上锁，防止重复请求
this.load.isLoadMore1 = true
this.calcIstate(this.TabCur)
}
}
if (this.TabCur === 1) {
if (!this.load.isLoadMore2) { //此处判断，上锁，防止重复请求
this.load.isLoadMore2 = true
this.calcIstate(this.TabCur)
}
}
if (this.TabCur === 2) {
if (!this.load.isLoadMore3) { //此处判断，上锁，防止重复请求
this.load.isLoadMore3 = true
this.calcIstate(this.TabCur)
}
}
if (this.TabCur === 3) {
if (!this.load.isLoadMore4) { //此处判断，上锁，防止重复请求
this.load.isLoadMore4 = true
this.calcIstate(this.TabCur)
}
}
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
},
calcIstate(id) {
switch (id) {
case 0:
this.istate = -3
this.loadList(this.istate, this.pageNumber1)
break
case 1:
this.istate = 0
this.loadList(this.istate, this.pageNumber2)
break
case 2:
this.istate = 1
this.loadList(this.istate, this.pageNumber3)
break
case 3:
this.istate = 1
this.loadList(this.istate, this.pageNumber4)
break
}
},
loadList(istate, pageNumber) {
const data2 = {
istate: istate, //类型：Number 必有字段 备注：订单状态 0待支付 1支付成功 -3 查所有
pageIndex: pageNumber //类型：Number 必有字段 备注：查询第几页,默认一页10条
}
cloudSiteApi.getSiteOrder(data2).then(res => {
console.log(data2.istate, data2.pageIndex)
if (res.code === 20000) {
switch (istate) {
case -3:
this.allOrder = this.allOrder.concat(res.data)
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.load.isLoadMore1 = true
this.load.loadStatus1 = 'nomore'
} else {
this.pageNumber1++
this.load.isLoadMore1 = false
}
break
case -2:
this.refundOrder = this.refundOrder.concat(res.data)
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.load.isLoadMore4 = true
this.load.loadStatus4 = 'nomore'
} else {
this.pageNumber4++
this.load.isLoadMore4 = false
}
break
case 0:
this.payingOrder = this.payingOrder.concat(res.data)
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.load.isLoadMore2 = true
this.load.loadStatus2 = 'nomore'
} else {
this.pageNumber2++
this.load.isLoadMore2 = false
}
break
case 1:
this.finishedOrder = this.finishedOrder.concat(res.data)
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.load.isLoadMore3 = true
this.load.loadStatus3 = 'nomore'
} else {
this.pageNumber3++
this.load.isLoadMore3 = false
}
break
}
}
})
}
}
}
</script>
<style scoped>
.content {
min-height: 100%;
}
.order-list .order-item:last-of-type {
margin-bottom: 0;
}
</style>

240
packageOrders/pages/orderList/orderList.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<view class="content my-bg">
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">加油记录</block>
</cu-custom>
<scroll-view scroll-x class="bg-white nav">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabList" :key="index"
@tap="tabSelect" :data-id="index">{{item}}</view>
</view>
</scroll-view>
<view class="padding　 padding-bottom-0">
<view v-show="TabCur==0" class="order-list">
<view 　v-for="item in allOrder" v-if="allOrder.length" :key="item.orderID">
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
</view>
<view v-if="allOrder.length<1">
<Empty />
</view>
<view v-show="load.isLoadMore1">
<uni-load-more :status="load.loadStatus1"></uni-load-more>
</view>
</view>
<view v-show="TabCur==1" class="order-list">
<view v-for="item in payingOrder" v-if="payingOrder.length" :key="item.orderID">
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
</view>
<view v-if="payingOrder.length<1">
<Empty />
</view>
<view v-show="load.isLoadMore2">
<uni-load-more :status="load.loadStatus2"></uni-load-more>
</view>
</view>
<view v-show="TabCur==2" class="order-list">
<view 　 v-for="item in finishedOrder" v-if="finishedOrder.length" :key="item.orderID">
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
</view>
<view v-if="finishedOrder.length<1">
<Empty />
</view>
<view v-show="load.isLoadMore3">
<uni-load-more :status="load.loadStatus3"></uni-load-more>
</view>
</view>
<view v-show="TabCur==3" class="order-list">
<view 　 v-for="item in refundOrder" v-if="refundOrder.length" :key="item.orderID">
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
</view>
<view v-if="refundOrder.length<1">
<Empty />
</view>
<view v-show="load.isLoadMore4">
<uni-load-more :status="load.loadStatus4"></uni-load-more>
</view>
</view>
</view>
</view>
</template>
<script>
import cloudSiteApi from '@/api/cloud-site.js'
import OrderItem from '@/packageOrders/components/order-item.vue'
import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
components: {
OrderItem,
UniLoadMore
},
data() {
return {
tabList: [
'全部', '待支付', '已支付', '退款'
],
TabCur: 0,
pageNumber: 1,
istate: -3,
scrollLeft: 0,
order: {
istate: 0,
vol: 3,
oilName: '0#',
orderID: '15979997825872',
oilCode: '12396989',
oilSiteName: '疯疯疯加油站',
carNo: '皖A12354',
sourceType: 3,
realamount: 4.66,
credateDatetime: '2020-10-12 12:30:10'
},
allOrder: [],
finishedOrder: [],
refundOrder: [],
payingOrder: [],
loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
isLoadMore: false, //是否加载中
pageNumber1: 1,
pageNumber2: 1,
pageNumber3: 1,
pageNumber4: 1,
load: {
isLoadMore1: false,
loadStatus1: 'loading',
isLoadMore2: false,
loadStatus2: 'loading',
isLoadMore3: false,
loadStatus3: 'loading',
isLoadMore4: false,
loadStatus4: 'loading',
}
}
},
created() {
this.loadList(-3, this.pageNumber1)
this.loadList(0, this.pageNumber2)
this.loadList(1, this.pageNumber3)
this.loadList(-2, this.pageNumber4)
},
onReachBottom() { //上拉触底函数
if (this.TabCur === 0) {
if (!this.load.isLoadMore1) { //此处判断，上锁，防止重复请求
this.load.isLoadMore1 = true
this.calcIstate(this.TabCur)
}
}
if (this.TabCur === 1) {
if (!this.load.isLoadMore2) { //此处判断，上锁，防止重复请求
this.load.isLoadMore2 = true
this.calcIstate(this.TabCur)
}
}
if (this.TabCur === 2) {
if (!this.load.isLoadMore3) { //此处判断，上锁，防止重复请求
this.load.isLoadMore3 = true
this.calcIstate(this.TabCur)
}
}
if (this.TabCur === 3) {
if (!this.load.isLoadMore4) { //此处判断，上锁，防止重复请求
this.load.isLoadMore4 = true
this.calcIstate(this.TabCur)
}
}
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
},
calcIstate(id) {
switch (id) {
case 0:
this.istate = -3
this.loadList(this.istate, this.pageNumber1)
break
case 1:
this.istate = 0
this.loadList(this.istate, this.pageNumber2)
break
case 2:
this.istate = 1
this.loadList(this.istate, this.pageNumber3)
case 3:
this.istate = 1
this.loadList(this.istate, this.pageNumber4)
break
}
},
loadList(istate, pageNumber) {
const data2 = {
istate: istate, //类型：Number 必有字段 备注：订单状态 0待支付 1支付成功 -3 查所有
pageIndex: pageNumber //类型：Number 必有字段 备注：查询第几页,默认一页10条
}
cloudSiteApi.getAllSiteOrder(data2).then(res => {
console.log(data2.istate, data2.pageIndex)
if (res.code === 20000) {
switch (istate) {
case -3:
this.allOrder = this.allOrder.concat(res.data)
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.load.isLoadMore1 = true
this.load.loadStatus1 = 'nomore'
} else {
this.pageNumber1++
this.load.isLoadMore1 = false
}
break
case -2:
this.refundOrder = this.refundOrder.concat(res.data)
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.load.isLoadMore4 = true
this.load.loadStatus4 = 'nomore'
} else {
this.pageNumber4++
this.load.isLoadMore4 = false
}
break
case 0:
this.payingOrder = this.payingOrder.concat(res.data)
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.load.isLoadMore2 = true
this.load.loadStatus2 = 'nomore'
} else {
this.pageNumber2++
this.load.isLoadMore2 = false
}
break
case 1:
this.finishedOrder = this.finishedOrder.concat(res.data)
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.load.isLoadMore3 = true
this.load.loadStatus3 = 'nomore'
} else {
this.pageNumber3++
this.load.isLoadMore3 = false
}
break
}
}
})
}
}
}
</script>
<style scoped>
.content {
min-height: 100%;
}
.order-list .order-item:last-of-type {
margin-bottom: 0;
}
</style>