订单完善

src/views/modules/order/buyorder.vue

@@ -177,10 +177,10 @@
                     </el-tooltip>                       
                     <div class=" productItem k4545">
                       <img  :class="children.expressInfo && children.expressInfo.expressOrderSn != null ? 'greeyImg' : 'lightImg'" :src="children.productImage" width="60px" height="60px"> 
-                                        
                      </div>
                     <div class="price " style="flex:1">
-                      <div class="bookName">{{ children.productName }}</div>
+                      <div class="bookName">{{ children.productName }} &nbsp;
+                        <i v-if="children.books && children.books.length > 0" @click.stop="seeBooks(children.books)" class="el-icon-view" style="color:#409eff; cursor: pointer;"></i></div>
                       <div><span>￥{{ children.productPrice }}</span> × {{ children.quantity }} </div>
                      
                     </div>
@@ -279,7 +279,7 @@
           {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
         </template>
       </el-table-column> -->
-      <el-table-column prop="orderSn" header-align="center" align="center" label="订单编号" width="300">
+      <el-table-column prop="orderSn" header-align="center" align="center" label="订单编号" width="150">
       </el-table-column>
       <!-- <el-table-column prop="userName" header-align="center" align="center" label="下单人姓名">
       </el-table-column> -->
@@ -356,9 +356,25 @@
       </el-table-column> -->
       <el-table-column prop="createTime" header-align="center" align="center" label="下单时间">
       </el-table-column>
-      <el-table-column prop="shippingTime" header-align="center" align="center" label="发货时间">
+      <el-table-column prop="goodsList" header-align="center" align="center" label="下单商品" width="500">
+        <template slot-scope="scope">
+          <!-- {{scope.row.goodsList}} -->
+          <div v-for="(item, index) in scope.row.goodsList" :key="index">
+            <div class="flexbox" style="align-items:center; margin-bottom:10px">
+              <div class="img">
+                 <img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item.productImage" width="40px" height="40px">
+              </div>
+              <div>
+                <span>{{item.productName}} [ ×{{item.quantity}} ]  
+                  <i v-if="item.books && item.books.length > 0" @click.stop="seeBooks(item.books)" class="el-icon-view" style="color:#409eff; cursor: pointer;"></i></span>             
+              </div>
+            </div>
+          </div>
+        </template>
       </el-table-column>
-      <el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态">
+      <!-- <el-table-column prop="shippingTime" header-align="center" align="center" label="发货时间">
+      </el-table-column> -->
+      <el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态" width="80">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.orderStatus == 0" type="success">待付款</el-tag>
           <el-tag v-if="scope.row.orderStatus == 1" type="success">待发货</el-tag>
@@ -458,6 +474,28 @@
         <el-button type="primary" @click="changeAddress">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog center
+      title="商品包含的书籍信息"
+      :visible.sync="booksShow"
+      width="500"      
+      :close="booksHandleClose">
+      <div>  
+        <span>该商品共包含了 {{currBookLIst.length}} 个书籍</span>      
+        <ul class="booksUl ">
+          <li class="flexbox" v-for="item in currBookLIst" :key="item.id">
+            <div class="img">
+              <img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item.images" width="100px" height="100px">
+            </div>
+            <div>
+              <span>{{item.name}}[{{item.id}}]</span>             
+            </div>
+          </li>
+        </ul>
+      </div>
+      <span slot="footer" class="dialog-footer">        
+        <el-button type="primary" @click="booksHandleClose">确 定</el-button>
+      </span>
+    </el-dialog>
     <el-pagination v-if="tabChange.isPrint != 1" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
       :page-sizes="[40, 60, 100, 150]" :page-size="pageSize" :total="totalPage"
       layout="total, sizes, prev, pager, next, jumper">
@@ -619,6 +657,8 @@ export default {
       },
       SheetSelectionList:[],
       addressLoad:false,    // 省份加载动画
+      booksShow: false, // 展示包含书籍信息
+      currBookLIst:[]
     }
   },
   components: {
@@ -633,6 +673,14 @@ export default {
     }
   },
   methods: {
+    seeBooks(arr){
+      this.currBookLIst = arr
+      this.booksShow = true
+    },
+    booksHandleClose(){
+      this.currBookLIst = []
+      this.booksShow = false
+    },
     changeAddress(){
       console.log(this.addressForm.orderSn,'this.addressForm')     
       if(this.addressForm.provinceCode && this.addressForm.cityCode && this.addressForm.countyCode){
@@ -1217,6 +1265,9 @@ export default {
 }
 </style>
 <style lang="less" scoped>
+.booksUl{ overflow: hidden; margin-top: 15px; padding-left: 0;
+  li{list-style: none; width: 50%; float: left; align-items: center; margin-bottom: 15px;}
+}
 .flexbox {
   display: flex;
 }

src/views/modules/order/buyorderdetail.vue

@@ -54,29 +54,6 @@
           <li class="line"></li>
         </div>
         <div style="clear:both"></div>        
-        <div class="liName">物流信息  <a href="#" @click="changeAddressShow" v-if="orderDetails.orderStatus <= 1"><i class="el-icon-edit"></i>修改收货信息</a></div>
-        <li><span class="infoTitle">收货人：</span><span>{{orderDetails.consignee.consigneeName}}</span>&nbsp;&nbsp;&nbsp;<span>{{orderDetails.consignee.consigneeMobile}}</span></li>
-        <li><span class="infoTitle">收货地址：</span><span>{{orderDetails.consignee.province}}-{{orderDetails.consignee.city}}-{{orderDetails.consignee.county}}-{{orderDetails.consignee.address}}</span></li> 
-       
-        <!-- <el-alert title="`该订单下共有 2 条物流信息`" type="info">
-        </el-alert> -->
-        <li class="flexbox deliverBox" style="width: 100%;"  v-if="sheetList.length > 0">
-          <el-row :gutter="20" style="100%">
-
-            <el-col  :md="12" :lg="8" class="item" v-for="(item, index) in sheetList" :key="index">          
-            <div class="deliver_heade"> 
-              <!-- <div><span class="infoTitle">物流公司：</span><span>{{item.expressCompanyName}}</span></div> -->
-              <div><span class="infoTitle">运单号：</span><span style="margin-right:10px">{{item.expressOrderSn}}</span>
-                <el-button  type="primary" size="mini" plain @click="seeSheetDetails(item)">查看物流进度</el-button>
-              </div> 
-              <div></div>            
-            </div>
-          </el-col>           
-             
-        </el-row>
-        </li>
-
-        <li class="line" style="margin:10px 0;"></li>
         <!-- 订单商品 -->
         <div class="liName">商品信息</div>
         <el-table :data="orderDetails.goodsList"   
@@ -87,7 +64,8 @@
         <template slot-scope="scope">
           <div class="flexbox">
             <img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="scope.row.productImage" width="30px" height="30px">
-            <div class="proname">{{ scope.row.productName}}</div>
+            <div class="proname">{{ scope.row.productName}} 
+              <i v-if="scope.row.books && scope.row.books.length > 0" @click.stop="seeBooks(scope.row.books)" class="el-icon-view" style="color:#409eff; cursor: pointer;"></i></div>
           </div>
         </template>
       </el-table-column>      
@@ -101,6 +79,50 @@
         label="数量" width="80">
       </el-table-column>
     </el-table>
+    <div v-if="orderDetails.consignee" style="margin-top:20px">
+        <div class="liName">物流信息  <a href="#" @click="changeAddressShow" v-if="orderDetails.orderStatus <= 1"><i class="el-icon-edit"></i>修改收货信息</a></div>
+        <div style="background:#f9f9f9; padding:5px; overflow:hidden; ">
+          <li><span class="infoTitle">收货人：</span><span>{{orderDetails.consignee.consigneeName}}</span>&nbsp;&nbsp;&nbsp;<span>{{orderDetails.consignee.consigneeMobile}}</span></li>
+          <li><span class="infoTitle">收货地址：</span><span>{{orderDetails.consignee.province}}-{{orderDetails.consignee.city}}-{{orderDetails.consignee.county}}-{{orderDetails.consignee.address}}</span></li> 
+        </div>
+      </div>
+        <!-- <el-alert title="`该订单下共有 2 条物流信息`" type="info">
+        </el-alert> -->
+        <li class="flexbox deliverBox" style="width: 100%;"  v-if="orderDetails.orderStatus > 0 && sheetList && sheetList.length > 0">
+          <el-row :gutter="20" style="flex-wrap:wrap; width: 100%;" class="flexbox">
+            <el-col  :md="12" :lg="12" class="item" v-for="(item, index) in sheetList" :key="index" style="margin-bottom:20px;">          
+            <div class="deliver_heade"> 
+              <!-- <div><span class="infoTitle">物流公司：</span><span>{{item.expressCompanyName}}</span></div> -->
+              <div>
+                <span class="infoTitle">快递包裹 {{index+1}} 运单号：</span><span style="margin-right:10px">{{item.expressOrderSn}}</span>
+                <el-button  type="primary" size="mini" plain @click="seeSheetDetails(item)">查看物流进度</el-button>
+                <!-- 包含的订单商品信息 -->
+                <div class="" v-if="sheetList && sheetList.length > 0" style="margin-top:15px; overflow:hidden; background:#f9f9f9; padding:10px;">                  
+                  <ul class="sheetOrdersUl" style="overflow:hidden"> 
+                    <li  style="flex-wrap:wrap; margin-bottom:10px; width: 100%;">
+                      <div style="width:100%" v-if="showChange">订单编号：{{item.orderSn}}                        
+                        <i v-if="item.showProduct" @click.stop="showProducts(item, index)" class="el-icon-arrow-up myicon" style="color:#409eff; cursor: pointer;"></i>
+                        <i v-else @click.stop="showProducts(item,index)" class="el-icon-arrow-down myicon" style="color:#409eff; cursor: pointer;"></i>                        
+                      </div>  
+                      <div  v-if="showChange && item.showProduct">                           
+                      <div class="flexbox" v-for="item2 in item.products" :key="item2.productId"  style="align-items:center; margin-bottom:10px">
+                        <div class="img">
+                          <img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item2.productImages" width="60px" height="60px">
+                        </div>
+                        <div>
+                          <span>{{item2.productName}} [ ×{{item2.quantity}} ]</span>             
+                        </div>
+                      </div></div>  
+                    </li>
+                  </ul>
+                </div>                
+              </div>                        
+            </div>
+          </el-col>           
+             
+        </el-row>
+        </li>
+        <li class="line" style="margin:10px 0;"></li>
       </ul>
     </div>
     <!-- 抽屉 -->
@@ -110,7 +132,7 @@
     @close="drawerHandleClose">    
     <div class="deliver_info"> 
                 <div>运单信息：{{currentSheet.expressCompanyName}} - {{currentSheet.expressOrderSn}}</div>               
-                <div class="scroll" style="padding: 10px;" v-if="traces.length > 0">
+                <div class="scroll" style="padding: 10px;" v-if="traces && traces.length > 0">
                   <el-timeline :reverse="reverse">
                     <el-timeline-item  v-for="(activity, index2) in traces" :key="index2" :icon="activity.icon"                      
                       :timestamp="activity.acceptTime">
@@ -173,6 +195,28 @@
         <el-button type="primary" @click="changeAddress">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog center
+      title="商品包含的书籍信息"
+      :visible.sync="booksShow"
+      width="500"      
+      :close="booksHandleClose">
+      <div>  
+        <span>该商品共包含了 {{currBookLIst.length}} 个书籍</span>      
+        <ul class="booksUl ">
+          <li class="flexbox" v-for="item in currBookLIst" :key="item.id">
+            <div class="img">
+              <img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item.images" width="100px" height="100px">
+            </div>
+            <div>
+              <span>{{item.name}}[{{item.id}}]</span>             
+            </div>
+          </li>
+        </ul>
+      </div>
+      <span slot="footer" class="dialog-footer">        
+        <el-button type="primary" @click="booksHandleClose">确 定</el-button>
+      </span>
+    </el-dialog>
     <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
     <setDeliverDialog ref="setDeliverDialog" :visible="setDeliverVisible" :selectData="orderList"
       @closeDeliverDialog='closeDeliverDialog'></setDeliverDialog>
@@ -242,6 +286,9 @@ export default {
           ],         
       },
       sheetList:[],       // 面单列表
+      currBookLIst:[],
+      booksShow: false,
+      showChange:true,
     }
   },
   components: {
@@ -255,6 +302,20 @@ export default {
     // this.getOrderSheetList()
   },
   methods: { 
+    showProducts(item,index){
+      this.showChange = false
+       this.sheetList[index].showProduct = !item.showProduct   
+       this.showChange = true 
+    //  console.log(this.sheetList,'this.sheetList[index].showProduct')
+    },
+    seeBooks(arr){
+      this.currBookLIst = arr
+      this.booksShow = true
+    },
+    booksHandleClose(){
+      this.currBookLIst = []
+      this.booksShow = false
+    },
     drawerHandleClose(){
       console.log('关闭')
       this.traces = []
@@ -431,6 +492,9 @@ export default {
         if (data && data.code === 0) {
           // console.log(data.result,'data.result')
           this.orderDetails = data.result   
+          data.result.expressOrders.forEach(element => {
+            element.showProduct = false
+          }); 
           this.sheetList = data.result.expressOrders  
         } else {
           this.orderDetails = {}
@@ -456,6 +520,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.myicon{border: 1px solid #409eff;}
+.booksUl{ overflow: hidden; margin-top: 15px; padding-left: 0;
+  li{list-style: none; width: 50%; float: left; align-items: center; margin-bottom: 15px;}
+}
+.sheetOrdersUl{padding-left: 0; 
+  li{width: 100%;}
+}
 .orderType{
   overflow: hidden; margin-bottom: 20px;
   .item{