v1.0.5 1. 佣金提现查询(查看近三个月的数据) 2. 推广码新增备注功能 3. 忘记密码

README.md

@@ -1,15 +1,37 @@
-## 启动
+# 版本
+
+## v1.0.5
+
+1. 佣金提现查询(查看近三个月的数据)
+2. 推广码新增备注功能
+3. 忘记密码
+
+# 启动
 
 npm start
 
-## 打包
+# 打包
 
 npm run build
 
+# 更新
+
 ## 2021.6.30
 
-[x] 登录成功改为跳转 home 页
-[x] 注册成功跳转登录页
-[x] 我的推广码页面样式修改, 推广码列表新增复制玩家推广码和营销推广码功能
-[x] 明细查询页 ->推广员查询, 玩家查询
-[x] 我的推广页
+-   [x] 登录成功改为跳转 home 页
+-   [x] 注册成功跳转登录页
+-   [x] 我的推广码页面样式修改, 推广码列表新增复制玩家推广码和营销推广码功能
+-   [x] 明细查询页 ->推广员查询, 玩家查询
+-   [x] 我的推广页
+
+## 2021.7.1
+
+-   [x] 佣金提现查询
+-   [x] 推广码新增备注功能
+-   [x] 忘记密码
+
+# tips
+
+```
+提交前记得更新请求地址为线上地址
+```

src/api/base.js

@@ -18,6 +18,8 @@ const base = {
     profit: "/vip/user/profit", // 获取当前已赚取佣金
     promoProfit: "/vip/user/promoProfit", // 获取推广员赚取总佣金
     gameProfit: "/vip/user/gameProfit", // 获取玩家赚取总佣金
+    updatePromoCode: "/vip/user/updatePromoCode", // 修改推广码备注
+    withdrawList: "/vip/user/withdrawList", // 提现记录查询
 }
 
 export default base;

src/api/index.js

@@ -34,7 +34,7 @@ const api = {
      * 忘记密码
      */
     forgetPwd(params) {
-        return axios.post(base.baseUrl + base.forgetPwd, params)
+        return axios.post(base.baseUrl + base.forget, params)
     },
 
     /**
@@ -120,6 +120,18 @@ const api = {
     gameProfit(params) {
         return axios.get(base.baseUrl + base.gameProfit, { params })
     },
+    /**
+     * 修改推广码备注
+     */
+    updatePromoCode(params) {
+        return axios.post(base.baseUrl + base.updatePromoCode, params)
+    },
+    /**
+     * 修改推广码备注
+     */
+    withdrawList(params) {
+        return axios.get(base.baseUrl + base.withdrawList, { params })
+    },
 }
 
 export default api

src/components/LeftNav/LeftNav.vue

@@ -27,7 +27,7 @@
         </el-menu-item-group>
       </el-submenu>
       <!-- 佣金提现查询 -->
-      <el-menu-item disabled index="/performance">
+      <el-menu-item index="/performance">
         <i class="el-icon-document"></i>
         <span slot="title">佣金提现查询</span>
       </el-menu-item>

src/plugins/element.js

@@ -16,6 +16,8 @@ import {
     Tooltip,
     Table,
     TableColumn,
+    Popover,
+    Tag
 } from 'element-ui';
 Vue.use(Input);
 Vue.use(Menu);
@@ -31,5 +33,7 @@ Vue.use(Button);
 Vue.use(Tooltip);
 Vue.use(Table);
 Vue.use(TableColumn);
+Vue.use(Popover);
+Vue.use(Tag);
 Vue.prototype.$notify = Notification;
 Vue.prototype.$confirm = MessageBox.confirm;

src/views/Forget/Forget.vue

@@ -42,7 +42,7 @@
         <div v-if="canForget" class="forget_btn" @click="onForget">
           重置密码
         </div>
-        <div v-else class="forget_btn gray" @click="onForget">重置中</div>
+        <div v-else class="forget_btn gray">重置中</div>
         <div class="bottom_btn clear">
           <router-link to="/login" class="login">返回登录</router-link>
         </div>
