分销结构优化

buyer/src/api/distribution.js

@@ -0,0 +1,110 @@
+import request, {Method} from '@/plugins/request.js';
+
+/**
+ * 获取当前会员分销信息
+ */
+export function distribution () {
+  return request({
+    url: `/buyer/distribution/distribution`,
+    method: Method.GET,
+    needToken: true
+  });
+}
+
+/**
+ * 申请成为分销员
+ * @param idNumber 身份证号
+ * @param name  名字
+ */
+export function applyDistribution (params) {
+  return request({
+    url: `/buyer/distribution/distribution`,
+    method: Method.POST,
+    needToken: true,
+    params
+  });
+}
+
+/**
+ * 获取分销员订单列表
+ */
+export function getDistOrderList (params) {
+  return request({
+    url: `/buyer/distribution/order`,
+    method: Method.GET,
+    needToken: true,
+    params
+  });
+}
+
+/**
+ * 获取分销员下级用户列表
+ */
+export function getDistMemberList (params) {
+  return request({
+    url: `/buyer/distribution/distribution/memberList`,
+    method: Method.GET,
+    needToken: true,
+    params
+  });
+}
+
+/**
+ * 获取分销商商品列表
+ */
+export function getDistGoodsList (params) {
+  return request({
+    url: `/buyer/distribution/goods`,
+    method: Method.GET,
+    needToken: true,
+    params
+  });
+}
+
+/**
+ * 分销员提现历史
+ */
+export function distCashHistory (params) {
+  return request({
+    url: `/buyer/distribution/cash`,
+    method: Method.GET,
+    needToken: true,
+    params
+  });
+}
+
+/**
+ * 分销员-团队列表
+ */
+export function getDistGroupList (params) {
+  return request({
+    url: `/buyer/distribution/distribution/groupList`,
+    method: Method.GET,
+    needToken: true,
+    params
+  });
+}
+
+/**
+ * 分销商提现
+ */
+export function distCash (params) {
+  return request({
+    url: `/buyer/distribution/cash`,
+    method: Method.POST,
+    needToken: true,
+    params
+  });
+}
+
+/**
+ * 绑定分销
+ * @param distributionId 商品分销ID
+ */
+export function getGoodsDistribution (distributionId) {
+  return request({
+    url: `/buyer/distribution/distribution/bindingDistribution/${distributionId}`,
+    method: Method.GET,
+    needToken: true
+  });
+}

buyer/src/api/member.js

@@ -333,92 +333,7 @@ export function clearComplain (id) {
   });
 }
 
-/**
- * 获取当前会员分销信息
- */
-export function distribution () {
-  return request({
-    url: `/buyer/distribution/distribution`,
-    method: Method.GET,
-    needToken: true
-  });
-}
 
