订单管理

src/views/order/list/index.vue

@@ -0,0 +1,296 @@
+<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 v-model="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="请选择生效状态">
+            <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" />
+        </el-form-item>
+        <el-form-item label="商品名称:">
+          <el-input v-model="form.goodsName" placeholder="请输入商品名称" />
+        </el-form-item>
+        <el-form-item label="操作系统">
+          <el-select v-model="form.platform" placeholder="请选择操作系统">
+            <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
+          </el-select>
+        </el-form-item>
+      </span>
+      <!-- 会员订单 -->
+      <el-form-item v-if="form.searchType === '4'" label="资源平台:">
+        <el-select v-model="form.platformId" placeholder="请选择资源平台">
+          <el-option v-for="item in platformIdOptions" :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="请选择订单状态">
+          <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="请选择支付方式">
+          <el-option v-for="item in payOptions" :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="结束日期"
+          value-format="yyyy-MM-dd HH:mm:ss" />
+      </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">导出</el-button>
+        <el-button type="primary" @click="getDialog">查看</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="订单编号" prop="orderCode" key="orderCode" align="center" />
+      <el-table-column v-if="form.searchType === '2'" label="第三方订单编号" prop="thirdOrderId" key="thirdOrderId"
+        align="center" />
+      <el-table-column label="商品ID" prop="goodsid" key="goodsid" align="center" />
+      <el-table-column label="商品名称" prop="goodsName" key="goodsName" align="center" show-overflow-tooltip />
+      <el-table-column label="订单金额 / 元" prop="amount" key="amount" align="center" />
+      <el-table-column v-if="form.searchType === '2'" label="SIM卡号" prop="simCode" key="simCode" align="center" />
+      <el-table-column v-if="form.searchType === '1'" label="购买类型" prop="charging" key="charging" align="center"
+        :formatter="chargingFormatter" />
+      <el-table-column v-if="form.searchType === '3'" label="订单来源" prop="platform" key="platform" align="center"
+        :formatter="platformFormatter" />
+      <el-table-column v-if="form.searchType === '4'" label="栏目" prop="groupId" key="groupId" align="center"
+        :formatter="groupFormatter" />
+      <el-table-column v-if="form.searchType === '4'" label="服务时长" prop="expirationTime" key="expirationTime"
+        align="center" />
+      <el-table-column v-if="form.searchType === '4'" label="资源平台" prop="platformId" key="platformId" align="center"
+        :formatter="platformIdFormatter" />
+      <el-table-column label="下单时间" prop="createTime" key="createTime" align="center" />
+      <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" />
+      <el-table-column label="用户账号" prop="userName" key="userName" align="center" />
+      <el-table-column label="支付流水号" prop="payId" key="payId" align="center" />
+      <el-table-column v-if="form.searchType === '2'" label="生效状态" prop="flowStatus" key="flowStatus" align="center" :formatter="flowFormatter" />
+      <el-table-column v-if="form.searchType === '2'" label="生效时间" prop="effectTime" key="effectTime" align="center" />
+    </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">
+        <el-table-column type="index" label="序号" align="center"></el-table-column>
+        <el-table-column label="任务ID" align="center"></el-table-column>
+        <el-table-column label="任务名称" align="center"></el-table-column>
+        <el-table-column label="任务类型" align="center"></el-table-column>
+        <el-table-column label="导出时间" align="center"></el-table-column>
+        <el-table-column label="操作" align="center">
+          <template>
+            <el-button type="text">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="dialogTotal > 0" :total="dialogTotal" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+        @pagination="getList" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { list } from '@/api/order/list'
+import { list as sceneList } from '@/api/operation/scene'
+import { payTypeMixin } from '@/mixin/index'
+export default {
+  mixins: [payTypeMixin],
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10,
+        searchType: this.$route.query.searchType
+      },
+      // 列表
+      tableData: [],
+      // 总数据
+      total: 0,
+      // 弹窗
+      dialogVisible: false,
+      // 弹窗表单
+      dialogForm: {},
+      // 弹窗列表
+      dialogTable: [],
+      // 历史数据
+      dialogTotal: 0,
+      // 支付方式
+      payOptions: [{
+        value: 1,
+        label: '微信'
+      }, {
+        value: 2,
+        label: '支付宝'
+      }, {
+        value: 3,
+        label: '苹果支付'
+      }, {
+        value: 4,
+        label: '猫币支付'
+      }],
+      // 支付状态
+      statusOptions: [{
+        value: 1,
+        label: '待支付'
+      }, {
+        value: 2,
+        label: '支付成功'
+      }, {
+        value: 3,
+        label: '支付失败'
+      }, {
+        value: 4,
+        label: '取消'
+      }],
+      // 栏目
+      sceneOptions: [],
+      // 生效状态
+      flowOptions: [{
+        value: 0,
+        label: '已生效'
+      }, {
+        value: 1,
+        label: '待生效'
+      }, {
+        value: 2,
+        label: '已失效'
+      }],
+      // 操作系统
+      platformOptions: [{
+        value: 1,
+        label: 'Android'
+      }, {
+        value: 2,
+        label: 'iOS'
+      }],
+      platformIdOptions: [{
+        value: 6,
+        label: 'QQ音乐'
+      }, {
+        value: 9,
+        label: '酷狗音乐'
+      }, {
+        value: 10,
+        label: '爱听音乐'
+      }]
+    }
+  },
+  mounted() {
+    this.getScene()
+    this.getList()
+  },
+  methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      list(this.form).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          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() {
+      this.download('system/xxxx/export', {
+        ...this.form
+      }, `post_${new Date().getTime()}.xlsx`)
+    },
+
+    // 弹窗
+    getDialog() {
+      this.dialogVisible = true
+    },
+
+    // 栏目
+    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 this.selectDictLabel(this.sceneOptions, row.groupId)
+    },
+
+    chargingFormatter(row) {
+      return this.selectDictLabel(this.payTypeOptions, row.charging)
+    },
+
+    platformFormatter(row) {
+      return this.selectDictLabel(this.platformOptions, row.platform)
+    },
+
+    platformIdFormatter(row) {
+      return this.selectDictLabel(this.platformIdOptions, row.platformId)
+    },
+
+    flowFormatter(row) {
+      return this.selectDictLabel(this.flowOptions, row.flowStatus)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>