merchant-web/src/views/modules/datacenter/order-analysis/index.vue

<template>
  <div>
    <div>
      <el-select
        style="margin-right: 20px"
        v-model="value1"
        placeholder="请选择统计类型"
      >
        <el-option
          v-for="item in [
            { value: '1', label: '1' },
            { value: '2', label: '2' },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary">查询</el-button>
    </div>
    <div class="product">
      <div style="font-size: 18px">订单分析</div>
      <div class="stat-list">
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">下单订单数量</div>
            <div style="font-size: 20px" class="stat-value">435</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">支付订单数量</div>
            <div style="font-size: 20px" class="stat-value">45</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">有效订单数量</div>
            <div style="font-size: 20px" class="stat-value">34</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">有效订单率</div>
            <div style="font-size: 20px" class="stat-value">199</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">订单实付金额（元）</div>
            <div style="font-size: 20px" class="stat-value">1256</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">订单退款金额（元）</div>
            <div style="font-size: 20px" class="stat-value">1256</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">售后订单数量</div>
            <div style="font-size: 20px" class="stat-value">34</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">售后订单率（%）</div>
            <div style="font-size: 20px" class="stat-value">199</div>
          </div>
        </div>
      </div>
    </div>
    <div style="padding: 20px; border: 1px solid #ccc; margin-top: 20px">
      <div style="font-size: 18px; margin-bottom: 40px">订单结算明细</div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="value"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结算时间">
          <el-date-picker
            v-model="value"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="formInline.marketId" placeholder="请选择状态">
            <el-option
              v-for="item in [
                { label: '全部', value: '' },
                { label: '进行中', value: '1' },
                { label: '已结算', value: '2' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="primary">导出</el-button>
        </el-form-item>
      </el-form>
      <div
        style="
          background: #edf4ff;
          height: 80px;
          margin-bottom: 10px;
          font-size: 16px;
        "
        class="stat-list"
      >
        <div>
          <span>退款金额</span><span style="margin-left: 10px">￥</span
          ><span style="font-weight: 600; font-size: 22px">999</span>
        </div>
        <div>
          <span>订单支出</span><span style="margin-left: 10px">￥</span
          ><span style="font-weight: 600; font-size: 22px">999</span>
        </div>
        <div>
          <span>待入账金额</span><span style="margin-left: 10px">￥</span
          ><span style="font-weight: 600; font-size: 22px">888</span>
        </div>
        <div>
          <span>已入账金额</span><span style="margin-left: 10px">￥</span
          ><span style="font-weight: 600; font-size: 22px">888</span>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" type="index" label="排名" width="50">
        </el-table-column>
        <el-table-column prop="date" label="订单编号"> </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="下单时间"
          width="140"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="结算时间"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="实付金额（元）"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="退款金额（元）"
          width="140"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="订单支出（元）"
          width="140"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="入账金额（元）"
          width="140"
        >
        </el-table-column>
        <el-table-column align="center" prop="name" label="状态" width="140">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value: "",
      formInline: {
        marketId: "",
        shopId: "",
        name: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
    };
  },
  methods: {
    init() {},
  },
};
</script>

<style lang="scss" scoped>
.product {
  margin-top: 20px;
  padding: 10px;
  //   border: 1px solid #ccc;
  background: #edf4ff;
}
.stat-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  //   margin-top: 20px;
  padding: 10px;
  //   border: 1px solid #ccc;
}
.stat-item {
  width: 21%;
  margin: 30px 0;
  display: flex;
  align-items: center;
}
.stat-icon {
  background: rgb(99 152 252);
  width: 60px;
  height: 60px;
  border-radius: 3px;
}
.stat-right {
  margin-left: 12px;
  font-size: 18px;
}
.stat-title {
  //   color: #969696;
  font-weight: 600;
  margin-bottom: 10px;
}
.grid-content {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}
</style>