修改

src/components/orderMan/RecomBillDetail.vue

@@ -12,19 +12,19 @@
       <el-table :data="dataList.RList" v-loading="loading" border style="width: 100%;margin:20px 0">
         <el-table-column prop="OrderNo" label="订单号" width="200">
         </el-table-column>
-        <el-table-column prop="CoverImage" label="封面图" width="100">
+        <el-table-column prop="CoverImage" label="封面图" width="130">
           <template slot-scope="scope">
-            <img :src="scope.row.CoverImage" style="width:50px;height:50px;" alt="" />
+            <img :src="scope.row.CoverImage" style="width:90px;height:90px;" alt="" />
           </template>
         </el-table-column>
-        <el-table-column prop="GoodsName" label="商品名称" width="350">
+        <el-table-column prop="GoodsName" label="商品名称" min-width="300">
         </el-table-column>
-        <el-table-column prop="SpecificationList" label="商品规格">
+        <el-table-column prop="SpecificationList" label="商品规格" width="150">
           <template slot-scope="scope">
             <div v-for="(item,index) in scope.row.SpecificationList" :key="index">{{item}}</div>
           </template>
         </el-table-column>
-        <el-table-column prop="ProductCode" label="货号">
+        <el-table-column prop="ProductCode" label="货号" width="200">
         </el-table-column>
         <el-table-column prop="Final_Price" label="最终价格" width="120">
         </el-table-column>
@@ -90,13 +90,5 @@
   .RecomBillDetail .Tongji_info span {
     margin-right: 30px;
   }
-  .OrderInformation{
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .OrderInformation>div{
-      width:50%;
-  }
 
 </style>

src/components/orderMan/RecommendBill.vue

@@ -46,9 +46,8 @@
           </el-form>
         </div>
         <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
+          <el-table-column prop="Id" label="id" width="80"></el-table-column>
           <el-table-column prop="Periods" label="期数" width="100"></el-table-column>
-          <el-table-column prop="Id" label="id" width="80">
-          </el-table-column>
           <el-table-column prop="Money" label="总金额" width="100"></el-table-column>
           <el-table-column prop="SupplierName" label="供应商名称" width="130"></el-table-column>
           <el-table-column prop="UserName" label="用户名称" width="150"></el-table-column>
@@ -76,7 +75,7 @@
                   alt="">
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="取消账单" placement="top">
-                <img @click="cancelOrder(scope.row)" v-if="scope.row.BillState!=3" style="margin-right:9px" src="../../assets/img/userman/nopass.png"
+                <img @click="cancelOrder(scope.row)" v-if="scope.row.BillState==1" style="margin-right:9px" src="../../assets/img/userman/nopass.png"
                   alt="">
               </el-tooltip>
             </template>
@@ -88,7 +87,7 @@
       </div>
     </template>
     <!-- 选择返佣订单列表 -->
-    <el-dialog title="新增账单" :visible.sync="choiceOrder" width="1240px" @close='closeDialog'>
+    <el-dialog title="新增账单" :visible.sync="choiceOrder" width="1200px" @close='closeDialog'>
       <el-form label-width="80px">
         <el-form-item label="用户" style="display:inline-block;">
           <el-select size="small" v-model="orderMsg.UserId" :filter-method="ChangeListName" filterable
@@ -114,24 +113,32 @@
         <el-table-column type="selection" width="55">
         </el-table-column>
         <el-table-column prop="OrderNo" label="订单号" width="190"></el-table-column>
-        <el-table-column prop="CoverImage" label="封面图" width="100">
-          <template slot-scope="scope">
-            <img :src="scope.row.CoverImage" style="width:50px;height:50px;" alt="" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="GoodsName" label="商品名称"></el-table-column>
-        <el-table-column prop="SpecificationList" label="商品规格">
+        <el-table-column label="商品信息">
           <template slot-scope="scope">
-            <div v-for="(item,index) in scope.row.SpecificationList" :key="index">{{item}}</div>
+            <div class="clearfix">
+              <div class="Re_leftImage">
+                <img :src="scope.row.CoverImage" alt=""/>
+              </div>
+              <div class="Re_rightDiv">
+                <el-tooltip class="item" effect="dark" :content="scope.row.GoodsName" placement="top">
+                  <div class="ReDivList">
+                      {{scope.row.GoodsName}}
+                  </div>
+                </el-tooltip>
+                <div style="margin-top:5px;">
+                  规格:&nbsp;&nbsp;<el-tag size="small" v-for="(item,index) in scope.row.SpecificationList" :key="index">{{item}}</el-tag>
+                </div>
+              </div>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="Final_Price" label="最终价格" width="100"></el-table-column>
-        <el-table-column prop="Number" label="数量" width="80"></el-table-column>
-        <el-table-column prop="OrderIntroduction" label="返佣信息" width="220">
+        <el-table-column prop="Final_Price" label="最终价格" width="80"></el-table-column>
+        <el-table-column prop="Number" label="数量" width="70"></el-table-column>
+        <el-table-column prop="OrderIntroduction" label="返佣信息" width="100">
           <template slot-scope="scope">
-            <div>姓名:{{scope.row.OrderIntroduction.Name}}</div>
-            <div>昵称:{{scope.row.OrderIntroduction.UserName}}</div>
-            <div>佣金:{{scope.row.OrderIntroduction.Commission}}</div>
+            <div>姓名：{{scope.row.OrderIntroduction.Name}}</div>
+            <div>昵称：{{scope.row.OrderIntroduction.UserName}}</div>
+            <div>佣金：{{scope.row.OrderIntroduction.Commission}}</div>
           </template>
         </el-table-column>
         <el-table-column label="状态" width="80">
@@ -398,16 +405,30 @@
     padding: 20px;
     box-sizing: border-box;
   }
-
-  .OrderInformation {
-    display: flex;
-    justify-content: space-between;
-  }
-  .OrderInformation>div{
-      width:50%;
-  }
-  .rr_BillItem{
+  .RecommendBill .rr_BillItem{
     display:inline-block;
     margin-bottom: 0;
   }
+  .RecommendBill .Re_leftImage{
+    float:left;
+    width:90px;
+    height:90px;
+  }
+  .RecommendBill .Re_leftImage img{
+    width:100%;
+    height:100%;
+  }
+  .RecommendBill .Re_rightDiv{
+    float:left;
+    width:80%;
+    margin:0 10px;
+  }
+  .RecommendBill .ReDivList{
+    width:100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;/*超出3行部分显示省略号，去掉该属性 显示全部*/
+    -webkit-box-orient: vertical;
+  }
 </style>