新增话费模块

src/api/order.js

@@ -41,6 +41,14 @@ export function VipOrderListApi(data) {
 export function TBOrderListApi(data) {
   return request.get(`third/order/tb`, data)
 }
+
+/**
+ * @description 订单 -- 列表 -- 话费
+ */
+export function HFOrderListApi(data) {
+  return request.get(`third/order/hf`, data)
+}
+
 /**
  * @description 订单 -- 表头
  */

src/filters/commFilter.js

@@ -145,6 +145,29 @@ export function takeOrderStatusFilter(status) {
 
 
 /**
+ * @description 话费的订单状态
+ */
+export function HFOrderStatusFilter(status) {
+  const statusMap = {
+    '0': '待支付',
+    '1': '已付充值中',
+    '2': '充值成功',
+    '3': '充值失败需要退款',
+    '4': '退款成功',
+    '5': '已超时',
+    '6': '待充值',
+    '7': '已匹配',
+    '8': '已存单',
+    '9': '已取消',
+    '10': '返销',
+    '11': '部分到账',
+    '12': '取消中',
+  }
+  return statusMap[status]
+}
+
+
+/**
  * @description 京东的订单状态
  */
 export function JDOrderStatusFilter(status) {

src/router/modules/order.js

@@ -84,6 +84,14 @@ const orderRouter =
         },
         component: () => import('@/views/order/tb/index')
       },
+      {
+        path: 'huafei',
+        name: 'OrderHuafei',
+        meta: {
+          title: '话费'
+        },
+        component: () => import('@/views/order/huafei/index')
+      },
     ]
   }
 

