1

src/components/sale/peerInfo/baseInfo.vue

+<template>
+  <div class="q-pa-md">
+    <div class="text-h6">基础资料</div>
+    <!-- 类型 -->
+    <div class="q-my-sm" v-if="editField=='CustomerType'">
+      <div class="flex justify-between items-center q-mb-sm">
+        <span>类型</span>
+        <div>
+          <q-btn size="sm" text-color="primary" label="取消" @click="showEdit('')"></q-btn>
+          <q-btn size="sm" color="primary" label="确定" class="q-ml-sm" @click="save('CustomerType',Data.CustomerType)"></q-btn>
+        </div>
+      </div>
+      <q-select outlined dense stack-label label="类型" @input="getCustomList(Data.CustomerType)" option-value="Id" option-label="Name"
+        :rules="[val => !!val || '请选择类型']"  :options="options" v-model="Data.CustomerType" emit-value map-options />
+    </div>
+    <div class="flex justify-between items-center q-my-lg" v-else @click="showEdit('CustomerType')">
+      <span>类型</span>
+      <span v-if="Data.CustomerType==1">企业</span>
+      <span v-if="Data.CustomerType==2">学校</span>
+      <span v-if="Data.CustomerType==3">个人</span>
+      <span v-if="Data.CustomerType==4">其他</span>
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    GetCatetoryTypeList,
+    queryCustomerCategoryList
+  } from "../../../api/users/user";
+
+  export default {
+    components: {},
+    props: {
+      Data: {
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        editField: "",
+        options: [],
+        sexOptions: [{
+          label: "男",
+          value: 1,
+        }, {
+          label: "女",
+          value: 2,
+        }],
+        customList:[]
+      }
+    },
+    mounted(){
+      if(this.Data.CustomerType){
+        this.getCustomList(this.Data.CustomerType);
+      }
+      this.getTypeList();
+    },
+    methods: {
+      showEdit(field) {
+        this.editField = field
+      },
+      save(field,val,Validate=false){
+        if(Validate){
+           this.$refs[field].validate();
+           if(this.$refs[field].hasError) return
+        }
+        const obj={
+          field,
+          val
+        }
+        this.$emit("confirm",obj)
+        this.editField =''
+      },
+      getTypeList() {
+        GetCatetoryTypeList({}).then(res => {
+          if (res.Code == 1) {
+            this.options = res.Data;
+          }
+        })
+      },
+      getCustomList(Type){
+        let msg = {
+          CategoryName:"",
+          CatetoryType:Type
+        }
+        this.Data.CategoryId='';
+        this.Data.EnterpriseName='';
+        queryCustomerCategoryList(msg).then(res => {
+          if (res.Code == 1) {
+            this.customList = res.Data;
+          }
+        })
+      },
+      getName(Id){
+        let Name=''
+        this.customList.forEach(x=>{
+          if(x.CategoryId==Id){
+            Name = x.CategoryName
+          }
+        })
+        return Name;
+      }
+    }
+  }
+
+</script>
+<style>
+  .ellepsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+</style>

src/components/sale/peerInfo/conRight.vue

+<template>
+  <div class="q-pa-md">
+    <q-tabs
+      v-model="tabs"
+      active-color="primary"
+      align="left"
+      style="width:400px;"
+    >
+      <q-tab :name="1" label="客户" />
+      <q-tab :name="2" label="订单" />
+      <q-tab :name="3" label="返佣" />
+      <q-tab :name="4" label="幸福存折" />
+    </q-tabs>
+    <div class="q-mb-lg">
+      <customer :Id="Id" v-if="tabs === 1"></customer>
+      <order :Id="Id" v-if="tabs === 2"></order>
+      <rakeback :Id="Id" v-if="tabs === 3"></rakeback>
+      <passbook :Id="Id" v-if="tabs === 4"></passbook>
+    </div>
+  </div>
+</template>
+<script>
+import customer from "./customer";
+import order from "./order";
+import passbook from "./passbook";
+import rakeback from "./rakeback";
+export default {
+  components: { customer, order, rakeback, passbook },
+  props: {
+    Id: {
+      type: Number,
+      default: 0
+    },
+  },
+  data() {
+    return {
+      tabs: 1,
+    };
+  },
+  mounted() {
+  },
+};
+</script>