@@ -55,6 +55,7 @@
 export default {
   name: "Forget",
   components: {},
+  inject: ["checkCode"],
   data() {
     return {
       tel: "", // 手机号
@@ -113,6 +114,28 @@ export default {
         return;
       }
       this.canForget = false;
+
+      this.$api
+        .forgetPwd({
+          mobile: tel,
+          smsCode: sms,
+          password,
+        })
+        .then((res) => {
+          this.canForget = true;
+          this.checkCode(res);
+          const { code } = res.data;
+          // 错误
+          if (code) {
+            return;
+          }
+          // 成功
+          this.$notify({
+            message: "重置密码成功, 请重新登录!",
+            type: "success",
+          });
+          this.onLogin();
+        });
     },
 
     // 发送验证码
@@ -132,6 +155,21 @@ export default {
       }
       // 2. 验证码倒计时
       this.countDown();
+
+      // 3. 请求接口 发送验证码
+      this.$api
+        .sendSms({
+          mobile: tel,
+          reason: "forgetPwd",
+        })
+        .then((res) => {
+          this.checkCode(res);
+          const { code, data } = res.data;
+          // 错误
+          if (code) {
+            return;
+          }
+        });
     },
 
     // 倒计时
@@ -151,6 +189,13 @@ export default {
         }
       }, 1000);
     },
+
+    // 返回登录
+    onLogin() {
+      this.$router.push({
+        name: "Login",
+      });
+    },
   },
 };
 </script>

src/views/Performance/Performance.vue

@@ -1,18 +1,90 @@
 <template>
-  <!-- 业绩查询页 -->
+  <!-- 佣金提现查询页 -->
   <div class="performance">
+    <!-- 标题 -->
+    <div class="title">
+      <span class="left">联系客服提现</span>
+      <!-- 微信 -->
+      <div class="clear wx">
+        <div class="tip">微信:</div>
+        <div class="promo_code text_overflow">jinghong_kefu</div>
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="点击复制"
+          placement="top"
+        >
+          <div
+            class="copy"
+            data-clipboard-action="copy"
+            data-clipboard-text="jinghong_kefu"
+            id="clipboard_promo_code"
+          >
+            <i class="el-icon-document-copy"></i>
+          </div>
+        </el-tooltip>
+      </div>
+      <!-- qq -->
+      <div class="clear wx">
+        <div class="tip">QQ:</div>
+        <div class="promo_code text_overflow">3563681140</div>
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="点击复制"
+          placement="top"
+        >
+          <div
+            class="copy"
+            data-clipboard-action="copy"
+            data-clipboard-text="3563681140"
+            id="clipboard_promo_code"
+          >
+            <i class="el-icon-document-copy"></i>
+          </div>
+        </el-tooltip>
+      </div>
+    </div>
     <!-- 表格 -->
-    <Table v-if="tableData" :tableData="tableData" />
+    <el-table :data="tableData" border style="width: 100%" max-height="672px">
+      <el-table-column prop="start_time" label="周期开始时间">
+      </el-table-column>
+      <el-table-column prop="end_time" label="周期结束时间"> </el-table-column>
+      <el-table-column prop="game_user_amount" label="玩家流水(元)">
+      </el-table-column>
+      <el-table-column prop="game_user_profit" label="玩家佣金(元)">
+      </el-table-column>
+      <el-table-column prop="promoter_amount" label="推广员流水(元)">
+      </el-table-column>
+      <el-table-column prop="promoter_profit" label="推广员佣金(元)">
+      </el-table-column>
+      <el-table-column prop="_profit" label="可提现金额(元)"> </el-table-column>
+      <!-- <el-table-column
+        prop="tag"
+        label="标签"
+        width="100"
+        filter-placement="bottom-end"
+      >
+        <template slot-scope="scope">
+          <el-tag
+            :type="scope.row.tag === '未提现' ? 'primary' : 'success'"
+            disable-transitions
+          >
+            {{ scope.row.tag }}
+          </el-tag>
+        </template></el-table-column
+      > -->
+    </el-table>
     <!-- 分页 -->
-    <el-pagination
-      v-if="tableList.length > 1"
+    <!-- <el-pagination
+      v-if="totalPage > 1"
       class="performance_page"
       layout="prev, pager, next, jumper"
       :total="50 * 10"
       :current-page="1"
       @current-change="pageChange"
     >
-    </el-pagination>
+    </el-pagination> -->
   </div>
 </template>
 
