jufubao-admin-library 1.0.0-beta1

package/library/viewModules/viewsFinance/viewsFinance/balance/detail_openapi.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="app-container">
+    <el-card class="app-container__search">
+      <div slot="header" class="flex list_header">
+        <div>openAPI明细对账</div>
+        <div class="flex total_wrap">
+          <p class="amount_wrap">
+            <span class="amount_label">接口余额：</span>{{divide(totalData.channel_amount)}}元
+            <span class="amount_label">平台余额：</span>{{divide(totalData.total_amount)}}元
+          </p>
+        </div>
+      </div>
+      <xd-search
+        dateFilter
+        timeType
+        v-if="searchForm.length > 0"
+        v-model="searchParams"
+        :list="searchForm"
+        @onSearch="handleSearch"
+        @onDone="getList"
+      >
+      </xd-search>
+    </el-card>
+    <el-card class="app-container__list">
+      <div class="app-container__list-pagination">
+        <div></div>
+        <div class="table-stat">
+          <p>
+            总充值：<span class="_mo">{{divide(totalData.total_recharge_amount)}}元</span>
+            提现总额：<span class="_mo">{{divide(totalData.total_withdrawal_amount)}}元</span>
+            矫正金额：<span class="_mo">{{divide(totalData.correct_amount)}}元</span>
+            总收入：<span class="_mo">{{divide(totalData.total_income_amount)}}元</span>
+            总消费：<span class="_mo">{{divide(totalData.total_consume_amount)}}元</span>
+            总退款：<span class="_mo">{{divide(totalData.total_refund_amount)}}元</span>
+            结余：<span class="_mo">{{divide(totalData.cash_amount)}}元</span>
+            实际结算：<span class="_mo">{{ divide(totalData.settlement_amount) }}元</span>
+          </p>
+          <el-button type="primary" @click="doExport">导出</el-button>
+        </div>
+      </div>
+      <div class="app-container__list-table">
+        <xd-table
+          :headers="headers"
+          :list="tables"
+          is-border
+        >
+        <template slot="address" slot-scope="scope">
+            <p style="text-align: left;">姓名：{{ scope.row.receipt_username }}</p>
+            <p style="text-align: left;">收货地址：{{ scope.row.receipt_address_detail }}</p>
+          </template>
+          <template slot="products" slot-scope="scope">
+            <div class="table-product" v-for="(prod, i) in scope.row.product_list" :key="i">
+              <div class="table-product__img">
+                <img :src="prod.product_thumb" alt="">
+              </div>
+              <div class="table-product__name">
+                <p>{{ prod.product_name}}</p>
+              </div>
+              <div class="table-product__id">
+                <p>{{ prod.product_id}}</p>
+              </div>
+            </div>
+          </template>
+          <template slot="num" slot-scope="scope">
+            <div v-for="(prod, i) in scope.row.product_list" :key="i">
+              <div>
+                金额： <span>{{ divide(prod.dist_price)}}</span>
+              </div>
+              <div>
+                数量： <span>{{ prod.product_num}}</span>
+              </div>
+            </div>
+          </template>
+        </xd-table>
+      </div>
+      <div class="app-container__list-pagination">
+        <xd-pagination
+          :page="page_token"
+          :total="total"
+          :limit.sync="page_size"
+          :autoScroll="false"
+          @onPagination="handlePagination"
+        ></xd-pagination>
+      </div>
+    </el-card>
+    <xd-dialog @onConfirm="handleExport" :show.sync="showExport" width="350px" title="导出文件名称">
+      <el-input maxlength="20" v-model="exportName" placeholder=""></el-input>
+    </xd-dialog>
+  </div>
+</template>
+
+
+<script>
+import XdSearch from "@/components/XdSearch";
+import XdPagination from "@/components/XdPagination.vue";
+import XdTable from "@/components/XdTable";
+import { mapActions } from "vuex"
+import { getOptions } from "@/utils/options"
+import XdDialog from "@/components/XdDialog"
+import { baseJsDateToTime } from "@/utils/xd.base.js"
+import checkPermission from "@/utils/permission"
+import roleTRecord from "@/constant/modules/tradeRecord.js"
+import roleWallet from "@/constant/modules/wallet.js"
+
+export default {
+  name: "PageChannelDetail",
+  components: {
+    XdPagination, //翻译插件
+    XdSearch, //搜查插件
+    XdTable,
+    XdDialog
+  },
+  data() {
+    return {
+      roleWallet,
+
+      //分页参数
+      page_token: 1, //当前页面数量
+      hasNextPage: true, //是否有下一页
+      page_size: 20, //搜索参数
+      searchForm: [], //搜索区域模块表单
+      searchParams: null, //搜索参数
+      totalData: {},
+      total: 0,
+
+      //列表对象
+      tables: [],
+      headers: [
+        { "type": "normal", "prop": "main_order_id", "align": "center", "width": 200, "label": "主单号" }, 
+        { "type": "normal", "prop": "sub_order_id", "align": "center", "minWidth": 200, "label": "拆单号" },
+        { "type": "normal", "prop": "address", "align": "center", "minWidth": 200, "label": "收货信息" },
+        { "type": "normal", "prop": "products", "align": "center", "minWidth": 300, "label": "商品图片/名称/ID" },
+        { "type": "normal", "prop": "num", "align": "center", "minWidth": 300, "label": "金额&数量" },
+        { "type": "price", "prop": "amount", "align": "center", "width": 100, "label": "总价", "unit": "元"},
+        { "type": "normal", "prop": "created_time", "align": "center", "minWidth": 200, "label": "下单时间" },
+        { "type": "normal", "prop": "receipt_send_time", "align": "center", "minWidth": 200, "label": "发货时间" },
+        { "type": "normal", "prop": "order_partner_name", "align": "center", "minWidth": 200, "label": "加盟商" },
+        { "type": "normal", "prop": "operate_type_name", "align": "center", "minWidth": 200, "label": "资金方向" },
+        { "type": "normal", "prop": "invoice_name", "align": "center", "minWidth": 200, "label": "发票名称" },
+        { "type": "normal", "prop": "comment", "align": "center", "minWidth": 200, "label": "备注" },
+      ],
+      showExport: false,
+      exportName: 'openAPI明细对账'
+    }
+  },
+  computed: {
+    channel_code(){
+      return this.$route.query.channel_code;
+    },
+    open_user_id(){
+      return this.$route.params.id;
+    },
+    open_user_name(){
+      return this.$route.query.open_user_name;
+    },
+    wallet_type(){
+      return this.$route.query.wallet_type;
+    },
+    wallet_nnid(){
+      return this.$route.query.wallet_nnid;
+    },
+  },
+  created() {
+    this.initSearchForm();
+  },
+  methods: {
+    ...mapActions("tradeRecord", ["countOpenApi", "listOpenApi"]),
+    //相除
+    divide(price) {
+      return this.$xdHelper.divisionFloatNumber(price, 100);
+    },
+    getParams(){
+      return {
+        ...this.searchParams,
+        channel_code: this.channel_code,
+        open_user_id: this.open_user_id,
+        wallet_type: this.wallet_type,
+      }
+    },
+    doExport(){
+      this.exportName= 'openAPI明细对账'
+      this.showExport = true
+    },
+    handleExport() {
+      if(!this.exportName) {
+        this.$message.error('请输入导出名称');
+        return
+      }
+      let other = this.getParams();
+      let params = {
+        ...other,
+        export: true,
+        file_ext: "xlsx",
+        file_name: this.exportName,
+        export_data_tag: "ExportSupplierTradeRecordList"
+      };
+      let loading = this.$loading({});
+      this.listOpenApi(params).then(res => {
+        loading.close();
+        this.showExport=false;
+        this.$alert('导出任务已经开始执行，请去任务管理查看下载状态', '提示', {
+          confirmButtonText: '确定',
+        });
+      }).catch(err => {
+        this.$message.error(err.msg);
+        loading.close();
+      })
+    },
+    /**
+     * @description 获取数据列表
+     */
+    getList() {
+      //请求数据
+      let other = this.getParams();
+      let params = {
+        ...other,
+        page_token: this.page_token,
+        page_size: this.page_size
+      };
+      console.log(params)
+      let loading = this.$loading({});
+      Promise.all([
+        this.listOpenApi(params),
+        this.countOpenApi(params)
+      ]).then(([res, res1]) => {
+        loading.close();
+        this.tables = res.data.list.map(item => {
+          item['created_time'] = baseJsDateToTime(item['created_time']);
+          item['receipt_send_time'] = item['receipt_send_time']?baseJsDateToTime(item['receipt_send_time']): ''
+          item['product_list'] = item['product_list'].map(prod => {
+            prod['product_thumb'] = this.getImageFullPath(prod['product_thumb'])
+            return prod;
+          })
+          return item;
+        });
+        this.total = res.data.total_size;
+        this.totalData = res1.data;
+      })
+      .catch(err => {
+        loading.close();
+      })
+    },
+   
+    /**
+     * @description 点击搜索进行搜索操作
+     * @param action 动作
+     * @param form 搜索请求参数
+     */
+    handleSearch({ action, form }) {
+      this.page_token = 1;
+      this.getList();
+    },
+    /**
+     * @description 初始化搜索模块
+     */
+    initSearchForm() {
+      this.searchForm = [
+        {
+          label: "渠道",
+          ele: "el-input",
+          valueKey: "open_user_name",
+          value: this.open_user_name,
+          placeholder: "请输入名称",
+          disabled: true,
+        },
+        {
+          label: "主单号",
+          ele: "el-input",
+          valueKey: "main_order_id",
+          value: "",
+          placeholder: "请输入主单号",
+        },
+        {
+          label: "资金方向",
+          ele: "xd-select-list",
+          valueKey: "operate_type",
+          value: "",
+          placeholder: "请输入渠道ID",
+          list: [
+            { label: "全部", value: "" },
+            { label: "支出", value: "R" },
+            { label: "收入", value: "A" },
+          ]
+        },
+        {
+          label: '时间:', //label
+          ele: 'xd-date', //package 名称
+          valueKey: ['start_time', 'end_time'], //form[valueKey]
+          value: [], //v-model
+          format: 'yyyy-MM-dd HH:mm:ss', //时间显示格式
+          formatValue: 'timestamp', //输出时间格式
+          placeholder: ['开始时间', '结束时间'],
+        },
+      ];
+    },
+    /**
+     * @description 翻页处理方法
+     * @param page {Number} 访问页面页码数
+     */
+    handlePagination(page) {
+      this.page_token = page;
+      this.getList();
+    }, //todo
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .list_header{
+    .total_wrap{
+      font-size: 13px;
+      margin-left: 30px;
+    }
+    .amount_wrap{
+      margin-right: 20px;
+      .amount_label{
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+  .table-stat{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    p{
+      margin: 0;
+      font-weight: 500;
+      font-size: 14px;
+      ._mo{
+        font-weight: 400;
+        margin-right: 20px;
+        font-size: 12px;
+      }
+    }
+  }
+  .flex{
+    display: flex;
+    align-items: center;
+  }
+  .table-product{
+    display: flex;
+    align-items: center;
+    .table-product__img{
+      width: 50px;
+      height: 50px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .table-product__id,
+    .table-product__name{
+      width: 100px;
+      p{
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+</style>
+