food/src/components/QuestTabs.vue

<template>
  <div class="p-15">
    <el-collapse v-model="activeNames" accordion>
      <template v-if="list.length != 0">
        <el-collapse-item class="mainFontColor" v-for="(item, index) in list" :key="item.id"
          :title="'订单ID：' + item.id + ' | 时间：' + parseTime(item.addtime)" :name="item.id">
          <el-descriptions direction="vertical" :column="3" border>
            <el-descriptions-item label="状态" span="1">{{ orderState(item.status, item.back, item.quest) }}
            </el-descriptions-item>
            <el-descriptions-item label="订单号" span="2">{{ item.order_sn }}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{ item.name }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ item.tel }}</el-descriptions-item>
            <el-descriptions-item label="价格">{{ item.price }}</el-descriptions-item>
            <el-descriptions-item label="货品总数">{{ item.product_num }}</el-descriptions-item>
            <el-descriptions-item label="收货站点">{{ item.receive_site_name }}</el-descriptions-item>
            <el-descriptions-item label="取餐号">{{ item.food_sn }}</el-descriptions-item>
            <el-descriptions-item label="订单详情" span="3">
              <el-table :data="item.products" style="width: 100%">
                <el-table-column prop="pid" label="ID" width="60">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="pro_buff" label="属性">
                </el-table-column>
                <el-table-column prop="num" label="数量" width="60">
                </el-table-column>
              </el-table>
            </el-descriptions-item>
            <el-descriptions-item :label="item.back == 0 ? '客户备注' : '退货缘由'" span="3">
              {{ item.back == 0 ? item.remark != '' ? item.remark : '无' : item.back_remark }}
            </el-descriptions-item>
            <el-descriptions-item label="操作" span="3">
              <el-button-group v-if="item.back == 1">
                <el-button type="danger" icon="iconfont icon-zhengque">
                  <font class="m-l-5">同意退款</font>
                </el-button>
                <el-button @click="questAss(item.id, 'back', 'zero')" type="warning" icon="iconfont icon-cuowu">
                  <font class="m-l-5">拒绝退款</font>
                </el-button>
              </el-button-group>
              <el-button-group v-else-if="item.back == 0 && item.quest == 0">
                <el-button @click="questAss(item.id, 'quest', '1')" type="primary" icon="iconfont icon-chengjie">
                  <font class="m-l-5">承接订单</font>
                </el-button>
                <el-button type="danger" icon="iconfont icon-cuowu">
                  <font class="m-l-5">取消订单</font>
                </el-button>
                <el-button type="info" icon="iconfont icon-dayin">
                  <font class="m-l-5" @click="orderPrint(index)">打印小票</font>
                </el-button>
              </el-button-group>
              <el-button-group v-else-if="item.back == 0 && item.quest == 1 && item.status == 20">
                <el-button type="danger" icon="iconfont icon-cuowu">
                  <font class="m-l-5">取消订单</font>
                </el-button>
                <el-button type="info" icon="iconfont icon-dayin">
                  <font class="m-l-5" @click="orderPrint(index)">打印小票</font>
                </el-button>
              </el-button-group>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </template>
      <div v-else class="p-t-60 p-b-60 seatFontColor fc">
        <i class="iconfont icon-meiyoushuju f-s-100"></i>
        <div>空空如也</div>
      </div>
    </el-collapse>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { questAss } from '@/utils/api/table'

export default {
  data () {
    return {
      list: [],
      activeNames: []
    }
  },
  props: ['fil'],
  computed: {
    /**
     * @description: 获取订单列表 ps:待发货及待收货 并没有发起退款和正在退款状态
     */
    questList () {
      return this.$store.state.questList
    }
  },
  methods: {
    parseTime, // 时间戳格式化
    questAss,
    orderState (status, back, quest) {
      if (back === 1) {
        return '申请退款'
      } else {
        if (quest === 1) {
          return '已确认接单'
        } else {
          return '未确认订单'
        }
      }
    },
    /**
         * @description: 通过蓝牙打印机并打印小票
         * @param {number} index 订单列表下标索引
         */
    orderPrint (index) {
      // 订单文本编辑
      // console.log(this.list[index])
      // let con
      // con = '无人机外卖送餐#' + this.list[index].food_sn + '\n\n'
      // this.btPrint(con, '10', '1')
      // con = ''
      // con += '------------客户信息------------\n'
      // con += '昵称：' + this.list[index].name + '\n'
      // const tel = this.list[index].tel.substr(0, 3) + '****' + this.list[index].tel.substr(7)
      // con += '电话：' + tel + '\n\n'
      // con += '------------订单信息------------\n'
      // this.btPrint(con, '0', '0')
      // con = ''
      // con += '取餐号：' + this.list[index].food_sn + '\n'
      // this.btPrint(con, '31', '0')
      // con = ''
      // con += '单号：' + this.list[index].order_sn + '\n'
      // con += '收货站点：' + this.list[index].receive_site_name + '\n'
      // con += '下单时间：' + this.parseTime(this.list[index].addtime) + '\n\n'
      // if (this.list[index].remark !== '') {
      //   con += '------------客户备注------------\n'
      //   con += this.list[index].remark + '\n\n'
      // }
      // con += '--------------商品--------------\n'
      // this.list[index].products.forEach(element => {
      //   con += 'ID：' + element.pid + '\n'
      //   con += '品名：' + element.name + '\n'
      //   if (element.pro_buff !== '') {
      //     con += '规格: ' + element.pro_buff + '\n'
      //   }
      //   con += '数量：' + element.num + '\n'
      //   con += '单价：' + element.price + '\n'
      //   con += '················\n'
      // })
      // con += '货品总数：' + this.list[index].product_num + '\n'
      // con += '货品总额：' + this.list[index].price + '\n\n'
      // con += '---------加盟无人机送餐---------\n'
      // this.btPrint(con, '0', '0')
      // con = ''
      // var data = 'https://flicube.com'
      // var align = 1
      // var model = 49
      // var size = 32
      // var eclevel = 50
      // BTPrinter.printQRCode(function (data) {
      //   console.log('Success')
      //   console.log(data)
      // }, function (err) {
      //   console.log('Error')
      //   console.log(err)
      // }, data, align, model, size, eclevel)
      // con += '\n请扫上列二维码关注我们\n\n\n'
      // this.btPrint(con, '0', '1')
    },
    /**
         * @description: cordova 打印api接口
         * @param {string} str 内容
         * @param {string} size 字体大小预设
         * @param {string} algin 对齐
         */
    btPrint (str, size = '0', align = '0') {
      // BTPrinter.printTitle(function (data) {
      //   console.log('Success')
      //   console.log(data)
      // }, function (err) {
      //   console.log('Error')
      //   console.log(err)
      // }, str, size, align)// string, size, align
    },
    /**
     * @description: 按父组件的fil参数 条件 显示列表
     * @param {*} list 要处理的列表
     */
    computeQuestList () {
      if (this.fil === 2) {
        this.list = this.questList.filter(item => item.back === '1')
      } else if (this.fil === 0) {
        this.list = this.questList.filter(item => item.back === '0' && item.quest === '0' && item.status === '20')
      } else if (this.fil === 1) {
        this.list = this.questList.filter(item => item.back === '0' && item.quest === '1' && item.status === '20')
      }
    }
  },
  watch: {
    questList () {
      this.computeQuestList()
    }
  },
  mounted () {
    this.computeQuestList()
  }
}
</script>

<style lang="scss" scoped></style>