index.vue

<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left"  class="demo-table-expand">
            <el-row>
              <el-col :span="10">
                <el-form-item label="客户信息:">
                  <span>ID:{{props.row.user_id}} {{props.row.username}} {{props.row.mobile}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="班主任:">
                  <span>{{ props.row.teacher_name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="来源:">
                  <span> {{props.row.invite_username}}<br>{{props.row.invite_mobile}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注:">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
            <el-form-item label="收货地址:">
              <div>
                {{props.row.receive_name}}
                {{props.row.receive_mobile}}
                {{props.row.province_name}}{{props.row.city}}{{props.row.area}}{{props.row.address}}
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="out_trade_no"
        label="订单号"
      >
      </el-table-column>
      <el-table-column
        prop="product_title"
        label="商品名称">
      </el-table-column>
      <el-table-column
        :min-width="'150px'"
        prop="course_title"
        label="课程名称"
      >
        <template slot-scope="scope">
          <router-link :to="{name:'ClassList', params: { courseId: scope.row.courses_id }, query: { courseName: scope.row.course_title}}" >
            {{scope.row.course_title}} <br>【{{scope.row.instructor}}】<br>
            {{scope.row|courseTypeFilter}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        label="价格（元）"
      >
        <template slot-scope="scope">
          {{scope.row.money|moneytFilter}}
        </template>
      </el-table-column>
      <el-table-column label="推荐收益(元)">
        <template slot-scope="scope">
          {{parseInt(scope.row.revenue_fixed, 10) / 100}}
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="订单创建时间"
      >
      </el-table-column>
      <el-table-column
        prop="pay_at"
        label="购买时间"
      >
      </el-table-column>
      <el-table-column
        label="付款状态">
        <template slot-scope="scope">
          {{scope.row.is_pay|payMentFilter}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="80"
      >
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="280">
            <div style="text-align: center">
              <el-button
                v-if="scope.row.is_pay == 1"
                @click="onRefund(scope.row.pay_id, scope.row.money)"
                type="warning"
                plain
                size="mini">
                退款
              </el-button>
              <el-button
                @click="editComment(scope.row.pay_id, scope.row.desc)"
                type="warning"
                plain
                size="mini">
                编辑备注
              </el-button>
              <el-button
                @click="editAddress(scope.row)"
                plain
                type="warning"
                size="mini">
                编辑收货地址
              </el-button>
            </div>
            <el-button slot="reference" size="mini" type="text" >操作</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <address-dialog v-if="dialogObj.show" :dialogObj="dialogObj" @reflash="onUpdateAddress"></address-dialog>
    <refund-dialog :dialogObj="refundDialogObj" @reflash="onAfterRefund" @changeShow="changeShow"></refund-dialog>
    <page :nowPage="nowPage" :total="total"/>
  </div>
</template>

<script>
  import {getOrderListApi,editOrderDescApi} from "../../service/api";
  import page from '../framework/page'
  import addressDialog from './dialog'
  import refundDialog from './refundDialog'
  import AddressArray from '../framework/address-picker/addr'
  export default {
    name: 'index',
    data(){
        return {
          nowPage: 1,
          total: 0,
            tableData: [
              {
                "pay_id": 269,
                "out_trade_no": "sing_pay_6333_1535597840440458",
                "user_id": 6333,
                "user_address_id": 185,
                "product_id": 1,
                "invite_type": 0,
                "invite_user_id": 0,
                "money": 1,
                "desc": "系统备注：付款成功，但未找到ID为0的课程或它的课程类型不匹配（下单类型：1）",
                "revenue_fixed": 0,
                "is_pay": 0,
                "pay_at": "2018-08-30 10:57:25",
                "teacher_id": 0,
                "created_at": "2018-08-30 10:57:21",
                "username": "青山",
                "mobile": "18616964357",
                "course_title": null,
                "instructor": null,
                "courses_id": null,
                "type": 1,
                "duration": 12,
                "product_title": "1499元一年课 ",
                "teacher_name": null,
                "receive_name": "江姐",
                "receive_mobile": "13424673456",
                "province_name": "广东",
                "province_id": null,
                "city": "深圳",
                "city_id": null,
                "area": "福田区",
                "area_id": null,
                "address": "  我"
              },
              {
                "pay_id": 267,
                "out_trade_no": "sing_pay_6281_1533889878982223",
                "user_id": 6295,
                "user_address_id": 168,
                "product_id": 4,
                "invite_type": 0,
                "invite_user_id": 6300,
                "money": 1,
                "desc": "",
                "revenue_fixed": 6000,
                "is_pay": 1,
                "pay_at": null,
                "teacher_id": 0,
                "created_at": "2018-08-10 16:31:18",
                "username": null,
                "mobile": null,
                "course_title": "30天高效英语启蒙主题训练营",
                "instructor": "8月20日开课",
                "courses_id": 65,
                "type": 1,
                "duration": 1,
                "product_title": "30天高效英语启蒙主题训练营（买课赠实物教具礼盒）",
                "teacher_name": null,
                "receive_name": "www",
                "receive_mobile": "16766467976",
                "province_name": "广东",
                "province_id": null,
                "city": "深圳",
                "city_id": null,
                "area": "福田区",
                "area_id": null,
                "address": "6164466"
              }
            ],
          dialogObj: {
            show: false
          },
          refundDialogObj: {
            show: false,
            id: '',
            money: 0
          }
        }
    },
    methods: {
      editComment(id, desc) {
        this.$prompt('编辑备注', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: desc
        }).then(({ value }) => {
          editOrderDescApi(id,'refund',{desc: value}).then(res=>{
            if( res.data.result === 'success' ){
              this.$message({
                type: 'success',
                message: '编辑备注成功'
              });
            }else{
              this.$message.error( res.data.message );
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消编辑备注'
          });
        });
      },
      getOrderList(){
        getOrderListApi().then((res)=>{
        })
      },
      changeShow(data){
        this.refundDialogObj.show=data
      },
      onRefund(id, money){
        console.log('onRefund', id, money)
        this.refundDialogObj.id= id;
        this.refundDialogObj.money= money;
        this.refundDialogObj.show = true;
      },
      onAfterRefund(){

      },
      onUpdateAddress(){
        this.dialogObj.show = false;
        this.getOrderList();
      },
      editAddress(row){
        if(!row.province_name){
          this.dialogObj.province = ''
          this.dialogObj.city = ''
          this.dialogObj.district = ''
        } else {
          let provinceObj = AddressArray.filter((item) => {
            return item.label === row.province_name
          })
          if(provinceObj && provinceObj.length > 0){
            this.dialogObj.province = row.province_id ? row.province_id : provinceObj[0].value
            if(!row.city){
              this.dialogObj.city = ''
            } else {
              let cityObj = provinceObj[0].children.filter((city) => {
                return city.label === row.city
              })
              this.dialogObj.city = row.city_id ? row.city_id : cityObj[0].value
              if(!row.area){
                this.dialogObj.district = ''
              }else {
                let districtObj = cityObj[0].children.filter((district) => {
                  return district.label === row.area
                })
                this.dialogObj.district = row.area_id ? row.area_id : districtObj[0].value
              }
            }
          } else {
            this.dialogObj.province = ''
            this.dialogObj.district = ''
            this.dialogObj.city = ''
          }

        }
        this.dialogObj.detail = row.address
        this.dialogObj.user_id = row.user_id
        this.dialogObj.pay_id = row.pay_id
        this.dialogObj.receive_mobile = row.receive_mobile
        this.dialogObj.receive_name = row.receive_name
        this.dialogObj.province_name = row.province_name
        this.dialogObj.city_name = row.city
        this.dialogObj.district_name = row.area
        this.dialogObj.show=true;
      }
    },
    components: {
      addressDialog,
      refundDialog,
      page
    },
    mounted(){
      this.getOrderList();
    },
    filters:{
      payMentFilter(val){
        return val=='1'?'已付款':'未付款'
      },
      courseTypeFilter(val){
        return val.type=='1'?`正式课(${val.duration}个月)`:`试听课(${val.duration}天)`
      },
      moneytFilter(val){
        return val = val / 100
      }
    }
  }
</script>

<style scoped>

</style>