<!--积分兑换订单-->
<template>
    <div class="app-container">
      <el-tabs type="border-card">
        <el-tab-pane label="积分商城订单">
          <el-alert
            title="当前页面订单为油站小程序端用户在积分商城兑换的订单记录,如有付款金额,付款订单请在增值性订单列表中查看,类型为:积分商城"
            type="error">
          </el-alert>

          <points-mall></points-mall>

<!--            <div class="top-dis">-->
<!--              <div class="top-app-sou">-->
<!--                <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">-->
<!--                  <el-form-item label="名称">-->
<!--                    <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>-->
<!--                  </el-form-item>-->
<!--                </el-form>-->
<!--              </div>-->
<!--              <div style="margin-left: 10px">-->
<!--                <el-button type="primary" icon="el-icon-search">查询</el-button>-->
<!--              </div>-->
<!--            </div>-->

<!--&lt;!&ndash;          列表&ndash;&gt;-->
<!--          <div class="bottom-dis">-->
<!--            <div class="wgang">-->
<!--              <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--                <el-tab-pane label="全部订单" name="first"></el-tab-pane>-->
<!--                <el-tab-pane name="first1">-->
<!--                  <div slot="label" class="hgang"> 待处理/待发货 <span class="hongdian">1</span>  </div>-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane name="first2">-->
<!--                  <div slot="label" class="hgang"> 已完成/已发货 <span class="hongdian">1</span>  </div>-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane name="first3">-->
<!--                  <div slot="label" class="hgang"> 已拒绝/已退款 <span class="hongdian">1</span>  </div>-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane name="first4">-->
<!--                  <div slot="label" class="hgang"> 未付款订单 <span class="hongdian">1</span>  </div>-->
<!--                </el-tab-pane>-->

<!--              </el-tabs>-->
<!--            </div>-->
<!--            <div class="table-box">-->
<!--              <el-table-->
<!--                :data="tableData"-->
<!--                style="width: 100%">-->
<!--                <el-table-column type="expand">-->
<!--                  <template slot-scope="props">-->
<!--                    <el-form label-position="left" inline class="demo-table-expand">-->
<!--                      <el-form-item label="名称">-->
<!--                        <span>{{ props.row.name }}</span>-->
<!--                      </el-form-item>-->
<!--                    </el-form>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="date"-->
<!--                  label="用户信息"-->
<!--                  width="150">-->
<!--                </el-table-column>-->
<!--                <el-table-column label="余额">-->
<!--                  <el-table-column-->
<!--                    prop="name"-->
<!--                    label="储值卡"-->
<!--                    width="120">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="name"-->
<!--                    label="升值卡"-->
<!--                    width="120">-->
<!--                  </el-table-column>-->

<!--                </el-table-column>-->
<!--                <el-table-column label="会员等级">-->
<!--                  <el-table-column-->
<!--                    prop="province"-->
<!--                    label="汽油"-->
<!--                    width="120">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="city"-->
<!--                    label="柴油"-->
<!--                    width="120">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="city"-->
<!--                    label="天然气"-->
<!--                    width="120">-->
<!--                  </el-table-column>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="统计">-->
<!--                  <el-table-column-->
<!--                    prop="province"-->
<!--                    label="加油金"-->
<!--                    width="120">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="city"-->
<!--                    label="积分"-->
<!--                    width="120">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="city"-->
<!--                    label="消费次数"-->
<!--                    width="120">-->
<!--                  </el-table-column>-->
<!--                </el-table-column>-->

<!--                <el-table-column-->
<!--                  prop="zip"-->
<!--                  label="实体卡号"-->
<!--                  width="220">-->
<!--                </el-table-column>-->

<!--                <el-table-column-->
<!--                  prop="zip"-->
<!--                  label="状态"-->
<!--                  width="120">-->
<!--                </el-table-column>-->

<!--                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-button-->
<!--                      size="mini"-->
<!--                      type="text"-->
<!--                      icon="el-icon-edit"-->
<!--                    >更多操作</el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-table>-->
<!--            </div>-->
<!--            <div class="pagination-box">-->
<!--              <el-pagination-->
<!--                background-->
<!--                layout="prev, pager, next"-->
<!--                :total="1000">-->
<!--              </el-pagination>-->
<!--            </div>-->
<!--          </div>-->

        </el-tab-pane>
        <el-tab-pane label="积分收银台订单">
          <el-alert
            title="PC积分收银台在线兑换订单记录,收银台订单无需确认操作,如有付款金额,付款订单请在增值性订单列表中查看,类型为:积分收银"
            type="error">
          </el-alert>

          <points-cashier></points-cashier>