@@ -23,115 +95,86 @@ export default {
   components: {
     Table,
   },
+  inject: ["checkCode"],
   data() {
     return {
-      tableData: null, // 表格需要的内容
-      // 网络请求拿到的表格的数据
-      tableList: [
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "已发放",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "处理中",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "已发放",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "处理中",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "未成功",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "已发放",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "处理中",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "未成功",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "已发放",
-        },
-        {
-          date: "2021-04-16 16:16:16",
-          performance: 1,
-          personMoney: "999",
-          state: "处理中",
-        },
-      ],
+      tableData: [], // 提现记录列表
+      pageSize: 10, // 一页大小
+      pageIndex: 1, // 当前页
+      totalPage: 1, // 总页数
+      clipboard: null, // 复制
     };
   },
   computed: {},
   watch: {},
   created() {},
   mounted() {
-    // 初始化表格内容
-    this.initTable();
+    this.initClipboard();
+    // 提现记录
+    this.withdrawList(this.pageIndex, this.pageSize);
+  },
+  beforeDestroy() {
+    this.clipboard.destroy();
   },
   methods: {
-    // 初始化表格内容
-    initTable() {
-      const { tableList } = this;
-      this.tableData = {
-        data: tableList,
-        list: [
-          {
-            title: "日期",
-            value: "date",
-            width: "25%",
-          },
-          {
-            title: "直营业绩",
-            value: "performance",
-            width: "25%",
-          },
-          {
-            title: "个人佣金",
-            value: "personMoney",
-            width: "25%",
-          },
-          {
-            title: "状态",
-            value: "state",
-            width: "25%",
-          },
-        ],
-      };
+    // 提现记录查询
+    withdrawList(pageIndex, pageSize) {
+      this.pageIndex = pageIndex;
+      this.$api.withdrawList({ pageIndex, pageSize }).then((res) => {
+        this.checkCode(res);
+        const { code, data } = res.data;
+        if (code) {
+          return;
+        }
+        data.map((ele) => {
+          const {
+            game_user_amount,
+            game_user_profit,
+            promoter_amount,
+            promoter_profit,
+          } = ele;
+
+          ele.game_user_amount = (game_user_amount / 100).toFixed(2);
+          ele.game_user_profit = (game_user_profit / 100).toFixed(2);
+          ele.promoter_amount = (promoter_amount / 100).toFixed(2);
+          ele.promoter_profit = (promoter_profit / 100).toFixed(2);
+          ele._profit = ((game_user_profit + promoter_profit) / 100).toFixed(
+            2
+          );
+        });
+        // 成功
+        this.tableData = data;
+        // this.totalPage = Math.ceil(data.count / this.pageSize);
+      });
     },
+
     // 分页页码改变
     pageChange(currentPage) {
       // console.log("当前页", currentPage);
     },
+
+    // 标签筛选
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+
+    /**
+     * 初始化 clipboard插件
+     */
+    initClipboard() {
+      this.clipboard = new this.$clipboard(".copy");
+      this.clipboard.on("success", (e) => {
+        this.$notify({
+          message: "复制成功!",
+          type: "success",
+        });
+      });
+      this.clipboard.on("error", () => {
+        this.$notify.error({
+          message: "复制失败!",
+        });
+      });
+    },
   },
 };
 </script>
