修改

src/components/orderMan/RecomBillDetail.vue

 <template>
-    <div>
-        123
+  <div class="RecomBillDetail">
+    <div class="head-title">
+      账单明细
     </div>
-</template>
\ No newline at end of file
+    <div class="content">
+      <div class="Tongji_info">
+        <span>总金额：{{dataList.TotalMoney}}</span>
+        <span>用户名称：{{dataList.UserName}}</span>
+        <span>供应商名称：{{dataList.SupplierName}}</span>
+      </div>
+      <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">
+          <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="商品名称" width="350">
+        </el-table-column>
+        <el-table-column prop="SpecificationList" label="商品规格">
+          <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>
+        <el-table-column prop="Final_Price" label="最终价格" width="120">
+        </el-table-column>
+        <el-table-column prop="Number" label="数量" width="100">
+        </el-table-column>
+        <el-table-column prop="OrderIntroduction" width="220" label="订单信息">
+          <template slot-scope="scope">
+            <div class="OrderInformation">
+              <div>返佣id：{{scope.row.OrderIntroduction.IntroductionId}}</div>
+              <div>
+                状态：<span style="color:red;" v-if="scope.row.OrderIntroduction.CommissionState==1">未结算</span>
+                <span style="color:green;" v-if="scope.row.OrderIntroduction.CommissionState==2">已结算</span>
+              </div>
+            </div>
+            <div class="OrderInformation">
+              <div>姓名：{{scope.row.OrderIntroduction.Name}}</div>
+              <div>佣金：{{scope.row.OrderIntroduction.Commission}}</div>
+            </div>
+            <div class="OrderInformation">
+              <div style="width:100%;">昵称：{{scope.row.OrderIntroduction.UserName}}</div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        dataList: [],
+        msg: {
+          BillId: 0
+        },
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      getList() {
+        this.loading = true;
+        this.apipost("/api/user/GetRecommendOrdersBillDetailList", this.msg, res => {
+          this.loading = false;
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data;
+          } else {
+            this.Error(res.data.message);
+          }
+        })
+      },
+    },
+    mounted() {
+      this.msg.BillId = this.$route.query.BillId;
+      this.getList();
+    }
+  };
+
+</script>
+<style>
+  .RecomBillDetail .content {
+    background: #fff;
+    margin-top: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .RecomBillDetail .Tongji_info span {
+    margin-right: 30px;
+  }
+  .OrderInformation{
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .OrderInformation>div{
+      width:50%;
+  }
+
+</style>