Merge branch 'master' of http://gitlab.jiucaiyun.cn/sph/SH_OrderLifeCycleU

src/assets/styles/variable.scss

@@ -29,8 +29,14 @@ $arrowC:#747782;
 $txtBlack:#23262A;
 $txtGray:#8792A4;
 
+// 线颜色
+$line: #eeeeee;
+// 文字色
+$txtGray9: #999999;
+$txtGrayL: #D3D3D3;
 //订单状态颜色
 $orderReturn:#D9001B;
 $orderJm:#02a7f0;
 $orderCold:#4b7902;
 
+

src/components/MapView.vue

 <template>
-  <div id="mapView">
-    <!-- <div id="container" style="width:100%;height:400px"></div> -->
+  <div class="amap-container">
     <el-amap
-      :plugin="plugin"
-      :amap-manager="amapManager"
-      :zoom="zoom"
-      :center="center"
-      vid="amapDemo"
-      ref="reds"
-      style="width:100vw;height:80vh"
-      :events="events"
+      vid="amap-order"
+      class = "amap-box"
+      :resizeEnable="mapInfo.resizeEnable"
+      :amap-manager="mapInfo.amapManager"
+      :zoom="mapInfo.zoom"
+      :center="mapInfo.center"
+      :events="mapInfo.events"
     ></el-amap>
   </div>
 </template>
 
 <script>
-import {AMapManager} from 'vue-amap'
-import VueAMap from 'vue-amap'
-// var map = amapManager.getMap();
-import AMap from 'AMap'
 // 引入高德地图ui组件
