订单详情 商品q清单列表 高级搜苏

src/views/myOrder/components/goodsHighSearch.vue

 <template>
   <div class="h100">
     <van-popup
-    v-model="searchShow"
+    v-model="moreSearchShow"
     class="goodsHighSearch"
     position="right"
     :style="{ width: '75%',height: '100%', overflow: 'hidden' }"
@@ -11,25 +11,25 @@
       <div class="search-info">
         <div class="search-name">商品编号</div>
         <div class="search-input-layout">
-          <input  type="text" placeholder="请输入商品编号" class="search-input" >
+          <input v-model="moreSearchInfo.goodsCode" 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" >
+          <input v-model="moreSearchInfo.goodsName" 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" >
+          <input v-model="moreSearchInfo.goodsSpec" 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" >
+          <input v-model="moreSearchInfo.manufacturer" type="text" placeholder="请输入生产企业" class="search-input" >
         </div>
       </div>
       <div class="action-bottom">
@@ -45,7 +45,13 @@ export default {
   name: 'GoodsHighSearch',
   data () {
     return {
-      searchShow: false
+      moreSearchShow: false,
+      moreSearchInfo: {
+        goodsCode: '', // 商品编号
+        goodsName: '', // 商品名称
+        goodsSpec: '', // 商品规格
+        manufacturer: '', // 生产企业
+      }
     }
   },
   props: {
@@ -56,32 +62,28 @@ export default {
   },
   watch: {
     value (val) {
-      this.searchShow = val
+      this.moreSearchShow = val
+      // this.time = JSON.parse(JSON.stringify(this.choosetime))
     },
-    searchShow (val) {
+    moreSearchShow (val) {
       this.$emit('input', val)
     }
   },
   methods: {
     onSearchClick() {
-      // this.moreSearchShow = false
-      // this.$emit('onsearch', this.moreSearchInfo)
+      this.moreSearchShow = false
+      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)
+      this.moreSearchInfo = {
+        goodsCode: '', // 商品编号
+        goodsName: '', // 商品名称
+        goodsSpec: '', // 商品规格
+        manufacturer: '' // 生产企业
+      }
+      console.log(this.moreSearchInfo)
+      this.moreSearchShow = false
+      this.$emit('onsearch', this.moreSearchInfo)
     },
   }
 }

src/views/myOrder/detail/goodsInfo.vue

 <template>
   <div class="goods-info">
-    <div class="goods-info-details">
+    <div v-if="detailData.goodsInfos.length !== 0" class="goods-info-details">
       <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
         <van-list
           v-model="loading"
@@ -20,13 +20,13 @@
         <!-- </van-list>
       </van-pull-refresh> -->
     </div>
+    <van-empty v-if="detailData.goodsInfos.length === 0" description="暂无更多数据" />
      <div class="goods-sum">
       <div class="sum-number-detail">共 {{detailData.goodsInfos.length}} 个商品</div>
       <div class="sum-amount">金额总计：<span style="font-size: 16PX;">￥{{orderTotalAmount}}</span></div>
       
     </div>
-    <goods-high-search v-model="showHighSearch" />
-   
+    <goods-high-search v-model="showHighSearch" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/>
   </div>
 </template>
 
@@ -59,6 +59,12 @@ export default {
       detailData: {
         goodsInfos: [],
         orderTotalAmount: '0'
+      },
+      moreSearchInfo: {
+        goodsCode: '', // 商品编号
+        goodsName: '', // 商品名称
+        goodsSpec: '', // 商品规格
+        manufacturer: '', // 生产企业
       }
     };
   },
@@ -91,6 +97,18 @@ export default {
     window.removeEventListener("popstate", this.onBrowserBack, false);
   },
   methods: {
+    // 高级搜索查询
+    moreSearchConfirm(data) {
+      this.moreSearchInfo = JSON.parse(JSON.stringify(data))
+      console.log(this.moreSearchInfo)
+      this.getOrderDetail()
+    },
+    // 高级搜索取消
+    moreSearchClean(data) {
+      console.log(this.moreSearchInfo)
+      this.moreSearchInfo = JSON.parse(JSON.stringify(data))
+      this.getOrderDetail()
+    },
     onBrowserBack() {
       this.$router.go(-1);
     },
@@ -108,10 +126,8 @@ export default {
         for (let i = 0; i < 10; i++) {
           this.list.push(this.list.length + 1);
         }
-
         // 加载状态结束
         this.loading = false;
-
         // 数据全部加载完成
         if (this.list.length >= 20) {
           this.finished = true;
@@ -121,7 +137,6 @@ export default {
     onRefresh() {
       // 清空列表数据
       this.finished = false;
-
       // 重新加载数据
       // 将 loading 设置为 true，表示处于加载状态
       this.loading = false;
@@ -133,15 +148,15 @@ export default {
         'businessType': '',
         'clientID': [],
         'endDate': '',
-        'goodsCode': '',
+        'goodsCode': this.moreSearchInfo.goodsCode,
         'goodsDesc': '',
         'goodsId': '',
-        'goodsName': '',
-        'goodsSpec': '',
+        'goodsName': this.moreSearchInfo.goodsName,
+        'goodsSpec': this.moreSearchInfo.goodsSpec,
         'isDelivered': '',
         'isInvoice': '',
         'isWeb': '',
-        'manufacturer': '',
+        'manufacturer': this.moreSearchInfo.manufacturer,
         'mdmClientCode': '',
         'order': '',
         'orderId': this.orderItem.orderId, // 19977352;19965720
@@ -159,6 +174,10 @@ export default {
         'supplierId': []
       }
       getMyOrderList(params).then(res => {
+        this.detailData = {
+          goodsInfos: [],
+          orderTotalAmount: '0'
+        }
         if (res.code === 200 && res.data && res.data.code === '00000' &&
           res.data.entity && res.data.entity.orderList && res.data.entity.orderList.length > 0) {
           this.detailData = res.data.entity.orderList[0]

src/views/myOrder/detail/goodsInfoListItem.vue

@@ -5,7 +5,7 @@
         <van-image fit="contain" width="50" height="55" :src="orderImage"/>
       </div>
       <div class="info">
-        <div class="infoDesc">{{item.goodsDesc}}</div>
+        <div class="infoDesc">{{titleInitial(item)}}</div>
         <div class="numBer">
           <div class="unitPrice">￥ {{item.taxPrice}}</div>
           <div class="packageNum">包装数量：{{item.packageNum}}</div>
@@ -57,6 +57,11 @@ export default {
     // this.onLoad()
   },
   methods: {
+    // 商品拼接
+    titleInitial(model) {
+      let titleStr = '【' + model.goodsCode + '】' + model.goodsName + '/' + model.goodsSpec + '/' + model.manufacturer
+      return titleStr
+    },
     // 根据订单类型返回颜色
     orderTypeColor (model) {
       if (model.orderStatusCode === '100') {

src/views/myOrder/orderListItem.vue

@@ -94,6 +94,7 @@ export default {
     // this.onLoad()
   },
   methods: {
+    // 商品拼接
     titleInitial(model) {
       let titleStr = '【' + model.goodsCode + '】' + model.goodsName + '/' + model.goodsSpec + '/' + model.manufacturer
       return titleStr