1.修改部分控件传值

2.移动了部分页面的位置
3.增加了部分响应事件

src/router/myOrder/index.js

@@ -24,7 +24,7 @@ const myOrder = [
       title: '商品信息',
       auth: false
     },
-    component: resolve => require(['@/views/myOrder/goodsInfo'], resolve)
+    component: resolve => require(['@/views/myOrder/detail/goodsInfo'], resolve)
   },
   {
     path: '/logisticsDetail',

src/views/myOrder/components/goodsHighSearch.vue

+<template>
+  <div class="h100">
+    <van-popup
+    v-model="searchShow"
+    position="right"
+    :style="{ width: '75%',height: '100%', overflow: 'hidden' }"
+    >
+      <div style="height: 40px">
+
+      </div>
+      <div class="search-info">
+        <div class="search-name">商品编号</div>
+        <div class="search-input-layout">
+          <input  type="text" placeholder="请输入商品编号" class="search-input" >
+        </div>
+      </div>
+      <div class="search-info">
+        <div class="search-name">商品名称</div>
+        <div class="search-input-layout">
+          <input  type="text" placeholder="请输入商品名称" class="search-input" >
+        </div>
+      </div>
+      <div class="search-info">
+        <div class="search-name">商品规格</div>
+        <div class="search-input-layout">
+          <input  type="text" placeholder="请输入商品规格" class="search-input" >
+        </div>
+      </div>
+      <div class="search-info">
+        <div class="search-name">生产企业</div>
+        <div class="search-input-layout">
+          <input  type="text" placeholder="请输入生产企业" class="search-input" >
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'goodsHighSearch',
+  data () {
+    return {
+      searchShow: false
+    }
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    value (val) {
+      this.searchShow = val
+    },
+    searchShow (val) {
+      this.$emit('input', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .search-info {
+    padding: 15px 15px 0;
+    .search-name {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .search-input-layout {
+      background-color:#eeeeee;
+      border-radius: 2px;
+      height:40px;
+      padding: 5px;
+      margin-top: 10px;
+      .search-input {
+        background-color:#eeeeee;
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+    }
+  }
+</style>

src/views/myOrder/components/goodsSimpleItem.vue

 <template>
   <div class="goods-simple-content">
     <div class="goods-company">
-      <span class="company-name">上药控股新药分公司上药控股新药分公司上药控股新药分公司上药控股新药分公司上药控股新药分公司</span>
-      <span class="state-type order-type-tip-cold">冷</span>
+      <span class="company-name">{{item.company}}</span>
+      <span class="state-type order-type-tip-cold">{{item.goodsType}}</span>
     </div>
     <div class="goods-info">
       <van-icon :name="goodsIcon.pill" />
       <div class="goods-info-text">
-        <div class="goods-name">【132521】阿西匹林/0.25g*200s/浙江浙江浙江浙江浙江浙江</div>
+        <div class="goods-name">{{ item.goodsName }}</div>
         <div class="goods-num-price">
-          ¥<span >10.5</span>
-          共8件
+          ¥<span >{{item.goodsPrice}}</span>
+          共{{item.goodsNum}}件
         </div>
       </div>
     </div>
@@ -27,6 +27,20 @@ export default {
         normal: require('@/assets/img/u90.svg')
       }
     }
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {
+          company: '上药控股新药分公司',
+          goodsType: '冷',
+          goodsName: '【132521】阿西匹林/0.25g*200s/浙江浙江浙江浙江浙江浙江',
+          goodsPrice: '10.5',
+          goodsNum: '8'
+        }
+      }
+    }
   }
 }
 </script>

src/views/myOrder/components/invoiceSimpleItem.vue

 <template>
-  <div class="invoice-simple-content">
+  <div class="invoice-simple-content" @click="onItemClick">
     <div class="invoice-company">
-      上药控股新药分公司上药控股新药分公司上药控股新药分公司上药控股新药分公司上药控股新药分公司
+      {{item.company}}
     </div>
-    <div class="invoice-info"><span class="info-key">发票金额:</span><span class="info-value">¥<span>377,889.0</span></span></div>
-    <div class="invoice-info"><span class="info-key">发票号:</span><span class="info-value">1123123123</span></div>
-    <div class="invoice-info"><span class="info-key">发票日期:</span><span class="info-value">377,889.0</span></div>
+    <div class="invoice-info"><span class="info-key">发票金额:</span><span class="info-value">¥<span>{{moneyFormat(item.ivMoney)}}</span></span></div>
+    <div class="invoice-info"><span class="info-key">发票号:</span><span class="info-value">{{item.ivNo}}</span></div>
+    <div class="invoice-info"><span class="info-key">发票日期:</span><span class="info-value">{{item.ivDate}}</span></div>
   </div>
 </template>
 
 <script>
+import { AmountNumFormat } from '@/utils/common'
 export default {
-  name: 'invoiceSimpleItem'
+  name: 'invoiceSimpleItem',
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {
+          company: '上药控股新药分公司',
+          ivMoney: '388111133',
+          ivNo: '123456123456',
+          ivDate: '2021-03-11'
+        }
+      }
+    }
+  },
+  methods: {
+    moneyFormat(num) {
+      return AmountNumFormat(num)
+    },
+    onItemClick(item) {
+      this.$emit('itemClick', item)
+    }
+  }
 }
 </script>
 

