<template> 
 | 
  <div class="main_app"> 
 | 
    <Breadcrumb /> 
 | 
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" /> 
 | 
    <div class="table_btns"> 
 | 
      <el-button type="primary" @click="handleEx()">导出</el-button> 
 | 
    </div> 
 | 
    <el-table v-loading="loading" :data="list" stripe border> 
 | 
      <el-table-column prop="code" align="center" label="订单编号" min-width="200" show-overflow-tooltip> 
 | 
        <template scope="{row}"> 
 | 
          <span @click="handleDetail(row.id)" class="primaryColor pointer">{{ row.code }}</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="discountName" align="center" label="套餐卡" min-width="120" show-overflow-tooltip /> 
 | 
      <el-table-column prop="money" align="center" label="合计(元)" min-width="80" show-overflow-tooltip /> 
 | 
      <el-table-column prop="money" align="center" label="实付(元)" min-width="80" show-overflow-tooltip /> 
 | 
      <el-table-column prop="refundMoney" align="center" label="已退金额(元)" min-width="100" show-overflow-tooltip /> 
 | 
      <el-table-column prop="openid" align="center" label="用户信息" min-width="200" show-overflow-tooltip /> 
 | 
      <el-table-column prop="payWay" align="center" label="支付方式" min-width="80" show-overflow-tooltip> 
 | 
        <template v-slot="{ row }"> 
 | 
          <span v-if="row.payWay == 0">微信支付</span> 
 | 
          <span v-if="row.payWay == 1">支付宝</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="payWay" align="center" label="订单来源" min-width="80" show-overflow-tooltip> 
 | 
        <template v-slot="{ row }"> 
 | 
          <span>小程序端</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="payWay" align="center" label="订单状态" min-width="80" show-overflow-tooltip> 
 | 
        <template v-slot="{ row }"> 
 | 
          <span v-if="row.status == 0">未支付</span> 
 | 
          <span v-if="row.status == 1">已支付</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="refundUserName" align="center" label="操作人" min-width="80" show-overflow-tooltip /> 
 | 
      <el-table-column prop="createDate" align="center" label="创建时间" min-width="160" show-overflow-tooltip /> 
 | 
      <el-table-column label="操作" fixed="right" align="center" min-width="120" show-overflow-tooltip> 
 | 
        <template v-slot="{ row }"> 
 | 
          <span @click="handleDetail(row.id)" class="primaryColor pointer">查看详情</span> 
 | 
          <span v-if="row.status == 1 && (row.refundMoney < row.money)" @click="handRefund(row.id)" 
 | 
            class="primaryColor pointer ml10">退款</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
    </el-table> 
 | 
    <div class="table_btns"> 
 | 
      <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> 
 | 
    </div> 
 | 
    <!--  --> 
 | 
    <OrderDetail ref="OrderDetailRef" /> 
 | 
    <Refund ref="RefundRef" @success="getList" /> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BasePageTemp from '@/components/base/BasePageTemp' 
 | 
import Breadcrumb from '@/layouts/Breadcrumb' 
 | 
import OrderDetail from './components/OrderDetail.vue' 
 | 
import Refund from './components/Refund' 
 | 
import { 
 | 
  comboOrderPost, 
 | 
  comboListOrderEx, 
 | 
  comboOrderDetailPost 
 | 
} from '@/api/business/combo.js' 
 | 
import dayjs from 'dayjs' 
 | 
