订单完善

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>
                     <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;
 }