-import {lazyAMapApiLoaderInstance} from 'vue-amap'
-
+// eslint-disable-next-line import/no-duplicates
+// import {lazyAMapApiLoaderInstance} from 'vue-amap'
+// eslint-disable-next-line import/no-duplicates
+import VueAMap from 'vue-amap'
+//
 let amapManager = new VueAMap.AMapManager()
 
 export default {
@@ -33,52 +30,25 @@ export default {
     }
   },
   data() {
-    let _obj = this
     return {
-      status: this.value,
-      amapManager,
-      center: [116.379028, 39.865042],
-      plugin: [
-        {
-          pName: 'Scale',
-          events: {
-            init(instance) {
-              console.log(instance)
-            }
-          }
-        }
-      ],
-      zoom: 13,
-      events: {
-        init(o) {
-          // _obj.createMap();
-          o.setMapStyle('amap://styles/macaron') // 自定义的高德地图的样式，我选的是马卡龙
-          let marker = new AMap.Marker({ // 点图标
-            position: [116.379028, 39.865042]
-          })
-          // o.setZoomAndCenter(16, [116.379028, 39.865042])
-          marker.setMap(o)
-          o.plugin(['AMap.Driving'], function () {
-            var driving = new AMap.Driving({
-              map: o,
-              showTraffic: false // 是否显示拥堵状态
+      mapInfo: {
+        resizeEnable: true, // 是否监控地图容器尺寸变化
+        zoom: 13, // 地图缩放
+        amapManager,
+        center: [116.379028, 39.865042],
+        events: {
+          init(o) {
+            // lazyAMapApiLoaderInstance.load().then(() => {
+            //
+            // })
+            // eslint-disable-next-line no-undef
+            let marker = new AMap.Marker({ // 点图标
+              position: [116.379028, 39.865042]
             })
-            // 地点关键字+ 驾车路线规划
-            driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
-              // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
-              if (status === 'complete') {
-                console.log('绘制驾车路线完成')
-              } else {
-                console.log('获取驾车数据失败：' + result)
-              }
-            }
-            )
-            o.addControl(driving)
-          })
+            marker.setMap(o)
+          }
         }
-      },
-      marker: {},
-      map: {} // 保存地图对象
+      }
     }
   },
   watch: {
@@ -87,19 +57,8 @@ export default {
     }
   },
   mounted() {
-    this.createMapOne()
   },
   methods: {
-    // 创建地图
-    createMapOne() {
-
-    },
-    createMap() {
-      o.setMapStyle('amap://styles/macaron') // 自定义的高德地图的样式，我选的是马卡龙
-      let marker = new AMap.Marker({ // 点图标
-        position: [116.379028, 39.865042]
-      })
-    },
     action() {
       this.$emit('action', '')
     }
@@ -107,7 +66,8 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-#MapView {
-  // height: 44px;
+.amap-container {
+   height: 300px;
+  width: 100%;
 }
 </style>

src/components/SearchInConsignor.vue

@@ -28,7 +28,7 @@
             :error.sync="error"
             :offset="10"
             @load="onLoad">
-            <van-radio-group v-model="checked">
+            <!-- <van-radio-group v-model="checked">
               <van-cell-group>
                 <van-cell :title="titleInitial(item)" clickable @click="itemClick(item,index)" v-for="(item,index) in postDataList"
                           :key="index">
@@ -37,7 +37,17 @@
                   </template>
                 </van-cell>
               </van-cell-group>
-            </van-radio-group>
+            </van-radio-group> -->
+            <van-checkbox-group v-model="checkedList">
+              <van-cell-group>
+                <van-cell :title="titleInitial(item)" clickable @click="itemClick(item,index)" v-for="(item,index) in postDataList"
+                          :key="index">
+                  <template #right-icon>
+                    <van-checkbox :name="item.comPartyId" />
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </van-checkbox-group>
           </van-list>
         </van-pull-refresh>
       </div>
@@ -71,7 +81,8 @@ export default {
       pageSize: 10,
       postDataList: [],
       checked: '',
-      choosedPost: {}
+      checkedList: [],
+      choosedPost: []
     }
   },
   computed: {
@@ -85,8 +96,8 @@ export default {
       default: false
     },
     customer: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     },
     chinfo: {
       type: Object,
@@ -103,11 +114,15 @@ export default {
       this.postShow = val
       if (val) {
         this.postDataList = []
+        this.checkedList = []
         this.choosedPost = JSON.parse(JSON.stringify(this.customer))
-        this.checked = !this.customer.comPartyId ? '' : this.customer.comPartyId
-        console.log(this.checked)
+        // this.checked = !this.customer.comPartyId ? '' : this.customer.comPartyId
+        // console.log(this.checked)
+        this.customer.forEach((res)=>{
+          this.checkedList.push(res.comPartyId)
+        })
         this.currentPage = 1
-        this.onLoad()
+        this.onRefresh()
       }
     },
     postShow (val) {
@@ -140,10 +155,11 @@ export default {
     },
     onCancelClick() {
       this.postShow = false
+      this.checkedList = []
       this.$emit('cancleclick')
     },
     onConfirmClick() {
-      if (!this.choosedPost.comPartyId) {
+      if (this.choosedPost.length === 0) {
         Dialog.alert({
           title: '温馨提示',
           message: '请选择选项！'
@@ -158,8 +174,15 @@ export default {
       })
     },
     itemClick(item, index) {
-      this.checked = item.comPartyId
-      this.choosedPost = item
+      // this.checked = item.comPartyId
+      // this.choosedPost = item
+      if(this.checkedList.indexOf(item.comPartyId) > -1) {
+        this.choosedPost.splice(this.checkedList.indexOf(item.comPartyId),1)
+        this.checkedList.splice(this.checkedList.indexOf(item.comPartyId),1)
+      } else {
+        this.checkedList.push(item.comPartyId)
+        this.choosedPost.push(item)
+      } 
     },
     onRefresh() {
       // 刷新接口

src/main.js

@@ -14,7 +14,7 @@ Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: '061c2a328572b71e2b26d9dc1a0cc703',
   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
-  v: '1.4.4',
+  v: '2.0',
   uiVersion: '1.0'
 })
 // import './assets/styles/variable.scss'

src/router/index.js

@@ -15,7 +15,7 @@ Vue.use(Router)
 const routerList = [
   {
     path: '/',
-    redirect: '/todo'
+    redirect: '/myOrder'
   },
   ...todo,
   ...saleSituation,

src/router/myOrder/index.js

@@ -34,6 +34,33 @@ 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)
+  },
+  {
+    path: '/clearance',
+    name: 'clearance',
+    meta: {
+      title: '请货单查询',
+      auth: false
+    },
+    component: resolve => require(['@/views/myOrder/clearance'], resolve)
   }
 ]
 export default myOrder

src/views/myInvoice/components/HighSearch.vue

@@ -18,6 +18,11 @@
             <!-- <div contenteditable="true" class="inputInfo">{{orderNo}}</div> -->
             <input :value="orderNo" class="input" type="text">
           </div>
+          <div class="high-info">
+            <div class="title font-bold font-16">发票号</div>
+            <!-- <div contenteditable="true" class="inputInfo">{{orderNo}}</div> -->
+            <input :value="invoiceNo" 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>
@@ -133,10 +138,11 @@ export default {
       },
       moreSearchInfo: {
         supplier: '', // 供应商
-        consignor: '', // 货主
+        consignor: [], // 货主
         goods: '', // 商品
         client: '', // 客户
         orderNo: '', // 订单号
+        invoiceNo: '', // 发票号
         time: {
           start: getFormateDate(new Date(), 'yyyy-MM-dd'),
           end: getFormateDate(new Date(), 'yyyy-MM-dd')
@@ -159,8 +165,13 @@ export default {
     },
     // 货主
     consignor () {
-      if (this.moreSearchInfo.consignor.comPartyId) {
-        return !this.moreSearchInfo.consignor ? '' : (this.moreSearchInfo.consignor.comPartyId + '/(' + this.moreSearchInfo.consignor.partyOpcode + ')' + this.moreSearchInfo.consignor.partyName)
+      // if (this.moreSearchInfo.consignor.comPartyId) {
+      //   return !this.moreSearchInfo.consignor ? '' : (this.moreSearchInfo.consignor.comPartyId + '/(' + this.moreSearchInfo.consignor.partyOpcode + ')' + this.moreSearchInfo.consignor.partyName)
+      // } else {
+      //   return ''
+      // }
+      if (this.moreSearchInfo.consignor) {
+        return this.fieldStitching()
       } else {
         return ''
       }
@@ -188,6 +199,14 @@ export default {
       } else {
         return ''
       }
+    },
+    // 发票号
+    invoiceNo () {
+      if (this.moreSearchInfo.invoiceNo) {
+        return !this.moreSearchInfo.invoiceNo ? '' : this.moreSearchInfo.invoiceNo
+      } else {
+        return ''
+      }
     }
   },
   props: {
@@ -221,10 +240,11 @@ export default {
     onCleanClick() {
       this.moreSearchInfo = {
         supplier: '', // 供应商
-        consignor: '', // 货主
+        consignor: [], // 货主
         goods: '', // 商品
         client: '', // 客户
         orderNo: '',
+        invoiceNo: '',
         time: {
           start: getFormateDate(new Date(), 'yyyy-MM-dd'),
           end: getFormateDate(new Date(), 'yyyy-MM-dd')
@@ -271,6 +291,20 @@ export default {
       }
       this.showPost(data.page);
     },
+    // 字段拼接
+    fieldStitching() {
+      let str = ''
+      if (this.moreSearchInfo.consignor.length === 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0])
+      } else if (this.moreSearchInfo.consignor.length > 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0]) + '......'
+      }
+      return str
+    },
+    // 商品信息拼接
+    consignorInfoStitching(model) {
+      return model.comPartyId + '/(' + model.partyOpcode + ')/' + model.partyName
+    }
   }
 }
 </script>

src/views/myInvoice/index.vue

@@ -71,7 +71,7 @@ export default {
       // console.log()
      this.$router.push({
         path: '/invoiecDetail',
-        query: window.location.href.split('?')[1]
+        query: this.$store.state.linkInfo
       });
     },
     onBrowserBack() {

src/views/myOrder/clearance/HighSearch.vue

+<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('supplier')">
+            <div class="title font-bold font-16">供应商</div>
+            <div contenteditable="true" class="inputInfo">{{supplier}}</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('goods')">
+            <div class="title font-bold font-16">商品</div>
+            <div contenteditable="true" class="inputInfo">{{goods}}</div>
+          </div>
+          <div class="high-info">
+            <div class="title font-bold font-16">来源商品编码</div>
+            <input :value="sourceGoodNo" class="input" type="text">
+          </div>
+          <!-- <div class="high-info" @click="showPost('consignor')">
+            <div class="title font-bold font-16">货主</div>
+            <div contenteditable="true" class="inputInfo">{{consignor}}</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: '', // 订单号
+        sourceGoodNo: '', // 来源商品编码
+        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 ''
+      // }
+      if (this.moreSearchInfo.consignor) {
+        return this.fieldStitching()
+      } 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 ''
+      }
+    },
+    // 来源商品编号
+    sourceGoodNo () {
+      if (this.moreSearchInfo.sourceGoodNo) {
+        return !this.moreSearchInfo.sourceGoodNo ? '' : this.moreSearchInfo.sourceGoodNo
+      } 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: '',
+        sourceGoodNo: '', // 来源商品编码
+        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);
+    },
+    // 字段拼接
+    fieldStitching() {
+      let str = ''
+      if (this.moreSearchInfo.consignor.length === 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0])
+      } else if (this.moreSearchInfo.consignor.length > 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0]) + '......'
+      }
+      return str
+    },
+    // 商品信息拼接
+    consignorInfoStitching(model) {
+      return model.comPartyId + '/(' + model.partyOpcode + ')/' + model.partyName
+    }
+  }
+}
+</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/clearance/clearanceList.vue