export default { 
 | 
  extends: BasePageTemp, 
 | 
  components: { 
 | 
    Breadcrumb, 
 | 
    OrderDetail, 
 | 
    Refund 
 | 
  }, 
 | 
  data() { 
 | 
    return { 
 | 
      loading: false, 
 | 
      queryFormConfig: { 
 | 
        formItems: [ 
 | 
          { 
 | 
            filed: 'id', 
 | 
            type: 'input', 
 | 
            label: '订单编号', 
 | 
          }, 
 | 
          { 
 | 
            filed: 'discountName', 
 | 
            type: 'input', 
 | 
            label: '套餐卡', 
 | 
            placeholder: '请输入卡名称', 
 | 
          }, 
 | 
          { 
 | 
            filed: 'payWay', 
 | 
            type: 'select', 
 | 
            label: '支付方式', 
 | 
            options: [ 
 | 
              { label: '微信', value: 0 }, 
 | 
              { label: '支付宝', value: 1 }, 
 | 
            ] 
 | 
          }, 
 | 
          { 
 | 
            filed: 'payStatus', 
 | 
            type: 'select', 
 | 
            label: '订单状态', 
 | 
            options: [ 
 | 
              { label: '未支付', value: 0 }, 
 | 
              { label: '已支付', value: 1 }, 
 | 
            ] 
 | 
          }, 
 | 
          { 
 | 
            filed: 'selDate', 
 | 
            type: 'daterange', 
 | 
            label: '支付时间', 
 | 
          }, 
 | 
          { 
 | 
            filed: 'openid', 
 | 
            type: 'input', 
 | 
            label: '用户信息', 
 | 
          }, 
 | 
        ], 
 | 
        online: true 
 | 
      } 
 | 
    } 
 | 
  }, 
 | 
  created() { 
 | 
    let date = dayjs().format('YYYY-MM-DD') 
 | 
    this.$set(this.filters, 'selDate', [date, date]) 
 | 
    this.getList() 
 | 
    // this.initData() 
 | 
  }, 
 | 
  methods: { 
 | 
    handRefund(id) { 
 | 
      this.$refs.RefundRef.open(id) 
 | 
    }, 
 | 
    handleDetail(id) { 
 | 
      comboOrderDetailPost({ id }) 
 | 
        .then(res => { 
 | 
          if (res) { 
 | 
            this.$refs.OrderDetailRef.open('订单详情', res) 
 | 
          } 
 | 
  
 | 
        }) 
 | 
        .catch(err => { 
 | 
          this.$tip.apiFailed(err) 
 | 
        }) 
 | 
    }, 
 | 
    handleEx() { 
 | 
      const { pagination, filters } = this 
 | 
      this.$dialog.exportConfirm('确认导出吗?') 
 | 
        .then(() => { 
 | 
          this.loading = true 
 | 
          if (filters.selDate && filters.selDate.length > 0) { 
 | 
            filters.startDate = filters.selDate[0] + ' 00:00:00' 
 | 
            filters.endDate = filters.selDate[1] + ' 00:00:00' 
 | 
          } else { 
 | 
            filters.startDate = null 
 | 
            filters.endDate = null 
 | 
          } 
 | 
          comboListOrderEx({ 
 | 
            page: 1, 
 | 
            capacity: 1000000, 
 | 
            model: { 
 | 
              ...filters, 
 | 
              type: 1 
 | 
            }, 
 | 
          }) 
 | 
            .then(response => { 
 | 
              this.download(response) 
 | 
            }) 
 | 
            .catch(e => { 
 | 
              this.$tip.apiFailed(e) 
 | 
            }) 
 | 
            .finally(() => { 
 | 
              this.loading = false 
 | 
            }) 
 | 
        }) 
 | 
        .catch(() => { }) 
 | 
    }, 
 | 
    initData() { 
 | 
      getStoreList({ capacity: 9999, page: 1, model: {} }).then(res => { 
 | 
        this.queryFormConfig.formItems[1].options = res.records || [] 
 | 
      }) 
 | 
    }, 
 | 
    getList(page) { 
 | 
      const { pagination, filters } = this 
 | 
      this.loading = true 
 | 
      if (filters.selDate && filters.selDate.length > 0) { 
 | 
        filters.startDate = filters.selDate[0] + ' 00:00:00' 
 | 
        filters.endDate = filters.selDate[1] + ' 00:00:00' 
 | 
      } else { 
 | 
        filters.startDate = null 
 | 
        filters.endDate = null 
 | 
      } 
 | 
      if (page) { pagination.page = page } 
 | 
      comboOrderPost({ 
 | 
        model: { 
 | 
          ...filters, 
 | 
          type: 1 
 | 
        }, 
 | 
        capacity: pagination.pageSize, 
 | 
        page: pagination.page, 
 | 
      }).then(res => { 
 | 
        this.loading = false 
 | 
        this.list = res.records || [] 
 | 
        this.pagination.total = res.total || 0 
 | 
      }, () => { 
 | 
        this.loading = false 
 | 
      }) 
 | 
    }, 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style></style> 
 |