yunyubang-web/src/views/order/orderList.vue

<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="订单管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div>
            <xy-selectors @search="getOrders" :has-add="false">
              <template>
                <Input v-model="select.keyword" class="select" style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
                <Button class="select" type="primary" style="margin-right: 10px;" @click="getOrders">查询</Button>
              </template>
              <template v-slot:searchContent>
                <div class="select-content-item">
                  <div class="select-content-item-label">所属商户</div>
                  <div>
                    <el-select size="small" :value="select.merchant ? select.merchant.name : ''" placeholder="所属商户" @change="e => select.merchant = e">
                      <el-option v-for="item in merchants" :key="item.id" :value="item" :label="item.name"></el-option>
                    </el-select>
                  </div>
                </div>

                <div class="select-content-item">
                  <div class="select-content-item-label">产品类别</div>
                  <div>
                    <el-cascader
                      ref="cascader"
                      :value="select.productType ? select.productType.name : ''"
                      clearable
                      :show-all-levels="false"
                      size="small"
                      :options="productTypes"
                      :props="{checkStrictly:true,label:'name',value:'id'}"
                      @change="productTypeChange"></el-cascader>
                  </div>
                </div>

                <div class="select-content-item">
                  <div class="select-content-item-label">订单状态</div>
                  <div>
                    <template v-for="(value,key) of orderStates">
                      <el-tag size="small" :effect="select.orderStates == value ? 'dark' : 'plain'" @click="select.orderStates = value" style="margin-right: 6px;">{{value}}</el-tag>
                    </template>
                  </div>
                </div>
              </template>
              <template v-slot:selected>
                <div style="display: flex;padding: 0 0 10px 20px;">
                  <span style="padding-right: 6px">当前搜索条件：</span>
                  <div v-if="select.keyword">
                    <el-tag effect="light" size="small" closable @close="select.keyword = ''">
                      {{select.keyword}}
                    </el-tag>,
                  </div>
                  <div v-if="select.productType">
                    <el-tag effect="light" size="small" closable @close="select.productType = ''">
                      {{select.productType.name}}
                    </el-tag>,
                  </div>
                  <div v-if="select.merchant">
                    <el-tag effect="light" size="small" closable @close="select.merchant = ''">
                      {{select.merchant.name}}
                    </el-tag>,
                  </div>
                  <div v-if="select.orderStates">
                    <el-tag effect="light" size="small" closable @close="select.orderStates = ''">
                      {{select.orderStates}}
                    </el-tag>
                  </div>
                </div>
              </template>
            </xy-selectors>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :table-item="table" :total="total" @pageSizeChange="e => select.pageSize = e" @pageIndexChange="pageChange">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="200" header-align="center">
          <template slot-scope="scope">
            <actions :row="scope.row" @log="showLog(scope.row)"></actions>
<!--            <Button icon="ios-chatbubbles-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>跟进</Button>-->
<!--            <Button v-show="scope.row.state_name == '待处理'" icon="ios-paper-plane-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>分发</Button>-->
<!--            <Button v-show="scope.row.state_name == '待处理'" icon="ios-close" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>取消</Button>-->
<!--            <Button v-show="scope.row.state_name == '已发布'" icon="ios-redo" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>收回</Button>-->
<!--            <Button icon="ios-clipboard-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost @click="selectId = scope.row.id,isShowLog = true">日志</Button>-->
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <orderLog :id="selectId" :is-show.sync="isShowLog" @refresh="getOrders"></orderLog>
  </div>
</template>

<script>
import {getList,index as getTypes} from "@/api/order"
import {parseTime} from "@/utils"

import orderLog from '@/views/order/component/orderLog'
import actions from '@/views/order/component/actions'
export default {
  components:{
    orderLog,
    actions
  },
  data() {
    return {
      selectId:null,
      isShowLog:false,

      merchants:[],
      orderItemStates:[],
      orderStates:[],
      productTypes:[],
      select:{
        page:1,
        pageSize:10,
        merchant:'',
        keyword:'',
        productType:'',
        orderStates:''
      },

      total:0,
      list:[],
      table:[
        {
          prop: "order_name",
          label:"订单名称",
          width:220,
          align:'left',
          fixed:'left'
        },
        {
          prop:'bookable_name',
          label:"订购类型",
          width:110
        },
        {
          prop:"order_total",
          label:"金额",
          width: 110,
          align:'right'
        },
        {
          prop:"created_at",
          label:"下单时间",
          width: 200,
          formatter:(cell,data,value,index)=>{
            return parseTime(new Date(value))
          }
        },
        {
          prop:"paid_at",
          label:"支付时间",
          width: 200,
          formatter:(cell,data,value,index)=>{
            return parseTime(new Date(value))
          }
        },
        {
          prop:"updated_at",
          label:"更新时间",
          width: 200,
          formatter:(cell,data,value,index)=>{
            return parseTime(new Date(value),"{y}-{m}-{d}")
          }
        },
        {
          prop:"memberPromotion.name",
          label:"推广渠道",
          width: 110
        },
        {
          label:"用户信息",
          Fprop:'member',
          multiHd:[
            {
              prop:"name",
              label:"姓名",
              width:110
            },
            {
              label:"头像",
              width:80,
              customFn:(row)=>{
                return (<div style={{display:'flex',alignItems:'center',justifyContent:'center'}}><el-avatar src={row.member.avatar}></el-avatar></div>)
              }
            },
            {
              prop:"wechat_nickname",
              label:"昵称",
              width: 150
            },
            {
              prop:"phone",
              label:"联系电话",
              width: 190
            },
            {
              prop:"area",
              label:"区域",
              width: 110
            },
            {
              prop:"due_date",
              label:"预产期",
              width: 145
            }
          ],
        },
        {
          label:'订单明细',
          multiHd: [
            {
              prop:"product_type.name",
              label:"产品类型",
              width: 200
            },
            {
              prop:"merchant.name",
              label:"服务商家",
              width: 220
            },
            {
              prop:"state_name",
              label:"状态",
              width: 140
            }
          ]
        }
      ],
    }
  },
  methods: {
    productTypeChange(){
      this.select.productType = this.$refs['cascader'].getCheckedNodes()[0].data
      console.log(this.select)
    },

    pageChange(e){
      this.select.page = e
      this.getOrders()
    },

    async getTypes(){
      const res = await getTypes()
      this.merchants = res.merchants
      this.orderItemStates = res.order_item_states
      this.orderStates = res.order_states
      this.productTypes = res.product_types
    },

    async getOrders(){
      const res = await getList({
        page:this.select.page,
        page_size:this.select.pageSize,
        keyword:this.select.keyword,
        product_type_id:this.select.productType,
        merchant_id:this.select.merchant.id
      })
      this.total = res.total
      this.list = res.rows
    },

    showLog(row){
      this.selectId = row.id
      this.isShowLog = true
    }
  },
  mounted() {
    this.getTypes()
    this.getOrders()
  }

}
</script>

<style scoped lang="scss">

.select-content-item{
  display: flex;
  align-items: center;

  margin-bottom: 10px;
  &-label{

    padding: 0 20px;
  }
}

$primaryColor: #bf617c;
::v-deep .ivu-alert-success{
  color:#fff;
  border-color: $primaryColor !important;
  background: rgba(213, 120, 145, 0.8) !important;

  margin: auto 0;
  margin-right: 10px;
}
::v-deep .ivu-icon-ios-close:before{
  //color: #fff;
}
</style>