+<template>
+  <div id="clearanceList">
+    <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">
+              <clearance-list-item :item="item"/>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<script>
+// 引入接口
+import { getMyInvoiceList } from '@/api/myInvoice'
+import clearanceListItem from './clearanceListItem.vue'
+export default {
+  name: 'ClearanceList',
+  components: {
+    clearanceListItem
+  },
+  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>
+  #clearanceList {
+    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: 0PX 10PX 10PX 10PX;
+      }
+    }
+  }
+</style>

src/views/myOrder/clearance/clearanceListItem.vue

+<template>
+  <div id="clearanceListItem">
+    <div class="clearanceInfo">
+      <div class="clearanceHead">
+        <van-image fit="contain" width="50" height="55" :src="sphImage"/>
+        <div class="num">
+          <div class="numBer">请货单号：34678649876</div>
+        </div>
+        <div class="numType"><van-button class="numBtn" plain size="mini" type="info">药事所</van-button></div>
+      </div>
+      <div class="divider"></div>
+      <div class="orderInfo">
+        <div class="company">
+          <span style="width: 83%">药品部</span>
+        </div>
+        <div class="info">
+          <div class="headImage">
+            <van-image width="55" height="55"
+              src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
+          </div>
+          <div class="details">
+            <div class="titleInfo">
+              [132521]阿西匹林/0.25g*s/上海市浦东新区金科路长泰广场负一楼
+            </div>
+          </div>
+        </div>
+        <div class="goodsNum">
+          来源商品编码：XN19280003837282
+        </div>
+        <div class="quantity">
+          <div class="clearanceNum">
+            请货数量：1000
+          </div>
+          <div class="billingNum">
+            开单数量：90
+          </div>
+        </div>
+        <van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '10PX 0 10PX 0'}"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ClearanceListItem',
+  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>
+  #clearanceListItem {
+    height: 100%;
+    .clearanceInfo{
+      font-size: 15PX;
+      .clearanceHead{
+        display: flex;
+        line-height: 50PX;
+        height: 50PX;
+        // margin: 0PX 10PX;
+        .num{
+          width: 77%;
+          padding-left: 5PX;
+        }
+        .numBer{
+          height: 16PX;
+          // line-height: 15PX;
+        }
+        // .numBtn{
+        //   height: 13PX;
+        //   line-height: 13PX;
+        //   min-width: 35PX;
+        //   font-size: 8PX;
+        // }
+        .dian{
+          width: 12PX;
+          height: 10PX;
+          border-radius: 10PX;
+          background-color: red;
+          margin: auto 5PX
+        }
+        .numType{
+          width: 17%;
+          text-align: right
+        }
+      }
+      .divider{
+        width: 100%;
+        height: 1PX;
+        background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
+        background-size: 10PX 1PX;
+        background-repeat: repeat-x;
+      }
+      .orderInfo{
+        // margin: 0PX 10PX;
+        // display: flex;
+        // height: 105PX;
+        .company {
+          height: 45PX;
+          line-height: 45PX;
+          width: 100%;
+          display: flex;
+          font-weight: 600;
+          font-size: 16PX;
+        }
+        .info{
+          height: 65PX;
+          display: flex;
+          .headImage{
+            // width: 55PX;
+            padding-right: 10PX;
+          }
+          .details{
+            float: right;
+            width: calc(100vw - 105PX);
+            .titleInfo{
+              width: 100%;
+              overflow:hidden;
+              // white-space: nowrap;
+              text-overflow:ellipsis;
+              // line-height: 30PX;
+            }
+          }
+        }
+        .quantity{
+          display: flex;
+          height: 30PX;
+          line-height: 30PX;
+          .clearanceNum{
+            width: 50%;
+          }
+          .billingNum{
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/myOrder/clearance/index.vue

+<template>
+  <div id="clearance">
+    <clearance-list @gotoDetail="gotoDetail"/>
+    <high-search v-model="moreSearchShow" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/>
+  </div>
+</template>
+
+<script>
+import HighSearch from './HighSearch.vue'
+import {getFormateDate} from '@/utils/common'
+import clearanceList from './clearanceList.vue'
+export default {
+  name: 'Clearance',
+  components: {
+    HighSearch,
+    clearanceList                          
+  },
+  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) {
+    },
+    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>
+  #clearance {
+    height: 100%;
+  }
+</style>

src/views/myOrder/components/HighSearch.vue

@@ -133,7 +133,7 @@ export default {
       },
       moreSearchInfo: {
         supplier: '', // 供应商
-        consignor: '', // 货主
+        consignor: [], // 货主
         goods: '', // 商品
         client: '', // 客户
         orderNo: '', // 订单号
@@ -159,8 +159,13 @@ export default {
     },
     // 货主
     consignor () {
-      if (this.moreSearchInfo.consignor.comPartyId) {
-        return !this.moreSearchInfo.consignor ? '' : (this.moreSearchInfo.consignor.comPartyId + '/(' + this.moreSearchInfo.consignor.partyOpcode + ')' + this.moreSearchInfo.consignor.partyName)
+      // if (this.moreSearchInfo.consignor.comPartyId) {
+      //   return !this.moreSearchInfo.consignor ? '' : (this.moreSearchInfo.consignor.comPartyId + '/(' + this.moreSearchInfo.consignor.partyOpcode + ')' + this.moreSearchInfo.consignor.partyName)
+      // } else {
+      //   return ''
+      // }
+      if (this.moreSearchInfo.consignor) {
+        return this.fieldStitching()
       } else {
         return ''
       }
@@ -221,7 +226,7 @@ export default {
     onCleanClick() {
       this.moreSearchInfo = {
         supplier: '', // 供应商
-        consignor: '', // 货主
+        consignor: [], // 货主
         goods: '', // 商品
         client: '', // 客户
         orderNo: '',
@@ -271,6 +276,20 @@ export default {
       }
       this.showPost(data.page);
     },
+    // 字段拼接
+    fieldStitching() {
+      let str = ''
+      if (this.moreSearchInfo.consignor.length === 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0])
+      } else if (this.moreSearchInfo.consignor.length > 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0]) + '......'
+      }
+      return str
+    },
+    // 商品信息拼接
+    consignorInfoStitching(model) {
+      return model.comPartyId + '/(' + model.partyOpcode + ')/' + model.partyName
+    }
   }
 }
 </script>

src/views/myOrder/components/logisticsStep.vue

+<template>
+  <div id="stepLayout">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'logisticsStep',
+  props: {
+    active: {
+      type: Number,
+      default: 0
+    }
+  },
+  mounted () {
+    this.calcStepLine()
+  },
+  methods: {
+    calcStepLine () {
+      let lineEle = document.getElementsByClassName('state-line')
+      if (lineEle.length > 0) {
+        lineEle[lineEle.length - 1].style.width = '0px'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/myOrder/components/stepItem.vue

+<template>
+  <div class="step-container" :class="'type__'+stepState">
+    <div class="step-time ">
+      <div class="step-date">{{stepInfo.date}}</div>
+      <div class="step-hours">{{stepInfo.hours}}</div>
+    </div>
+    <div class="step-tips">
+      <van-icon class="state-icon" name="smile" />
+      <div class="state-line" ></div>
+    </div>
+    <div class="step-content ">
+      <div class="step-type">{{stepInfo.type}}</div>
+      <div class="step-text">{{stepInfo.text}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'stepItem',
+  data () {
+    return {
+      state: 'normal'
+    }
+  },
+  props: {
+    stepInfo: {
+      type: Object,
+      default: () => {
+        return {
+          date: '2020-03-10',
+          hours: '10:08:08',
+          type: '状态名称',
+          text: '内容信息'
+        }
+      }
+    }
+  },
+  computed: {
+    stepState: function () {
+      return this.$parent.$children[0]._uid === this._uid ? 'normal' : 'history'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .step-container {
+    display: flex;
+    align-items: center;
+    height:60px;
+    //border-bottom: 1px solid $line;
+    /*时间 选中*/
+    .step-time {
+      flex: 1.5;
+      text-align: center;
+      .step-date {
+        color: $txtGray9;
+      }
+      .step-hours {
+        font-size: 14px;
+        font-weight: bold;
+        color: $txtBlack;
+      }
+    }
+    /*图标 连接线*/
+    .step-tips {
+      flex: 0.5;
+      font-size: 18px;
+      position:relative;
+      text-align: center;
+      margin-top:-12px;
+
+      .state-icon{
+        z-index: 100;
+        color: $main1
+      }
+
+      .state-line {
+        position: absolute;
+        z-index:1;
+        left: 0;
+        right: 0;
+        top: 16px;
+        width: 2px;
+        height: 50px;
+        margin: 0 auto;
+        background-size: 2px 11px;
+        background-repeat: repeat-y;
+        background-image: linear-gradient(
+            0deg,
+            $txtGrayL 0%,
+            $txtGrayL 50%,
+            transparent 50%
+        );
+      }
+    }
+    /*内容 选中*/
+    .step-content {
+      flex: 5;
+      margin-left: 2px;
+      .step-type {
+        font-weight: bold;
+        font-size: 15px;
+      }
+      .step-text {
+        font-size: 12px;
+        color: $txtGray9;
+      }
+    }
+  }
+  /*非选中 文字颜色*/
+  .type__history {
+    .step-time {
+      .step-date {
+        color: $txtGrayL;
+      }
+      .step-hours {
+        color: $txtGrayL;
+      }
+    }
+    .step-tips {
+      .state-icon {
+        color: $txtGrayL
+      }
+    }
+    .step-content {
+      .step-type {
+        color: $txtGrayL;
+      }
+
+      .step-text {
+        color: $txtGrayL;
+      }
+    }
+  }
+</style>

src/views/myOrder/detail/logisticsDetail.vue

 <template>
   <div class="logistics-content">
     <map-view/>
-    <div class="logistics-head">
-      <van-icon :name="icons.logo"/>
-      <span>承运商: 绥德库</span>
-      <span>市内</span>
+    <div class="logistics-header">
+      <div class="header-title">
+        <van-icon class="logistic-logo" :name="icons.logo"/>
+        <span class="logistic-name">承运商: <span class="logistic-values">绥德库</span></span>
+        <span class="logistic-type">市内</span>
+      </div>
+      <div class="header-order-info" style="margin-top: 8px">运单号: <span class="logistic-values">3902202102250062</span></div>
+      <div class="header-order-info" style="margin-top:2px;margin-bottom:8px">配送人: <span class="logistic-values">罗平行 13300992222</span></div>
+    </div>
+    <div class="logistics-step-line">
+      <logistics-step>
+        <step-item v-for="(item, index) in stepList" :stepInfo = item :key="index"/>
+      </logistics-step>
     </div>
-    <div >运单号: 3902202102250062</div>
-    <div >配送人: 罗平行 13300992222</div>
-
   </div>
 </template>
 
 <script>
 import MapView from '../../../components/MapView'
+import LogisticsStep from '../components/logisticsStep'
+import StepItem from '../components/stepItem'
 export default {
   name: 'logisticsDetail',
-  components: {MapView},
+  components: {StepItem, LogisticsStep, MapView},
   data () {
     return {
       icons: {
         logo: require('@/assets/img/u48.png')
-      }
+      },
+      stepList: [
+        {
+          date: '2020-03-10',
+          hours: '10:08:12',
+          type: '已签收',
+          text: '您的订单已完成签收，期待再次为您服务。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:11',
+          type: '运输中',
+          text: '乘运商已提货，待运输。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:10',
+          type: '运输中',
+          text: '您的订单正在配送途中，请耐心等待。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:09',
+          type: '已发货',
+          text: '正在出库中...'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:08',
+          type: '已下单',
+          text: '正在为您积极打包'
+        }
+      ]
     }
   },
   mounted() {
@@ -32,13 +72,57 @@ export default {
       rightIcon: false,
       title: '',
       leftText: '物流详情',
-      leftClick: null,
+      leftClick: this.onBrowserBack,
       rightClick: null
     })
+    window.addEventListener('popstate', this.onBrowserBack, false)
+  },
+  destroyed() {
+    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
+    window.removeEventListener('popstate', this.onBrowserBack, false)
+  },
+  methods: {
+    onBrowserBack() {
+      this.$router.go(-1)
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+  .logistics-content {
+    background-color: #fff;
+    height: calc(100vh - 46px);
+    overflow: scroll;
+    .logistics-header {
+      border-bottom: 1px solid $line;
+      padding: 10px;
+      .header-title{
+        display: flex;
+        align-items: center;
+        .logistic-logo {
+          font-size: 22px;
+          margin-right: 6px;
+        }
+        .logistic-name {
+          font-size:13px;
+          font-weight: bold;
+          flex: 1;
+        }
+        .logistic-type {
+          border: 1px solid $orderJm;
+          color: $orderJm;
+          padding: 0 8px;
+          transform: scale(0.8);
+        }
+      }
+      .header-order-info {
+        font-size: 13px;
+        margin-left: 28px;
+      }
+      .logistic-values {
+        margin-left:10px;
+      }
+    }
+  }
 </style>

src/views/myOrder/detail/orderDetail.vue

@@ -33,7 +33,7 @@
     </div>
     <!--  订单物流信息  -->
     <div class="order-common order-logistics">
-      <div class="logistics-content">
+      <div class="logistics-content" @click="openPager('logisticsDetail')">
         <van-icon :name="icons.inDelivery" class="order-icon logistics-icon"/>
         <div class="logistics-text">
           <div style="display:flex">
@@ -54,7 +54,7 @@
     </div>
     <!--  订单商品  -->
     <div class="order-common order-goods">
-      <div class="goods-all">
+      <div class="goods-all" @click="openPager('goodsInfo')">
         <span class="all-title">商品信息</span>
         全部
         <van-icon class="title-arrow" name="arrow"/>
@@ -64,7 +64,7 @@
     </div>
     <!-- 订单发票信息 -->
     <div class="order-common order-invoice">
-      <div class="invoice-all">
+      <div class="invoice-all" @click="openPager('myInvoice')">
         <span class="all-title">发票信息</span>
         全部
         <van-icon class="title-arrow" name="arrow"/>
@@ -99,11 +99,29 @@ export default {
       rightIcon: false,
       title: '',
       leftText: '订单详情',
-      leftClick: null,
+      leftClick: this.onBrowserBack,
       rightClick: null
     })
+    window.addEventListener('popstate', this.onBrowserBack, false)
   },
-  methods: {}
+  destroyed() {
+    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
+    window.removeEventListener('popstate', this.onBrowserBack, false)
+  },
+  methods: {
+    onBrowserBack() {
+      this.$router.go(-1)
+    },
+    openPager(path) {
+      this.$router.push({
+        path: path,
+        query: this.$store.state.linkInfo
+      })
+    },
+    openLogistics() {
+      this.openPager('logisticsDetail')
+    }
+  }
 }
 </script>
 

src/views/myOrder/index.vue

@@ -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"/>
@@ -51,15 +51,15 @@ export default {
       moreSearchShow: false,
       activeTab: 'home',
       moreSearchInfo: {
-        //接收搜索更多回传的数据
-        supplier: { comPartyId: "" }, //供应商ID
-        goods: { comGoodsId: "" }, //商品ID
-        orderNo: "", //订单编号
+        // 接收搜索更多回传的数据
+        supplier: { comPartyId: '' }, // 供应商ID
+        goods: { comGoodsId: '' }, // 商品ID
+        orderNo: '', // 订单编号
         time: {
-          //起始时间
-          start: getFormateDate(new Date(), "yyyy-MM-dd"),
-          end: getFormateDate(new Date(), "yyyy-MM-dd"),
-        },
+          // 起始时间
+          start: getFormateDate(new Date(), 'yyyy-MM-dd'),
+          end: getFormateDate(new Date(), 'yyyy-MM-dd')
+        }
       }
     }
   },
@@ -95,6 +95,49 @@ export default {
     window.removeEventListener('popstate', this.onBrowserBack, false)
   },
   methods: {
+    // 单个发票点击事件
+    orderItemAction(model) {
+      console.log(model)
+      switch (true) {
+        case model.actionType === 'invoice':
+          // 查看发票
+          this.gotoOrderInvoice(model)
+          break
+        case model.actionType === 'logistics':
+          // 查看物流
+          break
+        case model.actionType === 'clearance':
+          // 清货单
+          this.gotoOrderClearance(model)
+          break
+        case model.actionType === 'details':
+          // 订单详情
+          this.gotoOrderDetail(model)
+          break
+      }
+    },
+    // 查看订单详情
+    gotoOrderDetail (model) {
+      this.$router.push({
+        path: '/orderDetail',
+        query: this.$store.state.linkInfo
+      })
+    },
+    // 查看发票
+    gotoOrderInvoice (model) {
+      // console.log(window.location.href.split('?')[1])
+      this.$router.push({
+        path: '/orderInvoice',
+        query: this.$store.state.linkInfo
+      })
+    },
+    // 查看 清货单
+    gotoOrderClearance(model) {
+      this.$router.push({
+        path: '/clearance',
+        query: this.$store.state.linkInfo
+      })
+    },
     onBrowserBack() {
       if (this.moreSearchShow) {
         this.moreSearchShow = false
@@ -117,7 +160,7 @@ export default {
     },
     // 高级搜索取消
     moreSearchClean(data) {
-      this.moreSearchInfo = data;
+      this.moreSearchInfo = data
     },
     addNextTab(pos) {
       // 加载下一个页面

src/views/myOrder/myOrderList.vue

@@ -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
@@ -164,12 +168,13 @@ export default {
       overflow-y: auto;
       padding: 10PX;
       .orderItem{
-        height: 250PX;
+        // height: 250PX;
         background-color: white;
         margin-bottom: 10PX;
         border-radius: 10PX;
-        font-size: 14PX;
+        font-size: 14px;
         color: #333333;
+        padding: 0PX 10PX 10PX 10PX;
       }
     }
   }

src/views/myOrder/orderInvoice/components/HighSearch.vue

+<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 ''
+      // }
+      if (this.moreSearchInfo.consignor) {
+        return this.fieldStitching()
+      } 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);
+    },
+    // 字段拼接
+    fieldStitching() {
+      let str = ''
+      if (this.moreSearchInfo.consignor.length === 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0])
+      } else if (this.moreSearchInfo.consignor.length > 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0]) + '......'
+      }
+      return str
+    },
+    // 商品信息拼接
+    consignorInfoStitching(model) {
+      return model.comPartyId + '/(' + model.partyOpcode + ')/' + model.partyName
+    }
+  }
+}
+</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

