boss/pages/main/index/sale_order.vue

<template>
  <div>
    <el-radio-group v-model="type" size="medium" @change="typechange" style="margin-top: 15px;">
      <el-radio-button :label="0">全部（{{ count.type_total}}）</el-radio-button>
      <el-radio-button :label="1">技能服务（{{ count.type1}}）</el-radio-button>
      <el-radio-button :label="2">咨询服务（{{ count.type2}}）</el-radio-button>
      <el-radio-button :label="3">资源下载（{{ count.type3}}）</el-radio-button>
      <el-radio-button :label="4">视频购买（{{ count.type4}}）</el-radio-button>
      <el-radio-button :label="5">开源充电（{{ count.type5}}）</el-radio-button>
    </el-radio-group>
    <el-button type="success" @click="editDialogEvent()" style="margin-top: 15px;margin-right: 30px;float: right">服务费配置</el-button>
    <div style="clear: both;"></div>
    <el-radio-group v-model="status" size="medium" @change="statuschange" style="margin-top: 15px;">
      <el-radio-button :label="0">全部（{{ count.status_total}}）</el-radio-button>
      <el-radio-button :label="1">待接单（{{ count.status1}}）</el-radio-button>
      <el-radio-button :label="2">进行中（{{ count.status2}}）</el-radio-button>
      <el-radio-button :label="3">已完成（{{ count.status3}}）</el-radio-button>
      <el-radio-button :label="4">待结薪（{{ count.status4}}）</el-radio-button>
      <el-radio-button :label="5">已拒绝（{{ count.status5}}）</el-radio-button>
      <el-radio-button :label="6">已结薪（{{ count.status6}}）</el-radio-button>
      <el-radio-button :label="7">退款中（{{ count.status7}}）</el-radio-button>
      <el-radio-button :label="8">已退款（{{ count.status8}}）</el-radio-button>
    </el-radio-group>
    <div style="clear: both;"></div>
    <div  style="margin-top: 15px;margin-bottom: 15px">
      <div style="float: left;width: 200px;margin-right: 15px;">
        <el-input v-model="keywords" placeholder="UID搜索"></el-input>
      </div>
      <div style="float: left;width: 200px;margin-right: 15px;">
        <el-button type="primary" @click="searchkeywords">搜索</el-button>
      </div>
      <div style="clear: both;"></div>
    </div>

    <div>
      <el-table :data="listData" border style="width: 100%"  v-loading="loading">
        <el-table-column prop="type_text" label="服务类型"></el-table-column>
        <el-table-column
          prop=""
          label="购买方">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.buy_uid">{{ scope.row.buy_nickname }}({{ scope.row.buy_uid }})</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="服务方">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.sale_uid">{{ scope.row.sale_nickname }}({{ scope.row.sale_uid }})</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="pay_price" label="购买金额"></el-table-column>
        <el-table-column prop="real_price" label="实收金额"></el-table-column>
        <el-table-column prop="paytime" label="付款时间"></el-table-column>
        <el-table-column prop="version" label="购买来源"></el-table-column>
        <el-table-column prop="status_text" label="服务状态"></el-table-column>
        <el-table-column
          prop=""
          label="购买服务">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" @click="viewDetail(scope.row)">{{scope.row.title}}</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="memo" label="备注"></el-table-column>
        <el-table-column prop="uid" label="操作" min-width="120px">
          <template slot-scope="scope">
            <el-button class="status" type="primary" size="mini" @click="addmemo(scope.row)">添加备注</el-button>
            <el-button class="status" type="danger"size="mini" v-if="scope.row.status==1 && scope.row.is_remind==0" @click="isRemind(scope.row)">提醒接单</el-button>
            <el-button class="status" type="info" size="mini" v-if="scope.row.status==1 && scope.row.is_remind==1" plain disabled>已提醒</el-button>
            <el-button class="status" type="success" size="mini" v-if="scope.row.status==4" @click="pay(scope.row)">结算酬劳</el-button>
            <el-button class="status" type="warning" size="mini" v-if="scope.row.status==7" @click="tk(scope.row)">去退款</el-button>
            <el-button class="status" type="info" size="mini" v-if="scope.row.status==8" plain disabled>已退款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="padding-top: 5px">
      <el-pagination
        class="order-footer"
        background
        layout="total, prev, pager, next"
        :page-size="20"
        :total="total"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="设置服务费" :visible.sync="editDialog" width="500px">
      <el-form :model="editRate" :label-position="labelPosition" label-width="120px">
        <el-form-item label="资源购买服务费">
          <el-input v-model="editRate.sale_workfile_rate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="技能培训服务费">
          <el-input v-model="editRate.sale_skill_rate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="咨询服务服务费">
          <el-input v-model="editRate.sale_order_rate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程视频服务费">
          <el-input v-model="editRate.sale_video_rate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开源充电服务费">
          <el-input v-model="editRate.sale_recharge_rate" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editDialog = false">取消</el-button>
        <el-button size="medium" type="primary" @click="rateUpdate">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script src="./js/sale_order.js"></script>
<style scoped>
  .status{
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    margin-left:0px !important;
  }
.count-list {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}
/deep/ .mall_list .el-dialog {
  margin: 5vh auto !important;
}

/deep/ .mall_list .el-dialog__body {
  height: 70vh;
  overflow: auto;
}

/deep/ .el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

h3 {
  margin: 20px 0 20px;
}
</style>