@@ -139,10 +182,65 @@ export default {
 <style lang='less' scoped>
 .performance {
   width: 98%;
+  min-width: 1100px;
   margin: 0 auto;
 
+  .title {
+    height: 100px;
+    line-height: 100px;
+    text-align: left;
+
+    .left {
+      font-weight: 600;
+      font-size: 20px;
+    }
+    .left,
+    .wx {
+      margin-right: 40px;
+      float: left;
+    }
+
+    .tip {
+      float: left;
+      margin-right: 10px;
+    }
+
+    .wx {
+      height: 40px;
+      line-height: 40px;
+      margin-top: 30px;
+
+      .promo_code {
+        width: 150px;
+        padding-left: 20px;
+        float: left;
+        border: 1px solid #e6e6e6;
+        border-radius: 5px 0 0 5px;
+        background-color: #fff;
+      }
+      .copy {
+        width: 40px;
+        float: left;
+        text-align: center;
+        border: 1px solid #e6e6e6;
+        border-left: 0;
+        border-radius: 0 5px 5px 0;
+        background-color: #fff;
+      }
+    }
+  }
+
   .performance_page {
     margin-top: 20px;
   }
+
+  /deep/.el-table td,
+  /deep/.el-table th {
+    text-align: center;
+  }
+
+  /deep/.el-table__body-wrapper {
+    overflow-y: auto;
+  }
 }
 </style>

src/views/PromoCode/PromoCodeTable/PromoCodeTable.vue

@@ -1,13 +1,14 @@
-<template>
+d<template>
   <div class="promo_code_table">
     <!-- 表格 -->
     <div class="promo_table">
       <!-- <Table v-if="tableList && tableList.length > 0" :tableData="tableData" /> -->
       <el-table :data="tableList" border style="width: 100%">
-        <el-table-column prop="Id" label="Id"> </el-table-column>
-        <el-table-column prop="CreateAt" label="日期"> </el-table-column>
-        <el-table-column prop="PromoCode" label="推广码"> </el-table-column>
-        <el-table-column label="操作" width="300">
+        <el-table-column prop="id" label="id"> </el-table-column>
+        <el-table-column prop="createAt" label="日期"> </el-table-column>
+        <el-table-column prop="promoCode" label="推广码"> </el-table-column>
+        <el-table-column prop="note" label="备注"> </el-table-column>
+        <el-table-column label="操作" width="400">
           <template slot-scope="scope">
             <el-button
               size="mini"
@@ -27,6 +28,36 @@
             >
               复制推广员推广码
             </el-button>
+            <el-popover v-model="visible" width="450" trigger="click">
+              <div
+                class="remark_box"
+                @keyup.enter="remarkConifrm(scope.$index, scope.row)"
+              >
+                <el-input
+                  class="remark_input"
+                  v-model="remarkInput"
+                  placeholder="请输入备注"
+                  maxlength="64"
+                ></el-input>
+                <el-button
+                  type="primary"
+                  plain
+                  :class="{ gray: !canRemark }"
+                  @click="remarkConifrm(scope.$index, scope.row)"
+                >
+                  确定
+                </el-button>
+              </div>
+              <el-button
+                slot="reference"
+                type="success"
+                size="mini"
+                class="promo_code_btn"
+                @click="toRemark(scope.$index, scope.row)"
+              >
+                备注推广码
+              </el-button>
+            </el-popover>
           </template>
         </el-table-column>
       </el-table>
@@ -52,11 +83,15 @@ export default {
   components: {
     Table,
   },
+  inject: ["checkCode"],
   data() {
     return {
       tableData: null, // 表格需要的内容
       clipboard: null, // 复制
       promoCode: "", // 推广码
+      remarkInput: "", // 备注
+      visible: false, // 是否显示备注修改气泡框
+      canRemark: true, // 是否可以修改备注
     };
   },
   props: {
@@ -151,7 +186,44 @@ export default {
 
     // 复制玩家推广码
     handleCopyPlayer(index, rowData) {
-      this.promoCode = `${this.playerLink}?promoCode=${rowData.PromoCode}`;
+      this.promoCode = `${this.playerLink}?promoCode=${rowData.promoCode}`;
+    },
+
+    // 备注
+    toRemark(index, rowData) {
+      this.remarkInput = rowData.note;
+    },
+
+    // 修改推广码备注
+    remarkConifrm(index, rowData) {
+      if (!this.canRemark) {
+        return;
+      }
+
+      const { remarkInput } = this;
+      const { id } = rowData;
+      this.$api
+        .updatePromoCode({
+          note: remarkInput,
+          id,
+        })
+        .then((res) => {
+          this.canRemark = true;
+          this.checkCode(res);
+          const { code, msg } = res.data;
+          // 错误
+          if (code) {
+            return;
+          }
+          // 成功
+          this.$notify({
+            message: msg,
+            type: "success",
+          });
+          this.visible = false;
+          // 重新请求这一页的数据
+          this.pageChange(this.pageIndex);
+        });
     },
   },
 };
@@ -173,5 +245,17 @@ export default {
     position: absolute;
     top: -100%;
   }
+
+  .promo_code_btn {
+    margin-left: 10px;
+  }
+}
+</style>
+
+<style lang="less">
+.remark_box {
+  .remark_input {
+    width: 80%;
+  }
 }
 </style>