Skip to content

上
上药订单生命周期升级
Commit 8c5d23e5 authored by xiejb's avatar xiejb
Browse files
Options

添加我的订单 查看发票列表以及详情

parent 5778766b
Hide whitespace changes
Inline Side-by-side
Showing with 1302 additions and 8 deletions
src/router/myOrder/index.js
View file @ 8c5d23e5
......@@ -34,6 +34,24 @@ const myOrder = [
auth: false
},
component: resolve => require(['@/views/myOrder/detail/logisticsDetail'], resolve)
},
{
path: '/orderInvoice',
name: 'orderInvoice',
meta: {
title: '发票查询',
auth: false
},
component: resolve => require(['@/views/myOrder/orderInvoice'], resolve)
},
{
path: '/orderInvoiecDetail',
name: 'orderInvoiecDetail',
meta: {
title: '发票明细',
auth: false
},
component: resolve => require(['@/views/myOrder/orderInvoice/orderInvoiecDetail'], resolve)
}
]
export default myOrder
src/views/myOrder/index.vue
View file @ 8c5d23e5
......@@ -22,7 +22,7 @@
v-for="(item, index) in tabsTitle"
:key="index"
:title="item.title">
<my-order-list/>
<my-order-list @orderItemAction="orderItemAction"/>
</van-tab>
</van-tabs>
<high-search v-model="moreSearchShow" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/>
......@@ -95,6 +95,33 @@ export default {
window.removeEventListener('popstate', this.onBrowserBack, false)
},
methods: {
// 单个发票点击事件
orderItemAction(model) {
console.log(model)
switch (true) {
case model.actionType === "invoice":
//查看发票
this.gotoOrderInvoice();
break;
case model.actionType === "logistics":
// 查看物流
break;
case model.actionType === "clearance":
// 清货单
break;
case model.actionType === "details":
// 订单详情
break;
}
},
// 查看发票
gotoOrderInvoice(model) {
// console.log()
this.$router.push({
path: '/orderInvoice',
query: window.location.href.split('?')[1]
});
},
onBrowserBack() {
if (this.moreSearchShow) {
this.moreSearchShow = false
......
src/views/myOrder/myOrderList.vue
View file @ 8c5d23e5
......@@ -12,7 +12,7 @@
<div class="orderItem"
v-for="(item, index) in orderList"
:key="index">
<order-list-item :item="item"/>
<order-list-item @orderItemAction="orderItemAction" :item="item"/>
<!-- <div class="itemInfo">
<div class="orderNum">
<van-image fit="contain" width="45" height="45" :src="sphImage"/>
......@@ -101,6 +101,10 @@ export default {
// this.onLoad()
},
methods: {
// 单个发票点击事件
orderItemAction(model) {
this.$emit('orderItemAction', model)
},
onRefresh() {
this.currentPage = 1
this.isRefreshing = true
......
src/views/myOrder/orderInvoice/components/HighSearch.vue 0 → 100644
View file @ 8c5d23e5
<template>
<div class="h100">
<van-popup
v-model="moreSearchShow"
class="more-search"
position="right"
:style="{ width: '75%',height: '100%', overflow: 'hidden' }">
<div class="title font-bold font-16">下单时间</div>
<time-choose :startTime="moreSearchInfo.time.start" :endTime="moreSearchInfo.time.end" @confirm="timeConfirm"></time-choose>
<div class="high-info-list">
<div class="high-info" @click="showPost('consignor')">
<div class="title font-bold font-16">货主</div>
<!-- <textarea :value="consignor" class="inputInfo" type="text"></textarea> -->
<div contenteditable="true" class="inputInfo">{{consignor}}</div>
</div>
<div class="high-info">
<div class="title font-bold font-16">请输入订单号</div>
<!-- <div contenteditable="true" class="inputInfo">{{orderNo}}</div> -->
<input :value="orderNo" class="input" type="text">
</div>
<div class="high-info" @click="showPost('supplier')">
<div class="title font-bold font-16">供应商</div>
<div contenteditable="true" class="inputInfo">{{supplier}}</div>
</div>
<div class="high-info" @click="showPost('goods')">
<div class="title font-bold font-16">商品</div>
<div contenteditable="true" class="inputInfo">{{goods}}</div>
</div>
<div class="high-info" @click="showPost('client')">
<div class="title font-bold font-16">客户</div>
<div contenteditable="true" class="inputInfo">{{client}}</div>
</div>
</div>
<!-- <van-cell-group class="high-info">
<van-cell class="flex4" is-link
:value="consignor"
@click="showPost('consignor')">
<template #title>
<span type="danger" class="font-bold">货主</span>
</template>
</van-cell>
<van-field class="common" placeholder="请输入订单号" v-model="moreSearchInfo.orderNo">
<template #label>
<span type="danger" class="font-bold">订单号</span>
</template>
</van-field>
<van-cell class="flex4" is-link
:value="supplier"
@click="showPost('supplier')">
<template #title>
<span type="danger" class="font-bold">供应商</span>
</template>
</van-cell>
<van-cell class="flex4" is-link
:value="goods"
@click="showPost('goods')">
<template #title>
<span type="danger" class="font-bold">商品</span>
</template>
</van-cell>
<van-cell class="flex4" is-link
:value="client"
@click="showPost('client')">
<template #title>
<span type="danger" class="font-bold">客户</span>
</template>
</van-cell>
</van-cell-group> -->
<div class="action-bottom">
<van-button type="default" @click="onCleanClick">重置</van-button>
<van-button type="info" class="submit" @click="onSearchClick">查询</van-button>
</div>
</van-popup>
<search-in-supplier
v-model="moreSearchDialog.supplierShow"
:customer="!moreSearchInfo.supplier ? {}:moreSearchInfo.supplier"
:chinfo="chinfo"
@cancleclick="showPost"
@confirmclick="postConfirm"
></search-in-supplier>
<search-in-consignor
v-model="moreSearchDialog.consignorShow"
:customer="!moreSearchInfo.consignor ? {}:moreSearchInfo.consignor"
:chinfo="chinfo"
@cancleclick="showPost"
@confirmclick="postConfirm"
></search-in-consignor>
<cg-search-goods
v-model="moreSearchDialog.goodsShow"
:customer="!moreSearchInfo.goods ? {}:moreSearchInfo.goods"
@cancleclick="showPost"
@confirmclick="postConfirm"
></cg-search-goods>
<search-in-client
v-model="moreSearchDialog.clientShow"
:customer="!moreSearchInfo.client ? {}:moreSearchInfo.client"
:chinfo="chinfo"
@cancleclick="showPost"
@confirmclick="postConfirm"
></search-in-client>
</div>
</template>
<script>
import TimeChoose from '@/components/TimeChoose'
import {getFormateDate} from '@/utils/common'
// 供应商
import SearchInSupplier from "@/components/SearchInSupplier";
// 货主
import SearchInConsignor from "@/components/SearchInConsignor";
// 商品
import CgSearchGoods from "@/components/CgSearchGoods";
// 客户
import SearchInClient from "@/components/SearchInClient"
export default {
name: 'HighSearch',
components: {
TimeChoose,
SearchInSupplier,
CgSearchGoods,
SearchInConsignor,
SearchInClient
},
data() {
return {
moreSearchShow: false,
moreSearchDialog: {
consignorShow: false,
goodsShow: false,
supplierShow: false,
goodsShow: false,
clientShow: false
},
moreSearchInfo: {
supplier: '', // 供应商
consignor: '', // 货主
goods: '', // 商品
client: '', // 客户
orderNo: '', // 订单号
time: {
start: getFormateDate(new Date(), 'yyyy-MM-dd'),
end: getFormateDate(new Date(), 'yyyy-MM-dd')
},
},
chinfo: {
goodsId: '',
supplier: ''
}
}
},
computed: {
// 供应商
supplier () {
if (this.moreSearchInfo.supplier.comPartyId) {
return !this.moreSearchInfo.supplier ? '' : (this.moreSearchInfo.supplier.comPartyId + '/(' + this.moreSearchInfo.supplier.partyOpcode + ')' + this.moreSearchInfo.supplier.partyName)
} else {
return ''
}
},
// 货主
consignor () {
if (this.moreSearchInfo.consignor.comPartyId) {
return !this.moreSearchInfo.consignor ? '' : (this.moreSearchInfo.consignor.comPartyId + '/(' + this.moreSearchInfo.consignor.partyOpcode + ')' + this.moreSearchInfo.consignor.partyName)
} else {
return ''
}
},
// 商品
goods () {
if (this.moreSearchInfo.goods.comGoodsId) {
return !this.moreSearchInfo.goods ? '' : (this.moreSearchInfo.goods.comGoodsId + '/(' + this.moreSearchInfo.goods.goodsOpcode + ')' + this.moreSearchInfo.goods.goodsName + '/' + this.moreSearchInfo.goods.goodsDesc + '/' + this.moreSearchInfo.goods.productLocation + '/' + this.moreSearchInfo.goods.packageNum + '/' + this.moreSearchInfo.goods.unitName)
} else {
return ''
}
},
// 客户
client () {
if (this.moreSearchInfo.client.comPartyId) {
return !this.moreSearchInfo.client ? '' : (this.moreSearchInfo.client.comPartyId + '/(' + this.moreSearchInfo.client.partyOpcode + ')' + this.moreSearchInfo.client.partyName)
} else {
return ''
}
},
// 订单号
orderNo () {
if (this.moreSearchInfo.orderNo) {
return !this.moreSearchInfo.orderNo ? '' : this.moreSearchInfo.orderNo
} else {
return ''
}
}
},
props: {
value: {
type: Boolean,
default: false
},
choosetime: {
type: Object,
default: () => {}
}
},
watch: {
value (val) {
this.moreSearchShow = val
// this.time = JSON.parse(JSON.stringify(this.choosetime))
},
moreSearchShow (val) {
this.$emit('input', val)
}
},
methods: {
timeConfirm (data) {
this.time = data
},
onSearchClick() {
this.moreSearchShow = false
console.log(this.moreSearchInfo)
this.$emit('onsearch', this.moreSearchInfo)
},
onCleanClick() {
this.moreSearchInfo = {
supplier: '', // 供应商
consignor: '', // 货主
goods: '', // 商品
client: '', // 客户
orderNo: '',
time: {
start: getFormateDate(new Date(), 'yyyy-MM-dd'),
end: getFormateDate(new Date(), 'yyyy-MM-dd')
},
}
console.log(this.moreSearchInfo)
// this.moreSearchShow = false
// this.$emit('onsearch', this.moreSearchInfo)
},
showPost(type) {
switch (true) {
case type === 'supplier':
this.moreSearchDialog.supplierShow = !this.moreSearchDialog.supplierShow;
break;
case type === 'consignor':
this.moreSearchDialog.consignorShow = !this.moreSearchDialog.consignorShow;
break;
case type === 'goods':
this.moreSearchDialog.goodsShow = !this.moreSearchDialog.goodsShow
break;
case type === 'client':
this.moreSearchDialog.clientShow = !this.moreSearchDialog.clientShow
break;
}
window.history.pushState(null, null, document.URL);
},
postConfirm(data) {
console.log(data)
switch (true) {
case data.page === 'supplier':
this.moreSearchInfo.supplier = data.value;
this.chinfo.supplier = this.moreSearchInfo.supplier.comPartyId
break;
case data.page === 'goods':
this.moreSearchInfo.goods = data.value
break;
case data.page === 'consignor':
this.moreSearchInfo.consignor = data.value
break;
case data.page === 'client':
this.moreSearchInfo.client = data.value
break;
}
this.showPost(data.page);
},
}
}
</script>
<style lang="scss" scoped>
* {
box-sizing: border-box;
}
.more-search {
.title {
margin: 30PX 0 0 15PX
}
.high-info-list{
height: calc(100vh - 156px);
overflow-x: hidden;
overflow-y: auto;
.high-info{
margin: 0PX 15PX;
font-size: 14PX;
.title {
margin: auto
}
.inputInfo {
color: #666666;
width: 100%;
max-height: 100%;
// height: 40PX;
margin: 10PX auto;
border-radius: 5PX;
border:0.5px solid #bbbbbb;
min-height: 35PX;
line-height: 24px;
outline: 0;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
padding: 5PX;
}
.input {
color: #666666;
width: 100%;
max-height: 100%;
// height: 40PX;
margin: 10PX auto;
border-radius: 5PX;
border:0.5px solid #bbbbbb;
min-height: 35PX;
line-height: 24px;
outline: 0;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
padding: 5PX;
}
}
}
.search-value {
margin-top: 45PX;
}
.flex4 {
/deep/ .van-cell__title {
flex: none;
}
}
.action-bottom {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
button {
flex: 1;
}
}
}
</style>
src/views/myOrder/orderInvoice/index.vue 0 → 100644
View file @ 8c5d23e5
<template>
<div id="orderInvoice">
<order-invoice-list @gotoDetail="gotoDetail"/>
<high-search v-model="moreSearchShow" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/>
</div>
</template>
<script>
import HighSearch from './components/HighSearch.vue'
import {getFormateDate} from '@/utils/common'
import orderInvoiceList from './orderInvoiceList.vue'
export default {
name: 'OrderInvoice',
components: {
HighSearch,
orderInvoiceList
},
data() {
return {
tabsTitle: [],
moreSearchShow: false,
activeTab: 'home',
moreSearchInfo: {
//接收搜索更多回传的数据
supplier: { comPartyId: "" }, //供应商ID
goods: { comGoodsId: "" }, //商品ID
orderNo: "", //订单编号
time: {
//起始时间
start: getFormateDate(new Date(), "yyyy-MM-dd"),
end: getFormateDate(new Date(), "yyyy-MM-dd"),
},
},
invoiceList: []
}
},
computed: {
linkInfo () {
return this.$store.state.linkInfo
},
routKey() {
return this.$route.path
},
searchTime() {
let time = this.time.start + '/' + this.time.end
return time
}
},
mounted() {
// 设置标题栏关闭返回按钮
this.$store.commit('setNavBar', {
show: true,
leftArrow: true,
rightIcon: true,
title: '发票',
leftText: '',
leftClick: this.onBrowserBack,
rightClick: this.onMoreSearch
})
// 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
window.addEventListener('popstate', this.onBrowserBack, false)
},
destroyed() {
// 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
window.removeEventListener('popstate', this.onBrowserBack, false)
},
methods: {
// 跳转发票详情
gotoDetail(model) {
// console.log()
this.$router.push({
path: '/orderInvoiecDetail',
query: window.location.href.split('?')[1]
});
},
onBrowserBack() {
this.$router.go(-1)
},
onSearch() {
},
onMoreSearch() {
this.moreSearchShow = !this.moreSearchShow
if (this.moreSearchShow) {
window.history.pushState(null, null, document.URL)
}
},
// 高级搜索查询
moreSearchConfirm(data) {
console.log('000000000')
},
// 高级搜索取消
moreSearchClean(data) {
this.moreSearchInfo = data;
},
closeAppPage() {
console.log('关闭页面')
bridge.closeWindow_c()
}
}
}
</script>
<style lang="scss" scoped>
#orderInvoice {
height: 100%;
}
</style>
src/views/myOrder/orderInvoice/invoiecDetail/orderInvoiecDetailList.vue 0 → 100644
View file @ 8c5d23e5
<template>
<div id="orderInvoiecDetailList">
<div class="content">
<van-pull-refresh class="list" ref="supplierList" v-model="isRefreshing" @refresh="onRefresh">
<van-list
v-model="isLoading"
:finished="finished"
finished-text="没有更多了"
:error.sync="error"
error-text="请求失败，点击重新加载"
@load="onLoad">
<div class="invoiceItem" @click="gotoDetail(item)"
v-for="(item, index) in invoiceList"
:key="index">
<order-invoiec-list-item :item="item"/>
</div>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script>
// 引入接口
import { getMyInvoiceList } from '@/api/myInvoice'
import orderInvoiecListItem from './orderInvoiecListItem.vue'
export default {
name: 'OrderInvoiecDetailList',
components: {
orderInvoiecListItem
},
data() {
return {
currentPage: 1,
pageSize: 10,
isRefreshing: false,
isLoading: false,
finished: false,
error: false,
logInfoShow: false,
invoiceList: [],
invoiceItem: {},
sphImage: require('@/assets/img/u48.png'),
}
},
computed: {
linkInfo () {
return this.$store.state.linkInfo
},
routKey() {
return this.$route.path
},
searchTime() {
let time = this.time.start + '/' + this.time.end
return time
}
},
mounted() {
// this.onLoad()
},
methods: {
gotoDetail(model) {
// console.log(model)
this.$emit('gotoDetail', model)
},
onRefresh() {
this.currentPage = 1
this.isRefreshing = true
this.getPostData()
},
onLoad() {
this.isLoading = true
this.getPostData()
},
getPostData() {
let _this = this
let data = {
'dbName': 'erp_test_shaphar-上药控股有限公司-204-23528', // 'erp_ogg_shaphar',
'start': _this.currentPage,
'length': _this.pageSize,
'goods': ''
}
getMyInvoiceList(data).then(rt => {
if (rt.code === 1 || rt.code === '1') {
if (_this.isRefreshing) {
_this.invoiceList = rt.data
} else if (rt.data || rt.data.length > 0) {
_this.invoiceList = _this.invoiceList.concat(rt.data)
}
// 重置刷新提示
_this.isRefreshing = false
// 重置加载更多提示
_this.isLoading = false
if (rt.data.length < 10) {
_this.finished = true
} else {
// 加载成功后下一页自增1
_this.currentPage++
}
} else {
_this.$toast(rt.message)
_this.isRefreshing = false
_this.error = true
_this.finished = false
}
// 加载状态结束
_this.isLoading = false
}).catch(e => {
this.$toast('获取信息失败！')
_this.isRefreshing = false
_this.isLoading = false
_this.error = true
_this.finished = true
})
}
}
}
</script>
<style lang="scss" scoped>
#orderInvoiecDetailList {
height: 100%;
.content{
height: 100%;
overflow-x: hidden;
overflow-y: auto;
margin: 10PX;
.invoiceItem{
height: 230PX;
background-color: white;
margin-bottom: 10PX;
border-radius: 10PX;
font-size: 14PX;
color: #333333;
}
}
}
</style>
src/views/myOrder/orderInvoice/invoiecDetail/orderInvoiecHead.vue 0 → 100644
View file @ 8c5d23e5
<template>
<div id="invoiecHead">
<div class="content">
<div class="taxIncluded">
<div class="taxAmount">￥377,898.00</div>
<div class="taxAmountSub">含税金额</div>
</div>
<div class="noTaxInfo">
<div class="noTax">
<div class="noTaxAmount">￥377,000.00</div>
<div class="noTaxAmountSub">无税金额</div>
</div>
<div class="taxNumber">
<div class="tax">￥377,000.00</div>
<div class="taxSub">无税金额</div>
</div>
</div>
<van-divider :style="{ color: '#FFFFFF', borderColor: '#FFFFFF', margin: '10PX 0 10PX 0'}"/>
<div class="invoiecInfo">
<div class="cellInfo">
<div class="title">发票号：</div>
<div class="info">837418787438178</div>
</div>
<!-- <div class="cellInfo">
<div class="title">发票代码：</div>
<div class="info">837418787438178</div>
</div> -->
<div class="cellInfo">
<div class="title">发票日期：</div>
<div class="info">2020-11-13 09:00</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {getFormateDate} from '@/utils/common'
export default {
name: 'InvoiecHead',
components: {
},
data() {
return {
tabsTitle: [],
moreSearchShow: false,
activeTab: 'home',
moreSearchInfo: {
//接收搜索更多回传的数据
supplier: { comPartyId: "" }, //供应商ID
goods: { comGoodsId: "" }, //商品ID
orderNo: "", //订单编号
time: {
//起始时间
start: getFormateDate(new Date(), "yyyy-MM-dd"),
end: getFormateDate(new Date(), "yyyy-MM-dd"),
},
},
invoiceList: []
}
},
computed: {
linkInfo () {
return this.$store.state.linkInfo
},
routKey() {
return this.$route.path
},
searchTime() {
let time = this.time.start + '/' + this.time.end
return time
}
},
mounted() {
},
methods: {
onBrowserBack() {
this.$router.go(-1)
},
onSearch() {
},
}
}
</script>
<style lang="scss" scoped>
#invoiecHead {
.content{
height: 250PX;
width: 100%;
background-color: $main1;
padding: 10pX;
color: white;
.taxIncluded{
text-align: center;
margin-bottom: 10PX;
.taxAmount{
font-size: 26PX;
font-weight: 550;
line-height: 40px;
height: 40PX
}
.taxAmountSub{
font-size: 16PX;
line-height: 30px;
height: 30PX
}
}
.noTaxInfo{
display: flex;
text-align: center;
font-size: 16PX;
line-height: 25PX;
.noTax{
width: 50%;
border-right:1px solid #ffffff;
.noTaxAmount{
font-weight: 550;
}
}
.taxNumber{
width: 50%;
.tax{
font-weight: 550;
}
}
}
.invoiecInfo{
font-size: 15PX;
.cellInfo{
display: flex;
line-height: 24PX;
.title{
width: 25%;
text-align: right;
}
.info{
width: 60%;
.price{
font-size: 16PX;
font-weight: 600;
color: red;
}
}
.btn {
width: 10%;
}
}
}
}
}
</style>
src/views/myOrder/orderInvoice/invoiecDetail/orderInvoiecListItem.vue 0 → 100644
View file @ 8c5d23e5
<template>
<div id="orderInvoiecListItem">
<div class="itemInfo">
<div class="orderNum">
<van-image fit="contain" width="45" height="50" :src="sphImage"/>
<div class="num">订单号：34678649876</div>
<van-button style="margin: auto;" class="numBtn" round plain size="mini" type="info">复制</van-button>
</div>
<div class="divider"></div>
<div class="invoiecInfo">
<div class="name">[132521] 阿西匹林/0.25g*200s/浙江恒瑞制药有限公司</div>
<div class="cellInfo">
<div class="batch">开票数量：4809</div>
<!-- <div class="numBer"> 开票数量：480</div> -->
</div>
<van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '5PX 0 5PX 0'}"/>
<div class="cellInfo">
<div class="leftInfo">
<div class="title">无税单价：</div>
<div class="value">7.52</div>
</div>
<div class="rightInfo">
<div class="title">单品无税金额：</div>
<div class="value"> 3616.00</div>
</div>
</div>
<div class="cellInfo">
<div class="leftInfo">
<div class="title">含税单价：</div>
<div class="value">7.52</div>
</div>
<div class="rightInfo">
<div class="title">单品含税金额：</div>
<div class="value"> 3616.00</div>
</div>
</div>
<div class="cellInfo">
<div class="leftInfo">
<div class="title">税率：</div>
<div class="value">7.52</div>
</div>
<div class="rightInfo">
<div class="title">税额：</div>
<div class="value"> 3616.00</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'OrderInvoiecListItem',
components: {
},
data() {
return {
sphImage: require('@/assets/img/u48.png'),
}
},
props: {
item: {
type: Object,
default: () => {
return {
}
}
}
},
computed: {
linkInfo () {
return this.$store.state.linkInfo
},
routKey() {
return this.$route.path
},
searchTime() {
let time = this.time.start + '/' + this.time.end
return time
}
},
mounted() {
// this.onLoad()
},
methods: {
onRefresh() {
}
}
}
</script>
<style lang="scss" scoped>
#orderInvoiecListItem {
.itemInfo{
.divider{
width: 100%;
height: 1PX;
background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 10PX 1PX;
background-repeat: repeat-x;
}
.orderNum{
display: flex;
line-height: 50PX;
height: 50PX;
margin: 0PX 10PX;
.num{
width: 80%;
padding-left: 5PX;
}
}
.invoiecInfo{
margin: 0PX 10PX;
// display: flex;
.name {
margin-top: 10PX;
height: 50PX;
width: 100%;
font-weight: 600;
white-space: pre-line;
word-break: break-all;
word-wrap: break-word;
}
.cellInfo{
display: flex;
line-height: 25PX;
.batch{
width: 50%;
}
.numBer{
width: 50%;
text-align: right;
}
.leftInfo{
width: 50%;
display: flex;
.title{
width: 45%;
text-align: right;
}
.value{
width: 55%;
text-align: left;
}
}
.rightInfo{
width: 50%;
display: flex;
.title{
width: 65%;
text-align: right;
}
.value{
width: 35%;
text-align: left;
}
}
}
}
}
}
</style>
src/views/myOrder/orderInvoice/orderInvoiceList.vue 0 → 100644
View file @ 8c5d23e5
<template>
<div id="orderInvoiceList">
<div class="content">
<van-pull-refresh class="list" ref="supplierList" v-model="isRefreshing" @refresh="onRefresh">
<van-list
v-model="isLoading"
:finished="finished"
finished-text="没有更多了"
:error.sync="error"
error-text="请求失败，点击重新加载"
@load="onLoad">
<div class="invoiceItem" @click="gotoDetail(item)"
v-for="(item, index) in invoiceList"
:key="index">
<order-invoiec-list-item :item="item"/>
</div>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script>
// 引入接口
import { getMyInvoiceList } from '@/api/myInvoice'
import orderInvoiecListItem from './orderInvoiecListItem.vue'
export default {
name: 'OrderInvoiceList',
components: {
orderInvoiecListItem
},
data() {
return {
currentPage: 1,
pageSize: 10,
isRefreshing: false,
isLoading: false,
finished: false,
error: false,
logInfoShow: false,
invoiceList: [],
invoiceItem: {},
sphImage: require('@/assets/img/u48.png'),
}
},
computed: {
linkInfo () {
return this.$store.state.linkInfo
},
routKey() {
return this.$route.path
},
searchTime() {
let time = this.time.start + '/' + this.time.end
return time
}
},
mounted() {
// this.onLoad()
},
methods: {
gotoDetail(model) {
// console.log(model)
this.$emit('gotoDetail', model)
},
onRefresh() {
this.currentPage = 1
this.isRefreshing = true
this.getPostData()
},
onLoad() {
this.isLoading = true
this.getPostData()
},
getPostData() {
let _this = this
let data = {
'dbName': 'erp_test_shaphar-上药控股有限公司-204-23528', // 'erp_ogg_shaphar',
'start': _this.currentPage,
'length': _this.pageSize,
'goods': ''
}
getMyInvoiceList(data).then(rt => {
if (rt.code === 1 || rt.code === '1') {
if (_this.isRefreshing) {
_this.invoiceList = rt.data
} else if (rt.data || rt.data.length > 0) {
_this.invoiceList = _this.invoiceList.concat(rt.data)
}
// 重置刷新提示
_this.isRefreshing = false
// 重置加载更多提示
_this.isLoading = false
if (rt.data.length < 10) {
_this.finished = true
} else {
// 加载成功后下一页自增1
_this.currentPage++
}
} else {
_this.$toast(rt.message)
_this.isRefreshing = false
_this.error = true
_this.finished = false
}
// 加载状态结束
_this.isLoading = false
}).catch(e => {
this.$toast('获取信息失败！')
_this.isRefreshing = false
_this.isLoading = false
_this.error = true
_this.finished = true
})
}
}
}
</script>
<style lang="scss" scoped>
#orderInvoiceList {
height: 100%;
.content{
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 10PX;
.invoiceItem{
// height: 145PX;
background-color: white;
margin-bottom: 10PX;
border-radius: 10PX;
font-size: 14PX;
color: #333333;
padding: 5PX 0PX;
}
}
}
</style>
src/views/myOrder/orderInvoice/orderInvoiecDetail.vue 0 → 100644
View file @ 8c5d23e5
<template>
<div id="orderInvoiecDetail">
<div class="content">
<order-invoiec-head/>
</div>
<div class="list">
<order-invoiec-detail-list/>
</div>
<!-- <high-search v-model="moreSearchShow" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/> -->
</div>
</template>
<script>
import {getFormateDate} from '@/utils/common'
import orderInvoiecHead from './invoiecDetail/orderInvoiecHead.vue'
import orderInvoiecDetailList from './invoiecDetail/orderInvoiecDetailList.vue'
export default {
name: 'OrderInvoiecDetail',
components: {
orderInvoiecHead,
orderInvoiecDetailList
},
data() {
return {
tabsTitle: [],
moreSearchShow: false,
activeTab: 'home',
moreSearchInfo: {
//接收搜索更多回传的数据
supplier: { comPartyId: "" }, //供应商ID
goods: { comGoodsId: "" }, //商品ID
orderNo: "", //订单编号
time: {
//起始时间
start: getFormateDate(new Date(), "yyyy-MM-dd"),
end: getFormateDate(new Date(), "yyyy-MM-dd"),
},
},
invoiceList: []
}
},
computed: {
linkInfo () {
return this.$store.state.linkInfo
},
routKey() {
return this.$route.path
},
searchTime() {
let time = this.time.start + '/' + this.time.end
return time
}
},
mounted() {
// 设置标题栏关闭返回按钮
this.$store.commit('setNavBar', {
show: true,
leftArrow: true,
rightIcon: false,
title: '',
leftText: '发票明细',
leftClick: this.onBrowserBack,
rightClick: this.onMoreSearch
})
// 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
window.addEventListener('popstate', this.onBrowserBack, false)
},
destroyed() {
// 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
window.removeEventListener('popstate', this.onBrowserBack, false)
},
methods: {
onBrowserBack() {
this.$router.go(-1)
},
onSearch() {
},
onMoreSearch() {
this.moreSearchShow = !this.moreSearchShow
if (this.moreSearchShow) {
window.history.pushState(null, null, document.URL)
}
},
// 高级搜索查询
moreSearchConfirm(data) {
console.log('000000000')
},
// 高级搜索取消
moreSearchClean(data) {
this.moreSearchInfo = data;
},
closeAppPage() {
console.log('关闭页面')
bridge.closeWindow_c()
}
}
}
</script>
<style lang="scss" scoped>
#orderInvoiecDetail {
height: 100%;
width: 100%;
.list{
height: calc(100vh - 245PX);
margin-top: -40PX;
}
}
</style>
src/views/myOrder/orderInvoice/orderInvoiecListItem.vue 0 → 100644
View file @ 8c5d23e5
<template>
<div id="invoiecListItem">
<div class="invoiecrInfo">
<div class="cellInfo">
<div class="title">发票号：</div>
<div class="info">XS837418787438178</div>
</div>
<div class="cellInfo">
<div class="title">发票日期：</div>
<div class="info">2021-03-08</div>
</div>
<div class="cellInfo">
<div class="title">发票金额：</div>
<div class="info" style="font-weight: 600;font-size: 16PX;">￥<span class="price">377,899.00</span></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'InvoiecListItem',
components: {
},
data() {
return {
sphImage: require('@/assets/img/u48.png'),
}
},
props: {
item: {
type: Object,
default: () => {
return {
}
}
}
},
computed: {
linkInfo () {
return this.$store.state.linkInfo
},
routKey() {
return this.$route.path
},
searchTime() {
let time = this.time.start + '/' + this.time.end
return time
}
},
mounted() {
// this.onLoad()
},
methods: {
onRefresh() {
}
}
}
</script>
<style lang="scss" scoped>
#invoiecListItem {
height: 100%;
.invoiecrInfo{
font-size: 15PX;
.cellInfo{
display: flex;
line-height: 30PX;
.title{
width: 25%;
text-align: right;
}
.info{
width: 60%;
}
}
}
}
</style>
src/views/myOrder/orderListItem.vue
View file @ 8c5d23e5
......@@ -14,12 +14,12 @@
</div>
<div class="divider"></div>
<div class="orderInfo">
<div class="company">
<div class="company" @click="btnAction('details')">
<span style="width: 83%">上药控股有限公司</span>
<span style="margin-right: 5PX;">共8件</span>
<van-icon style="margin: auto 0;" color="#1989fa" name="arrow" />
</div>
<div class="info">
<div class="info" @click="btnAction('details')">
<div class="headImage">
<van-image width="55" height="55"
src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
......@@ -34,16 +34,16 @@
</div>
</div>
</div>
<div class="orderTime">
<div class="orderTime" @click="btnAction('details')">
<van-icon size="20" style="margin: auto 0; width: 7%;" name="clock-o" />
<span style="width: 50%;">2020-11-10 18:09:33</span>
<div class="price">总计：￥<span style="color:red;">10.5</span></div>
</div>
<van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '10PX 0 10PX 0'}"/>
<div class="btnInfo" style="text-align: right;">
<van-button style="border-radius: 5PX;" plain size="small" type="info">查看发票</van-button>
<van-button style="border-radius: 5PX;" plain size="small" type="info">查看物流</van-button>
<van-button style="border-radius: 5PX;" plain size="small" type="info">清货单</van-button>
<van-button @click="btnAction('invoice')" style="border-radius: 5PX;" plain size="small" type="info">查看发票</van-button>
<van-button @click="btnAction('logistics')" style="border-radius: 5PX;" plain size="small" type="info">查看物流</van-button>
<van-button @click="btnAction('clearance')" style="border-radius: 5PX;" plain size="small" type="info">清货单</van-button>
</div>
</div>
</div>
......@@ -86,6 +86,11 @@ export default {
},
methods: {
onRefresh() {
},
// 查看发票 查看物流 清货单
btnAction (type) {
this.item.actionType = type
this.$emit('orderItemAction', this.item)
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment