ohplay_system/src/views/order/list/index.vue

<!-- 订单管理 商品订单 -->

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <el-form-item label="订单编号:">
        <el-input v-model="form.orderCode" placeholder="请输入订单编号" clearable />
      </el-form-item>
      <el-form-item label="用户账号:">
        <el-input v-model="form.userName" placeholder="请输入用户账户" clearable />
      </el-form-item>
      <el-form-item label="用户手机号:">
        <el-input type="number" v-model.number="form.phone" placeholder="请输入用户手机号" clearable />
      </el-form-item>
      <!-- 流量订单 -->
      <span v-if="form.searchType === '2'">
        <el-form-item label="SIM卡号:">
          <el-input v-model="form.simCode" placeholder="请输入SIM卡号" clearable />
        </el-form-item>
        <el-form-item label="生效状态">
          <el-select v-model="form.flowStatus" placeholder="请选择生效状态" clearable>
            <el-option v-for="item in flowOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
      </span>
      <!-- 除充值订单 -->
      <span v-if="form.searchType !== '3'">
        <el-form-item label="商品ID:">
          <el-input v-model="form.goodsid" placeholder="请输入商品ID" clearable />
        </el-form-item>
        <el-form-item label="商品名称:">
          <el-input v-model="form.goodsName" placeholder="请输入商品名称" clearable />
        </el-form-item>
      </span>
      <el-form-item label="操作系统" v-else>
        <el-select v-model="form.platform" placeholder="请选择操作系统" clearable>
          <el-option v-for="item in systemOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <!-- 会员订单  int  platformId  字段平台ID：灵活配置多个平台的 0-vip会员 1-联通  -->
      <el-form-item v-if="form.searchType === '1' || form.searchType === '4'" label="资源平台:">
        <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付状态:">
        <el-select v-model="form.status" placeholder="请选择支付状态" clearable>
          <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式:">
        <el-select v-model="form.payType" placeholder="请选择支付方式" clearable>
          <el-option v-for="item in payOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <!-- 商品订单 -->
      <el-form-item v-if="form.searchType === '1'" label="订单内容类型：">
        <el-select v-model="form.goodsType" placeholder="请选择订单内容类型" clearable>
          <el-option v-for="item in goodsTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间:">
        <el-date-picker v-model="form.listDate" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" icon="el-icon-download" @click="handleExport"
          v-hasPermi="['order:list:export']">导出</el-button>
        <el-button type="primary" @click="getDialog" v-hasPermi="['order:list:export']">查看</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="订单编号" prop="orderCode" key="orderCode" align="center" show-overflow-tooltip />
      <!-- 流量订单 -->
      <span v-if="form.searchType === '2'">
        <el-table-column label="第三方订单编号" key="thirdOrderId" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              scope.row.thirdOrderId | empty(scope.row.thirdOrderId)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SIM卡号" prop="simCode" key="simCode" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.simCode | empty(scope.row.simCode) }}</span>
          </template>
        </el-table-column>
      </span>
      <el-table-column label="商品ID" prop="goodsid" key="goodsid" align="center" show-overflow-tooltip />
      <el-table-column label="商品名称" prop="goodsName" key="goodsName" align="center" show-overflow-tooltip />
      <el-table-column label="订单金额 / 元" prop="amount" key="amount" align="center" :formatter="amountFormatter" />
      <!-- 商品订单 -->
      <span v-if="form.searchType === '1'">
        <el-table-column label="购买类型" prop="charging" key="charging" align="center" :formatter="chargingFormatter" />
        <el-table-column label="订单内容类型" prop="goodsType" key="goodsType" align="center"
          :formatter="goodsTypeFormatter" />
      </span>
      <!-- 充值订单 -->
      <el-table-column v-if="form.searchType === '3'" label="订单来源" prop="platform" key="platform" align="center"
        :formatter="platformFormatter" />
      <!-- 会员订单 -->
      <span v-if="form.searchType === '4'">
        <el-table-column label="栏目" prop="groupId" key="groupId" align="center" :formatter="groupFormatter" />
        <el-table-column label="服务时长" prop="expirationTime" key="expirationTime" align="center"
          :formatter="timeFormatter" />
      </span>
      <!-- 商品订单 或 会员订单 -->
      <!-- <el-table-column v-if="['1', '4'].includes(form.searchType)" label="资源平台" prop="platformId" key="platformId"
        align="center" :formatter="platformIdFormatter" /> -->
      <el-table-column label="下单时间" prop="createTime" key="createTime" align="center" show-overflow-tooltip />
      <el-table-column label="支付方式" prop="payType" key="payType" align="center" :formatter="payTypeFormatter" />
      <el-table-column label="支付状态" prop="status" key="status" align="center" :formatter="statusFormatter" />
      <el-table-column label="支付时间" prop="goodsUpdateTime" key="goodsUpdateTime" align="center" show-overflow-tooltip />
      <el-table-column label="用户账号" prop="userName" key="userName" align="center" show-overflow-tooltip />
      <el-table-column label="支付流水号" key="payId" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.payId | empty(scope.row.payId) }}</span>
        </template>
      </el-table-column>
      <!-- 流量订单 -->
      <span v-if="form.searchType === '2'">
        <el-table-column label="生效状态" prop="flowStatus" key="flowStatus" align="center" :formatter="flowFormatter" />
        <el-table-column label="生效时间" key="effectTime" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              scope.row.effectTime | empty(scope.row.effectTime)
            }}</span>
          </template>
        </el-table-column>
      </span>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
      @pagination="getList" />
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="导出历史" width="1000px">
      <el-table :data="dialogTable" v-loading="dialogLoading">
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column label="任务ID" prop="msgId" align="center" />
        <el-table-column label="任务名称" prop="jobName" align="center" />
        <el-table-column label="任务类型" prop="jobType" align="center" />
        <el-table-column label="导出时间" prop="updateTime" align="center" />
        <el-table-column label="操作人" prop="useName" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="getDownLoad(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="dialogTotal > 0" :total="dialogTotal" :page.sync="dialogForm.pageNum"
        :limit.sync="dialogForm.pageSize" @pagination="getDialogList" />
    </el-dialog>
  </div>