+<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: this.$store.state.linkInfo
+      });
+    },
+    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

+<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

+<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

+<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

+<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

+<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

+<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

@@ -2,19 +2,24 @@
   <div id="orderListItem">
     <div class="itemInfo">
       <div class="orderNum">
-        <van-image fit="contain" width="45" height="50" :src="sphImage"/>
-        <div class="num">订单号：34678649876</div>
+        <van-image fit="contain" width="50" height="55" :src="sphImage"/>
+        <div class="num">
+          <div class="numBer">订单号：34678649876</div>
+          <van-button color="#D9001B" class="numBtn" round plain size="mini" type="info">退</van-button>
+          <van-button color="#4b7902" class="numBtn" round plain size="mini" type="info">冷</van-button>
+          <van-button color="#02a7f0" class="numBtn" round plain size="mini" type="info">精麻</van-button>
+        </div>
         <div class="dian"></div>
         <div class="numType"><span>已开单</span></div>
       </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"/>
@@ -29,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: '15PX 0 10PX 0'}"/>
+        <van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '10PX 0 10PX 0'}"/>
         <div class="btnInfo" style="text-align: right;">
-          <van-button plain size="small" type="info">产看发票</van-button>
-          <van-button plain size="small" type="info">查看物流</van-button>
-          <van-button 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>
@@ -81,6 +86,11 @@ export default {
   },
   methods: {
     onRefresh() {
+    },
+    // 查看发票 查看物流 清货单
+    btnAction (type) {
+      this.item.actionType = type
+      this.$emit('orderItemAction', this.item)
     }
   }
 }
@@ -100,11 +110,21 @@ export default {
         display: flex;
         line-height: 50PX;
         height: 50PX;
-        margin: 0PX 10PX;
+        // margin: 0PX 10PX;
         .num{
           width: 77%;
           padding-left: 5PX;
         }
+        .numBer{
+          height: 16PX;
+          // line-height: 15PX;
+        }
+        .numBtn{
+          height: 13PX;
+          line-height: 13PX;
+          min-width: 35PX;
+          font-size: 8PX;
+        }
         .dian{
           width: 12PX;
           height: 10PX;
@@ -118,9 +138,9 @@ export default {
         }
       }
       .orderInfo{
-        margin: 0PX 10PX;
+        // margin: 0PX 10PX;
         // display: flex;
-        height: 105PX;
+        // height: 105PX;
         .company {
           height: 35PX;
           line-height: 35PX;
@@ -129,7 +149,7 @@ export default {
           font-weight: 600;
         }
         .info{
-          height: 80PX;
+          height: 65PX;
           display: flex;
           .headImage{
             // width: 55PX;