This commit is contained in:
aihe 2023-12-13 00:51:07 +08:00
parent 1ed534cfa6
commit 1d6a520a98
6 changed files with 537 additions and 8 deletions

View File

@ -9,6 +9,7 @@ const ordStatusList = [
{ title: '待付款', val: ordStaEnum.unpay }
]
const payTypeEnum = {
postNow: 1,
toNow: 2,
@ -84,6 +85,18 @@ const sendTypeList = [
{ title: '整柜提货', val: sendTypeEnum.container }
]
const payStatusEnum = {
todo: 1,
done: 2,
other: 3,
}
const payStatusList = [
{ title: '待付款', val: payStatusEnum.todo },
{ title: '已付款', val: payStatusEnum.done },
{ title: '其他', val: payStatusEnum.other }
]
export {
ordStaEnum,
ordStatusList,
@ -94,5 +107,7 @@ export {
dateTypeEnum,
dateTypeList,
sendTypeEnum,
sendTypeList
sendTypeList,
payStatusEnum,
payStatusList
}

View File

@ -1,7 +1,7 @@
const tabBarUrls = [
'tabBar/sending/sending',
'tabBar/search/search',
'tabBar/mine/mine'
'/pages/tabBar/sending/sending',
'/pages/tabBar/search/search',
'/pages/tabBar/mine/mine'
]
const goto = (url, type = 1)=> {
@ -35,7 +35,7 @@ const setClipboardData = (val)=> {
uni.setClipboardData({
data: val,
success: () => {
showToast({ title: "复制成功", icon: 'none' })
showToast('复制成功')
},
})
}

View File

@ -91,6 +91,18 @@
"style": {
"navigationBarTitleText": "实名认证"
}
},
{
"path": "pages/bill/list",
"style": {
"navigationBarTitleText": "我的账单"
}
},
{
"path": "pages/bill/detail",
"style": {
"navigationBarTitleText": "账单明细"
}
}
],

177
pages/bill/detail.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<view>
<view class="dt-head">
<u-text :text="'账单信息'" size="30" :bold="true"></u-text>
<u-line margin="20rpx 0 20rpx"></u-line>
<view class="dt-item">
<view class="lb1">账单编号</view>
<view class="lb2">{{'T7080123982301'}}</view>
</view>
<view class="dt-item">
<view class="lb1">出账日期</view>
<view class="lb2">{{'2023-11-20 13:28:56'}}</view>
</view>
<view class="dt-item">
<view class="lb1">总票数</view>
<view class="lb2">{{'1'}}</view>
</view>
<view class="dt-item">
<view class="lb1">总件数</view>
<view class="lb2">{{'20'}}</view>
</view>
<view class="dt-item">
<view class="lb1">总重量</view>
<view class="lb2">{{'120.00 kg'}}</view>
</view>
<view class="dt-item">
<view class="lb1">应付金额</view>
<view class="lb2">{{'1225.00 CNY'}}</view>
</view>
<view class="dt-item">
<view class="lb1">已付金额</view>
<view class="lb2">{{'0.00 CNY'}}</view>
</view>
<view class="dt-item">
<view class="lb1">开票状态</view>
<view class="lb2">{{'未开票'}}</view>
</view>
<view class="dt-item mt-30">
<view class="lb1">支付给</view>
<view class="lb2">
<view class="zhfxin">
<!-- <u-avatar size="100"></u-avatar> -->
<u-text :text="'江苏探路者国际物流有限公司'" size="28" :bold="true" align="center"></u-text>
</view>
</view>
</view>
<view class="dt-item mt-30">
<view class="lb1">支付金额</view>
<view class="zhfxin">
<u-image height="300" width="300"></u-image>
<view class=""></view>
<u-text margin="20rpx 0 0 0" :text="'¥1225.00'" size="32" :bold="true" color="#B12D29" align="center"></u-text>
<u-text margin="20rpx 0 0 0" :text="'请使用微信或支付宝扫以上码支付'" size="28" :bold="true" align="center"></u-text>
</view>
</view>
</view>
<view class="dt-body">
<u-text :text="'运单列表'" size="30" :bold="true"></u-text>
<u-line margin="20rpx 0 20rpx"></u-line>
<view v-for="(item) in ydList" class="yditem">
<view class="ydi-lab">
<view>
<u-text :text="'运单号'" size="28" color="#999"></u-text>
</view>
<view>
<u-text :text="'T81823778123'" size="30" :bold="true" align="right"></u-text>
</view>
</view>
<view class="ydi-lab mt-10">
<view>
<u-text :text="'应付金额'" size="28" color="#999"></u-text>
</view>
<view>
<u-text :text="'¥30.00'" size="32" :bold="true" color="#B12D29" align="right"></u-text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import getCdnUrl from "@/common/getCdnUrl"
import { goto, goBack, setClipboardData, confirmModal, showLoading } from "@/common/untool"
export default {
props: {
// hasLeftWin: {
// type: Boolean
// }
},
computed: {
},
data() {
return {
ydList: [
{},{},{}
]
}
},
onShareAppMessage() {
return {
// title: '',
// path: 'TODO'
}
},
onLoad(queryOption) {
this.queryOption = queryOption
this.searchParam.tabType = queryOption.tab || tabList[0].val
this.initData();
},
onUnload() {
},
methods: {
getCdnUrl,
initData(){
// showLoading()
},
}
}
</script>
<style lang="scss">
@import '@/common/uni-nvue.scss';
page {
background-color: #F6F6F6;
height: 100% !important;
}
</style>
<style scoped lang="scss">
.dt-head {
padding: 30rpx;
background-color: #FFF;
position: relative;
}
.dt-body{
margin-top: 30rpx;
padding: 30rpx;
background-color: #FFF;
position: relative;
}
.dt-item {
display: flex;
flex-direction: row;
margin-bottom: 20rpx;
.lb1 {
width: 160rpx;
font-size: 26rpx;
color: #999;
}
.lb2{
font-size: 26rpx;
}
}
.zhfxin{
display: flex;
flex-direction: column;
align-items: center;
}
.yditem{
padding: 20rpx 20rpx;
background-color: #F6F6F6;
border-radius: 6rpx;
margin-bottom: 20rpx;
}
.ydi-lab{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style>

325
pages/bill/list.vue Normal file
View File

@ -0,0 +1,325 @@
<template>
<tpx-layout>
<template v-slot:body>
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pos-abt-all"
>
<view class="customer_nav_bar">
<view class="com-jianju" >
<!-- 关键字搜索框 -->
<tpx-search placeholder="请输入运单号/订单号" v-model:value="searchParam.keyword" @change="handleSearchParamChange()" bgColor="#FFF" :timelyTrigger="false"></tpx-search>
</view>
<view class="com-jianju" style="padding-top: 40rpx;">
<u-row justify="between" align="top">
<u-col span="9">
<!-- 订单状态 -->
<tpx-tabs :list="payStatusList" v-model:value="searchParam.payStatus"
@tabchange="(val)=> { handleSearchParamChange() }" v-slot="curOrdTab"
>
<text slot>
(<text>{{curOrdTab.item.val}}</text>)
</text>
</tpx-tabs>
</u-col>
<u-col span="2">
<!-- 更多查询条件 -->
<u-button @click="handleSearchMoreBtn()" :hairline="false" shape="circle" size="mini" custom-style="border-radius: 23rpx;font-size: 26rpx;height: 50rpx;">
<u-row justify="center">
<view :style="'padding-right: 4rpx;white-space: nowrap;' + (hasExtSchParam?'color: #B12D29;':'color: #666;')">
{{hasExtSchParam?'已':''}}筛选
</view>
<u-icon :name="showSearchMore?'arrow-up-fill':'arrow-down-fill'"
:color="(hasExtSchParam?'#B12D29':'color: #666')" size="18" custom-style="margin-top: 2rpx;"
></u-icon>
</u-row>
</u-button>
</u-col>
</u-row>
</view>
<!-- 状态搜索 -->
<view v-if="showSearchMore" class="search-more-panel">
<view class="smp-body slideInDown animated fast">
<view class="smp-content">
<view class="pos-abt-all" style="overflow-y: auto;">
<view style="padding: 0 0 30rpx 0">
<view>
<u-text text="快递状态" size="28" :bold="true" margin="0 0 20rpx 0"></u-text>
<tpx-tags :list="dlvTypeList" v-model:value="tmpSearchParam.postStatus" ></tpx-tags>
</view>
<view>
<u-text text="付款方式" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>
<tpx-tags :list="payTypeList" v-model:value="tmpSearchParam.payType" ></tpx-tags>
</view>
<view>
<u-text text="时间范围" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>
<tpx-tags type="single" :list="dateTypeList" v-model:value="tmpSearchParam.dateType" @onItemClick="handleCheckDate"></tpx-tags>
<tpx-tags v-if="tmpSearchParam.date" type='' :list="[{title: tmpSearchParam.date}]" @onItemClick="handleSwitchCladar()" mode="primary"></tpx-tags>
</view>
</view>
</view>
</view>
<view class="smp-foot">
<u-row gutter="20" justify="between">
<u-button @click="handleResetTempSearch()" shape="circle">重置</u-button>
<view style="width: 40rpx;"></view>
<u-button @click="handleConfirmTempSearch()" shape="circle" type="primary">确认</u-button>
</u-row>
</view>
</view>
</view>
</view>
<view class="pgb-cont">
<!-- 列表数据 -->
<view v-for="(orItem) in dataList" class="ord-list-item" >
<u-row justify="between">
<text>T7080123982307</text>
<view class="kpsat">
{{'未开票'}}
</view>
</u-row>
<view class="mt-10" @click="handleGoDetail(orItem)">
<u-row justify="between" align="top">
<u-col span="6">
<u-text :text="`总票数:${'1'}`" size="26"
margin="14rpx 0 0 0"></u-text>
<u-text :text="`总重量:${'120'}`" size="26"
margin="14rpx 0 0 0"></u-text>
<u-text :text="`总件数:${'20'}`" size="26"
margin="14rpx 0 0 0"></u-text>
</u-col>
<u-col span="6">
<u-text :text="`应付金额:${'80'}CNY`" size="26"
margin="14rpx 0 0 0"></u-text>
<u-text :text="`已付金额:${'0'}CNY`" size="26"
margin="14rpx 0 0 0"></u-text>
</u-col>
</u-row>
</view>
<u-text :text="`账单时间:${'2023-11-20 13:28:56'}`" color="#999" size="26"
margin="30rpx 0 0 0"></u-text>
<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
<u-row justify="end" custom-style="margin-top:20rpx;">
<view style="display: inline-block;">
<u-row>
<u-button shape="circle" type="primary" :plain="true"
@click="handleGoDetail(orItem)" custom-style="height: 54rpx;margin-left: 12rpx;">去付款</u-button>
</u-row>
</view>
</u-row>
</view>
<!-- 加载更多 -->
<u-loadmore icon-size="28" font-size="28" margin-top="30" v-if="showLoadMore || loadedAll"
:status="loadedAll ? 'nomore' : 'loading'" />
<!-- 空数据页 -->
<view v-if="dataList.length == 0" style="padding-top: 100rpx;">
<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" width="86" height="97">
</u-empty>
</view>
</view>
</scroll-view>
</template>
</tpx-layout>
<!-- 日历 -->
<!-- @close="handleSwitchCladar()" -->
<u-calendar title="请选择日期范围" color="#B12D29" mode="range" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="tmpSearchParam.date.split('~')" @confirm="handleClaOk" @close="handleSwitchCladar"
></u-calendar>
</template>
<script>
import getCdnUrl from "@/common/getCdnUrl"
import { payStatusEnum, payStatusList, payTypeEnum, payTypeList, dlvTypeEnum, dlvTypeList, dateTypeEnum, dateTypeList } from "@/common/enum"
import { goto, setClipboardData, confirmModal, showLoading } from "@/common/untool"
export default {
props: {
// hasLeftWin: {
// type: Boolean
// }
},
computed: {
hasExtSchParam() {
let hasExt = false
const searchParam = this.searchParam
if(
(searchParam.postStatus && searchParam.postStatus.length > 0)
|| (searchParam.payType && searchParam.payType.length > 0)
|| (searchParam.date || (searchParam.dateType && searchParam.dateType != dateTypeEnum.custom) )
) {
hasExt = true
}
return hasExt
},
},
data() {
return {
...JSON.parse(JSON.stringify({ payStatusEnum, payStatusList, payTypeEnum, payTypeList, dlvTypeEnum, dlvTypeList, dateTypeEnum, dateTypeList })),
searchParam: {
keyword: '',
payStatus: payStatusList[0].val // 订单状态, 1:寄件; 2:收件; 3:待付款;
},
showSearchMore: false,
showCladar: false,
tmpSearchParam: {
},
dataList: [
{}
// ,{},{},{},{},{},{},{}
],
showLoadMore: false,
loadedAll: false
}
},
onShareAppMessage() {
return {
// title: '',
// path: 'TODO'
}
},
onLoad() {
this.initTmpSrchParam()
this.initData();
},
onUnload() {
},
methods: {
getCdnUrl,
initData(){
// showLoading()
setTimeout(() => {
uni.stopPullDownRefresh();
}, 300);
},
initTmpSrchParam(){
this.tmpSearchParam = {
postStatus: [], // 快递状态
payType: [], // 支付类型
dateType: '', // 日期类型
date: '' // 日期
}
},
loadListData() {
// 请求列表数据 TODO
console.log('====this.searchParam===', this.searchParam)
},
onScrollBottom() {
console.log("onScrollBottom");
if (this.loadedAll) {
return;
}
this.showLoadMore = true;
this.handleSearchParamChange();
},
handleSearchMoreBtn(){
if(!this.showLoadMore) {
// 回显更多条件
Object.keys(this.tmpSearchParam).map(t=> {
const val = this.searchParam[t]
typeof val != 'undefined' && (this.tmpSearchParam[t] = val)
})
}
this.showSearchMore = !this.showSearchMore
},
handleSearchParamChange(key, val) {
if(key) {
this.searchParam[key] = val
}
this.loadListData()
},
handleResetTempSearch(){
this.initTmpSrchParam()
},
handleConfirmTempSearch(){
Object.assign(this.searchParam, this.tmpSearchParam)
this.showSearchMore = false
this.handleSearchParamChange();
},
handleCheckDate(item) {
let newVal = item.val
if(newVal == dateTypeEnum.custom) {
this.handleSwitchCladar()
} else {
this.tmpSearchParam.date = ''
}
},
handleClaOk(res){
const ary = Object.values(res)
const val = [ary[0], ary[ary.length-1]].join("~")
this.handleSwitchCladar()
this.tmpSearchParam.date = val
},
handleSwitchCladar() {
this.showCladar = !this.showCladar
if(!this.showCladar) {
!this.tmpSearchParam.date && (this.tmpSearchParam.dateType = '')
}
},
handleGoDetail(item = {}) {
goto(`bill/detail?id=${item.id}`)
}
}
}
</script>
<style lang="scss">
@import '@/common/uni-nvue.scss';
page {
background-color: #F6F6F6;
height: 100% !important;
}
.customer_nav_bar {
padding-top: 30rpx;
background-color: #FFF;
position: relative;
}
</style>
<style scoped lang="scss">
.pgb-cont{
padding: 30rpx;
}
.ord-list-item{
box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(139,139,139,0.06);
border-radius: 20rpx;
padding: 22rpx 30rpx;
background-color: #fff;
margin-bottom: 30rpx;
}
.search-more-panel{
overflow: hidden;
position: absolute;
left: 0;
right: 0;
height: calc(70vh);
z-index: 200;
}
.smp-body{
padding: 30rpx;
display: flex;
flex-direction: column;
height: 100%;
background-color: #FFF;
border-radius: 0 0 30rpx 30rpx;
box-sizing: border-box;
}
.smp-content{
flex: 1;
position: relative;
}
.kpsat{
font-size: 26rpx;
background-color: rgb(246, 246, 246);
color: rgb(102, 102, 102);
border-radius: 10rpx;
padding: 12rpx 16rpx;
}
</style>

View File

@ -73,10 +73,10 @@
{ title: '186单', subTitle: "收件", icon: getCdnUrl(`mine/shjian.png`), url: '' }
],
toolBtnlist: [
{ title: '运单列表', subTitle: "", icon: getCdnUrl(`mine/ydlib.png`), url: '' },
{ title: '运单列表', subTitle: "", icon: getCdnUrl(`mine/ydlib.png`), url: 'tabBar/search/search' },
{ title: '进仓单', subTitle: "", icon: getCdnUrl(`mine/jcdan.png`), url: '' },
{ title: '协议', subTitle: "", icon: getCdnUrl(`mine/xieyi.png`), url: '' },
{ title: '账单查询', subTitle: "", icon: getCdnUrl(`mine/zhdancha.png`), url: '' },
{ title: '账单查询', subTitle: "", icon: getCdnUrl(`mine/zhdancha.png`), url: 'bill/list' },
{ title: '地址簿', subTitle: "", icon: getCdnUrl(`mine/dizhi.png`), url: 'address/list' },
{ title: '快件查询', subTitle: "", icon: getCdnUrl(`mine/kjcha.png`), url: '' },
{ title: '投诉建议', subTitle: "", icon: getCdnUrl(`mine/tousu.png`), url: 'complaint/complaint' },
@ -93,7 +93,7 @@
methods: {
getCdnUrl,
handlePageRedirect(item) {
goto(item.url)
item.url && goto(item.url)
}
}
}