-/**
- * 申请成为分销商
- * @param idNumber 身份证号
- * @param name  名字
- */
-export function applyDistribution (params) {
-  return request({
-    url: `/buyer/distribution/distribution`,
-    method: Method.POST,
-    needToken: true,
-    params
-  });
-}
-
-/**
- * 获取分销商订单列表
- */
-export function getDistOrderList (params) {
-  return request({
-    url: `/buyer/distribution/order`,
-    method: Method.GET,
-    needToken: true,
-    params
-  });
-}
-
-/**
- * 获取分销商商品列表
- */
-export function getDistGoodsList (params) {
-  return request({
-    url: `/buyer/distribution/goods`,
-    method: Method.GET,
-    needToken: true,
-    params
-  });
-}
-
-/**
- * 绑定、解绑分销商品
- * @param distributionGoodsId 分销商品id
- * @param checked 分销商品id,true为绑定，false为解绑
- */
-export function selectDistGoods (params) {
-  return request({
-    url: `/buyer/distribution/goods/checked/${params.distributionGoodsId}`,
-    method: Method.GET,
-    needToken: true,
-    params
-  });
-}
-
-/**
- * 分销商提现历史
- */
-export function distCashHistory (params) {
-  return request({
-    url: `/buyer/distribution/cash`,
-    method: Method.GET,
-    needToken: true,
-    params
-  });
-}
-
-/**
- * 分销商提现
- */
-export function distCash (params) {
-  return request({
-    url: `/buyer/distribution/cash`,
-    method: Method.POST,
-    needToken: true,
-    params
-  });
-}
 
 /**
  * 我的足迹

buyer/src/pages/home/memberCenter/Distribution.vue

@@ -12,20 +12,8 @@
         <FormItem label="身份证号" prop="idNumber">
           <Input v-model="applyForm.idNumber"></Input>
         </FormItem>
-        <FormItem label="银行开户行" prop="settlementBankBranchName">
-          <Input v-model="applyForm.settlementBankBranchName"></Input>
-        </FormItem>
-        <FormItem label="银行开户名" prop="settlementBankAccountName">
-          <Input v-model="applyForm.settlementBankAccountName"></Input>
-        </FormItem>
-        <FormItem label="银行账号" prop="settlementBankAccountNum">
-          <Input v-model="applyForm.settlementBankAccountNum"></Input>
-        </FormItem>
-
         <FormItem>
-          <Button type="primary" :loading="applyLoading" @click="apply"
+          <Button type="primary" :loading="applyLoading" @click="apply">提交申请</Button>
-          >提交申请</Button
-          >
         </FormItem>
       </Form>
     </div>
@@ -34,43 +22,69 @@
       <Alert type="success">
         您提交的信息正在审核
         <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
+        >提交认证申请后，工作人员将在三个工作日进行核对完成审核
+        </template
         >
       </Alert>
     </div>
     <!-- 分销提现、商品、订单 -->
     <div v-if="status === 2">
       <div class="tips">
-
         <p>分销下线付款之后会生成分销订单。</p>
-        <p>
+        <p>交易完成后返佣可提现。</p>
-          冻结金额：用户提现金额即为冻结金额，审核通过后扣除冻结金额，审核拒绝之后冻结金额返回可提现金额。
-        </p>
-        <p>可提现金额：分销订单佣金T+1解冻后可变为可提现金额。</p>
-
       </div>
 
       <div class="box">
         <div class="mb_20 account-price">
-          <span class="subTips">可提现金额：</span>
+          <span class="subTips">可提现金额(元)：</span>
-          <span class="fontsize_48 global_color"
+          <span class="fontsize_48 global_color">{{ result.canRebate | unitPrice }}</span>
-          >￥{{ result.canRebate | unitPrice }}</span
+          <span class="subTips">待结算：</span>
-          >
+          <span class="">{{ result.commissionFrozen | unitPrice }}</span>
-          <span class="subTips">冻结金额：</span>
+          <span class="subTips">总收益(元)：</span>
-          <span class="">￥{{ result.commissionFrozen | unitPrice }}</span>
+          <span class="">{{ result.rebateTotal | unitPrice }}</span>
-          <span class="subTips">返利总金额：</span>
-          <span class="">￥{{ result.rebateTotal | unitPrice }}</span>
           <Button
             type="primary"
             size="small"
             class="ml_20"
-            @click="withdrawApplyModal = true"
+            @click="withdrawApplyModal = true">申请提现
-          >申请提现</Button
+          </Button>
-          >
         </div>
       </div>
       <Tabs :value="tabName" @on-click="tabPaneChange">
-        <TabPane label="已选商品" name="goodsChecked">
+        <TabPane label="推广订单" name="order">
+          <Table stripe :columns="orderColumns" :data="orderData.records">
+            <template slot-scope="{ row }" slot="createTime">
+              <span>{{ row.createTime }}</span>
+            </template>
+            <template slot-scope="{ row }" slot="goodsName">
+              <span>{{ row.goodsName }}</span>
+            </template>
+            <template slot-scope="{ row }" slot="num">
+              <span>{{ row.num }}</span>
+            </template>
+            <template slot-scope="{ row }" slot="rebate">
+              <span>{{ row.rebate }}</span>
+            </template>
+            <template slot-scope="{ row }" slot="distributionOrderStatus">
+              <span v-if="row.distributionOrderStatus == 'NO_COMPLETED'">未完成</span>
+              <span v-else-if="row.distributionOrderStatus == 'COMPLETE'">订单完成</span>
+              <span v-else-if="row.distributionOrderStatus == 'CANCEL'">订单取消</span>
+              <span v-else-if="row.distributionOrderStatus == 'REFUND'">订单退款</span>
+            </template>
+          </Table>
+          <div class="page-size">
+            <Page
+              :current="orderParams.pageNumber"
+              :total="orderData.total"
+              :page-size="orderParams.pageSize"
+              @on-change="changeOrderPage"
+              size="small"
+              show-total
+              show-elevator
+            ></Page>
+          </div>
+        </TabPane>
+        <TabPane label="推广商品" name="goods">
           <Table stripe :columns="goodsColumns" :data="goodsData.records">
             <template slot-scope="{ row }" slot="name">
               <div
@@ -79,20 +93,21 @@
                   linkTo(
                     `/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`
                   )
-                "
+                ">
-              >
                 <img
                   style="vertical-align: top"
                   :src="row.thumbnail"
                   width="60"
                   height="60"
-                  alt=""
+                  alt=""/>&nbsp; {{ row.goodsName }}
-                />&nbsp; {{ row.goodsName }}
               </div>
             </template>
             <template slot-scope="{ row }" slot="price">
               <span> ￥{{ row.price | unitPrice }}</span>
             </template>
+            <template slot-scope="{ row }" slot="firstProportion">
+              <span style="margin-left: 10px;"> {{ row.firstProportion }}%</span>
+            </template>
             <template slot-scope="{ row }" slot="commission">
               <span> ￥{{ row.commission | unitPrice }}</span>
             </template>
@@ -101,15 +116,8 @@
                 type="success"
                 size="small"
                 style="margin-right: 5px"
-                @click="fenxiao(row)"
+                @click="fenxiao(row)">邀请好友
-              >分销商品</Button
+              </Button>
-              >
-              <Button
-                type="error"
-                size="small"
-                @click="selectGoods(row.id, false)"
-              >取消选择</Button
-              >
             </template>
           </Table>
           <div class="page-size">
@@ -124,48 +132,30 @@
             ></Page>
           </div>
         </TabPane>
-        <TabPane label="未选商品" name="goodsUncheck">
+        <TabPane label="我的客户" name="member">
-          <Table stripe :columns="goodsColumns" :data="goodsData.records">
+          <Table stripe :columns="memberColumns" :data="memberData.records">
-            <template slot-scope="{ row }" slot="name">
+            <template slot-scope="{ row }" slot="nickName">
-              <div
+              <span>{{ row.nickName }}</span>
-                class="goods-msg"
-                @click="
-                  linkTo(
-                    `/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`
-                  )
-                "
-              >
-                <img
-                  style="vertical-align: top"
-                  :src="row.thumbnail"
-                  width="60"
-                  height="60"
-                  alt=""
-                />&nbsp; {{ row.goodsName }}
-              </div>
             </template>
-            <template slot-scope="{ row }" slot="price">
+            <template slot-scope="{ row }" slot="orderPrice">
-              <span> ￥{{ row.price | unitPrice }}</span>
+              <span>{{ row.orderPrice }}</span>
             </template>
-            <template slot-scope="{ row }" slot="commission">
+            <template slot-scope="{ row }" slot="rebatePrice">
-              <span> ￥{{ row.commission | unitPrice }}</span>
+              <span>{{ row.rebatePrice }}</span>
             </template>
-            <template slot-scope="{ row }" slot="action">
+            <template slot-scope="{ row }" slot="orderNum">
-              <Button
+              <span>{{ row.orderNum }}</span>
-                type="primary"
+            </template>
-                size="small"
+            <template slot-scope="{ row }" slot="lastLoginDate">
-                style="margin-right: 5px"
+              <span>{{ row.lastLoginDate }}</span>
-                @click="selectGoods(row.id, true)"
-              >选择商品</Button
-              >
             </template>
           </Table>
           <div class="page-size">
             <Page
-              :current="params.pageNumber"
+              :current="memberParams.pageNumber"
-              :total="goodsData.total"
+              :total="memberData.total"
-              :page-size="params.pageSize"
+              :page-size="memberParams.pageSize"
-              @on-change="changePage"
+              @on-change="changeOrderPage"
               size="small"
               show-total
               show-elevator
@@ -183,13 +173,11 @@
             <template slot-scope="{ row }" slot="price">
               <span
                 v-if="row.distributionCashStatus == 'VIA_AUDITING'"
-                style="color: green"
+                style="color: green">
-              >
+                ￥{{ row.price | unitPrice }}</span
-                +￥{{ row.price | unitPrice }}</span
               >
               <span v-else style="color: red">
-                -￥{{ row.price | unitPrice }}</span
+                ￥{{ row.price | unitPrice }}</span>
-              >
             </template>
             <template slot-scope="{ row }" slot="status">
               <span>
@@ -199,8 +187,7 @@
                     : row.distributionCashStatus == "VIA_AUDITING"
                       ? "通过"
                       : "拒绝"
-                }}</span
+                }}</span>
-              >
             </template>
           </Table>
           <div class="page-size">
@@ -215,6 +202,30 @@
             ></Page>
           </div>
         </TabPane>
+        <TabPane label="我的团队" name="group">
+          <Table stripe :columns="groupColumns" :data="groupData.records">
+            <template slot-scope="{ row }" slot="memberName">
+              <span>{{ row.memberName }}</span>
+            </template>
+            <template slot-scope="{ row }" slot="distributionOrderPrice">
+              <span>{{ row.distributionOrderPrice }}</span>
+            </template>
+            <template slot-scope="{ row }" slot="distributionOrderCount">
+              <span>{{ row.distributionOrderCount }}</span>
+            </template>
+          </Table>
+          <div class="page-size">
+            <Page
+              :current="groupParams.pageNumber"
+              :total="groupData.total"
+              :page-size="groupParams.pageSize"
+              @on-change="changeOrderPage"
+              size="small"
+              show-total
+              show-elevator
+            ></Page>
+          </div>
+        </TabPane>
       </Tabs>
     </div>
     <!-- 未开放 -->
@@ -222,7 +233,8 @@
       <Alert type="error">
         分销功能暂未开启
         <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
+        >提交认证申请后，工作人员将在三个工作日进行核对完成审核
+        </template
         >
       </Alert>
     </div>
@@ -239,7 +251,8 @@
       <Alert type="success">
         您提交的申诉正在审核
         <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
+        >提交认证申请后，工作人员将在三个工作日进行核对完成审核
+        </template
         >
       </Alert>
     </div>
@@ -250,8 +263,7 @@
       </p>
       <div>
         <Input v-model="withdrawPrice" size="large" number maxlength="9"
-        ><span slot="append">元</span></Input
+        ><span slot="append">元</span></Input>
-        >
       </div>
       <div slot="footer" style="text-align: center">
         <Button type="primary" size="large" @click="withdraw">提现</Button>
@@ -260,19 +272,9 @@
     <Modal v-model="qrcodeShow" title="分销商品" width="800">
       <Alert type="warning"> 下载二维码或者复制链接分享商品</Alert>
       <div class="qrcode">
-        <div style="width: 150px; height: 150px; border: 1px solid #eee">
+        <div style="width: 150px; height: 150px; ">
-          <vue-qr
+          <div class="qrcode-platform" style="margin-top: 100px">PC端</div>
-            :text="qrcode"
+          <Button style="margin-left: 40px; margin-top: 65px" type="success" @click="copyUrlLink">复制链接</Button>
-            :callback="qrcodeData"
-            :margin="0"
-            colorDark="#000"
-            colorLight="#fff"
-            :size="150"
-          ></vue-qr>
-          <div class="qrcode-platform">PC端</div>
-          <Button class="download-btn" type="success" @click="downloadQrcode"
-          >下载二维码</Button
-          >
         </div>
         <div style="width: 150px; height: 150px; border: 1px solid #eee">
           <vue-qr
@@ -285,13 +287,13 @@
           ></vue-qr>
           <div class="qrcode-platform">移动应用端</div>
           <Button class="download-btn" type="success" @click="downloadQrcodeH5"
-          >下载二维码</Button
+          >下载二维码
+          </Button
           >
         </div>
       </div>
 
       <div class="mt_10" style="margin-top: 100px;">
-        商品链接：<Input style="width: 600px" v-model="qrcode"></Input>
       </div>
     </Modal>
   </div>
@@ -304,11 +306,13 @@ import {
   distCash,
   distCashHistory,
   getDistGoodsList,
-  selectDistGoods,
+  getDistOrderList,
-} from "@/api/member.js";
+  getDistMemberList,
+  getDistGroupList
+} from "@/api/distribution.js";
 import {IDCard} from "@/plugins/RegExp.js";
-import { checkBankno } from "@/plugins/Foundation";
 import vueQr from "vue-qr";
+
 export default {
   name: "Distribution",
   components: {vueQr},
@@ -324,53 +328,41 @@ export default {
           {required: true, message: "请输入身份证号"},
           {pattern: IDCard, message: "请输入正确的身份证号"},
         ],
-        settlementBankBranchName: [
-          {
-            required: true,
-            message: "请输入银行开户行",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
       },
-        ],
+      tabName: "order", // 当前所在tab
-        settlementBankAccountName: [
-          {
-            required: true,
-            message: "请输入银行开户名",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ],
-        //银行账号
-        settlementBankAccountNum: [
-          {
-            required: true,
-            message: "银行账号不正确",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-          {
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return checkBankno(value);
-            },
-            message: "银行账号不正确",
-          },
-        ],
-      },
-      tabName: "goodsChecked", // 当前所在tab
       result: {}, // 审核结果
       applyLoading: false, // 申请加载状态
       goodsLoading: false, // 列表加载状态
+      orderLoading: false, // 订单加载状态
       withdrawApplyModal: false, // 提现表单显隐
       withdrawPrice: 0, // 提现金额
       goodsData: {}, // 商品数据
+      orderData:{}, //订单数据
+      memberData:{}, //订单数据
       logData: {}, // 日志数据
+      groupData:{},//团队数据
+      orderColumns:[
+        //订单表头
+        {title: "下单时间", slot: "createTime", minWidth: 200},
+        {title: "商品名称", slot: "goodsName", minWidth: 200},
+        {title: "数量", slot: "num"},
+        {title: "佣金金额", slot: "rebate"},
+        {title: "状态", slot: "distributionOrderStatus"},
+      ],
+      memberColumns:[
+        //客户列表表头
+        {title: "客户昵称", slot: "nickName", minWidth: 150},
+        {title: "成交额", slot: "orderPrice"},
+        {title: "佣金总额", slot: "rebatePrice"},
+        {title: "订单数", slot: "orderNum"},
+        {title: "最近下单时间", slot: "lastLoginDate", minWidth: 150},
+      ],
       goodsColumns: [
         // 商品表头
         {title: "商品名称", slot: "name", width: 400},
         {title: "商品价格", slot: "price"},
-        { title: "佣金", slot: "commission" },
+        {title: "佣金比例", slot: "firstProportion"},
+        {title: "预计赚", slot: "commission"},
         {title: "操作", slot: "action", minWidth: 120},
       ],
       logColumns: [
@@ -380,16 +372,32 @@ export default {
         {title: "提现金额", slot: "price"},
         {title: "提现状态", slot: "status"},
       ],
+      groupColumns: [
+        // 团队表头
+        {title: "昵称", slot: "memberName"},
+        {title: "销售额", slot: "distributionOrderPrice"},
+        {title: "订单量", slot: "distributionOrderCount"},
+      ],
       params: {
         // 商品请求参数
         pageNumber: 1,
         pageSize: 20,
-        checked: true,
+        sort: "createTime",
+        order: "desc",
       },
       orderParams: {
         // 订单商品请求参数
         pageNumber: 1,
         pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
+      memberParams: {
+        // 会员请求参数
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
       },
       logParams: {
         // 日志参数
@@ -398,6 +406,13 @@ export default {
         sort: "createTime",
         order: "desc",
       },
+      groupParams: {
+        // 会员请求参数
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
       qrcode: "", // 二维码
       qrcodeH5: "",//H5二维码
       qrcodeShow: false, // 显示二维码
@@ -447,6 +462,15 @@ export default {
       // 二维码H5端base64地址
       this.base64ImgH5 = data64;
     },
+    copyUrlLink(){
+      navigator.clipboard.writeText(this.qrcode)
+        .then(() => {
+          this.$Message.success("复制成功！");
+        })
+        .catch(err => {
+          this.$Message.error("复制失败！");
+        });
+    },
     downloadQrcode() {
       // 下载二维码
       let a = document.createElement("a"); // 生成一个a元素
@@ -465,18 +489,33 @@ export default {
     },
     tabPaneChange(tab) {
       // tab栏切换
-      if (tab === "goodsChecked") {
+      if (tab === "goods") {
-        this.params.checked = true;
-        this.params.pageNUmber = 1;
-        this.getGoodsData();
-      } else if (tab === "goodsUncheck") {
         this.params.checked = false;
         this.getGoodsData();
+      }else if (tab === "order") {
+        this.orderParams.checked = false;
+        this.getOrderData();
+      }else if (tab === "member") {
+        this.memberParams.checked = false;
+        this.getMemberData();
       } else if (tab === "log") {
         this.logParams.pageNumber = 1;
         this.getLog();
+      }else if (tab === "group") {
+        this.groupParams.pageNumber = 1;
+        this.getGroupData();
       }
     },
+    changeOrderPage(val) {
+      // 修改页码
+      this.orderParams.pageNumber = val;
+      this.getOrderData();
+    },
+    changeMemberPage(val) {
+      // 修改页码
+      this.memberParams.pageNumber = val;
+      this.getMemberData();
+    },
     changePage(val) {
       // 修改页码
       this.params.pageNumber = val;
@@ -487,19 +526,6 @@ export default {
       this.logParams.pageNumber = val;
       this.getLog();
     },
-    selectGoods(id, checked) {
-      // 选择商品
-      let params = {
-        distributionGoodsId: id,
-        checked: checked,
-      };
-      selectDistGoods(params).then((res) => {
-        if (res.success) {
-          this.$Message.success("操作成功！");
-          this.getGoodsData();
-        }
-      });
-    },
     fenxiao(row) {
       // 分销商品
       this.qrcode = `${this.config.PC_DOMAIN}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
@@ -507,6 +533,18 @@ export default {
       this.goodsNameCurr = row.goodsName;
       this.qrcodeShow = true;
     },
+    getOrderData(){
+      // 订单数据
+      getDistOrderList(this.orderParams).then((res) => {
+        if (res.success) this.orderData = res.result;
+      });
+    },
+    getMemberData(){
+      // 订单数据
+      getDistMemberList(this.memberParams).then((res) => {
+        if (res.success) this.memberData = res.result;
+      });
+    },
     getGoodsData() {
       // 商品数据
       getDistGoodsList(this.params).then((res) => {
@@ -519,6 +557,12 @@ export default {
         if (res.success) this.logData = res.result;
       });
     },
+    getGroupData() {
+      // 团队列表
+      getDistGroupList(this.groupParams).then((res) => {
+        if (res.success) this.groupData = res.result;
+      });
+    },
     //申诉
     repaying() {
       applyDistribution().then((res) => {
@@ -537,7 +581,7 @@ export default {
           let type = res.result.distributionStatus;
           if (type === "PASS") {
             this.status = 2;
-            this.getGoodsData();
+            this.getOrderData();
           } else if (type === "REFUSE") {
             this.status = 0;
           } else if (type === "RETREAT") {
@@ -563,28 +607,35 @@ export default {
 .box {
   margin: 20px 0;
 }
+
 .page-size {
   margin: 15px 0px;
   text-align: right;
 }
+
 .account-price {
   font-weight: bold;
 }
+
 .subTips {
   margin-left: 10px;
 }
+
 .fontsize_48 {
   font-size: 48px;
 }
+
 .goods-msg {
   display: flex;
   align-items: center;
   padding: 3px;
+
   &:hover {
     color: $theme_color;
     cursor: pointer;
   }
 }
+
 .download-btn {
   // position: relative;
   // top: -200px;
@@ -592,25 +643,30 @@ export default {
   margin-left: 25px;
   margin-top: 5px
 }
+
 /deep/ .ivu-alert-message {
   p {
     margin: 4px 0;
   }
 }
+
 .tips {
   background: #f7f7f7;
   padding: 16px;
   border-radius: .4em;
+
   > p {
     margin: 6px 0;
   }
 }
+
 .qrcode {
   display: flex;
   justify-content: space-evenly;
   padding-top: 10px
 
 }
+
 .qrcode-platform {
   text-align: center;
   font-size: 14px;

manager/src/api/distribution.js

@@ -53,6 +53,11 @@ export const getDistributionCash = (params) => {
 export const auditDistributionCash = (id,params) => {
     return postRequest(`/distribution/cash/audit/${id}`, params)
 }
-
+//分销会员列表
-
+export const getDistributionMember = (id,params) => {
-
+  return getRequest(`/distribution/distribution/memberList/${id}`, params)
+}
+//查看分销团队列表
+export const getDistributionGroup = (id,params) => {
+  return getRequest(`/distribution/distribution/groupList/${id}`, params)
+}

manager/src/router/router.js

@@ -276,7 +276,19 @@ export const otherRouter = {
       title: "查看直播",
       name: "live-detail",
       component: () => import("@/views/promotions/live/live-detail.vue")
-    }
+    },
+    {
+      path: "group-list",
+      title: "分销团队",
+      name: "group-list",
+      component: () => import("@/views/distribution/distributionGroup.vue")
+    },
+    {
+      path: "distribution-member",
+      title: "分销会员列表",
+      name: "distribution-member",
+      component: () => import("@/views/distribution/distributionMember.vue")
+    },
   ]
 };
 

manager/src/views/distribution/distribution.vue

@@ -90,19 +90,23 @@ export default {
         {
           title: "会员名称",
           key: "memberName",
-          minWidth: 120,
+          minWidth: 200,
           tooltip: true,
         },
         {
           title: "推广单数",
           key: "distributionOrderCount",
-          minWidth: 120,
+          minWidth: 200,
-          width: 150,
+        },
+        {
+          title: "推广人数",
+          key: "peopleNum",
+          minWidth: 200,
         },
         {
           title: "分销金额",
           key: "rebateTotal",
-          width: 150,
+          minWidth: 200,
           sortable: false,
           render: (h, params) => {
             return h("priceColorScheme", {props:{value:params.row.rebateTotal,color:this.$mainColor}} );
@@ -110,9 +114,9 @@ export default {
 
         },
         {
-          title: "可用金额",
+          title: "可提现金额",
           key: "canRebate",
-          width: 150,
+          minWidth: 200,
           sortable: false,
           render: (h, params) => {
             return h("priceColorScheme", {props:{value:params.row.canRebate,color:'green'}} );
@@ -121,7 +125,7 @@ export default {
         {
           title: "冻结金额",
           key: "commissionFrozen",
-          width: 150,
+          minWidth: 200,
           sortable: false,
           render: (h, params) => {
             return h("priceColorScheme", {props:{value:params.row.commissionFrozen,color:'#347dda'}} );
@@ -130,7 +134,7 @@ export default {
         {
           title: "状态",
           key: "distributionStatus",
-          width: 150,
+          minWidth: 200,
           sortable: false,
           render: (h, params) => {
             if (params.row.distributionStatus == "PASS") {
@@ -149,7 +153,7 @@ export default {
           key: "action",
           align: "center",
           fixed: "right",
-          width: 140,
+          minWidth: 200,
           render: (h, params) => {
             return h(
               "div",
@@ -159,7 +163,42 @@ export default {
                   justifyContent: "center",
                 },
               },
-              [
+              [h(
+                "Button",
+                {
+                  props: {
+                    type: "success",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.memberList(params.row);
+                    },
+                  },
+                },
+                "下级用户"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "info",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.groupList(params.row);
+                    },
+                  },
+                },
+                "团队列表"
+                ),
                 h(
                   "Button",
                   {
@@ -214,6 +253,14 @@ export default {
     };
   },
   methods: {
+    //团队列表
+    groupList(row){
+      this.$router.push({ name: "group-list", query: { id: row.id } });
+    },
+    memberList(row){
+      this.$router.push({ name: "distribution-member", query: { id: row.id } });
+
+    },
     // 初始化数据
     init() {
       this.getDataList();

manager/src/views/distribution/distributionGoods.vue

@@ -102,11 +102,6 @@ export default {
           },
 
         },
-        {
-          title: "库存",
-          key: "quantity",
-          minWidth: 80,
-        },
         {
           title: "添加时间",
           key: "createTime",

manager/src/views/distribution/distributionGroup.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <Card>
+      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
+      <Row type="flex" justify="end" class="page padding-row">
+        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
+      </Row>
+    </Card>
+  </div>
+</template>
+
+<script>
+import {
+  getDistributionGroup
+} from "@/api/distribution";
+import {cashStatusList} from './dataJson'
+export default {
+  name: "distributionGroup",
+  data() {
+    return {
+      id: "",//分销员id
+      cashStatusList, // 状态列表
+      loading: true, // 表单加载状态
+      modalVisible: false, // 添加或编辑显示
+      modalTitle: "", // 添加或编辑标题
+      result: 'FAIL_AUDITING', // 是否通过
+      searchForm: { // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+      },
+      handleStatus:'edit',// 判断是编辑还是查看
+      form: { // 添加或编辑表单对象初始化数据
+        sn: "",
+        memberName: "",
+        price: "",
+      },
+      submitLoading: false, // 添加或编辑提交状态
+      columns: [
+        {
+          title: "昵称",
+          key: "memberName",
+          minWidth: 200
+        },
+        {
+          title: "销售额",
+          key: "distributionOrderPrice",
+          minWidth: 120
+        },
+        {
+          title: "订单量",
+          key: "distributionOrderCount",
+          minWidth: 120
+        },
+      ],
+      data: [], // 表单数据
+      total: 0 // 表单数据总数
+    };
+  },
+  methods: {
+    // 初始化数据
+    init() {
+      this.getDataList();
+    },
+    // 改变页码
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    // 改变页数
+    changePageSize(v) {
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    // 搜索
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    // 获取列表数据
+    getDataList() {
+      this.loading = true;
+      console.log(this.id);
+      // 带多条件搜索参数获取表单数据 请自行修改接口
+      getDistributionGroup(this.id,this.searchForm).then(res => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+      this.total = this.data.length;
+      this.loading = false;
+    },
+  },
+  mounted() {
+    this.id = this.$route.query.id;
+    this.init();
+  }
+};
+</script>

manager/src/views/distribution/distributionMember.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <Card>
+      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
+      <Row type="flex" justify="end" class="page padding-row">
+        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
+      </Row>
+    </Card>
+  </div>
+</template>
+
+<script>
+import {
+  getDistributionCash,
+  auditDistributionCash, getDistributionMember
+} from "@/api/distribution";
+import {cashStatusList} from './dataJson'
+export default {
+  name: "distributionMember",
+  data() {
+    return {
+      id: "",//分销员id
+      cashStatusList, // 状态列表
+      loading: true, // 表单加载状态
+      modalVisible: false, // 添加或编辑显示
+      modalTitle: "", // 添加或编辑标题
+      result: 'FAIL_AUDITING', // 是否通过
+      searchForm: { // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+      },
+      handleStatus:'edit',// 判断是编辑还是查看
+      form: { // 添加或编辑表单对象初始化数据
+        sn: "",
+        memberName: "",
+        price: "",
+      },
+      submitLoading: false, // 添加或编辑提交状态
+      columns: [
+        {
+          title: "客户昵称",
+          key: "nickName",
+          minWidth: 200
+        },
+        {
+          title: "成交额",
+          key: "orderPrice",
+          minWidth: 120
+        },
+        {
+          title: "佣金总额",
+          key: "rebatePrice",
+          minWidth: 120
+        },
+        {
+          title: "订单数",
+          key: "orderNum",
+          minWidth: 130
+        },
+        {
+          title: "最近下单时间",
+          key: "lastLoginDate",
+          minWidth: 130
+        },
+      ],
+      data: [], // 表单数据
+      total: 0 // 表单数据总数
+    };
+  },
+  methods: {
+    // 初始化数据
+    init() {
+      this.getDataList();
+    },
+    // 改变页码
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    // 改变页数
+    changePageSize(v) {
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    // 搜索
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    // 获取列表数据
+    getDataList() {
+      this.loading = true;
+      console.log(this.id);
+      // 带多条件搜索参数获取表单数据 请自行修改接口
+      getDistributionMember(this.id,this.searchForm).then(res => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+      this.total = this.data.length;
+      this.loading = false;
+    },
+  },
+  mounted() {
+    this.id = this.$route.query.id;
+    this.init();
+  }
+};
+</script>

manager/src/views/distribution/distributionOrder.vue

@@ -11,7 +11,7 @@
             style="width: 200px"
           />
         </Form-item>
-        <Form-item label="分销商" prop="distributionName">
+        <Form-item label="分销员" prop="distributionName">
           <Input
             type="text"
             v-model="searchForm.distributionName"
@@ -104,7 +104,7 @@
           },
 
           {
-            title: "分销商",
+            title: "分销员",
             key: "distributionName",
             tooltip: true,
             minWidth:80,

manager/src/views/distribution/distributionSetting.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="background-color: #fff;">
 
-    <Form ref="form" :model="form" :rules="formRule" :label-width="120" style="padding: 10px;">
+    <Form ref="form" :model="form" :label-width="120" style="padding: 10px;">
 
       <Divider orientation="left">分销设置</Divider>
       <FormItem label="是否开启分销" prop="isOpen">
@@ -10,12 +10,110 @@
           <span slot="close">关闭</span>
         </i-switch>
       </FormItem>
-      <FormItem label="分销关系绑定天数" prop="distributionDay">
+      <FormItem label="分销层级" prop="level">
-        <InputNumber :min="1" :max="365" style="width:100px;" v-model="form.distributionDay"></InputNumber>
+        <RadioGroup v-model="form.level" size="large">
+          <Radio label="1">1级</Radio>
+          <Radio label="2">2级</Radio>
+        </RadioGroup>
       </FormItem>
-      <FormItem label="分销结算天数" prop="cashDay">
+      <FormItem label="分销模式" prop="mode">
-        <InputNumber :min="0"  :max="365"  style="width:100px;" v-model="form.cashDay"></InputNumber>
+        <RadioGroup v-model="form.mode" size="large">
+          <Radio label="1">指定分销</Radio>
+          <Radio label="2">人人分销</Radio>
+        </RadioGroup>
       </FormItem>
+      <FormItem label="分销关系绑定" prop="binding">
+        <RadioGroup v-model="form.binding" size="large">
+          <Radio label="ALL">所有用户</Radio>
+          <Radio label="NEW">新用户</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="分销绑定模式" prop="validity">
+        <RadioGroup v-model="form.validity" size="large">
+          <Radio label="FOREVER">永久</Radio>
+          <Radio label="EXP">有效期</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="有效期天数" prop="validityDay">
+        <InputNumber :min="1" :max="365" style="width:200px;" v-model="form.validityDay"></InputNumber>
+      </FormItem>
+
+      <Divider orientation="left">返佣设置</Divider>
+      <FormItem label="佣金模式" prop="commissionModel">
+        <RadioGroup v-model="form.commissionModel"  size="large">
+          <Radio label="1">平台承担</Radio>
+          <Radio label="2">商户承担</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="一级佣金比例" prop="firstCommission">
+        <InputNumber :min="0" :max="100"
+                     v-model="form.firstCommission"
+                     :formatter="value => `${value}%`"
+                     :parser="value => value.replace('%', '')">
+        </InputNumber>
+      </FormItem>
+      <FormItem label="二级佣金比例" prop="secondaryCommission">
+        <InputNumber :min="0"
+                     :max="100"
+                     v-model="form.secondaryCommission"
+                     :formatter="value => `${value}%`"
+                     :parser="value => value.replace('%', '')">
+         </InputNumber>
+      </FormItem>
+      <FormItem label="自购返佣" prop="selfCommission">
+        <RadioGroup v-model="form.selfCommission"  size="large">
+          <Radio label="1">开启</Radio>
+          <Radio label="2">关闭</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="推广返佣" prop="promotion">
+        <RadioGroup v-model="form.promotion"  size="large">
+          <Radio label="1">开启</Radio>
+          <Radio label="2">关闭</Radio>
+        </RadioGroup>
+      </FormItem>
+
+      <FormItem label="每日最大推广数量" prop="maxPromotionNum">
+        <InputNumber :min="0" :max="1000" style="width:200px;" v-model="form.maxPromotionNum"></InputNumber>
+      </FormItem>
+
+<!--      <Divider orientation="left">提现设置</Divider>-->
+<!--      <FormItem label="佣金模式" prop="withdrawalType">-->
+<!--        <RadioGroup v-model="form.withdrawalType" type="button" button-style="solid">-->
+<!--          <Radio label="1">线下转账</Radio>-->
+<!--          <Radio label="2">微信零钱</Radio>-->
+<!--        </RadioGroup>-->
+<!--      </FormItem>-->
+<!--      <FormItem label="提现最低金额" prop="minPrice">-->
+<!--        <Input type="number" style="width:200px;" v-model="form.minPrice">-->
+<!--        </Input>-->
+<!--      </FormItem>-->
+<!--      <FormItem label="提现最高金额" prop="maxPrice">-->
+<!--        <Input type="number" style="width:200px;" v-model="form.maxPrice">-->
+<!--        </Input>-->
+<!--      </FormItem>-->
+<!--      <FormItem label="提现手续费" prop="fee">-->
+<!--        <Input type="number" style="width:200px;" v-model="form.fee">-->
+<!--        </Input>-->
+<!--      </FormItem>-->
+<!--      <FormItem label="是否支持银行卡" prop="withdrawalBank">-->
+<!--        <i-switch size="large" v-model="form.withdrawalBank" :true-value="true" :false-value="false">-->
+<!--          <span slot="open">开启</span>-->
+<!--          <span slot="close">关闭</span>-->
+<!--        </i-switch>-->
+<!--      </FormItem>-->
+<!--      <FormItem label="是否支持微信" prop="withdrawalWechat">-->
+<!--        <i-switch size="large" v-model="form.withdrawalWechat" :true-value="true" :false-value="false">-->
+<!--          <span slot="open">开启</span>-->
+<!--          <span slot="close">关闭</span>-->
+<!--        </i-switch>-->
+<!--      </FormItem>-->
+<!--      <FormItem label="是否支持支付宝" prop="withdrawalAli">-->
+<!--        <i-switch size="large" v-model="form.withdrawalAli" :true-value="true" :false-value="false">-->
+<!--          <span slot="open">开启</span>-->
+<!--          <span slot="close">关闭</span>-->
+<!--        </i-switch>-->
+<!--      </FormItem>-->
       <FormItem>
         <Button type="primary" @click="submit">保存</Button>
       </FormItem>
@@ -24,8 +122,8 @@
 </template>
 
 <script>
-import { setSetting, getSetting } from "@/api/index";
+import {getSetting, setSetting} from "@/api/index";
-import { regular } from "@/utils";
+
 export default {
   name: "distributionSetting",
   data() {
@@ -33,20 +131,36 @@ export default {
       form: {
         // 添加或编辑表单对象初始化数据
         isOpen: true,
-        distributionDay: 0, //分销关系绑定天数
+        level: 1, //分销层级
-        cashDay: 0, //分销结算天数
+        mode: 0, //分销模式(指定分销/人人分销)
+        binding: "NEW", //分销关系绑定（新用户/所有用户）
+        validity: "FOREVER", //分销绑定模式（有效期/永久）
+        validityDay: 0, //有效期天数
+        commissionModel: 0, //佣金模式（平台承担/商户承担）
+        firstCommission: 0, //一级佣金比例
+        secondaryCommission: 0, //二级佣金比例
+        selfCommission: 0, //自购返佣
+        promotion: 0, //推广返佣
+        maxPromotionNum: 0, //每日最大推广数量
+        // withdrawalType: 0, //提现方式（线下转账/微信零钱）
+        // minPrice: 0, //提现最低金额
+        // maxPrice: 0, //提现最高金额
+        // fee: 0, //提现手续费
+        // withdrawalBank: false, //是否支持银行卡
+        // withdrawalWechat: false, //是否支持微信
+        // withdrawalAli: false, //是否支持支付宝
       },
-      formRule: {
+      // formRule: {
-        isOpen: [
+      //   isOpen: [
-          regular.REQUIRED
+      //     regular.REQUIRED
-        ],
+      //   ],
-        distributionDay: [
+      //   distributionDay: [
-          regular.REQUIRED
+      //     regular.REQUIRED
-        ],
+      //   ],
-        cashDay: [
+      //   cashDay: [
-          regular.REQUIRED
+      //     regular.REQUIRED
-        ],
+      //   ],
-      }
+      // }
     };
   },
   methods: {

seller/src/api/distribution.js

@@ -2,71 +2,22 @@
 // 统一请求路径前缀在libs/axios.js中修改
 import {getRequest, postRequest, putRequest, deleteRequest, importRequest, getRequestWithNoToken} from '@/libs/axios';
 
-
+//获取分销设置
-//获取分销商品列表
+export const getDistributionSetting = (params) => {
-export const getDistributionGoods = (params) => {
+  return getRequest(`/distribution/setting`, params)
-  return getRequest('/distribution/goods', params)
-}
-
-// 取消分销商品
-export const distributionGoodsCancel = (id) => {
-  return deleteRequest(`/distribution/goods/cancel/${id}`)
-}
-
-// 选择分销商品
-export const distributionGoodsCheck = (id,param) => {
-  return putRequest(`/distribution/goods/checked/${id}`,param)
-}
-
-
-//查询分销商
-export const getDistributionListData = (params) => {
-    return getRequest('/distribution/getByPage', params)
-}
-//审核分销商
-export const auditDistribution = (id, params) => {
-    return putRequest(`/distribution/audit/${id}`, params)
-}
-
-// 清退分销商
-export const retreatDistribution = (id, params) => {
-    return putRequest(`/distribution/retreat/${id}`, params)
-}
-
-// 恢复分销商
-export const resumeDistribution = (id, params) => {
-    return putRequest(`/distribution/resume/${id}`, params)
 }
 
 //保存更新分销设置
 export const saveDistributionSetting = (params) => {
-    return postRequest('/distribution/setting/insertOrUpdate', params)
+    return putRequest('/distribution/setting', params)
 }
 
-//获取分销设置
-export const getDistributionSetting = (id, params) => {
-    return getRequest(`/distribution/setting/get/${id}`, params)
-}
-
-
 //获取分销订单列表
 export const getDistributionOrder = (params) => {
     return getRequest('/distribution/order', params)
 }
 
-
+//获取分销商品列表
-//删除分销商品
+export const getDistributionGoods = (params) => {
-export const delDistributionGoods = (ids) => {
+  return getRequest('/distribution/goods', params)
-    return deleteRequest(`/distribution/goods/delByIds/${ids}`)
 }
-//获取分销佣金信息
-export const getDistributionCash = (params) => {
-    return getRequest('/distribution/cash/getByPage', params)
-}
-//审核分销佣金申请
-export const auditDistributionCash = (id,params) => {
-    return postRequest(`/distribution/cash/audit/${id}`, params)
-}
-
-
-

seller/src/views/distribution/distributionSetting.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="search">
+    <Card style="margin-left: 10px">
+      <Tabs v-model="type">
+        <TabPane label="分销设置" name="INFO">
+          <Form ref="form" :model="form" :label-width="100" >
+            <FormItem label="是否开启分销" prop="isOpen" class="wangEditor">
+              <i-switch v-model="form.isOpen"></i-switch>
+              <span class="desc">开启分销，则全店商品具有分销功能</span>
+            </FormItem>
+            <FormItem label="一级佣金比例" prop="isOpen">
+              <InputNumber :min="0" :max="99999" v-model="form.commission" type="number" maxlength="2"
+                           clearable style="width: 20%"/>
+            </FormItem>
+            <FormItem label="二级分佣比例" prop="stockWarning">
+              <InputNumber :min="0" :max="99999" v-model="form.secondaryCommission" type="number"
+                           maxlength="2"
+                           clearable style="width: 20%"/>
+            </FormItem>
+            <Form-item>
+              <Button @click="handleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
+              </Button>
+            </Form-item>
+          </Form>
+        </TabPane>
+      </Tabs>
+    </Card>
+  </div>
+</template>
+
+<script>
+import {getDistributionSetting, saveDistributionSetting} from "@/api/distribution";
+
+export default {
+  name: "distributionSetting",
+  components: {},
+  data() {
+    return {
+      type: "INFO",
+      form: {
+        // 添加或编辑表单对象初始化数据
+        isOpen: false, // 是否开启分销
+        commission: 0, // 一级佣金比例
+        secondaryCommission: 0, //二级分佣比例
+      },
+      // 表单验证规则
+      validate: {},
+      submitLoading: false, // 添加或编辑提交状态
+
+    };
+  },
+  methods: {
+
+    // 初始化数据
+    init() {
+      this.getDistributionSetting();
+
+    },
+
+    //获取店铺信息
+    getDistributionSetting() {
+      this.loading = true;
+      getDistributionSetting().then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.form = res.result;
+        }
+      });
+    },
+    //提交保存
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          saveDistributionSetting(this.form).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("修改成功");
+              this.getDistributionSetting();
+            }
+          });
+        }
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style scoped lang="scss">
+.desc {
+  margin-left: 10px;
+  color: #999;
+}
+</style>