src/views/myOrder/goodsInfo.vue → src/views/myOrder/detail/goodsInfo.vue

@@ -22,54 +22,28 @@
         </van-list>
       </van-pull-refresh>
     </div>
+    <goods-high-search v-model="showHighSearch" />
   </div>
 </template>
 
 <script>
-import goodsInfoDetail from '../myOrder/goodsInfoDetail'
+import goodsInfoDetail from '../goodsInfoDetail'
+import GoodsHighSearch from '../components/goodsHighSearch'
+
 export default {
   name: 'goodsInfo',
   components: {
+    GoodsHighSearch,
     goodsInfoDetail
   },
   data() {
     return {
-      goodsInfos: [
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        7,
-        8,
-        9,
-        10,
-        11,
-        12,
-        13,
-        14,
-        15,
-        16,
-        17,
-        18,
-        19,
-        20,
-        21,
-        22,
-        23,
-        24,
-        25,
-        26,
-        27,
-        28,
-        29,
-        30
-      ],
+      goodsInfos: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
       loading: false,
       finished: false,
       //   error: false,
       refreshing: false,
+      showHighSearch: false,
       icons: {
         inDelivery: require('@/assets/img/u546.svg'),
         copy: require('@/assets/img/u533.svg')
@@ -81,11 +55,11 @@ export default {
     this.$store.commit('setNavBar', {
       show: true,
       leftArrow: true,
-      rightIcon: false,
+      rightIcon: true,
       title: '',
       leftText: '商品详情',
-      leftClick: {},
-      rightClick: {}
+      leftClick: this.onBrowserBack,
+      rightClick: this.onShowSearch
     })
     window.addEventListener('popstate', this.onBrowserBack, false)
   },
@@ -97,6 +71,9 @@ export default {
     onBrowserBack() {
       this.$router.go(-1)
     },
+    onShowSearch() {
+      this.showHighSearch = !this.showHighSearch
+    },
     onLoad() {
       // 异步更新数据
       // setTimeout 仅做示例，真实场景中一般为 ajax 请求
@@ -134,29 +111,35 @@ export default {
 <style scoped lang="scss">
 .goods-info {
   height: 100%;
+
   .order-sum {
     font-size: 14px;
     font-weight: 700;
     display: flex;
     padding: 15px 20px;
     color: #666;
+
     .sum-number-detail {
       padding-left: 10px;
     }
+
     .sum-number-detail {
       padding-right: 25px;
     }
+
     .sum-account {
       padding-left: 10px;
       font-size: 16px;
       line-height: 18px;
       color: #555;
+
       span {
         font-size: 12px;
         color: #666;
       }
     }
   }
+
   .goods-info-details {
     background-color: white;
     width: 92%;

src/views/myOrder/detail/orderDetail.vue

@@ -64,12 +64,12 @@
     </div>
     <!-- 订单发票信息 -->
     <div class="order-common order-invoice">
-      <div class="invoice-all" @click="openPager('myInvoice')">
+      <div class="invoice-all" @click="openPager('orderInvoice')">
         <span class="all-title">发票信息</span>
         全部
         <van-icon class="title-arrow" name="arrow"/>
       </div>
-      <invoice-simple-item/>
+      <invoice-simple-item  @itemClick="openPager('orderInvoiecDetail')"/>
     </div>
   </div>
 </template>