src/views/order/huafei/index.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form size="small" label-width="100px">
+            <el-form-item label="订单状态：">
+              <el-radio-group v-model="tableFrom.status" type="button" @change="getList(1)">
+                <el-radio-button label="0">待支付 </el-radio-button>
+                <el-radio-button label="1">已付充值中</el-radio-button>
+                <el-radio-button label="2">充值成功 </el-radio-button>
+                <el-radio-button label="3">充值失败需要退款 </el-radio-button>
+                <el-radio-button label="4">退款成功 </el-radio-button>
+                <el-radio-button label="5">已超时 </el-radio-button>
+                <el-radio-button label="6">待充值 </el-radio-button>
+                <el-radio-button label="7">已匹配 </el-radio-button>
+                <el-radio-button label="8">已存单 </el-radio-button>
+                <el-radio-button label="9">已取消</el-radio-button>
+                <el-radio-button label="10">返销</el-radio-button>
+                <el-radio-button label="11">部分到账</el-radio-button>
+                <el-radio-button label="12">取消中</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="返金状态：">
+              <el-radio-group v-model="tableFrom.bill_status" type="button" @change="getList(1)">
+                <el-radio-button label="0">平台未结算</el-radio-button>
+                <el-radio-button label="1">已结算</el-radio-button>
+                <el-radio-button label="2">失效</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="时间选择：" class="width100">
+              <el-radio-group
+                v-model="tableFrom.date"
+                type="button"
+                class="mr20"
+                size="small"
+                @change="selectChange(tableFrom.date)"
+              >
+                <el-radio-button
+                  v-for="(item,i) in fromList.fromTxt"
+                  :key="i"
+                  :label="item.val"
+                >{{ item.text }}</el-radio-button>
+              </el-radio-group>
+              <el-date-picker
+                v-model="timeVal"
+                value-format="yyyy/MM/dd"
+                format="yyyy/MM/dd"
+                size="small"
+                type="daterange"
+                placement="bottom-end"
+                placeholder="自定义时间"
+                style="width: 250px;"
+                @change="onchangeTime"
+              />
+            </el-form-item>
+            <el-form-item label="关键字：" class="width100">
+              <el-input
+                v-model="tableFrom.keywords"
+                placeholder="请输入关键字搜索手机号/uid"
+                class="selWidth"
+                size="small"
+              >
+                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)" />
+              </el-input>
+            </el-form-item>
+            <el-form-item label="订单号：" class="width100">
+              <el-input
+                v-model="tableFrom.order_sn"
+                placeholder="请输入订单号"
+                class="selWidth"
+                size="small"
+              >
+                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)" />
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="ResetSearch mr10" size="small" @click="reset('tableFrom')">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <el-table
+        v-loading="listLoading"
+        :data="tableData.data"
+        style="width: 100%"
+        size="mini"
+        class="table"
+        highlight-current-row
+        :cell-class-name="addTdClass"
+      >
+        <el-table-column prop="order_huafei_id" label="订单id" min-width="100" />
+        <el-table-column label="UID" min-width="60">
+          <template slot-scope="scope">
+            <span>{{ scope.row.uid}}</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="pid" label="推广者pid" min-width="100" /> -->
+        <el-table-column label="账号" min-width="120">
+          <template slot-scope="scope">
+            <span>{{ scope.row.account}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="订单编号" min-width="170">
+          <template slot-scope="scope">
+            <span style="display: block;" v-text="scope.row.order_sn" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="order_number" label="平台单号" min-width="160" />
+        <el-table-column prop="amount_price" label="充值金额" min-width="100" />
+        <el-table-column prop="fanli_price" label="返利金额" min-width="130" />
+        <el-table-column prop="cost_price" label="成本金额" min-width="130" />
+        <el-table-column prop="arrived_amount" label="到账金额" min-width="130" />
+        <el-table-column prop="pay_money" label="实际金额" min-width="130" />
+        <el-table-column prop="commission" label="订单总佣金" min-width="130" />
+        <el-table-column label="订单状态" min-width="90">
+          <template slot-scope="scope">
+            <span>{{ scope.row.status | HFOrderStatusFilter }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="返金状态" min-width="90">
+          <template slot-scope="scope">
+            <span>{{ scope.row.bill_status == 0 ? "平台未结算" : scope.row.bill_status == 1 ? "已结算" : "失效" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="create_time" label="下单时间" min-width="150" />
+        <el-table-column label="操作" min-width="80" fixed="right" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="onOrderDetails(scope.row.order_huafei_id)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+    <!--详情-->
+    <details-from ref="orderDetail" />
+  </div>
+</template>
+
+<script>
+import { HFOrderListApi, chartApi } from "@/api/order";
+import { merSelectApi } from "@/api/product";
+import detailsFrom from "./orderDetail";  
+// import cardsData from "@/components/cards/index";
+import { fromList } from "@/libs/constants.js";
+export default {
+  components: { detailsFrom },
+  data() {
+    return {
+      orderId: 0,
+      tableData: {
+        data: [],
+        total: 0,
+      },
+      listLoading: true,
+      tableFrom: {
+        order_sn: this.$route.query.order_sn ? this.$route.query.order_sn : "", // 订单号
+        keywords: "", // 关键字搜索商品名/uid
+        status: '', //  1：未知,2.无效-拆单,3.无效-取消,4.无效-京东帮帮主订单,5.无效-账号异常,6.无效-赠品类目不返佣,7.无效-校园订单,8.无效-企业订单,9.无效-团购订单,11.无效-乡村推广员下单,13.无效-违规订单,14.无效-来源与备案网址不符,15.待付款,16.已付款,17.已完成（购买用户确认收货）,20.无效-此复购订单对应的首购订单无效,21.无效-云店订单
+        date: "", // 时间
+        page: 1, // 页
+        limit: 20, // 限制条数,
+        bill_status: '' // 0平台未结算1已结算2失效 默认不传此参数
+      },
+      orderChartType: {},
+      timeVal: [],
+      fromList: fromList,
+      selectionList: [],
+      ids: "",
+      tableFromLog: {
+        page: 1,
+        limit: 10,
+      },
+      tableDataLog: {
+        data: [],
+        total: 0,
+      },
+      LogLoading: false,
+      dialogVisible: false,
+      cardLists: [],
+      orderDatalist: null,
+      merSelect: [],
+    };
+  },
+  mounted() {
+    if (this.$route.query.hasOwnProperty("order_sn")) {
+      this.tableFrom.order_sn = this.$route.query.order_sn;
+    } else {
+      this.tableFrom.order_sn = "";
+    }
+    this.headerList();
+    this.getMerSelect();
+    this.getList();
+  },
+  // 被缓存接收参数
+  activated() {
+    if (this.$route.query.hasOwnProperty("order_sn")) {
+      this.tableFrom.order_sn = this.$route.query.order_sn;
+    } else {
+      this.tableFrom.order_sn = "";
+    }
+    this.headerList();
+    this.getMerSelect();
+    this.getList();
+  },
+  methods: {
+    // 退款详情页
+    onRefundDetail(sn) {
+      console.log(sn, "sn");
+      this.$router.push({
+        path: "refund",
+        query: {
+          sn: sn,
+        },
+      });
+    },
+    // 订单筛选
+    orderFilter(item) {
+      let status = false;
+      item.orderProduct.forEach((el) => {
+        if (el.refund_num > 0 && el.refund_num < el.product_num) {
+          status = true;
+        }
+      });
+      return status;
+    },
+    // 表格某一行添加特定的样式
+    addTdClass(val) {
+      if (val.row.status > 0 && val.row.paid == 1) {
+        for (let i = 0; i < val.row.orderProduct.length; i++) {
+          if (val.row.orderProduct[i].refund_num > 0 && val.row.orderProduct[i].refund_num < val.row.orderProduct[i].product_num) {
+            return "row-bg";
+          }
+        }
+      } else {
+        return " ";
+      }
+    },
+    // 商户列表；
+    getMerSelect() {
+      merSelectApi()
+        .then((res) => {
+          this.merSelect = res.data;
+        })
+        .catch((res) => {
+          this.$message.error(res.message);
+        });
+    },
+    // 详情
+    onOrderDetails(id) {
+      this.orderId = id;
+      this.$refs.orderDetail.dialogVisible = true;
+      this.$refs.orderDetail.onOrderDetails(id);
+    },
+    pageChangeLog(page) {
+      this.tableFromLog.page = page;
+      this.getList();
+    },
+    handleSizeChangeLog(val) {
+      this.tableFromLog.limit = val;
+      this.getList();
+    },
+    // 选择时间
+    selectChange(tab) {
+      this.tableFrom.date = tab;
+      this.tableFrom.page = 1;
+      this.timeVal = [];
+      this.getList();
+    },
+    // 具体日期
+    onchangeTime(e) {
+      this.timeVal = e;
+      this.tableFrom.date = e ? this.timeVal.join("-") : "";
+      this.tableFrom.page = 1;
+      this.getList();
+    },
+    // 列表
+    getList(num) {
+      this.listLoading = true;
+      this.tableFrom.page = num ? num : this.tableFrom.page;
+      HFOrderListApi(this.tableFrom)
+        .then((res) => {
+          this.tableData.data = res.data.list;
+          this.tableData.total = res.data.count;
+          this.listLoading = false;
+        })
+        .catch((res) => {
+          this.$message.error(res.message);
+          this.listLoading = false;
+        });
+    },
+    pageChange(page) {
+      this.tableFrom.page = page;
+      this.getList();
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getList();
+    },
+    headerList() {
+      chartApi()
+        .then((res) => {
+          this.orderChartType = res.data;
+        })
+        .catch((res) => {
+          this.$message.error(res.message);
+        });
+    },
+    // 重置
+    reset() {
+      this.tableFrom = {
+        order_sn: this.$route.query.order_sn ? this.$route.query.order_sn : "", // 订单号
+        keywords: "", // 关键字搜索商品名/uid
+        status: '', //  1：未知,2.无效-拆单,3.无效-取消,4.无效-京东帮帮主订单,5.无效-账号异常,6.无效-赠品类目不返佣,7.无效-校园订单,8.无效-企业订单,9.无效-团购订单,11.无效-乡村推广员下单,13.无效-违规订单,14.无效-来源与备案网址不符,15.待付款,16.已付款,17.已完成（购买用户确认收货）,20.无效-此复购订单对应的首购订单无效,21.无效-云店订单
+        date: "", // 时间
+        page: 1, // 页
+        limit: 20, // 限制条数,
+        bill_status: '' // 0平台未结算1已结算2失效 默认不传此参数
+      }
+      this.getList()
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.demo-table-expand {
+  /deep/ label {
+    width: 83px !important;
+  }
+}
+.selWidth {
+  width: 300px;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409eff;
+  font-size: 12px;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+.tabBox_tit {
+  width: 60%;
+  font-size: 12px !important;
+  margin: 0 2px 0 10px;
+  letter-spacing: 1px;
+  padding: 5px 0;
+  box-sizing: border-box;
+}
+
+/deep/.row-bg {
+  .cell {
+    color: red !important;
+  }
+}
+/deep/ .el-radio-button--small .el-radio-button__inner{
+  padding:9px 10px;
+}
+</style>

src/views/order/huafei/orderDetail.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <el-dialog
+      title="订单信息"
+      :visible.sync="dialogVisible"
+      width="700px"
+      v-if="dialogVisible"
+    >
+      <div v-loading="loading">
+        <div class="description" v-if="orderDatalist">
+          <div class="title">订单信息</div>
+          <div class="acea-row">
+            <div class="description-term">订单id：{{ orderDatalist.order_huafei_id }}</div>
+            <div class="description-term">UID:{{ orderDatalist.uid }}</div>
+            <div class="description-term">pid:{{ orderDatalist.p_id ?orderDatalist.p_id : '无'}}</div>
+            <div class="description-term">订单编号：{{ orderDatalist.order_sn }}</div>
+            <div class="description-term">平台单号: {{ orderDatalist.order_number }}</div>
+            <div class="description-term">充值金额: {{ orderDatalist.amount_price }}</div>
+            <div class="description-term">返利金额: {{ orderDatalist.fanli_price }}</div>
+            <div class="description-term">成本金额: {{ orderDatalist.cost_price }}</div>
+            <div class="description-term">到账金额: {{ orderDatalist.arrived_amount }}</div>
+            <div class="description-term">实际金额: {{ orderDatalist.pay_money }}</div>
+            <div class="description-term">订单状态：{{ orderDatalist.status | HFOrderStatusFilter }}</div>
+            <div class="description-term">创建时间：{{ orderDatalist.create_time }}</div>
+            <div class="description-term">完成时间:{{ orderDatalist.finish_time }}</div>
+            <div class="description-term">修改时间{{ orderDatalist.modify_time }}</div>
+            <!-- <div class="description-term">商家名称:{{ orderDatalist.shop_name }}</div>
+            <div class="description-term">商家id:{{ orderDatalist.shop_id }}</div> -->
+            <div class="description-term">佣金比例:{{ orderDatalist.commission_share }}</div>
+            <div class="description-term">佣金金额:{{ orderDatalist.commission }}</div>
+            <div class="description-term">养老金:{{ orderDatalist.yanglao }}</div>
+            <div class="description-term">返金状态:{{ orderDatalist.bill_status == 0 ? "平台未结算" : orderDatalist.bill_status == 1 ? "已结算" : "失效"  }}</div>
+            <div class="description-term">平台结算时间:{{ orderDatalist.bill_create_time }}</div>
+            <div class="description-term">平台可以进行结算的时间:{{ orderDatalist.bill_end_time }}</div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getExpress, thirdOrderDetailApi } from '@/api/order'
+export default {
+  name: 'OrderDetail',
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      orderDatalist: null
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onOrderDetails(id) {
+      this.loading = true
+      thirdOrderDetailApi(id,{
+        table: 'huafei', // tb 淘宝订单详情, jd 京东, vip 唯品会, pdd 拼多多, su  苏宁 huafei 话费
+      }).then(res => {  
+        this.orderDatalist = res.data
+        this.loading = false
+      }).catch(({ message }) => {
+        this.loading = false
+        this.$message.error(message)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.title{
+  margin-bottom: 16px;
+  color: #17233d;
+  font-weight: 500;
+  font-size: 14px;
+}
+.description{
+  &-term {
+    display: table-cell;
+    padding-bottom: 10px;
+    line-height: 20px;
+    width: 50%;
+    font-size: 12px;
+  }
+}
+.logistics{
+  align-items: center;
+  padding: 10px 0px;
+  .logistics_img{
+    width: 45px;
+    height: 45px;
+    margin-right: 12px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .logistics_cent{
+    span{
+      display: block;
+      font-size: 12px;
+    }
+  }
+}
+.trees-coadd{
+  width: 100%;
+  height: 400px;
+  border-radius: 4px;
+  overflow: hidden;
+  .scollhide{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    margin-left: 18px;
+    padding: 10px 0 10px 0;
+    box-sizing: border-box;
+    .content{
+      font-size: 12px;
+    }
+    .time{
+      font-size: 12px;
+      color: #2d8cf0;
+    }
+  }
+}
+.scollhide::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
+</style>