<!--          <div class="bottom-dis">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>统计</span>-->
<!--          </div>-->
<!--          <div class="box-gang">-->
<!--            <div class="box" v-for="(item,index) in 7" :key="index">-->
<!--              <div class="size-hui">订单总数</div>-->
<!--              <div class="size-bole">55</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          </div>-->
<!--          <div class="table-box">-->
<!--            <el-table-->
<!--              :data="tableData"-->
<!--              style="width: 100%">-->
<!--              <el-table-column type="expand">-->
<!--                <template slot-scope="props">-->
<!--                  <el-form label-position="left" inline class="demo-table-expand">-->
<!--                    <el-form-item label="名称">-->
<!--                      <span>{{ props.row.name }}</span>-->
<!--                    </el-form-item>-->
<!--                  </el-form>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="date"-->
<!--                label="用户信息"-->
<!--                width="150">-->
<!--              </el-table-column>-->
<!--              <el-table-column label="余额">-->
<!--                <el-table-column-->
<!--                  prop="name"-->
<!--                  label="储值卡"-->
<!--                  width="120">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="name"-->
<!--                  label="升值卡"-->
<!--                  width="120">-->
<!--                </el-table-column>-->
<!--          -->
<!--              </el-table-column>-->
<!--              <el-table-column label="会员等级">-->
<!--                <el-table-column-->
<!--                  prop="province"-->
<!--                  label="汽油"-->
<!--                  width="120">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="city"-->
<!--                  label="柴油"-->
<!--                  width="120">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="city"-->
<!--                  label="天然气"-->
<!--                  width="120">-->
<!--                </el-table-column>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="统计">-->
<!--                <el-table-column-->
<!--                  prop="province"-->
<!--                  label="加油金"-->
<!--                  width="120">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="city"-->
<!--                  label="积分"-->
<!--                  width="120">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="city"-->
<!--                  label="消费次数"-->
<!--                  width="120">-->
<!--                </el-table-column>-->
<!--              </el-table-column>-->
<!--          -->
<!--              <el-table-column-->
<!--                prop="zip"-->
<!--                label="实体卡号"-->
<!--                width="220">-->
<!--              </el-table-column>-->
<!--          -->
<!--              <el-table-column-->
<!--                prop="zip"-->
<!--                label="状态"-->
<!--                width="120">-->
<!--              </el-table-column>-->
<!--          -->
<!--              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button-->
<!--                    size="mini"-->
<!--                    type="text"-->
<!--                    icon="el-icon-edit"-->
<!--                  >更多操作</el-button>-->
<!--          -->
<!--                </template>-->
<!--              </el-table-column>-->
<!--          -->
<!--            </el-table>-->
<!--          </div>-->
<!--          <div class="pagination-box">-->
<!--          <el-pagination-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            :total="1000">-->
<!--          </el-pagination>-->
<!--          </div>-->
        </el-tab-pane>

      </el-tabs>
    </div>
</template>

<script>
import PointsMall from '@/views/integral/order/pointsMall'
import PointsCashier from "@/views/integral/order/pointsCashier";

export default {
  name: "order_Integral",
  components: {PointsCashier, PointsMall},
  data(){
    return{
      labelPosition: 'right',
      radio1:'',
      activeName: 'first',
      formLabelAlign: {
        name: '',
        },
      tableData: [{
        date: '2016-05-03',
        name: '王小狼',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  },
  methods:{
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }

}
</script>

<style scoped>
.app-container{
    width: 100%;
    height: 100%;
    background: #f6f8f9;
  }
  .clearfix{
    width: 100%;
    margin-bottom: 10px;
  }
  .box-card{
    width: 100%;
    margin-bottom: 15px;
  }
  .box-gang{
    width: 100%;
    display: flex;
    align-items: center;
  }
  .box{
    width: 200px;
    box-sizing: border-box;
    padding: 10px;
    background: #f9f9f9;
    height: 86px;
    margin-right: 10px;
  }
  .size-hui{
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .size-bole{
    font-weight: bold;
  }
  .wgang{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

  }
  .table-box{
    width: 100%;
  }
  .pagination-box{
    width: 100%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top-app-sou{
    width: 20%;
  }
  .top-dis{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
  }
  .bottom-dis{
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
  }
  .hongdian{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: crimson;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hgang{
    display: flex;
  }

.box1{
  //box-sizing: border-box;
  padding: 5px;
  //background: #f9f9f9;
  margin-right: 20px;
  margin-bottom: 20px;
  padding-left: 20px;

  width: 211px;
  height: 60px;
  background: rgba(255,150,85,0.05);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #FF9655;
}
</style>
