feat: “新用户”条件服务技术方案v1.0

src/pages/ht/service.js

@@ -17,3 +17,21 @@ export async function delscodis (params) {
     const url = `${dc}/ht/web/dels-codis`
     return fetchApi(url, params)
 }
+
+// 查看-用户手机号搜索查询
+export async function userCheck (params) {
+  const url = `${dc}/api/white/user-check`
+  return fetchApi(url, params)
+}
+
+// 操作-白名单配置编辑和新增接口
+export async function edit (params) {
+  const url = `${dc}/api/white/edit`
+  return fetchApi(url, params)
+}
+
+// 操作-删除当前用户白名单
+export async function whiteDl (params) {
+  const url = `${dc}/api/white/delete`
+  return fetchApi(url, params)
+}

src/pages/ht/whitelist/components/ModalAE/index.js

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react'
+import { Modal, Input, Button, Divider, Checkbox, message } from 'antd'
+import { userCheck, edit } from '@/pages/ht/service'
+
+const ModalAE = props => {
+  const { visible, handleCancel, idp, refreshFunc } = props
+  const [data, setData] = useState({})
+  const [phone, setPhone] = useState(idp.phone)
+
+  const handleOk = () => {
+    const ids = handleID().toString()
+    edit({
+      id: idp.id,
+      phone: phone,
+      whiteScene: ids
+    }).then(res => {
+      if (res?.code === 0) {
+        message.success(res.msg)
+        refreshFunc()
+        handleCancel()
+      }
+    })
+  }
+  const handleID = () => {
+    const strArr = []
+    data?.scenes?.forEach(item => {
+      if (item.is_set) {
+        strArr.push(item.scene_sign)
+      }
+    })
+    return strArr
+  }
+
+  const findUserInfo = async () => {
+    const res = await userCheck({
+      phone: phone,
+      id: idp.id
+    })
+    if (res?.code === 0) {
+      setData(res.data)
+    }
+  }
+
+  useEffect(() => {
+    // 编辑的情况有phone 就获取一次数据
+    if (idp.id) {
+      findUserInfo()
+
+    }
+  }, [])
+
+  return (
+    <Modal title="新增白名单" visible={visible} onOk={handleOk} onCancel={handleCancel}>
+      <div>
+        <Input
+          disabled={idp.id}
+          value={phone}
+          onChange={e => setPhone(e.target.value)}
+          style={{ width: '200px' }}
+          placeholder="输入用户手机号"
+        />
+        <Button onClick={() => findUserInfo()} style={{ marginLeft: '2em' }}>
+          查找
+        </Button>
+        <div style={{ margin: '1em 0' }}>
+          {data.nickname && `姓名：${data.nickname}(ID：${data.userinfoId})`}
+        </div>
+      </div>
+      <Divider />
+      <div style={{ display: 'flex' }}>
+        <span>开通业务：</span>
+        <div>
+          {data?.scenes?.map((item, i) => (
+            <div key={item.scene_sign}>
+              <Checkbox
+                checked={Boolean(item.is_set)}
+                onChange={e => {
+                  const c = e.target.checked
+                  const list = [...data.scenes]
+                  list[i].is_set = Number(c)
+                  setData({
+                    ...data,
+                    scenes: list
+                  })
+                }}
+              >
+                {item.name}
+              </Checkbox>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ModalAE

src/pages/ht/whitelist/index.js

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import {Button, message} from 'antd'
+import { FilterTable } from 'wptpc-design'
+import {dc} from "@/conf/config";
+import ModalAE from './components/ModalAE'
+import { whiteDl } from '@/pages/ht/service'
+import { LongText } from 'wptpc-design'
+
+const apiUrl = `${dc}/api/white/list`
+let refreshFunc = () => {}
+
+const Whitelist = () => {
+  const [visibles, setVisibles] = useState({
+    ModalAE: false
+  })
+  const [idp, setIdp] = useState({
+    id: '',
+    phone: ''
+  })
+
+  const handleCancel = () => {
+    setVisibles({
+      ...visibles,
+      ModalAE: false
+    })
+  }
+  const showModalAE = (id, phone) => {
+    setIdp({
+      id,
+      phone
+    })
+    setVisibles({
+      ...visibles,
+      ModalAE: true
+    })
+  }
+
+  const  handleDel = async (id) => {
+    const res = await whiteDl({id})
+    if (res?.code === 0) {
+      message.success(res.msg)
+      refreshFunc()
+    }
+  }
+
+  const filterSetting = {
+    hasClearBtn: false,
+    formFields: [
+      {
+        label: '手机号:',
+        type: 'input',
+        key: 'phone',
+        placeholder: '用户手机号搜索',
+      },
+    ]
+  }
+  const tableSetting = {
+    batchBtns: [
+      { label: '添加', type: 'primary', enabled: true, onClick: () => showModalAE('',''), key:'id' },
+    ],
+    rowKey: 'id',
+    columnConfig: [
+      {
+        align: 'center',
+        title: '用户ID',
+        key: 'id',
+        dataIndex: 'id'
+      },
+      {
+        align: 'center',
+        title: '用户昵称',
+        key: 'nickname',
+        dataIndex: 'nickname'
+      },
+      {
+        align: 'center',
+        title: '用户手机号',
+        key: 'telphone',
+        dataIndex: 'telphone'
+      },
+      {
+        align: 'center',
+        title: '开通业务',
+        key: 'whiteScene',
+        dataIndex: 'whiteScene',
+        render: (text) => <LongText text={text.toString()} limit={20} />
+      },
+      {
+        align: 'center',
+        title: '开始时间',
+        key: 'createTime',
+        dataIndex: 'createTime'
+      },
+      {
+        align: 'center',
+        title: '结束时间',
+        key: 'expireTime',
+        dataIndex: 'expireTime'
+      },
+      {
+        align: 'center',
+        title: '操作',
+        key: 'userinfoId',
+        dataIndex: 'userinfoId',
+        render: (_, record) => {
+          return(
+            <div key={_}>
+              <Button onClick={() => showModalAE(record.id, record.telphone)} type='link'>编辑</Button>
+              <Button onClick={() => handleDel(record.id)} type='link'>删除</Button>
+            </div>
+          )
+        }
+      },
+    ],
+    getRefresh: refresh => {
+      refreshFunc = refresh
+    },
+  }
+
+
+  return (
+    <div>
+      <FilterTable
+        filterSetting={filterSetting}
+        tableSetting={tableSetting}
+        apiUrl={apiUrl}
+      />
+      {
+        visibles.ModalAE &&
+        <ModalAE
+          handleCancel={handleCancel}
+          visible={visibles.ModalAE}
+          idp={idp}
+          refreshFunc={refreshFunc}
+        />
+      }
+
+    </div>
+  )
+}
+
+export default Whitelist