src/components/sale/peerInfo/customer.vue

+<template>
+  <div class="b2bcustomer">
+    <div class="full-width flex no-wrap items-center q-mb-sm">
+      <q-tabs
+        v-model="msg.StuStage"
+        active-color="primary"
+        dense
+        outside-arrows
+        align="left"
+        style="width:70%"
+        @input="getStudent"
+      >
+        <q-tab
+          v-for="(item, index) in stagelist"
+          :key="index"
+          :name="item.StuStage"
+        >
+          {{ item.StuStageName }}({{ item.StuNum }})
+        </q-tab>
+      </q-tabs>
+      <q-input
+        outlined
+        dense
+        v-model="msg.StuName"
+        label="昵称"
+        @input="getStudent"
+      />
+    </div>
+    <q-table
+      :pagination="msg"
+      :loading="loading"
+      no-data-label="暂无相关数据"
+      flat
+      class="sticky-tow-column-table"
+      separator="none"
+      :data="list"
+      :columns="columns"
+      row-key="Id"
+    >
+      <!-- <template v-slot:body-cell-StuIcon="props">
+        <q-td auto-width :props="props">
+          <q-avatar size="md" v-if="props.value">
+            <img :src="props.value" />
+          </q-avatar>
+          <q-avatar
+            size="md"
+            color="teal-10"
+            text-color="white"
+            v-if="!props.value"
+          >
+            {{ props.row.StuName.substring(0, 1) }}</q-avatar
+          >
+        </q-td>
+      </template> -->
+      <template v-slot:body-cell-StuName="props">
+        <q-td :props="props">
+          <div class="text-blue cursor-pointer" @click="getStuRight(props.row)">
+            {{ props.value }}
+          </div>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-StuSex="props">
+        <q-td :props="props">
+          <q-badge
+            :color="props.value == 1 ? 'negative' : 'primary'"
+            :label="props.value == 1 ? '女' : '男'"
+          />
+        </q-td>
+      </template>
+      <template v-slot:body-cell-Status="props">
+        <q-td :props="props">
+          <q-toggle
+            size="md"
+            color="primary"
+            :false-value="1"
+            :true-value="0"
+            v-model="props.row.Status"
+            title="注意：关闭后，学员将无法正常使用."
+            @input="deleteStudentInfo(props.row)"
+          />
+        </q-td>
+      </template>
+      <template v-slot:bottom>
+        <q-pagination
+          class="full-width justify-end"
+          v-model="msg.pageIndex"
+          color="primary"
+          :max="pageCount"
+          :input="true"
+          @input="changePage"
+        />
+      </template>
+    </q-table>
+    <stuDetail
+      v-if="isShowStuRight"
+      :save-obj="stuOption"
+      @close="closeStuForm"
+    ></stuDetail>
+  </div>
+</template>
+
+<script>
+import { getStudentPage } from "../../../api/school";
+import { getCustomerStuStageStatistics } from "../../../api/sale/peemanagement";
+import stuDetail from "../../../components/school/student/studentRight-form";
+export default {
+  components: {
+    stuDetail
+  },
+  props: {
+    Id: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      list: [],
+      pageCount: 0,
+      columns: [
+        // {
+        //   name: "StuIcon",
+        //   label: "",
+        //   field: "StuIcon",
+        //   align: "left"
+        // },
+        {
+          name: "StuName",
+          required: true,
+          label: "昵称",
+          align: "left",
+          field: row => row.StuName
+        },
+        {
+          name: "StuSex",
+          label: "性别",
+          field: "StuSex",
+          align: "left"
+        },
+        {
+          name: "StuBirthStr",
+          label: "出生日期",
+          field: "StuBirthStr",
+          align: "left"
+        },
+        {
+          name: "StuTel",
+          label: "手机号码",
+          field: "StuTel",
+          align: "left"
+        },
+        {
+          name: "CreateTypeStr",
+          label: "客户来源",
+          field: "CreateTypeStr",
+          align: "left"
+        },
+        {
+          name: "StuStageName",
+          label: "客户阶段",
+          field: "StuStageName",
+          align: "left"
+        },
+        {
+          name: "CreateTimeStr",
+          label: "创建时间",
+          field: "CreateTimeStr",
+          align: "left"
+        }
+        // {
+        //   name: "CreateByName",
+        //   label: "负责人",
+        //   align: "left",
+        //   field: "CreateByName"
+        // }
+      ],
+      msg: {
+        pageIndex: 1,
+        pageSize: 10,
+        rowsPerPage: 10,
+        StuName: "",
+        StuTel: "",
+        Status: "-1",
+        School_Id: 0,
+        CustomerId: 0,
+        StuStage: 0
+      },
+      stagelist: [],
+      stuOption: {},
+      isShowStuRight: false
+    };
+  },
+  methods: {
+    getStudent() {
+      this.msg.CustomerId = this.Id;
+      this.loading = true;
+      getStudentPage(this.msg)
+        .then(res => {
+          this.loading = false;
+          this.list = res.Data.PageData;
+          this.pageCount = res.Data.PageCount;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    getStage() {
+      getCustomerStuStageStatistics({ CustomerId: this.Id }).then(res => {
+        this.stagelist = res.Data;
+        const total = res.Data.reduce((pre, cur) => {
+          return cur.StuNum + pre;
+        }, 0);
+        const obj = {
+          StuStage: 0,
+          StuStageName: "全部",
+          StuNum: total
+        };
+        this.stagelist.unshift(obj);
+      });
+    },
+    changePage(val) {
+      this.msg.pageIndex = val;
+      this.getStudent();
+    },
+    closeStuForm() {
+      this.isShowStuRight = false;
+    },
+    //点击学生姓名弹出
+    getStuRight(obj) {
+      if (obj) {
+        this.stuOption = obj;
+      } else {
+        this.stuOption = {};
+      }
+      this.isShowStuRight = true;
+    }
+  },
+  mounted() {
+    this.getStudent();
+    this.getStage();
+  }
+};
+</script>
+<style lang="scss">
+.b2bcustomer ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.b2bcustomer ::-webkit-scrollbar-track {
+  background: #fff;
+  border-radius: 2px;
+}
+.b2bcustomer ::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 10px;
+}
+.b2bcustomer ::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+.b2bcustomer ::-webkit-scrollbar-corner {
+  background: #204754;
+}
+</style>

src/components/sale/peerInfo/passbook.vue

+<template>
+  <div class="passbook">
+    <div class="row wrap q-gutter-xs q-my-xs">
+      <div class="stics">
+        <span class="stics-name">累计</span>
+        <span>{{ data.SttlementMoney }}</span>
+      </div>
+      <div class=" stics">
+        <span class="stics-name">已提现</span>
+        <span style="color: #F72E52">{{ data.CashOutMoney }}</span>
+      </div>
+      <div class=" stics">
+        <span class="stics-name">可提现</span>
+        <span style="color:#2961FE;">{{ data.CanCashOutMoney }}</span>
+      </div>
+      <div class=" stics">
+        <span class="stics-name">未结算</span>
+        <span>{{ data.UnSettlementMoney }}</span>
+      </div>
+    </div>
+    <q-tabs
+      v-model="tabs"
+      active-color="primary"
+      align="left"
+      style="width:180px;"
+      class="q-my-xs"
+    >
+      <q-tab :name="1" label="返佣明细" />
+      <q-tab :name="2" label="提现记录" />
+    </q-tabs>
+    <q-table
+      :pagination="msg"
+      :loading="loading"
+      no-data-label="暂无相关数据"
+      flat
+      class="sticky-column-table"
+      separator="none"
+      :data="dataList"
+      :columns="columns"
+      row-key="name"
+      v-if="tabs==1"
+    >
+      <template v-slot:body-cell-Status="props">
+        <q-td :props="props" style="padding-right: 0px">
+          <span v-if="props.row.Status==-1">不返佣</span>
+          <span v-if="props.row.Status==0">待返佣</span>
+          <span v-if="props.row.Status==1">已返佣到账户</span>
+          <span v-if="props.row.Status==2">佣金已提现</span>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-CommissionType="props">
+        <q-td :props="props" style="padding-right: 0px">
+          <span v-if="props.row.CommissionType==1">返佣</span>
+          <span v-if="props.row.CommissionType==2">幸福存折</span>
+        </q-td>
+      </template>
+      <template v-slot:bottom>
+        <q-pagination
+          class="full-width justify-end"
+          v-model="msg.pageIndex"
+          color="primary"
+          :max="pageCount"
+          :input="true"
+          @input="changePage"
+        />
+      </template>
+    </q-table>
+    <withdraw  v-if="tabs==2" :Type="2" :Id="Id"></withdraw>
+  </div>
+</template>
+<script>
+import {
+  getCustomerCommissionPassbook,
+  getCustomerCommissionStat,
+  GetCustomerBalanceDetailPage
+} from "../../../api/sale/peemanagement";
+import {
+    getCommissionStatistics,
+} from '../../../api/finance/index'
+import withdraw from './withdraw'
+export default {
+  components:{
+    withdraw
+  },
+  props: {
+    Id: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      msg: {
+        pageIndex: 1,
+        pageSize: 10,
+        rowsPerPage: 10,
+
+        BatchId:0,
+        SchoolId:'-1',
+        Status:'-2',
+        OrderSourceType:0,
+        OrderSourceId:0,
+        Q_SelectNormal:0,
+        CommissionType:2,
+        ClassId:0,
+        OrderId:'',
+
+      },
+      pageCount: 0,
+      data:{},
+      dataList: [],
+      columns: [
+         {
+          name: "SchoolName",
+          label: "校区",
+          field: "SchoolName",
+          align: "left"
+        },
+        {
+          name: "OrderSourceTypeName",
+          label: "来源",
+          align: "left",
+          field: "OrderSourceTypeName"
+        },
+        {
+          name: "UserName",
+          label: "人员",
+          field: "UserName",
+          align: "left"
+        },
+        {
+          name: "ClassNo",
+          label: "班号",
+          field: "ClassNo",
+          align: "left"
+        },
+        {
+          name: "OrderId",
+          label: "订单编号",
+          field: "OrderId",
+          align: "left"
+        },
+        {
+          name: "StuName",
+          label: "学生",
+          field: "StuName",
+          align: "left"
+        },
+        {
+          name: "CommissionType",
+          label: "类型",
+          field: "CommissionType",
+          align: "left"
+        },
+        {
+          name: "CommissionMoeny",
+          label: "金额",
+          field: "CommissionMoeny",
+          align: "left"
+        },
+        {
+          name: "Status",
+          label: "状态",
+          field: "Status",
+          align: "left"
+        },
+          {
+          name: "BatchName",
+          label: "期数",
+          field: "BatchName",
+          align: "left"
+        },
+        {
+          name: "Remark",
+          label: "备注",
+          field: "Remark",
+          align: "left"
+        }
+      ],
+      tabs:1,
+    };
+  },
+  mounted() {
+    this.getData();
+    this.getList();
+  },
+  methods: {
+    getData() {
+      const msg = {
+        OrderSourceType:2,
+        OrderSourceId: this.Id,
+        CommissionType: 2,//  1返佣 2幸福存折
+      };
+      getCustomerCommissionStat(msg).then(res => {
+        this.data=res.Data
+      });
+    },
+    //获取数据
+    getList() {
+      this.msg.OrderSourceId=this.Id
+      this.loading = true;
+      getCommissionStatistics(this.msg)
+        .then(res => {
+          this.loading = false;
+          if (res.Code == 1) {
+            this.dataList = res.Data.PageData.List;
+            this.pageCount = res.Data.PageCount;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    changePage(val) {
+      this.msg.pageIndex = val;
+      this.getList();
+    }
+  }
+};
+</script>
+<style>
+.passbook ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.passbook ::-webkit-scrollbar-track {
+  background: #fff;
+  border-radius: 2px;
+}
+.passbook ::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 10px;
+}
+.passbook ::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+.passbook ::-webkit-scrollbar-corner {
+  background: #204754;
+}
+.passbook .stics {
+  padding: 5px 10px;
+  background: #dddee0;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #000000;
+  font-weight: bold;
+  white-space: nowrap;
+}
+.passbook .stics-name {
+  color: #2d2d2d;
+  font-weight: 600;
+  margin-right: 10px;
+}
+</style>

src/components/sale/peerInfo/peerRight.vue

+<template>
+  <q-dialog
+    v-model="persistent"
+    maximized
+    full-height
+    seamless
+    position="right"
+    @hide="closeAuditCustomerForm"
+  >
+    <div class="info-content-component">
+      <div class="info-head flex  items-center">
+        <div class="flex items-center">
+          <div>
+            <div class="text-h7">
+              {{ detailData.CategoryName }}
+            </div>
+          </div>
+        </div>
+        <q-space />
+      </div>
+      <div class="info-content">
+        <div class="detail-info">
+          <baseInfo :Data="detailData" @confirm="saveBaseInfo"></baseInfo>
+        </div>
+        <div class="detail-log">
+          <right :Id="rowId"></right>
+        </div>
+      </div>
+    </div>
+    <div
+      class="dialog-out-close"
+      @click="closeAuditCustomerForm"
+      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;"
+    >
+      <q-icon name="iconfont icon-jujue1" size="26px" />
+    </div>
+  </q-dialog>
+</template>
+<script>
+import { GetCustomer, SetCustomer ,RemoveCustomer,setCustomerCareOf} from "../../../api/sale/peemanagement";
+import {
+  queryCustomerCategory
+} from "../../../api/users/user"
+import baseInfo from "./baseInfo.vue";
+import right from "./conRight.vue";
+export default {
+  components: {
+    baseInfo,
+    right
+  },
+  props: {
+    rowId: {
+      type: Number,
+      default: 0
+    },
+    auth: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      persistent: true,
+      detailData: {},
+      //员工列表
+      employeeList: [],
+      myEmployeeList: [],
+      isShowTrans: false,
+      TransferMsg: {
+        CustomerIds: "",
+        EmpId: ""
+      }
+    };
+  },
+  mounted() {
+    this.initObj();
+    this.employeeList = this.empList;
+    this.myEmployeeList = this.empList;
+  },
+  methods: {
+    //关闭弹窗
+    closeAuditCustomerForm() {
+      this.$emit("close");
+      this.persistent = false;
+    },
+    //初始化表单
+    initObj() {
+      if (this.rowId > 0) {
+        let msg = {
+          CategoryId: this.rowId
+        };
+        queryCustomerCategory(msg).then(res => {
+          if (res.Code == 1) {
+            console.log(res,'数据');
+            this.detailData = res.Data;
+          }
+        });
+      } else {
+
+      }
+    },
+    saveBaseInfo(obj) {
+      this.detailData[obj.field] = obj.val;
+      SetCustomer(this.detailData).then(res => {
+        if (res.Code == 1) {
+          this.$q.notify({
+            icon: "iconfont icon-chenggong",
+            color: "accent",
+            timeout: 2000,
+            message: "数据保存成功！",
+            position: "top"
+          });
+          this.$emit("success");
+        }
+      });
+    },
+    //同业转交
+    saveTransForm() {
+      this.$refs.transfer.validate();
+      if (this.$refs.transfer.hasError) return;
+      this.TransferMsg.CustomerIds = this.rowId;
+      setCustomerCareOf(this.TransferMsg).then(res => {
+        this.$q.notify({
+          icon: "iconfont icon-chenggong",
+          color: "accent",
+          timeout: 2000,
+          message: "转交成功",
+          position: "top"
+        });
+        this.isShowTrans = false;
+        this.$emit("success");
+      });
+    },
+    //筛选员工
+    filterEmployee(val, update, abort) {
+      update(() => {
+        this.myEmployeeList = this.employeeList.filter(
+          v => v.EmployeeName.indexOf(val) > -1
+        );
+      });
+    },
+    //删除客户
+    RemoveCustomer(obj) {
+      let that = this;
+      var message =
+        "您正在进行删除【" +
+        this.detailData.CustomerName +
+        "】行为，一旦执行无法找回，是否确认执行？";
+      this.$q
+        .dialog({
+          title: "删除客户",
+          message: message,
+          isShowEditClassRoomForm: true,
+          cancel: {
+            label: "取消",
+            flat: true
+          },
+          ok: {
+            label: "确认",
+            flat: true,
+            focus: true
+          }
+        })
+        .onOk(() => {
+          var delMsg = {
+            CustomerId: this.detailData.CustomerId
+          };
+          RemoveCustomer(delMsg).then(res => {
+            if (res.Code == 1) {
+              that.$q.notify({
+                icon: "iconfont icon-chenggong",
+                color: "accent",
+                timeout: 2000,
+                message: "操作成功",
+                position: "top"
+              });
+               that.$emit("success");
+               that.closeAuditCustomerForm()
+            }
+          });
+        });
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.info-content-component {
+  display: flex;
+  flex-direction: column;
+  width: 1010px;
+  padding: 15px 17px;
+  background-color: #f4f4f6;
+  overflow: auto;
+  box-sizing: border-box;
+
+  .info-head {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 22px;
+  }
+
+  .info-content {
+    flex: 1;
+    display: flex;
+    margin-top: 17px;
+    overflow: hidden;
+
+    .detail-info {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      width: 350px;
+      height: 100%;
+      margin-right: 13px;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    .detail-log {
+      width: 100%;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/components/sale/peerInfo/rakeback.vue

+<template>
+  <div class="passbook">
+    <div class="row wrap q-gutter-xs q-my-xs ">
+      <div class="stics">
+        <span class="stics-name">累计</span>
+        <span>{{ data.SttlementMoney }}</span>
+      </div>
+      <div class=" stics">
+        <span class="stics-name">已提现</span>
+        <span style="color: #F72E52">{{ data.CashOutMoney }}</span>
+      </div>
+      <div class=" stics">
+        <span class="stics-name">可提现</span>
+        <span style="color:#2961FE;">{{ data.CanCashOutMoney }}</span>
+      </div>
+      <div class=" stics">
+        <span class="stics-name">未结算</span>
+        <span>{{ data.UnSettlementMoney }}</span>
+      </div>
+    </div>
+    <q-tabs
+      v-model="tabs"
+      active-color="primary"
+      align="left"
+      style="width:180px;"
+      class="q-my-xs"
+    >
+      <q-tab :name="1" label="返佣明细" />
+      <q-tab :name="2" label="提现记录" />
+    </q-tabs>
+    <q-table
+      :pagination="msg"
+      :loading="loading"
+      no-data-label="暂无相关数据"
+      flat
+      class="sticky-column-table"
+      separator="none"
+      :data="dataList"
+      :columns="columns"
+      row-key="name"
+      v-if="tabs==1"
+    >
+      <template v-slot:body-cell-Status="props">
+        <q-td :props="props" style="padding-right: 0px">
+          <span v-if="props.row.Status==-1">不返佣</span>
+          <span v-if="props.row.Status==0">待返佣</span>
+          <span v-if="props.row.Status==1">已返佣到账户</span>
+          <span v-if="props.row.Status==2">佣金已提现</span>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-CommissionType="props">
+        <q-td :props="props" style="padding-right: 0px">
+          <span v-if="props.row.CommissionType==1">返佣</span>
+          <span v-if="props.row.CommissionType==2">幸福存折</span>
+        </q-td>
+      </template>
+      
+      <template v-slot:bottom>
+        <q-pagination
+          class="full-width justify-end"
+          v-model="msg.pageIndex"
+          color="primary"
+          :max="pageCount"
+          :input="true"
+          @input="changePage"
+        />
+      </template>
+    </q-table>
+     <withdraw  v-if="tabs==2" :Type="1" :Id="Id"></withdraw>
+  </div>
+</template>
+<script>
+import {
+  getCustomerCommissionPassbook,
+  getCustomerCommissionStat,
+  GetCustomerBalanceDetailPage
+} from "../../../api/sale/peemanagement";
+import {
+    getCommissionStatistics,
+} from '../../../api/finance/index'
+import withdraw from './withdraw'
+export default {
+  components:{
+    withdraw
+  },
+  props: {
+    Id: {
+      //1返佣 2幸福存折
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      msg: {
+         pageIndex: 1,
+        pageSize: 10,
+        rowsPerPage: 10,
+
+        BatchId:0,
+        SchoolId:'-1',
+        Status:'-2',
+        OrderSourceType:0,
+        OrderSourceId:0,
+        Q_SelectNormal:0,
+        CommissionType:1,
+        ClassId:0,
+        OrderId:'',
+      },
+      pageCount: 0,
+      data: {},
+      dataList: [],
+      columns: [
+        {
+          name: "SchoolName",
+          label: "校区",
+          field: "SchoolName",
+          align: "left"
+        },
+        {
+          name: "OrderSourceTypeName",
+          label: "来源",
+          align: "left",
+          field: "OrderSourceTypeName"
+        },
+        {
+          name: "UserName",
+          label: "人员",
+          field: "UserName",
+          align: "left"
+        },
+        {
+          name: "ClassNo",
+          label: "班号",
+          field: "ClassNo",
+          align: "left"
+        },
+        {
+          name: "OrderId",
+          label: "订单编号",
+          field: "OrderId",
+          align: "left"
+        },
+        {
+          name: "StuName",
+          label: "学生",
+          field: "StuName",
+          align: "left"
+        },
+        {
+          name: "CommissionType",
+          label: "类型",
+          field: "CommissionType",
+          align: "left"
+        },
+        {
+          name: "CommissionMoeny",
+          label: "金额",
+          field: "CommissionMoeny",
+          align: "left"
+        },
+        {
+          name: "Status",
+          label: "状态",
+          field: "Status",
+          align: "left"
+        },
+          {
+          name: "BatchName",
+          label: "期数",
+          field: "BatchName",
+          align: "left"
+        },
+        {
+          name: "Remark",
+          label: "备注",
+          field: "Remark",
+          align: "left"
+        }
+      ],
+      tabs:1
+    };
+  },
+  mounted() {
+    this.getData();
+    this.getList();
+  },
+  methods: {
+    getData() {
+      const msg = {
+        OrderSourceType:2,
+        OrderSourceId: this.Id,
+        CommissionType: 1,
+      };
+      getCustomerCommissionStat(msg).then(res => {
+        this.data = res.Data;
+      });
+    },
+    //获取数据
+    getList() {
+      this.msg.OrderSourceId=this.Id
+      this.loading = true;
+      getCommissionStatistics(this.msg)
+        .then(res => {
+          this.loading = false;
+          if (res.Code == 1) {
+            this.dataList = res.Data.PageData.List;
+            this.pageCount = res.Data.PageCount;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    changePage(val) {
+      this.msg.pageIndex = val;
+      this.getList();
+    }
+  }
+};
+</script>
+<style>
+.passbook ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.passbook ::-webkit-scrollbar-track {
+  background: #fff;
+  border-radius: 2px;
+}
+.passbook ::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 10px;
+}
+.passbook ::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+.passbook ::-webkit-scrollbar-corner {
+  background: #204754;
+}
+.passbook .stics {
+  padding: 5px 10px;
+  background: #dddee0;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #000000;
+  font-weight: bold;
+  white-space: nowrap;
+}
+.passbook .stics-name {
+  color: #2d2d2d;
+  font-weight: 600;
+  margin-right: 10px;
+}
+</style>