新增ios内购风险功能

2023-10-08 16:49:11 +08:00
parent 61ae655a6f
commit 9d09d5974a
6 changed files with 1402 additions and 710 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "bootstrap": "^3.3.5",
    "bootstrap-table": "^1.10.1",
    "core-js": "^3.8.3",
+    "element-plus": "^2.3.14",
    "font-awesome": "^4.6.3",
    "ionicons": "^2.0.1",
    "jquery": "^2.2.0",
@@ -24,7 +25,6 @@
    "popper.js": "^1.16.1",
    "sass": "^1.67.0",
    "sass-loader": "^13.3.2",
-    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
@@ -37,6 +37,8 @@
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "vue": "^3.2.13",
+    "webpack-cli": "^5.1.4"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,28 @@
 <template>
  <div>
-    <router-view/>
+    <router-view />
  </div>
 </template>

 <script>
+const debounce = (fn, delay) => {
+  let timer = null;
+  return function () {
+    let context = this;
+    let args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      fn.apply(context, args);
+    }, delay);
+  };
+};
+const _ResizeObserver = window.ResizeObserver;
+window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
+  constructor(callback) {
+    callback = debounce(callback, 16);
+    super(callback);
+  }
+};
 export default {
  name: "app",
  data() {
@@ -13,6 +31,6 @@ export default {
  watch: {},
  created() {},
  methods: {},
-  computed: {}
+  computed: {},
 };
 </script>
--- a/src/api/iosSrisk/iosSrisk.js
+++ b/src/api/iosSrisk/iosSrisk.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+import qs from 'qs';
+
+// 获取列表
+export const riskUserPage = query => {
+    return request({
+        url: '/admin/recharge/riskUser/page',
+        method: 'get',
+        params: query
+    });
+};
+// 删除风险
+export const riskUserDel = query => {
+    return request({
+        url: '/admin/recharge/riskUser/del',
+        method: 'post',
+        params: query
+    });
+};
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
 import 'jquery'
 import 'jquery.md5'

@@ -49,4 +48,7 @@ import '@/assets/plugins/bootstrap-treeview/js/bootstrap-treeview.min.js'

 import components from '@/utils/components.js'

-createApp(App).use(store).use(router).use(components).mount('#app')
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+createApp(App).use(store).use(router).use(components).use(ElementPlus).mount('#app')
--- a/src/views/iosSrisk/iosSrisk.vue
+++ b/src/views/iosSrisk/iosSrisk.vue
@@ -0,0 +1,222 @@
+<!-- eslint-disable vue/valid-v-slot -->
+<template>
+  <div class="box">
+    <!-- 搜索 -->
+    <div class="userId">
+      <span>用户平台id </span>
+      <el-input
+        v-model="userId"
+        style="width: 15%"
+        placeholder="请输入平台id进行查询"
+        class="input"
+      ></el-input>
+      <!-- 查询 -->
+      <el-button type="primary" @click="getDatas()">查询</el-button>
+    </div>
+    <!-- 外层表格 -->
+    <el-table :data="tableData" border style="margin-top: 25px; width: 100%">
+      <el-table-column fixed prop="updateTime" label="进入风险时间"> </el-table-column>
+      <el-table-column fixed prop="erbanNo" label="用户平台id"> </el-table-column>
+      <el-table-column fixed prop="nick" label="用户昵称"> </el-table-column>
+      <el-table-column
+        fixed
+        prop="blockStatus"
+        label="用户当前状态"
+        :formatter="blockFormatter"
+      >
+      </el-table-column>
+      <el-table-column fixed prop="amount" label="苹果内购总额"> </el-table-column>
+      <el-table-column
+        fixed
+        prop="riskReason"
+        label="进入风险原因"
+        :formatter="riskReasonFormatter"
+      >
+      </el-table-column>
+      <el-table-column fixed prop="consumptionRequestAmount" label="已申请退款总额">
+      </el-table-column>
+      <el-table-column fixed prop="refundAmount" label="已退款总额"> </el-table-column>
+      <el-table-column fixed prop="chargeDeviceNum" label="发起过苹果内购设备数">
+      </el-table-column>
+      <el-table-column fixed label="设备详情" min-width="120px">
+        <template v-slot="scope">
+          <el-button @click="handleClick(scope.row, 1)" type="text" size="small"
+            >常规IOS设备: {{ scope.row.commonDeviceNum }}</el-button
+          >
+          <el-button @click="handleClick(scope.row, 2)" type="text" size="small"
+            >发起过IOS内购设备: {{ scope.row.chargeDeviceNum }}</el-button
+          >
+          <el-button @click="handleClick(scope.row, 3)" type="text" size="small"
+            >登入设备: {{ scope.row.loginDeviceNum }}</el-button
+          >
+        </template>
+      </el-table-column>
+      <el-table-column fixed label="操作">
+        <template v-slot="scope">
+          <el-button @click="handleClick2(scope.row)" type="primary" size="small"
+            >解除风险</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="paginationClass"
+      v-model:current-page="currentPage2"
+      v-model:page-size="pageSize2"
+      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
+      layout="sizes, prev, pager, next"
+      :total="totals"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- 二次确认解除风险弹窗 -->
+    <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
+      <span> 确定要解除该风险么? </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="centerDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="dialogClick()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 详情设备信息弹窗 -->
+    <el-dialog v-model="dialogTableVisible" :title="dialogTableVisibleTitle">
+      <el-table style="width: 100%" :data="gridData">
+        <el-table-column property="deviceId" label="设备号" min-width="100px" />
+        <el-table-column property="os" label="设备平台" min-width="100px" />
+        <el-table-column property="appVersion" label="系统版本" min-width="100px" />
+      </el-table>
+      <el-button
+        class="dialogTableVisibleBut"
+        type="primary"
+        @click="dialogTableVisible = false"
+      >
+        关闭
+      </el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { riskUserPage, riskUserDel } from "@/api/iosSrisk/iosSrisk";
+import { dateFormat } from "@/utils/date";
+export default {
+  name: "IosSrisk",
+  data() {
+    return {
+      id: "", // 一出风险id
+      userId: "", //查询id
+      centerDialogVisible: false, //控制风险二次弹窗
+      dialogTableVisible: false, //控制详情二次弹窗
+      totals: 100,
+      currentPage2: 1,
+      pageSize2: 10,
+      dialogTableVisibleTitle: "用户昵称：aaa用户id：12345的登入设备",
+      tableData: [], //外层表格数据存放
+      gridData: [], //内嵌弹窗数据存放
+    };
+  },
+  setup() {
+    return {};
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      riskUserPage({
+        erbanNo: this.userId,
+        page: this.currentPage2,
+        pageSize: this.pageSize2,
+      }).then((res) => {
+        this.totals = res.total;
+        this.tableData = res.rows;
+      });
+    },
+    // 查询按钮
+    getDatas() {
+      this.getData();
+    },
+    // 设备信息按钮
+    handleClick(row, type) {
+      if (type == 1) {
+        this.gridData = row.commonDeviceInfos;
+      } else if (type == 2) {
+        this.gridData = row.chargeDeviceInfos;
+      } else if (type == 3) {
+        this.gridData = row.loginDeviceInfos;
+      }
+      this.dialogTableVisibleTitle = `用户昵称: ${row.nick} 用户ID:${row.erbanNo} 的常规设备`;
+      this.dialogTableVisible = true;
+    },
+    // 解除风险按钮
+    handleClick2(row) {
+      console.log(row);
+      this.id = row.uid;
+      this.centerDialogVisible = true;
+    },
+    // 确认解除风险按钮
+    dialogClick() {
+      riskUserDel({
+        id: this.id,
+      }).then((res) => {
+        console.log(res);
+        if (res.code == 200) {
+          this.getData();
+        }else{
+            res.message
+        }
+      });
+      this.centerDialogVisible = false;
+    },
+    // 分页导航
+    handleSizeChange(val) {
+      this.getData();
+    },
+    handleCurrentChange(val) {
+      this.getData();
+    },
+    // 处理用户当前状态
+    blockFormatter(row, col, val) {
+      return `${!val ? "正常" : `封禁 原因：${row.blockReason}`}`;
+    },
+    // 处理进入风险原因
+    riskReasonFormatter(row, col, val) {
+      return `${row.moreDevice ? "多设备内购" : ""}、${
+        row.refundBlock ? "申请内购退款" : ""
+      }`;
+    },
+    // 处理进入风险事件格式化
+    createTimeFormatter(row, col, val) {},
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+  padding-top: 20px;
+  background: #ecf0f5;
+  .userId {
+    span {
+      margin-right: 10px;
+    }
+    .input {
+      margin-right: 10px;
+    }
+  }
+  .dialogTableVisibleBut {
+    display: block;
+    margin: 30px 0 0 830px;
+  }
+  .paginationClass {
+    margin: 15px 0 5px 0px;
+  }
+}
+.el-button + .el-button {
+  margin-left: 0;
+}
+</style>