feat:添加邀请码添加功能

src/api/business/invite.js

@@ -7,3 +7,24 @@ export function fetchList(params) {
     data: params
   })
 }
+export function setInvalid(params) {
+  return request({
+    url: '/invitationCode/setInvalid',
+    method: 'post',
+    data: params
+  })
+}
+export function getUserList(params) {
+  return request({
+    url: '/user/findList',
+    method: 'post',
+    data: params
+  })
+}
+export function invitationCodeCreat(params) {
+  return request({
+    url: '/invitationCode/create',
+    method: 'post',
+    data: params
+  })
+}

src/router/index.js

@@ -154,6 +154,18 @@ export const asyncRouterMap = [
           icon: 'user',
           noCache: true
         }
+      },
+      {
+        path: 'addInvite',
+        component: () => import('@/views/user/addInvite'),
+        name: 'inviteList',
+        meta: {
+          perms: ['POST /invitationCode/create'],
+          title: '生成邀请码',
+          icon: 'user',
+          noCache: true
+        },
+        hidden: true
       }
     ]
   },

src/views/user/addInvite.vue

+<template>
+  <div class="page_addInvite">
+    <el-card class="box-card">
+      <h3>生成邀请码</h3>
+      <el-form ref="addInviteRef" :rules="rules" :model="inviteInfo" label-width="100px">
+        <el-form-item label="有效期" prop="timeList" require>
+          <el-date-picker
+            v-model="inviteInfo.timeList"
+            :picker-options="pickerOptions2"
+            style="width: 400px"
+            type="daterange"
+            align="right"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            @change="handleDateChange" />
+        </el-form-item>
+
+        <el-form-item label="使用人数" prop="enabledNum">
+          <el-input v-model="inviteInfo.enabledNum" style="width: 400px" placeholder="请输入使用人数" type="number"/>
+        </el-form-item>
+
+        <el-form-item label="邀请人" prop="applicant">
+          <el-cascader
+            :options="userList"
+            :clearable="true"
+            v-model="inviteInfo.applicant"
+            filterable
+            style="width: 400px"
+            @input.native="handleInputChange"
+            @change="handleCategoryChange"/>
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <!--          <editor :init="editorInit" :style="{'min-height':'800px' }" v-model="goods.detail"/>-->
+          <el-input
+            v-model="inviteInfo.detail"
+            :rows="6"
+            type="textarea"
+            placeholder="请输入备注"/>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <div class="op-container">
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="handlePublish">立即生成</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserList, invitationCodeCreat } from '@/api/business/invite'
+export default {
+  name: 'AddInvite',
+  data() {
+    return {
+      inviteInfo: {},
+      userList: [],
+      rules: {
+        timeList: [{ required: true, message: '请选择有效时间', trigger: 'blur' }],
+        enabledNum: [{ required: true, message: '请输入使用人数', trigger: 'blur' }],
+        applicant: [{ required: true, message: '邀请人不能为空', trigger: 'blur' }]
+      },
+      pickerOptions2: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      value6: '',
+      value7: ''
+    }
+  },
+  created() {
+    this.handleGetUserList()
+  },
+  methods: {
+    handleCancel() {
+
+    },
+
+    handlePublish() {
+      this.$refs.addInviteRef.validate((valid) => {
+        if (valid) {
+          invitationCodeCreat(this.inviteInfo)
+            .then(response => {
+              this.$notify.success({
+                title: '成功',
+                message: '生成邀请码成功'
+              })
+              this.$router.push({ path: '/user/inviteList' })
+            })
+            .catch(response => {
+              this.$notify.error({
+                title: '失败',
+                message: response.data.errmsg
+              })
+            })
+        }
+      })
+    },
+    handleDateChange(value) {
+      console.log('====date==', value)
+      this.inviteInfo.timeList = value
+      this.inviteInfo.effectiveStartTime = value[0]
+      this.inviteInfo.effectiveEndTime = value[1]
+    },
+    handleCategoryChange(value) {
+      console.log('====value==', value)
+      this.inviteInfo.applicant = value[0]
+    },
+
+    handleInputChange(el) {
+      this.handleGetUserList(el.target.value)
+    },
+    handleGetUserList(name) {
+      const params = {
+        page: 1,
+        size: 100,
+        name: name
+      }
+      getUserList(params)
+        .then(response => {
+          if (response.data.data) {
+            this.userList = response.data.data.map((item) => {
+              return {
+                value: item.id,
+                label: item.name
+              }
+            })
+            console.log('===userList=', this.userList)
+          }
+        })
+        .catch(response => {
+          console.log('====error==', response)
+          this.$notify.error({
+            title: '失败',
+            message: response.data.errmsg
+          })
+        })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+.page_addInvite {
+  padding: 20px;
+}
+.op-container {
+  margin-top: 20px;
+}
+
+</style>

src/views/user/inviteList.vue

@@ -30,23 +30,27 @@
 
       <el-table-column align="center" label="创建时间" prop="createTime"/>
 
-      <el-table-column align="center" label="操作" width="300" class-name="small-padding fixed-width">
+      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             v-permission="['GET /admin/user/detailApprove']"
-            type="primary"
+            type="text"
             size="mini"
             @click="handleToDetail(scope.row)">详情
           </el-button>
           <el-button
             v-permission="['POST /admin/user/approveAgency']"
-            type="primary"
+            type="text"
             size="mini"
-            style="width: 100px"
             @click="handleCopyCode(scope.row)">
             复制邀请码
           </el-button>
-          <el-button v-permission="['GET /admin/user/detailApprove']" type="primary" size="mini">失效</el-button>
+          <el-button
+            v-permission="['GET /admin/user/detailApprove']"
+            :disabled="scope.row.state > 1"
+            type="text"
+            size="mini"
+            @click="handleSetEnable(scope.row)">失效</el-button>
         </template>
       </el-table-column>
 
@@ -63,7 +67,7 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/business/invite'
+import { fetchList, setInvalid } from '@/api/business/invite'
 import Pagination from '@/components/Pagination'
 export default {
   name: 'InviteList',
@@ -87,28 +91,88 @@ export default {
   },
   methods: {
     handleAdd() {
-
+      this.$router.push({ path: '/user/addInvite' })
     },
     handleToDetail() {
 
     },
-    handleCopyCode() {
-
+    handleSetEnable(row) {
+      const params = {
+        code: row.code
+      }
+      setInvalid(params).then(response => {
+        this.list = this.list.filter((item) => {
+          if (item.code === row.code) {
+            item.state = 6
+            return item
+          }
+          return item
+        })
+        this.$notify.success({
+          message: '设置失效成功'
+        })
+      }).catch((e) => {
+      })
+    },
+    /**
+     * 复制
+     */
+    handleCopyCode(row) {
+      // 复制结果
+      let copyResult = true
+      // 设置想要复制的文本内容
+      if (!row.code) {
+        return
+      }
+      const text = `藏家相册注册邀请码${row.code}，最多可使用${row.enabledNum || 0}次，机会难得，快去体验吧～`
+      // 判断是否支持clipboard方式
+      if (window.navigator.clipboard) {
+        // 利用clipboard将文本写入剪贴板（这是一个异步promise）
+        window.navigator.clipboard.writeText(text).then((res) => {
+          console.log('复制成功')
+          // 返回复制操作的最终结果
+          return copyResult
+        }).catch((err) => {
+          copyResult = false
+          console.log('复制失败', err)
+          // 返回复制操作的最终结果
+          return copyResult
+        })
+      } else {
+        // 不支持clipboard方式 则采用document.execCommand()方式
+        // 创建一个input元素
+        const inputDom = document.createElement('textarea')
+        // 设置为只读 防止移动端手机上弹出软键盘
+        inputDom.setAttribute('readonly', 'readonly')
+        // 给input元素赋值
+        inputDom.value = text
+        // 将创建的input添加到body
+        document.body.appendChild(inputDom)
+        // 选中input元素的内容
+        inputDom.select()
+        // 执行浏览器复制命令
+        // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
+        // Input要在正常的编辑状态下原生复制方法才会生效
+        const result = document.execCommand('copy')
+        // 判断是否复制成功
+        if (result) {
+          console.log('复制成功')
+        } else {
+          console.log('复制失败')
+          copyResult = false
+        }
+        // 复制操作后再将构造的标签 移除
+        document.body.removeChild(inputDom)
+        // 返回复制操作的最终结果
+      }
+      this.$notify.success({
+        message: '邀请码已复制，快去分享给好友吧～'
+      })
     },
     getList() {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {
         this.list = response.data.data.dataList
-        /* this.list = (response.data.data.dataList || []).map((e, index) => {
-          let imageList = e.images || []
-          if (e.topImage && imageList.indexOf(e.topImage) === -1) {
-            imageList = [e.topImage].concat(imageList)
-          }
-          return {
-            ...e,
-            imageList: imageList
-          }
-        })*/
         this.total = response.data.data.total
         this.listLoading = false
       }).catch((e) => {