添加发票 列表页面与发票高级搜索页面

src/api/myInvoice.js

+import { fetch } from '@/utils'
+// 获取商品列表
+export function getMyInvoiceList(params) {
+  return fetch({
+    url: '/product/queryGoods_PS',
+    method: 'post',
+    data: params,
+    loading: true
+  })
+}

src/router/index.js

@@ -6,6 +6,8 @@ import todo from './todo'
 import saleSituation from './saleSituation'
 // 我的订单
 import myOrder from './myOrder'
+// 我的发票
+import myInvoice from './myInvoice'
 import { GetQueryString } from '@/utils/common'
 // http://mobileportal.shaphar.com:8020/SYERP/newerp/#/requireGoods
 Vue.use(Router)
@@ -17,7 +19,8 @@ const routerList = [
   },
   ...todo,
   ...saleSituation,
-  ...myOrder
+  ...myOrder,
+  ...myInvoice
 ]
 
 const router = new Router({

src/router/myInvoice/index.js

+const myInvoice = [
+  {
+    path: '/myInvoice',
+    name: 'myInvoice',
+    meta: {
+      title: '我的订单',
+      auth: false
+    },
+    component: resolve => require(['@/views/myInvoice'], resolve)
+  }
+]
+export default myInvoice

src/views/myInvoice/index.vue

+<template>
+  <div id="myInvoice">
+    <my-invoice-list/>
+    <high-search v-model="moreSearchShow" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/>
+  </div>
+</template>
+
+<script>
+import HighSearch from './components/HighSearch.vue'
+import {getFormateDate} from '@/utils/common'
+import myInvoiceList from './myInvoiceList.vue'
+export default {
+  name: 'MyInvoice',
+  components: {
+    HighSearch,
+    myInvoiceList                             
+  },
+  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.closeAppPage,
+      rightClick: this.onMoreSearch
+    })
+    // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
+    window.addEventListener('popstate', this.onBrowserBack, false)
+  },
+  destroyed() {
+    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
+    window.removeEventListener('popstate', this.onBrowserBack, false)
+  },
+  methods: {
+    onBrowserBack() {
+      if (this.moreSearchShow) {
+        this.moreSearchShow = false
+        return
+      }
+      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>
+  #myInvoice {
+    height: 100%;
+  }
+</style>

src/views/myInvoice/invoiecListItem.vue

+<template>
+  <div id="invoiecListItem">
+    <div class="itemInfo">
+      <div class="invoiecrNum">
+        <div class="company">浙江恒瑞制药公司</div>
+        <div class="time"><span>2020-11-13 09:00</span></div>
+      </div>
+      <div class="divider"></div>
+      <div class="invoiecrInfo">
+        <div class="cellInfo">
+          <div class="title">发票金额：</div>
+          <div class="info">￥<span class="price">377,899.00</span></div>
+          <div class="btn">
+            <van-button round plain size="mini" type="info">预览</van-button>
+          </div>
+        </div>
+        <div class="cellInfo">
+          <div class="title">发票号：</div>
+          <div class="info">XS837418787438178</div>
+        </div>
+        <div class="cellInfo">
+          <div class="title">发票代号：</div>
+          <div class="info">837418787438178</div>
+        </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%;
+    .itemInfo{
+      height: 100%;
+      .divider{
+        width: 100%;
+        height: 1PX;
+        background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
+        background-size: 10PX 1PX;
+        background-repeat: repeat-x;
+      }
+      .invoiecrNum{
+        display: flex;
+        line-height: 40PX;
+        height: 40PX;
+        margin: 0PX 10PX;
+        .company{
+          width: 60%;
+          padding-left: 5PX;
+          font-weight: 600;
+        }
+        .time{
+          width: 40%;
+          text-align: right
+        }
+      }
+      .invoiecrInfo{
+        margin: 5PX 10PX;
+        // display: flex;
+        height: 110PX;
+        font-size: 15PX;
+        .cellInfo{
+          display: flex;
+          line-height: 30PX;
+          .title{
+            width: 25%;
+            text-align: right;
+          }
+          .info{
+            width: 60%;
+            .price{
+              font-size: 16PX;
+              font-weight: 600;
+              color: red;
+            }
+          }
+          .btn {
+            width: 10%;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/myInvoice/myInvoiceList.vue

+<template>
+  <div id="myInvoiceList">
+    <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"
+            v-for="(item, index) in invoiceList"
+            :key="index">
+            <invoiec-list-item :item="item"/>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<script>
+// 引入接口
+import { getMyInvoiceList } from '@/api/myInvoice'
+import invoiecListItem from './invoiecListItem.vue'
+export default {
+  name: 'MyInvoiceList',
+  components: {
+    invoiecListItem
+  },
+  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: {
+    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>
+  #myInvoiceList {
+    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;
+      }
+    }
+  }
+</style>