</template>

<script>
import { list as sceneList } from "@/api/operation/scene";
import { dialogList, download, downLoadHistory, list } from "@/api/order/list";
import {
  payTypeMixin,
  platformMixin,
  serviceTimeMixin,
  systemMixin,
} from "@/mixin/index";
export default {
  name:"OrderList",
  mixins: [payTypeMixin, systemMixin, serviceTimeMixin, platformMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      dialogLoading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10,
        searchType: this.$route.query.searchType,
      },
      // 列表
      tableData: [],
      // 总数据
      total: 0,
      // 弹窗
      dialogVisible: false,
      // 弹窗表单
      dialogForm: {
        pageNum: 1,
        pageSize: 10,
        searchType: this.$route.query.searchType,
      },
      // 弹窗列表
      dialogTable: [],
      // 历史数据
      dialogTotal: 0,
      // 支付方式
      payOptions: [
        {
          value: 1,
          label: "微信",
        },
        {
          value: 2,
          label: "支付宝",
        },
        {
          value: 6,
          label: "系统赠送",
        },
        {
          value: 7,
          label: "后台手动赠送",
        },
      ],
      // 支付状态
      statusOptions: [
        {
          value: 2,
          label: "支付成功",
        },
        {
          value: 3,
          label: "支付失败",
        },
      ],
      // 栏目
      sceneOptions: [],
      // 生效状态
      flowOptions: [
        {
          value: 0,
          label: "已生效",
        },
        {
          value: 1,
          label: "待生效",
        },
        {
          value: 2,
          label: "已失效",
        },
      ],
      // 订单内容类型
      goodsTypeOptions: [
        {
          value: 4,
          label: "播客专辑",
        },
        {
          value: 17,
          label: "歌单",
        },
      ],
      // 时间搜索不超过1个月
      selectDate: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
    };
  },
  mounted() {
    this.getScene();
    this.getList();
    this.getPlatform({});
    this.payOptions.push(
      this.form.searchType === "3"
        ? {
          value: 3,
          label: "苹果支付",
        }
        : {
          value: 4,
          label: "猫币支付",
        }
    );
  },
  methods: {
    // 列表
    getList() {
      this.loading = true;
      list(this.form).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.records;
          this.tableData.forEach((item) => {
            if (item.platformId === 0) {
              item.platformId = null;
            }
          });
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },

    // 搜索
    getSearch() {
      this.form.pageNum = 1;
      this.getList();
    },

    // 重置
    getRefresh() {
      this.form = {
        pageNum: 1,
        pageSize: 10,
        searchType: this.$route.query.searchType,
      };
      this.getList();
    },

    // 导出
    handleExport() {
      download(this.form).then((res) => {
        if (res.code === 0) {
          this.$message.success(`${res.data}`);
        }
      });
    },

    // 弹窗
    getDialog() {
      this.dialogVisible = true;
      this.getDialogList();
    },

    // 历史列表
    getDialogList() {
      this.dialogLoading = true;
      dialogList(this.dialogForm).then((res) => {
        if (res.code === 0) {
          this.dialogTable = res.data.records;
          this.dialogTotal = res.data.total;
          this.dialogLoading = false;
        }
      });
    },

    // 历史下载
    getDownLoad(row) {
      this.$confirm(`是否下载${row.jobName}?`, "提示", {
        type: "warning",
      })
        .then(() => {
          downLoadHistory(row.msgId).then((res) => {
            if (res.code === 0) {
              this.$message.success("下载成功！");
              window.location.href = res.data;
              this.getDialogList();
            }
          });
        })
        .catch(() => { });
    },

    // 栏目
    getScene() {
      sceneList().then((res) => {
        if (res.code === 0) {
          res.data.map((i) => {
            this.sceneOptions.push({
              value: i.id,
              label: i.name,
            });
          });
        }
      });
    },

    // 字典翻译
    payTypeFormatter(row) {
      return this.selectDictLabel(this.payOptions, row.payType);
    },

    statusFormatter(row) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },

    groupFormatter(row) {
      return row.groupId === null
        ? "-"
        : this.selectDictLabel(this.sceneOptions, row.groupId);
    },

    chargingFormatter(row) {
      return this.selectDictLabel(this.payTypeOptions, row.charging);
    },

    platformFormatter(row) {
      return this.selectDictLabel(this.systemOptions, row.platform);
    },

    platformIdFormatter(row) {
      return row.platformId === null
        ? "-"
        : this.selectDictLabel(this.platformOptions, row.platformId);
    },

    flowFormatter(row) {
      return row.flowStatus === null
        ? "-"
        : this.selectDictLabel(this.flowOptions, row.flowStatus);
    },

    amountFormatter(row) {
      return row.amount.toFixed(2);
    },

    timeFormatter(row) {
      return this.selectDictLabel(this.serviceTimeOptions, row.expirationTime);
    },

    goodsTypeFormatter(row) {
      return this.selectDictLabel(this.goodsTypeOptions, row.goodsType);
    },
  },
  // 过滤器
  filters: {
    empty(row) {
      return !row ? "-" : row;
    },
  },
};
</script>