wanghongjun
2 years ago
3 changed files with 297 additions and 2 deletions
@ -0,0 +1,284 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- tab栏 --> |
|||
<u-tabs :list="tabs" :is-scroll="false" :barWidth="110" :current="curTab" active-color="#164b71" :duration="0.5" @change="onChangeTab" /> |
|||
|
|||
<!-- 订单列表 --> |
|||
<view class="order-list" v-if="list.length > 0"> |
|||
<view class="order-item" v-for="(item, index) in list" :key="index"> |
|||
<view class="item-top"> |
|||
<view class="item-top-left"> |
|||
<text class="order-time">订单号：{{ item.batchcode }}</text> |
|||
</view> |
|||
<view class="item-top-right"> |
|||
<text class="state-text">{{item.ticket_status}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="goods-list" > |
|||
<!-- 商品信息 --> |
|||
<view class="goods-content"> |
|||
<view class="goods-title"> |
|||
<view class="twoline-hide"> |
|||
<text class="twoline-hide-date">开票时间：{{ item.tickettime }}</text> |
|||
</view> |
|||
<view class="twoline-hide"> |
|||
<text class="twoline-hide-ticket"> |
|||
发票编号：{{ item.ticketid }} |
|||
</text> |
|||
</view> |
|||
<view class="twoline-hide"> |
|||
<text class="twoline-hide-price"> |
|||
开票金额： ￥{{ item.ticketmoney }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 空白提示 --> |
|||
<view v-else class="cate-right-cont"> |
|||
<view class="empty-content"> |
|||
<view class="empty-icon"> |
|||
<image class="image" src="/static/empty.png" mode="widthFix"></image> |
|||
</view> |
|||
<view class="tips">暂无数据</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as OrderApi from '@/api/order' |
|||
import { checkLogin } from '@/core/app' |
|||
import Empty from '@/components/empty' |
|||
// tab栏数据 |
|||
const tabs = [ |
|||
{name: `全部发票`,value: 'all',key: 0}, |
|||
{name: `未开票`,value: 'payment',key: 1}, |
|||
{name: `开票中`,value: 'delivery',key: 2}, |
|||
{name: `开票失败`,value: 'hasabort',key: 3}, |
|||
{name: `已开票`,value: 'hasclosed',key: 5}, |
|||
] |
|||
export default { |
|||
components: { |
|||
Empty |
|||
}, |
|||
data() { |
|||
return { |
|||
// 当前页面参数 |
|||
options: { dataType: 'all' }, |
|||
// tab栏数据 |
|||
tabs, |
|||
// 当前标签索引 |
|||
curTab: 0, |
|||
// 订单列表数据 |
|||
list: [ |
|||
{ |
|||
batchcode: '12331231', |
|||
ticket_status: '开票中', |
|||
ticketmoney: '100.00', |
|||
tickettime: '2024-07-01 12:0:00', |
|||
ticketid: '41646455613131313', |
|||
}, |
|||
{ |
|||
batchcode: '12312321312', |
|||
ticket_status: '开票中', |
|||
ticketmoney: '100.00', |
|||
tickettime: '2024-07-01 12:0:00', |
|||
ticketid: '41646455613131313', |
|||
}, |
|||
{ |
|||
batchcode: '31221312312', |
|||
ticket_status: '开票中', |
|||
ticketmoney: '100.00', |
|||
tickettime: '2024-07-01 12:0:00', |
|||
ticketid: '41646455613131313', |
|||
}, |
|||
], |
|||
// 控制onShow事件是否刷新订单列表 |
|||
canReset: false, |
|||
} |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
// 初始化当前选中的标签 |
|||
this.initCurTab(options) |
|||
// 注册全局事件订阅: 是否刷新订单列表 |
|||
uni.$on('syncRefresh', canReset => { |
|||
this.canReset = canReset |
|||
}) |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
this.canReset = false |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面的卸载 |
|||
*/ |
|||
onUnload() { |
|||
// 卸载全局事件订阅 |
|||
uni.$off('syncRefresh') |
|||
}, |
|||
methods: { |
|||
// 初始化当前选中的标签 |
|||
initCurTab(options) { |
|||
// 判断是否已登录 |
|||
this.isLogin = checkLogin() |
|||
if(!this.isLogin){ |
|||
uni.navigateTo({ |
|||
url:"/pages/login/index" |
|||
}) |
|||
} |
|||
// 登录成功后才可以操作 |
|||
const app = this |
|||
if (options.dataType) { |
|||
const index = app.tabs.findIndex(item => item.value == options.dataType) |
|||
app.curTab = index > -1 ? index : 0 |
|||
} |
|||
this.getOrderList() |
|||
}, |
|||
// 获取订单列表 |
|||
getOrderList() { |
|||
const app = this |
|||
let isliCode = uni.getStorageSync("isliCode") |
|||
let data = { |
|||
user_isli: isliCode, |
|||
ticket_status: app.getTabValue(), |
|||
} |
|||
OrderApi.getTicket(data).then(result => { |
|||
if (result.resultCode === '00000000') { |
|||
app.list = result.data |
|||
app.initList(app.list) |
|||
} |
|||
}) |
|||
}, |
|||
// 初始化订单列表数据 |
|||
initList(newList) { |
|||
newList.forEach(item => { |
|||
item.ticket_status = this.showStateText(item.ticket_status) |
|||
}) |
|||
return newList |
|||
}, |
|||
// 订单状态 |
|||
showStateText(state){ |
|||
let state_txt=""; |
|||
if(state=="1"){ |
|||
state_txt="未开票" |
|||
}else if(state =="2" ){ |
|||
state_txt="开票中" |
|||
} else if(state=="3"){ |
|||
state_txt="已开票" |
|||
} else if(state == "4"){ |
|||
state_txt="开票失败" |
|||
}else{ |
|||
state_txt=state |
|||
} |
|||
return state_txt; |
|||
}, |
|||
// 获取当前标签项的值 |
|||
getTabValue() { |
|||
return this.tabs[this.curTab].key |
|||
}, |
|||
// 切换标签项 |
|||
onChangeTab(index) { |
|||
const app = this |
|||
// 设置当前选中的标签 |
|||
app.curTab = index |
|||
app.getOrderList() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
// 项目内容 |
|||
.order-item { |
|||
margin: 20rpx auto 20rpx auto; |
|||
padding: 30rpx 30rpx; |
|||
width: 94%; |
|||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
} |
|||
|
|||
// 项目顶部 |
|||
.item-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 36rpx; |
|||
margin-bottom: 20rpx; |
|||
padding-bottom: 20rpx; |
|||
|
|||
.order-time { |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
.state-text { |
|||
color: #164b71; |
|||
} |
|||
} |
|||
|
|||
// 商品列表 |
|||
.goods-list { |
|||
|
|||
// 商品内容 |
|||
.goods-content { |
|||
margin-right: 10rpx; |
|||
font-size: 28rpx; |
|||
|
|||
.goods-title { |
|||
|
|||
.twoline-hide-date { |
|||
color: #9F9F9F; |
|||
} |
|||
|
|||
.twoline-hide { |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.twoline-hide-price{ |
|||
color: #c3463b; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 全部标的 |
|||
.cate-right-cont { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
align-content: flex-start; |
|||
padding-top: 15rpx; |
|||
|
|||
.cate-two-box { |
|||
width: 100%; |
|||
padding: 0 10px; |
|||
} |
|||
// 空白提示 |
|||
.empty-content { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
padding: 140rpx 50rpx; |
|||
text-align: center; |
|||
|
|||
.tips { |
|||
font-size: 28rpx; |
|||
color: gray; |
|||
margin: 50rpx 0; |
|||
} |
|||
|
|||
.empty-icon .image { |
|||
width: 280rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue