开发ing

package.json

@@ -18,10 +18,12 @@
     "axios": "^0.27.0",
     "core-js": "3.6.5",
     "dom-to-image-more": "^3.7.1",
+    "driver.js": "^1.4.0",
     "echarts": "^6.0.0",
     "element-china-area-data": "^6.1.0",
     "element-ui": "2.13.2",
     "hugerte": "^1.0.9",
+    "js-confetti": "^0.13.1",
     "js-cookie": "2.2.0",
     "lz-string": "^1.5.0",
     "normalize.css": "7.0.0",

public/static/hugerte/hugerte.css

@@ -46,3 +46,4 @@
     }
   }
 }
+

src/App.vue

@@ -34,6 +34,9 @@ export default {
   },
   mounted() {
     this.initStore()
+    this.$bus.$on('guide',()=>{
+      this.isCollapse = false
+    })
   },
   methods: {
     initStore() {

src/api/user.js

@@ -84,9 +84,10 @@ export function sentEmailCode(email) {
  * @param valid_code
  * @param register_type
  * @param country_code
+ * @param invite_code
  * @returns {*}
  */
-export function  register(email,phone,valid_code,register_type,country_code) {
+export function  register(email,phone,valid_code,register_type,country_code,invite_code) {
   return request({
     url: '/api/user/register',
     method: 'post',
@@ -95,7 +96,8 @@ export function  register(email,phone,valid_code,register_type,country_code) {
       phone,
       valid_code,
       register_type,
-      country_code
+      country_code,
+      invite_code
     }
   })
 }
@@ -220,3 +222,76 @@ export function bindPhone(phone, valid_code, country_code, login_type, third_tok
     }
   })
 }
+/**
+ * 获取分销信息接口
+ * @returns {*}
+ */
+export function spreadInfo(){
+  return request({
+    url: '/api/user/spread-info',
+    method: 'get',
+    params: {}
+  })
+}
+/**
+ * 保存银行卡接口
+ * @param bank_type
+ * @param account
+ * @param bank_name
+ * @param realname
+ * @param id
+ * @returns {*}
+ */
+export function saveBank(bank_type,account,bank_name,realname,id){
+  return request({
+    url: '/api/user/save-bank',
+    method: 'post',
+    params: {
+      bank_type,
+      account,
+      bank_name,
+      realname,
+      id
+    }
+  })
+}
+/**
+ * 删除银行卡接口
+ * @param id
+ * @returns {*}
+ */
+export function delBank(id){
+  return request({
+    url: '/api/user/delete-bank',
+    method: 'delete',
+    params: {
+      id
+    }
+  })
+}
+/**
+ * 提现接口
+ * @param bank_id
+ * @param amount
+ * @returns {*}
+ */
+export function withdrawn(bank_id,amount){
+  return request({
+    url: '/api/user/withdrawn',
+    method: 'post',
+    params: {
+      bank_id,
+      amount
+    }
+  })
+}
+export  function withdrawnList(page,page_size){
+  return request({
+    url: '/api/user/withdrawn-list',
+    method: 'get',
+    params: {
+      page,
+      page_size
+    }
+  })
+}

src/layout/index.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="layout">
+    <interactive-guide />
     <div class="layout-left">
       <div class="layout-logo">
         <img :class="['small','logo',isCollapse?'show':'hide']" src="/static/image/logo_small.png" alt="">
         <img :class="['big','logo',isCollapse?'hide':'show']" src="/static/image/logo_big.png" alt="">
       </div>
       <div class="layout-menu">
-        <el-menu :unique-opened="true" class="layout-menu-inner" :collapse="isCollapse" :default-active="menuActive+''">
+        <el-menu ref="menu" :unique-opened="true" class="layout-menu-inner" :collapse="isCollapse" :default-active="menuActive+''">
           <template v-for="(route,index) in menuRouter">
             <template v-if="!route.meta.hidden">
-              <el-submenu :class="'menu-'+route.name" v-if="route.children" :key="route.path" :index="index+''">
+              <el-submenu v-if="route.children" :key="route.path" :class="'menu-'+route.name" :index="index+''">
                 <template slot="title">
                   <i :class="[route.meta.icon,'icon']" />
                   <span slot="title">{{ route.meta.title }}</span>
@@ -21,7 +22,7 @@
                   </el-menu-item>
                 </template>
               </el-submenu>
-              <el-menu-item v-else :class="'menu-'+route.name" :key="route.path" :index="index+''" @click="goto(route)">
+              <el-menu-item v-else :key="route.path" :class="'menu-'+route.name" :index="index+''" @click="goto(route)">
                 <i :class="[route.meta.icon,'icon']" />
                 <span slot="title">{{ route.meta.title }}</span>
               </el-menu-item>
@@ -43,14 +44,14 @@
           </el-breadcrumb-item>
         </el-breadcrumb>
         <div class="packet">
-          <div @click="$router.push({name:'inviteRebate'})" class="item invite">
+          <div class="item invite" @click="$router.push({name:'inviteRebate'})">
             <div class="text">
               <span>邀</span>
               <span>请</span>
               <span>有</span>
               <span>奖</span>
             </div>
-            <img class="coin" src="/static/image/goldcoin.png" />
+            <img class="coin" src="/static/image/goldcoin.png">
           </div>
 
           <div v-if="packetData.invitation" class="item" @click="$bus.$emit('showPacket',true)">
@@ -108,10 +109,13 @@
 </template>
 
 <script>
+import interactiveGuide from '@/views/components/interactiveGuide.vue'
 import packetList from '@/views/components/packetList.vue'
+import InteractiveGuide from '@/views/components/interactiveGuide.vue'
 export default {
   name: 'Layout',
   components: {
+    InteractiveGuide,
     packetList
   },
   props: [
@@ -141,6 +145,13 @@ export default {
     this.$bus.$on('showPacket', (val) => {
       this.showPacket = val
     })
+    this.$bus.$on('guide',()=>{
+      this.$refs.menu.close('3')
+      this.$refs.menu.close('4')
+      this.$refs.menu.close('5')
+      this.$refs.menu.close('6')
+      this.$refs.menu.close('7')
+    })
     // setTimeout(() => {this.showPacket = true},6000)
   },
   methods: {
@@ -560,3 +571,14 @@ export default {
     }
   }
 </style>
+<style>
+.driver-overlay{
+  z-index: 2000 !important;
+}
+.el-popper, .el-popper *{
+  pointer-events: auto !important;
+}
+.drag-cont *{
+  pointer-events: auto !important;
+}
+</style>

src/views/audienceManage/index.vue

@@ -261,6 +261,7 @@ export default Vue.extend({
       this.invitation_data.template_id = this.invitation_data.data[0].id
       getMyExpoInfo(row.expo_id).then(res => {
         this.invitation_data.exhibitorSetting = res.data
+        this.invitation_data.price = res.data.invitation_price - 0
         this.changeTemp(0)
       }).catch(err => {
         this.$notify({

src/views/components/interactiveGuide.vue

@@ -1,32 +1,794 @@
 <script>
 import Vue from 'vue'
-
+import { driver } from 'driver.js'
+import 'driver.js/dist/driver.css'
+import JSConfetti from 'js-confetti'
 export default Vue.extend({
   name: 'InteractiveGuide',
   data() {
     return {
-      createExpoStep: [
-        {
-          guideId: 'createExpoStep1',
-          handel: '#createExpoButton',
-          trigger: 'click',
-          before: () => {
-            this.$router.push({ name: 'preRegManageList' })
-          },
-          after: () => {}
-        }
-      ]
+      driverObj: null,
+      expoGuide: {
+        showProgress: true,
+        allowClose: false,
+        nextBtnText: '下一步',
+        prevBtnText: '上一步',
+        doneBtnText: '完成',
+        steps: [
+          {
+            element: '.layout-menu .el-menu .el-submenu:nth-child(3)',
+            popover: {
+              title: '创建展会',
+              description: '点击展开展会管理菜单。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.layout-menu .el-menu > .el-submenu:nth-child(3) .el-menu > .el-menu-item:nth-child(1)',
+            popover: {
+              title: '创建展会',
+              description: '点击前往展会管理页面。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .head .el-button',
+            popover: {
+              title: '创建展会',
+              description: '点击添加展商来新建一个展会。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .info .scroll > .form-item:nth-child(1)',
+            popover: {
+              title: '完善信息',
+              side: 'right',
+              description: '让我们完善展会信息，首先是展会名称。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.main-box .info .scroll > .form-item:nth-child(2)',
+            popover: {
+              title: '完善信息',
+              side: 'right',
+              description: '接下来设置展会的起止时间。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .info .scroll > .form-item:nth-child(3)',
+            popover: {
+              title: '完善信息',
+              side: 'right',
+              description: '然后设置展会举办的地点。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .info .scroll > .form-item:nth-child(4)',
+            popover: {
+              title: '完善信息',
+              side: 'right',
+              description: '然后设置主办单位的名称。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .info .scroll > .form-item:nth-child(5)',
+            popover: {
+              title: '完善信息',
+              side: 'right',
+              description: '然后是主办单位的联系电话。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .info .scroll > .form-item:nth-child(6)',
+            popover: {
+              title: '完善信息',
+              side: 'right',
+              description: '然后是主办单位的联系邮箱。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .desc .scroll .avatar-upload',
+            popover: {
+              title: '完善信息',
+              description: '为您的展会设置一个头像。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .desc .scroll .cover-upload',
+            popover: {
+              title: '完善信息',
+              description: '为您的展会设置一个主视觉图，它会在很多地方作为背景出现。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .desc .scroll .text-area',
+            popover: {
+              title: '完善信息',
+              description: '简单介绍一下展会内容把。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .save .el-button',
+            popover: {
+              title: '完善信息',
+              description: '确认无误后就可以创建展会了。当然，在展会的第一个观众报名之前，您仍可以反复修改展会信息！',
+              showButtons: ['close', 'previous']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 2000)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .body .el-table',
+            popover: {
+              title: '创建展会',
+              description: '这里的第一项就是您刚刚创建的展会了，您创建的所有展会都会在这里显示。接下来，我们为刚刚建立的展会制作一个观众报名表。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.layout-menu .el-menu > .el-submenu:nth-child(4)',
+            popover: {
+              title: '创建报名表',
+              description: '点击展开表单管理菜单。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.layout-menu .el-menu .el-submenu:nth-child(4) .el-menu > .el-menu-item:nth-child(1)',
+            popover: {
+              title: '创建报名表',
+              description: '点击前往表单管理页',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .head .el-button',
+            popover: {
+              title: '创建报名表',
+              description: '点击创建表单来新建一个观众报名表。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 1000)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .comp-lib .list .drag-cont > div:nth-child(1)',
+            popover: {
+              title: '编辑报名表',
+              description: '使用鼠标左键按住并向右拖拽这个组件，期间不要放开鼠标左键。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('dragstart', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('dragstart', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .form-view .form-cont .form-body',
+            popover: {
+              title: '编辑报名表',
+              description: '继续按住鼠标左键！将组件拖拽到这里然后松开鼠标。不小心松开鼠标了也没关系，点击上一步按钮然后再来一次。',
+              showButtons: ['close', 'previous']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('drop', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 100)
+              }
+              targetElement.addEventListener('drop', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .form-view .form-cont .form-body .drag-cont > div:nth-child(1)',
+            popover: {
+              title: '编辑报名表',
+              description: '点击我们刚刚添加的组件。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 100)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .comp-edit .body',
+            popover: {
+              title: '编辑报名表',
+              description: '然后我们就能编辑这个组件的配置了,您可以将鼠标放在配置项右边的小问号里查看相关帮助。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.main-box .comp-edit .title .icon',
+            popover: {
+              title: '编辑报名表',
+              description: '编辑完组件的配置后,点击这里回到全局配置界面。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 100)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .comp-lib .list .drag-cont > div:nth-child(2)',
+            popover: {
+              title: '编辑报名表',
+              description: '使用鼠标左键按住并向右拖拽这个组件，期间不要放开鼠标左键。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('dragstart', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('dragstart', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .form-view .form-cont .form-body',
+            popover: {
+              title: '编辑报名表',
+              description: '继续按住鼠标左键！将组件拖拽到这里然后松开鼠标。不小心松开鼠标了也没关系，点击上一步按钮然后再来一次。',
+              showButtons: ['close', 'previous']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('drop', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 100)
+              }
+              targetElement.addEventListener('drop', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .form-view .form-cont .form-body .drag-cont > div:nth-child(2)',
+            popover: {
+              title: '编辑报名表',
+              description: '使用鼠标左键按住我们刚刚添加的组件,并上下左右拖拽这个组件。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('dragstart', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('dragstart', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .form-view .form-cont .form-body',
+            popover: {
+              title: '编辑报名表',
+              description: '继续按住鼠标左键！上下左右拖动组件，尝试与另一个组件交换位置。',
+              showButtons: ['close', 'previous']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('drop', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 100)
+              }
+              targetElement.addEventListener('drop', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .form-view .form-cont .form-body',
+            popover: {
+              title: '编辑报名表',
+              description: '这就是对报名表里各表单项排序的方法！',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.main-box > .comp-edit > .body',
+            popover: {
+              title: '编辑报名表',
+              description: '我们先只放两个表单项，稍后您可以回来完善。现在补充一下表单名称和介绍。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.main-box .comp-edit .button > .el-button',
+            popover: {
+              title: '编辑报名表',
+              description: '点击这里保存表单。',
+              showButtons: ['close', 'previous']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.layout-breadcrumb .el-breadcrumb .el-breadcrumb__item:nth-child(2)',
+            popover: {
+              title: '绑定报名表',
+              description: '我们可以通过左侧菜单，或者顶部导航快速回到表单管理页。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .body .el-table',
+            popover: {
+              title: '绑定报名表',
+              description: '这里第一项就是我们刚刚创建的报名表了，这里会显示我们创建的所有报名表。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.main-box .body .el-table .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:nth-child(1) td:last-child .cell .button:first-child',
+            popover: {
+              title: '绑定报名表',
+              description: '现在需要将刚刚创建的表单与之前创建的展会进行绑定，我们点击绑定按钮。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.el-dialog__wrapper .el-dialog',
+            popover: {
+              title: '绑定报名表',
+              description: '我们先选择之前创建的那个展会，然后点击确认按钮,就能完成展会的绑定了！',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element.querySelector('.el-dialog__footer .el-button:last-child')
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.layout-menu .el-menu .el-submenu:nth-child(3)',
+            popover: {
+              title: '分享展会',
+              description: '点击展开展会管理菜单。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.layout-menu .el-menu > .el-submenu:nth-child(3) .el-menu > .el-menu-item:nth-child(1)',
+            popover: {
+              title: '分享展会',
+              description: '点击前往展会管理页面。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 2000)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .body .el-table .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:nth-child(1) td:last-child .cell > .button:nth-child(2)',
+            popover: {
+              title: '分享展会',
+              description: '点击分享按钮，进入分享模块。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.share-center .share-view .button-list .el-button:last-child',
+            popover: {
+              title: '分享展会',
+              description: '您展会的报名链接已生成，点击它复制链接，然后分发给您的观众进行报名把。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            popover: {
+              title: '完成了！',
+              description: '您的展会已经创建完成，现在您可以回到‘展会管理’，‘表单管理’继续完善您的展会信息,或者探索多果表单的其它功能。通过链接报名的观众可以前往‘观众管理’查看与管理。',
+              showButtons: ['close', 'next'],
+              onNextClick: () => {
+                const jsConfetti = new JSConfetti()
+                jsConfetti.addConfetti()
+                this.driverObj.destroy()
+              }
+            }
+          }
+        ]
+      },
+      inviteGuide: {
+        showProgress: true,
+        allowClose: false,
+        nextBtnText: '下一步',
+        prevBtnText: '上一步',
+        doneBtnText: '完成',
+        steps: [
+          {
+            element: '.layout-menu .el-menu .el-submenu:nth-child(5)',
+            popover: {
+              title: '创建邀请函',
+              description: '点击展开邀请函管理菜单。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.layout-menu .el-menu > .el-submenu:nth-child(5) .el-menu > .el-menu-item:nth-child(2)',
+            popover: {
+              title: '创建邀请函',
+              description: '点击前往邀请函管理页面。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .head .el-button',
+            popover: {
+              title: '创建邀请函',
+              description: '点击添加模板来新建一个邀请函。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.template-dialog',
+            popover: {
+              title: '创建邀请函',
+              description: '选择一个模板来创建一个邀请函。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element.querySelector('.template-item')
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            popover: {
+              title: '创建邀请函',
+              description: '当我们展会的需要邀请函的观众数量过多时，逐一填写观众信息并发送邀请函费时费力，使用邀请函模板系统可以自动填写观众信息快速发送邀请函。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.main-box .body .variable',
+            popover: {
+              title: '创建邀请函',
+              description: '实现自动填写观众信息的核心是变量系统，多果表单可以帮您将观众报名表上的信息自动填写进对应观众的邀请函里。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.main-box .body .variable .tool-box',
+            popover: {
+              title: '创建邀请函',
+              description: '不同展会的报名表内容可能不尽相同，所以我们现在制作的邀请函模板只能应用于对应的展会。点击此处可以切换展会。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.main-box .body .variable .variable-body',
+            popover: {
+              title: '创建邀请函',
+              description: '此处是您所选定的展会可以使用的变量，包括展会信息与观众填写的报名表信息。',
+              showButtons: ['close', 'previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .body .variable .variable-body',
+            popover: {
+              title: '创建邀请函',
+              description: '我们使用鼠标左键按住任意一个您想添加的变量并向左拖动，期间不要放开鼠标左键。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('dragstart', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('dragstart', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .body .viewer .tox-edit-area',
+            popover: {
+              title: '创建邀请函',
+              description: '继续按住鼠标左键不要松开！将光标移动至您想插入变量的文本处，然后松开鼠标。如果不小心松开了也没关系，点击上一步按钮然后重新拖拽。',
+              showButtons: ['close', 'previous', 'next']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('drop', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('drop', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .body .viewer .tox-edit-area',
+            popover: {
+              title: '创建邀请函',
+              description: '您已经成功添加了一个变量，变量将会使用蓝色虚线标注出来。邀请函发送后对方无法看到这些蓝色虚线，而内部的文字将会被转换。',
+              showButtons: ['previous', 'next']
+            }
+          },
+          {
+            element: '.main-box .head > span > .el-button--primary',
+            popover: {
+              title: '创建邀请函',
+              description: '我们现在保存这个邀请函模板',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                this.driverObj.moveNext()
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.invitation-popover',
+            popover: {
+              title: '创建邀请函',
+              description: '填写模板的名称以及描述，然后点击保存并退出',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element.querySelector('.el-button--default')
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 600)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .body',
+            popover: {
+              title: '创建邀请函',
+              description: '这里将会展示所有您创建的邀请函模板，点击下一步前往发送邀请函。',
+              showButtons: ['close', 'next']
+            }
+          },
+          {
+            element: '.layout-menu .el-menu > .el-submenu:nth-child(5) .el-menu > .el-menu-item:nth-child(3)',
+            popover: {
+              title: '发送邀请函',
+              description: '点击前往发送邀请函页面。',
+              showButtons: ['close']
+            },
+            onHighlighted: (element, step, options) => {
+              const targetElement = element
+              const nextStepHandler = () => {
+                targetElement.removeEventListener('click', nextStepHandler)
+                setTimeout(() => {
+                  this.driverObj.moveNext()
+                }, 1200)
+              }
+              targetElement.addEventListener('click', nextStepHandler)
+            }
+          },
+          {
+            element: '.main-box .body',
+            popover: {
+              title: '发送邀请函',
+              description: '当有观众申请邀请函时，您可以在这里审核申请与发送邀请函',
+              showButtons: ['close', 'next']
+            },
+            onNextClick: () => {
+              const jsConfetti = new JSConfetti()
+              jsConfetti.addConfetti()
+              this.driverObj.destroy()
+            }
+          }
+        ]
+      }
     }
   },
+  mounted() {
+    this.listenEvent()
+  },
   methods: {
-
+    listenEvent() {
+      this.$bus.$on('guide', (name) => {
+        this.driverObj = driver(this[name])
+        setTimeout(() => {
+          this.driverObj.drive()
+        },600)
+      })
+    }
   }
 })
 </script>
 <template>
-
+  <div class="guide" />
 </template>
 
 <style scoped>
-
+.guide {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 </style>

src/views/dashboard/index.vue

@@ -63,12 +63,12 @@
             <div class="goto-icon el-icon-top-right" />
           </router-link>
         </div>
-        <div class="starter-box card">
+        <div @click="startGuide('expoGuide')" class="starter-box card">
           <div class="icon el-icon-position" />
           <div class="title">创建展会</div>
           <div class="desc">十分钟创建一个展会<br>通过表单系统收集与管理观众信息</div>
         </div>
-        <div class="invitation-box card">
+        <div @click="startGuide('inviteGuide')" class="invitation-box card">
           <div class="icon el-icon-notebook-2" />
           <div class="title">创建邀请函</div>
           <div class="desc">十分钟创建一个邀请函<br>集成表单系统快速填充信息并发送</div>
@@ -134,6 +134,9 @@ export default {
       })
       form.setOption(this.formData)
     },
+    startGuide(name) {
+      this.$bus.$emit('guide', name)
+    },
     init() {
       getExpoList(1, 20).then(res => {
         const expoList = res.data.data

src/views/exhibitorManage/exhibitorSetting.vue

@@ -503,9 +503,11 @@ export default Vue.extend({
         overflow-y: auto;
       }
       .text-area{
-        max-height: 120px;
         width: 100%;
         margin-top: 24px;
+        .mce-content-body{
+          min-height: 200px;
+        }
       }
       .vision-cont{
         position: relative;

src/views/invitationManage/list.vue

@@ -26,14 +26,13 @@ export default Vue.extend({
         this.total = res.data.total
       }).then(res => {
 
-      })
-        .catch(err => {
-          this.$notify({
-            title: '提示',
-            message: '获取邀请函列表失败'+err,
-            type: 'error'
-          })
+      }).catch(err => {
+        this.$notify({
+          title: '提示',
+          message: '获取邀请函列表失败' + err,
+          type: 'error'
         })
+      })
     },
     gotoAdd() {
       this.$router.push({ path: '/invitation/add' })
@@ -54,8 +53,8 @@ export default Vue.extend({
     <div class="body">
       <div class="scroll-box">
         <div class="model-cont">
-          <div class="no-item" v-if="tempList.length === 0">还没有邀请函模板,去新建一个把！</div>
-          <div v-permission="'invitation.goto'" v-for="item in tempList" :key="item.id" class="model-box" @click="gotoEdit(item)">
+          <div v-if="tempList.length === 0" class="no-item">还没有邀请函模板,去新建一个把！</div>
+          <div v-for="item in tempList" :key="item.id" v-permission="'invitation.goto'" class="model-box" @click="gotoEdit(item)">
             <div class="image loading">
               <img class="bg" :src="ossUrl+item.pic" alt="">
               <img class="pic" :src="ossUrl+item.pic" alt="">
@@ -78,10 +77,10 @@ export default Vue.extend({
       <el-pagination
         v-permission="'invitation.changePage'"
         background
-        @current-change="current_page=$event;getList()"
         :page-size="page_size"
         layout="prev, pager, next"
         :total="total"
+        @current-change="current_page=$event;getList()"
       />
     </div>
   </div>

src/views/inviteRebate/index.vue

@@ -1,15 +1,36 @@
 <script lang="ts">
 import Vue from 'vue'
-
+import { spreadInfo } from '@/api/user'
 export default Vue.extend({
-  name: "index",
+  name: 'Index',
   data() {
     return {
+      userInfo: {}
     }
   },
   computed: {
     user() { return this.$store.state.user.user }
   },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      spreadInfo().then(res => {
+        console.log(res.data)
+        this.userInfo = res.data
+      })
+    },
+    copyLink() {
+      const url = window.location.protocol + '//' + window.location.host + '/login?inviteCode=' + this.user.inviteCode
+      navigator.clipboard.writeText(url)
+      this.$notify({
+        title: '提示',
+        message: '复制成功',
+        type: 'success'
+      })
+    }
+  }
 })
 </script>
 
@@ -19,7 +40,7 @@ export default Vue.extend({
       <img class="coin" src="/static/image/goldcoin.png">
       <div class="title">邀请有奖</div>
       <div class="desc">邀请新用户注册并消费，可获得现金奖励。</div>
-      <div class="invite-code">我的邀请码：<span class="code">{{user.inviteCode}}</span></div>
+      <div class="invite-code">我的邀请码：<span class="code">{{ user.inviteCode }}</span></div>
     </div>
     <div class="describe">
       <div class="title">邀请返利</div>
@@ -28,15 +49,15 @@ export default Vue.extend({
     <div class="amount-count">
       <div class="background">Rebate</div>
       <div class="amount">
-        <div class="title">我的钱包余额：</div>
-        <div class="count">￥100</div>
+        <div class="title">总计返利金额：</div>
+        <div class="count">￥{{ userInfo.total_amount }}</div>
       </div>
       <div class="button-list">
+        <router-link to="/setting/wallet" class="button">
+          <div class="text">绑定 / 提现<span class="el-icon-top-right" /></div>
+        </router-link>
         <div class="button">
-          <div class="text">绑定取款账户<span class="el-icon-top-right"></span></div>
-        </div>
-        <div class="button">
-          <div class="text">复制分享链接</div>
+          <div class="text" @click="copyLink()">复制分享链接</div>
         </div>
       </div>
     </div>
@@ -131,6 +152,8 @@ export default Vue.extend({
       display: flex;
       gap: 16px;
       .button{
+        color: white;
+        text-decoration: none;
         font-size: 14px;
         cursor: pointer;
         padding: 10px 20px;

src/views/login/index.vue

@@ -69,7 +69,7 @@ export default Vue.extend({
         }).catch(err => {
           this.$notify({
             title: '提示',
-            message: '领英授权登录失败'+err,
+            message: '领英授权登录失败' + err,
             type: 'error'
           })
           showError()
@@ -93,7 +93,7 @@ export default Vue.extend({
         }).catch(err => {
           this.$notify({
             title: '提示',
-            message: '谷歌授权登录失败'+err,
+            message: '谷歌授权登录失败' + err,
             type: 'error'
           })
           showError()
@@ -134,7 +134,7 @@ export default Vue.extend({
       }).catch(err => {
         this.$notify({
           title: '提示',
-          message: '验证码发送失败'+err,
+          message: '验证码发送失败' + err,
           type: 'error'
         })
         this.loading = false
@@ -164,7 +164,7 @@ export default Vue.extend({
       }).catch(err => {
         this.$notify({
           title: '发送失败',
-          message: '验证码发送失败'+err,
+          message: '验证码发送失败' + err,
           type: 'error'
         })
         this.loading = false
@@ -189,7 +189,8 @@ export default Vue.extend({
         })
       }
       this.loading = true
-      register(this.email, '', this.code, 1, 0).then(res => {
+      let invite_code = localStorage.getItem('duoguo_invite_code') || ''
+      register(this.email, '', this.code, 1, 0, invite_code).then(res => {
         this.pre_register_key = res.data.pre_register_key
         confirmEmail(this.pre_register_key, this.password, this.confirmPassword).then(res => {
           this.isLogin = true
@@ -227,7 +228,8 @@ export default Vue.extend({
         })
         return
       }
-      register(this.phone, this.country_code, this.code, 0, 0).then(res => {
+      let invite_code = localStorage.getItem('duoguo_invite_code') || ''
+      register(this.phone, this.country_code, this.code, 0, 0, invite_code).then(res => {
         this.isLogin = true
         this.$notify({
           title: '注册成功',
@@ -244,6 +246,9 @@ export default Vue.extend({
     },
     getSavedAccount() {
       const account = localStorage.getItem('savedAccount')
+      if (this.$route.query.inviteCode) {
+        localStorage.setItem('duoguo_invite_code', this.$route.query.inviteCode)
+      }
       if (account) {
         this.username = account.username
         this.password = account.password
@@ -256,7 +261,7 @@ export default Vue.extend({
       }).catch(err => {
         this.$notify({
           title: '提示',
-          message: '使用本地令牌登录失败'+err,
+          message: '使用本地令牌登录失败' + err,
           type: 'error'
         })
         this.$message.error(err.message)
@@ -287,7 +292,7 @@ export default Vue.extend({
       }).catch(err => {
         this.$notify({
           title: '提示',
-          message: '登录失败'+err,
+          message: '登录失败' + err,
           type: 'error'
         })
         this.loading = false
@@ -308,23 +313,23 @@ export default Vue.extend({
         <span>闽ICP备1145141919号</span>
       </a>
       <a class="item" href="https://beian.miit.gov.cn/" target="_blank">
-        <img class="gongan" src="/static/image/beian.png" alt="" />
+        <img class="gongan" src="/static/image/beian.png" alt="">
         <span>闽公网安备1145141919号</span>
       </a>
     </div>
     <div class="bg-cont">
       <div class="text-cont">
-        <img src="/static/image/logo_big_white.png" class="logo" />
+        <img src="/static/image/logo_big_white.png" class="logo">
         <div class="title">10分钟创建海外观众预登记服务平台</div>
         <div class="desc">展会活动观众预登记的数字展会工具</div>
       </div>
       <img class="bg-image" src="/static/image/login2.webp" alt="">
     </div>
     <div :style="{height:third_login?'64vh':'auto'}" class="login-cont">
-<!--      <div class="image-left">-->
-<!--        <img class="image" src="/static/image/login.webp" alt="">-->
-<!--        <div class="title">展会服务系统</div>-->
-<!--      </div>-->
+      <!--      <div class="image-left">-->
+      <!--        <img class="image" src="/static/image/login.webp" alt="">-->
+      <!--        <div class="title">展会服务系统</div>-->
+      <!--      </div>-->
       <div class="cont-right">
         <div class="title">
           <div :class="['item',isLogin?'active':'']" @click="isLogin=true">登录</div>

src/views/preRegManage/edit.vue

@@ -269,7 +269,7 @@ export default Vue.extend({
           id: 'first_name',
           field_name: 'first_name',
           field_type: 'input',
-          field_label: '请在下方输入名字',
+          field_label: '名字',
           field_data: {
             value: '',
             width: 3,
@@ -281,11 +281,11 @@ export default Vue.extend({
           id: 'last_name',
           field_name: 'last_name',
           field_type: 'input',
-          field_label: '请在下方输入姓氏',
+          field_label: '姓氏',
           field_data: {
             value: '',
             width: 3,
-            placeholder: '请输入姓氏'
+            placeholder: '姓氏'
           },
           is_required: 0
         },
@@ -293,7 +293,7 @@ export default Vue.extend({
           id: 'id_type',
           field_name: 'id_type',
           field_type: 'select',
-          field_label: '请在下方选择证件类型',
+          field_label: '证件类型',
           field_data: {
             value: '',
             width: 2,
@@ -311,7 +311,7 @@ export default Vue.extend({
           id: 'id_number',
           field_name: 'id_number',
           field_type: 'input',
-          field_label: '请在下方输入证件号码',
+          field_label: '证件号码',
           field_data: {
             value: '',
             width: 4,
@@ -328,7 +328,7 @@ export default Vue.extend({
             value: '',
             country: 'CN',
             width: 2,
-            placeholder: '请输入手机国家代码'
+            placeholder: '国家代码'
           },
           is_required: 0
         },
@@ -336,7 +336,7 @@ export default Vue.extend({
           id: 'mobile',
           field_name: 'mobile',
           field_type: 'input',
-          field_label: '请在下方输入手机号码',
+          field_label: '手机号码',
           field_data: {
             value: '',
             country: 'CN',
@@ -349,7 +349,7 @@ export default Vue.extend({
           id: 'email',
           field_name: 'email',
           field_type: 'input',
-          field_label: '请在下方输入邮箱',
+          field_label: '电子邮箱',
           field_data: {
             value: '',
             width: 6,
@@ -362,7 +362,7 @@ export default Vue.extend({
           id: 'company',
           field_name: 'company',
           field_type: 'input',
-          field_label: '请在下方输入公司名称',
+          field_label: '公司名称',
           field_data: {
             value: '',
             width: 2,
@@ -374,7 +374,7 @@ export default Vue.extend({
           id: 'department',
           field_name: 'department',
           field_type: 'input',
-          field_label: '请在下方输入部门名称',
+          field_label: '部门名称',
           field_data: {
             value: '',
             width: 2,
@@ -386,7 +386,7 @@ export default Vue.extend({
           id: 'position',
           field_name: 'position',
           field_type: 'select',
-          field_label: '请在下方选择职位',
+          field_label: '职位',
           field_data: {
             value: '',
             width: 2,
@@ -401,7 +401,7 @@ export default Vue.extend({
           id: 'country',
           field_name: 'country',
           field_type: 'select',
-          field_label: '请在下方选择国家',
+          field_label: '国家',
           field_data: {
             value: '',
             width: 2,
@@ -416,7 +416,7 @@ export default Vue.extend({
           id: 'province',
           field_name: 'province',
           field_type: 'select',
-          field_label: '请在下方选择省份',
+          field_label: '省份',
           field_data: {
             value: '',
             width: 2,
@@ -431,7 +431,7 @@ export default Vue.extend({
           id: 'city',
           field_name: 'city',
           field_type: 'select',
-          field_label: '请在下方选择市',
+          field_label: '市/区',
           field_data: {
             value: '',
             width: 2,
@@ -446,7 +446,7 @@ export default Vue.extend({
           id: 'address',
           field_name: 'address',
           field_type: 'input',
-          field_label: '请在下方输入地址',
+          field_label: '详细地址',
           field_data: {
             value: '',
             width: 6,
@@ -458,7 +458,7 @@ export default Vue.extend({
           id: 'industry',
           field_name: 'industry',
           field_type: 'select',
-          field_label: '请在下方选择行业',
+          field_label: '行业',
           field_data: {
             value: '',
             width: 2,
@@ -582,6 +582,7 @@ export default Vue.extend({
           message: '表单已保存完成',
           type: 'success'
         })
+        this.formInfo.id = res.data
       }).catch((err) => {
         this.$notify({
           title: '提示',

src/views/wallet/index.vue

@@ -1,15 +1,482 @@
 <script lang="ts">
 import Vue from 'vue'
-
+import { spreadInfo, saveBank, delBank, withdrawn, withdrawnList } from '@/api/user'
 export default Vue.extend({
-  name: "index"
+  name: 'Index',
+  data() {
+    return {
+      userInfo: {},
+      showBind: false,
+      showWithdrawn: false,
+      current_page: 1,
+      page_size: 20,
+      total: 0,
+      withList: [],
+      loading: false,
+      bindData: {
+        bank_type: 1,
+        account: '',
+        bank_name: '',
+        realname: '',
+        id: '',
+        withdrawn: 0,
+        binding: false
+      }
+    }
+  },
+  computed: {
+    user() { return this.$store.state.user.user }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      spreadInfo().then(res => {
+        console.log(res.data)
+        this.userInfo = res.data
+      })
+      this.getList()
+    },
+    getList() {
+      if (this.loading) { return }
+      this.loading = true
+      withdrawnList(this.current_page, this.page_size).then(res => {
+        console.log(res.data)
+        this.withList = res.data.data || []
+        this.total = res.data.total
+        this.current_page = res.data.current_page
+        this.loading = false
+      }).catch(err => {
+        this.$notify({
+          title: '提示',
+          message: '获取提现列表失败' + err.message,
+          type: 'error'
+        })
+        this.loading = false
+      })
+    },
+    bindAccount() {
+      if (this.bindData.binding) { return }
+      this.bindData.binding = true
+      saveBank(this.bindData.bank_type, this.bindData.account, this.bindData.bank_name, this.bindData.realname, this.bindData.id).then(res => {
+        console.log(res.data)
+        this.$notify({
+          title: '提示',
+          message: '绑定提现方式成功',
+          type: 'success'
+        })
+        this.bindData.binding = false
+        this.showBind = false
+        this.init()
+      }).catch(err => {
+        this.$notify({
+          title: '提示',
+          message: '绑定提现方式出错' + err.message,
+          type: 'error'
+        })
+        this.bindData.binding = false
+      })
+    },
+    delAccount() {
+      if (this.bindData.binding) { return }
+      this.bindData.binding = true
+      delBank(this.bindData.id).then(res => {
+        console.log(res.data)
+        this.$notify({
+          title: '提示',
+          message: '删除提现方式成功',
+          type: 'success'
+        })
+        this.bindData.binding = false
+        this.showBind = false
+        this.init()
+      }).catch(err => {
+        this.$notify({
+          title: '提示',
+          message: '删除提现方式出错' + err.message,
+          type: 'error'
+        })
+        this.bindData.binding = false
+      })
+    },
+    openBindDialog() {
+      this.showBind = true
+      this.changeType(this.bindData.bank_type)
+    },
+    openWithdrawn() {
+      this.showWithdrawn = true
+      this.changeType(this.bindData.bank_type)
+    },
+    Withdrawn() {
+      withdrawn(this.bindData.id, this.bindData.amount).then(res => {
+        this.$notify({
+          title: '提示',
+          message: '提现成功',
+          type: 'success'
+        })
+      }).catch(err => {
+        this.$notify({
+          title: '提示',
+          message: '提现失败' + err.message,
+          type: 'error'
+        })
+      })
+    },
+    getPayInfo(type) {
+      for (let i = 1; i <= 3; i++) {
+        if (this.userInfo.bank_list[i] && this.userInfo.bank_list[i].bank_type === type) {
+          return this.userInfo.bank_list[i]
+        }
+      }
+    },
+    changeType(type) {
+      this.bindData.bank_type = type
+      const payInfo = this.getPayInfo(type)
+      if (payInfo === void 0) {
+        this.bindData.account = ''
+        this.bindData.realname = ''
+        this.bindData.id = ''
+        if (type === 1) {
+          this.bindData.bank_name = ''
+        }
+        if (type === 2) {
+          this.bindData.bank_name = '微信支付'
+        }
+        if (type === 3) {
+          this.bindData.bank_name = '支付宝'
+        }
+      } else {
+        this.bindData.bank_name = payInfo.bank_name
+        this.bindData.account = payInfo.account
+        this.bindData.realname = payInfo.realname
+        this.bindData.id = payInfo.id
+      }
+    }
+  }
 })
 </script>
 
 <template>
-
+  <div class="body">
+    <div class="amount-count">
+      <div class="background">Wallet</div>
+      <div class="amount">
+        <div class="title">可提现金额：</div>
+        <div class="count">￥{{ userInfo.balance }}</div>
+      </div>
+      <div class="button-list">
+        <div class="button" @click="openBindDialog()">
+          绑定/修改取款账户
+        </div>
+        <div class="button" @click="openWithdrawn()">
+          立即提现
+        </div>
+      </div>
+    </div>
+    <div class="form">
+      <el-table class="table" :data="withList">
+        <el-table-column label="提现金额" prop="amount" />
+        <el-table-column label="提现账户" prop="bank_account" />
+        <el-table-column label="提现方式">
+          <template slot-scope="scope">
+            <div>{{ ['','银行卡', '微信支付', '支付宝'][scope.row.bank_type] }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark" />
+        <el-table-column width="120" label="提现状态">
+          <template slot-scope="scope">
+            <div v-if="scope.row.withdrawn_status===0" class="status">待审核</div>
+            <div v-if="scope.row.withdrawn_status===1" class="status wait">已审核</div>
+            <div v-if="scope.row.withdrawn_status===2" class="status agre">已提现</div>
+            <div v-if="scope.row.withdrawn_status===3" class="status dis">提现失败</div>
+            <div v-if="scope.row.withdrawn_status===4" class="status dis">未过审</div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="foot">
+      <el-pagination
+        background
+        :page-size="page_size"
+        layout="total"
+        :total="total"
+      />
+      <el-pagination
+        v-permission="'invitation.changePage'"
+        background
+        :page-size="page_size"
+        layout="prev, pager, next"
+        :total="total"
+        @current-change="current_page=$event;getList()"
+      />
+    </div>
+    <el-dialog
+      :visible.sync="showBind"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      title="绑定/修改取款账户"
+      width="854px"
+      @close="showBind = false"
+    >
+      <div class="dialog-body bind-card">
+        <div class="card-list">
+          <div :class="['card bank', { active: bindData.bank_type == 1 }]" @click="changeType(1)">
+            <div class="type">银行卡</div>
+          </div>
+          <div :class="['card wechat', { active: bindData.bank_type == 2}]" @click="changeType(2)">
+            <div class="type">微信支付</div>
+          </div>
+          <div :class="['card alipay', { active: bindData.bank_type == 3}]" @click="changeType(3)">
+            <div class="type">支付宝</div>
+          </div>
+        </div>
+        <div class="title">账户信息：</div>
+        <div class="form">
+          <template v-if="bindData.bank_type == 1">
+            <el-input v-model="bindData.account" class="form-item" placeholder="请输入银行卡号">
+              <template slot="prepend">银行卡号</template>
+            </el-input>
+            <el-input v-model="bindData.bank_name" class="form-item" placeholder="请输入开户银行">
+              <template slot="prepend">开户银行</template>
+            </el-input>
+            <el-input v-model="bindData.realname" class="form-item" placeholder="请输入开户人姓名">
+              <template slot="prepend">真实姓名</template>
+            </el-input>
+          </template>
+          <template v-if="bindData.bank_type == 2">
+            <el-input v-model="bindData.account" class="form-item" placeholder="请输入微信账号">
+              <template slot="prepend">微信账号</template>
+            </el-input>
+            <el-input disabled :value="bindData.bank_name" class="form-item" placeholder="请输入开户银行">
+              <template slot="prepend">提现方式</template>
+            </el-input>
+            <el-input v-model="bindData.realname" class="form-item" placeholder="请输入开户人姓名">
+              <template slot="prepend">真实姓名</template>
+            </el-input>
+          </template>
+          <template v-if="bindData.bank_type == 3">
+            <el-input v-model="bindData.account" class="form-item" placeholder="请输入支付宝账号">
+              <template slot="prepend">支付宝号</template>
+            </el-input>
+            <el-input disabled :value="bindData.bank_name" class="form-item" placeholder="请输入开户银行">
+              <template slot="prepend">提现方式</template>
+            </el-input>
+            <el-input v-model="bindData.realname" class="form-item" placeholder="请输入开户人姓名">
+              <template slot="prepend">真实姓名</template>
+            </el-input>
+          </template>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button v-loading="bindData.binding" @click="showBind = false">取 消</el-button>
+        <el-button v-show="bindData.id" v-loading="bindData.binding" type="danger" @click="delAccount()">解 绑</el-button>
+        <el-button v-loading="bindData.binding" type="primary" @click="bindAccount()">{{ bindData.id===''?'绑 定':'修 改' }}</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="showWithdrawn"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      title="提现"
+      width="854px"
+      @close="showWithdrawn = false"
+    >
+      <div class="dialog-body bind-card">
+        <div class="card-list">
+          <div v-show="getPayInfo(1)" :class="['card bank', { active: bindData.bank_type == 1 }]" @click="changeType(1)">
+            <div class="type">银行卡</div>
+          </div>
+          <div v-show="getPayInfo(2)" :class="['card wechat', { active: bindData.bank_type == 2}]" @click="changeType(2)">
+            <div class="type">微信支付</div>
+          </div>
+          <div v-show="getPayInfo(3)" :class="['card alipay', { active: bindData.bank_type == 3}]" @click="changeType(3)">
+            <div class="type">支付宝</div>
+          </div>
+        </div>
+        <div class="title">账户信息：</div>
+        <div class="form">
+          <template v-if="bindData.bank_type == 1">
+            <el-input v-model="bindData.account" disabled class="form-item" placeholder="请输入银行卡号">
+              <template slot="prepend">银行卡号</template>
+            </el-input>
+            <el-input v-model="bindData.bank_name" disabled class="form-item" placeholder="请输入开户银行">
+              <template slot="prepend">开户银行</template>
+            </el-input>
+          </template>
+          <template v-if="bindData.bank_type == 2">
+            <el-input v-model="bindData.account" disabled class="form-item" placeholder="请输入微信账号">
+              <template slot="prepend">微信账号</template>
+            </el-input>
+            <el-input disabled :value="bindData.bank_name" class="form-item" placeholder="请输入开户银行">
+              <template slot="prepend">提现方式</template>
+            </el-input>
+          </template>
+          <template v-if="bindData.bank_type == 3">
+            <el-input v-model="bindData.account" disabled class="form-item" placeholder="请输入支付宝账号">
+              <template slot="prepend">支付宝号</template>
+            </el-input>
+            <el-input disabled :value="bindData.bank_name" class="form-item" placeholder="请输入开户银行">
+              <template slot="prepend">提现方式</template>
+            </el-input>
+          </template>
+          <el-input v-model="bindData.realname" disabled class="form-item" placeholder="请输入开户人姓名">
+            <template slot="prepend">真实姓名</template>
+          </el-input>
+          <el-input v-model="bindData.withdrawn" min="0" :max="userInfo.balance - 0" step="0.01" type="number" class="form-item" placeholder="请输入开户人姓名">
+            <template slot="prepend">提现金额</template>
+            <template slot="append">可提现：{{ userInfo.balance - 0 }}</template>
+          </el-input>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button v-loading="bindData.binding" @click="showWithdrawn = false">取 消</el-button>
+        <el-button v-loading="bindData.binding" :disabled="bindData.withdrawn <= 0" type="primary" @click="Withdrawn()">提 现</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
+<style>
+.bind-card.dialog-body{
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .form-item{
 
-<style scoped>
+    }
+  }
+  .title{
+    font-size: 16px;
+    font-weight: bolder;
+    margin-bottom: 16px;
+    margin-left: 4px;
+  }
+  .card-list{
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 24px;
+    .card{
+      position: relative;
+      height: 161.94px;
+      width: 256.8px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 300ms;
+      display: flex;
+      .type{
+        color: white;
+        font-size: 22px;
+        position: absolute;
+        font-weight: bolder;
+        right: 20px;
+        bottom: 16px;
+      }
+      &:hover,&.active{
+        scale: 1.02;
+        box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #409EFF;
+      }
+    }
+    .bank{
+      background-color: #64b133;
+    }
+    .wechat{
+      background-color: #07C160;
+    }
+    .alipay{
+      background-color: #5495f1;
+    }
+  }
+}
 
 </style>
+<style scoped>
+.body{
+  height: 100%;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-rows: auto 1fr auto;
+  .form{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .table{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      .status{
+        border-radius: 6px;
+        background-color: #8f8f8f;
+        color: white;
+        display: inline-block;
+        padding: 0 6px;
+        font-size: 12px;
+        &.wait{
+          background-color: #409EFF;
+        }
+        &.agre{
+          background-color: #5bae32;
+        }
+        &.dis{
+          background-color: #ff6f6f;
+        }
+      }
+    }
+  }
+  .foot{
+    display: flex;
+    justify-content: space-between;
+  }
+  .amount-count{
+    position: relative;
+    overflow: hidden;
+    background-color: #759be8;
+    color: white;
+    border-radius: 16px;
+    padding: 24px 24px 24px 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    .background{
+      pointer-events: none;
+      color: #ffffff09;
+      position: absolute;
+      font-size: 170px;
+      font-weight: bolder;
+      right: -20px;
+      bottom: -60px;
+    }
+    .button-list{
+      position: relative;
+      display: flex;
+      gap: 16px;
+      .button{
+        color: white;
+        text-decoration: none;
+        font-size: 14px;
+        cursor: pointer;
+        padding: 10px 20px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #ffffff44;
+        &:hover{
+          background: #ffffff55;
+        }
+        .icon{
+          margin-left: 8px;
+        }
+      }
+    }
+    .count{
+      margin-top: 12px;
+      font-size: 48px;
+      font-weight: bolder;
+    }
+  }
+}
+</style>

vue.config.js

@@ -31,6 +31,7 @@ module.exports = {
   devServer: {
     port: port,
     open: true,
+    // host: 'duoguo.matchexpo.cn',
     overlay: {
       warnings: false,
       errors: true