From bb82d0e95cb6c083ca6d1357e8fc5e81cf90c62f Mon Sep 17 00:00:00 2001
From: yulixing <yulixing@kingsome.cn>
Date: Thu, 4 Jul 2019 16:45:47 +0800
Subject: [PATCH] share-lib

---
 src/api/lib.js                    |  25 ++
 src/components/ShareLib/index.vue | 600 ++++++++++++++++++++++++++++++
 src/router/modules/games.js       |   6 +
 src/styles/common.scss            |   6 +
 src/views/games/lib.vue           |  47 +++
 5 files changed, 684 insertions(+)
 create mode 100644 src/api/lib.js
 create mode 100644 src/components/ShareLib/index.vue
 create mode 100644 src/views/games/lib.vue

diff --git a/src/api/lib.js b/src/api/lib.js
new file mode 100644
index 0000000..8be4f39
--- /dev/null
+++ b/src/api/lib.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getMaterials(params) {
+  return request({
+    url: '/games/lib/list',
+    method: 'get',
+    params
+  })
+}
+
+export function saveMaterials(data) {
+  return request({
+    url: '/games/lib/save',
+    method: 'post',
+    data
+  })
+}
+
+export function delMaterials(data) {
+  return request({
+    url: '/games/lib/del',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/components/ShareLib/index.vue b/src/components/ShareLib/index.vue
new file mode 100644
index 0000000..7363008
--- /dev/null
+++ b/src/components/ShareLib/index.vue
@@ -0,0 +1,600 @@
+<template>
+  <el-tabs type="border-card">
+    <!-- 分享图 -->
+    <el-tab-pane label="分享图">
+      <el-row
+        :gutter="24"
+        class="mgb-20"
+      >
+        <el-col :span="24">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="selectAllImgs"
+            v-if="imgAdmin"
+          >全选</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="deselectImgs"
+            v-if="imgAdmin && imgsSelected.length > 0"
+            plain
+          >取消</el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            @click="delImgs"
+            v-if="imgAdmin"
+          >删除</el-button>
+          <el-button
+            size="mini"
+            @click="adminImgs"
+          >{{imgAdminText}}</el-button>
+
+        </el-col>
+      </el-row>
+      <el-row
+        :gutter="24"
+        class="mgt-20 mgb-20"
+      >
+        <el-col :span="4">
+          <div class="img-box uploader-box">
+            <el-upload
+              class="uploader img"
+              action="/api/common/upload"
+              :show-file-list="false"
+              :on-success="uploadSuccess"
+              :on-error="uploadErr"
+              :headers="{
+                authorization: 'Bearer ' + token
+              }"
+              name="image-file"
+              :data="{
+                sub_path: '/share-images/',
+                file_type: 'share_images'
+              }"
+            >
+              <i class="el-icon-plus uploader-icon" />
+            </el-upload>
+          </div>
+        </el-col>
+
+        <el-col
+          :span="4"
+          v-for="(item, index) in imgList"
+          :key="index"
+        >
+          <div
+            class="img-box"
+            @click="clickImg(index)"
+            :class="imgsSelected.includes(index) ? 'active' : ''"
+          >
+            <el-image
+              class="img"
+              :src="item.url"
+              fit="cover"
+            ></el-image>
+            <svg-icon
+              class="icon-del"
+              icon-class="close"
+              @click.stop="delImg(index)"
+            />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row
+        :gutter="24"
+        class="mgt-20 mgb-20"
+      >
+        <el-col
+          :span="24"
+          class="al-r"
+        >
+          <el-pagination
+            layout="prev, pager, next"
+            :total="imgsNum"
+            :current-page="imgCurrentPage"
+            :page-size="imgPageSize"
+            @size-change="imgSizeChange"
+            @current-change="imgPageChange"
+          >
+          </el-pagination>
+        </el-col>
+      </el-row>
+
+    </el-tab-pane>
+    <!-- 分享图END -->
+
+    <!-- 分享语 -->
+    <el-tab-pane label="分享语">
+      <el-row
+        :gutter="24"
+        class="mgb-20"
+      >
+        <el-col :span="24">
+          <el-button
+            type="danger"
+            size="mini"
+            v-if="textAdmin"
+            @click="delTexts"
+          >删除</el-button>
+          <el-button
+            size="mini"
+            @click="adminText"
+          >{{textAdminText}}</el-button>
+        </el-col>
+      </el-row>
+      <el-row
+        :gutter="24"
+        class="mgt-20 mgb-20"
+      >
+        <el-col :span="24">
+          <el-input
+            placeholder="请输入分享语"
+            v-model="tempText"
+          >
+            <el-button
+              slot="append"
+              @click="addText"
+            > 添加</el-button>
+          </el-input>
+        </el-col>
+      </el-row>
+      <el-row
+        :gutter="24"
+        class="mgt-20 mgb-20"
+      >
+        <el-col :span="24">
+          <el-table
+            ref="textTable"
+            :data="textList"
+            tooltip-effect="dark"
+            style="width: 100%"
+            size="mini"
+            @selection-change="textTableSelectionChange"
+            @row-click="textRowClick"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+            >
+            </el-table-column>
+            <el-table-column
+              label="分享语"
+              prop="text"
+            >
+            </el-table-column>
+            <el-table-column
+              label="操作"
+              width="80"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="delText(scope.row)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+
+      <el-row
+        :gutter="24"
+        class="mgt-20 mgb-20"
+      >
+        <el-col
+          :span="24"
+          class="al-r"
+        >
+          <el-pagination
+            layout="prev, pager, next"
+            :total="textsNum"
+            :current-page="textCurrentPage"
+            :page-size="textPageSize"
+            @size-change="textSizeChange"
+            @current-change="textPageChange"
+          >
+          </el-pagination>
+        </el-col>
+      </el-row>
+
+    </el-tab-pane>
+    <!-- 分享语 END -->
+  </el-tabs>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { getMaterials, saveMaterials, delMaterials } from '@/api/lib'
+import { Promise, reject } from 'q'
+export default {
+  name: 'ShareLib',
+  data() {
+    return {
+      // common
+      token: '',
+      selectedData: {
+        imgs: [],
+        texts: []
+      },
+      // share_img
+      imgAdminText: '管理',
+      imgAdmin: false,
+      imgList: [],
+      imgsNum: 0,
+      imgCurrentPage: 1,
+      imgPageSize: 29,
+      imgsSelected: [], //选中图片的Index
+      imgMultiSelect: true,
+
+      // share_word
+      textList: [
+        {
+          text:
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quae alias ipsam magnam veritatis perspiciatis sunt, nihil illum, suscipit blanditiis, earum praesentium a! At nesciunt laborum, corrupti illo perspiciatis aspernatur?'
+        },
+        {
+          text:
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quae alias ipsam magnam veritatis perspiciatis sunt, nihil illum, suscipit blanditiis, earum praesentium a! At nesciunt laborum, corrupti illo perspiciatis aspernatur?'
+        },
+        {
+          text:
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quae alias ipsam magnam veritatis perspiciatis sunt, nihil illum, suscipit blanditiis, earum praesentium a! At nesciunt laborum, corrupti illo perspiciatis aspernatur?'
+        }
+      ],
+      textsNum: 0,
+      textAdmin: false,
+      textAdminText: '管理',
+      tempText: '',
+      textsSelected: [],
+      textCurrentPage: 1,
+      textPageSize: 20
+    }
+  },
+  mounted() {
+    this.token = getToken()
+    this.getImgs()
+    this.getTexts()
+  },
+  methods: {
+    //common
+    exportData() {
+      // TODO: $emit 传出选中数据
+    },
+    getMaterials(data) {
+      return new Promise((resolve, reject) => {
+        getMaterials(data)
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data) : reject(data.errmsg)
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    saveMaterials(data) {
+      return new Promise((resolve, reject) => {
+        saveMaterials(data)
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data) : reject(data.errmsg)
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    delMaterials(data) {
+      return new Promise((resolve, reject) => {
+        delMaterials(data)
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data) : reject(data.errmsg)
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    // share_img
+    getImgs() {
+      this.getMaterials({
+        type: 'image',
+        currentPage: this.imgCurrentPage,
+        pageSize: this.imgPageSize
+      })
+        .then(data => {
+          this.imgList = data.records
+          this.imgsNum = data.total
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    uploadSuccess(res, file) {
+      const url = res.url
+      this.saveMaterials({
+        type: 'image',
+        url: url
+      })
+        .then(() => {
+          this.$message.success('图片上传成功!')
+          this.imgCurrentPage = 1
+          this.getImgs()
+        })
+        .catch(err => {
+          this.$message.error('图片保存失败！')
+          console.log(err)
+        })
+    },
+    uploadErr() {
+      this.$message.error('图片上传失败！')
+    },
+    imgSizeChange(val) {},
+    imgPageChange(val) {
+      this.imgCurrentPage = val
+      this.getImgs()
+    },
+    clickImg(index) {
+      // 切换图片选中状态
+      if (this.imgsSelected.includes(index)) {
+        const idx = this.imgsSelected.indexOf(index)
+        this.imgsSelected.splice(idx, 1)
+      } else {
+        this.imgsSelected.push(index)
+      }
+      const selectedImgs = []
+      this.imgsSelected.map(item => {
+        selectedImgs.push(this.imgList[item])
+      })
+      this.selectedData.imgs = selectedImgs
+    },
+    adminImgs() {
+      if (this.imgAdmin) {
+        this.imgAdmin = false
+        this.imgAdminText = '管理'
+      } else {
+        this.imgAdmin = true
+        this.imgAdminText = '关闭'
+      }
+    },
+    selectAllImgs() {
+      const selectAllImgs = []
+      for (let i = 0; i < this.imgList.length; i++) {
+        selectAllImgs.push(i)
+      }
+      this.imgsSelected = selectAllImgs
+    },
+    deselectImgs() {
+      this.imgsSelected = []
+    },
+    delImgs() {
+      this.$confirm(
+        `是否删除选中的${this.imgsSelected.length}的张图片？`,
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          const ids = this.selectedData.imgs.map(item => {
+            return item._id
+          })
+
+          this.delMaterials({
+            ids: ids
+          })
+            .then(data => {
+              this.$message.success('删除成功!')
+              this.imgCurrentPage = 1
+              this.getImgs()
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        })
+        .catch(() => {
+          this.$message.info('已取消删除！')
+        })
+    },
+    delImg(index) {
+      this.$confirm(`是否删除选中图片？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          const ids = [this.imgList[index]._id]
+          this.delMaterials({
+            ids: ids
+          })
+            .then(data => {
+              this.$message.success('删除成功!')
+              this.imgCurrentPage = 1
+              this.getImgs()
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        })
+        .catch(() => {
+          this.$message.info('已取消删除！')
+        })
+    },
+    //share_word
+    getTexts() {
+      this.getMaterials({
+        type: 'text',
+        currentPage: this.imgCurrentPage,
+        pageSize: this.imgPageSize
+      })
+        .then(data => {
+          this.textList = data.records
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    adminText() {
+      if (this.textAdmin) {
+        this.textAdmin = false
+        this.textAdminText = '管理'
+      } else {
+        this.textAdmin = true
+        this.textAdminText = '关闭'
+      }
+    },
+    textTableSelectionChange(val) {
+      this.textsSelected = val
+      this.selectedData.text = val
+      console.log('change')
+    },
+    textRowClick(row, column, event) {
+      this.$refs.textTable.toggleRowSelection(row)
+    },
+    delText(row) {
+      this.$confirm(`是否删除选中的分享语？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.delMaterials({
+            ids: [row._id]
+          })
+            .then(data => {
+              this.$message.success('删除成功!')
+              this.textCurrentPage = 1
+              this.getTexts()
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        })
+        .catch(() => {
+          this.$message.info('已取消删除！')
+        })
+    },
+    delTexts() {
+      this.$confirm(
+        `是否删除选中的${this.imgsSelected.length}的条分享语？`,
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          const ids = this.textsSelected.map(item => {
+            return item._id
+          })
+          this.delMaterials({
+            ids: ids
+          })
+            .then(data => {
+              this.$message.success('删除成功!')
+              this.textCurrentPage = 1
+              this.getTexts()
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        })
+        .catch((err) => {
+            console.log(err)
+          this.$message.info('已取消删除！')
+        })
+    },
+    addText() {
+      if (!this.tempText) {
+        this.$message.error('文本为空，不能添加！')
+        return
+      }
+
+      this.saveMaterials({
+        type: 'text',
+        text: this.tempText
+      })
+        .then(() => {
+          this.$message.success('分享语保存成功!')
+          this.tempText = ''
+          this.textCurrentPage = 1
+          this.getTexts()
+        })
+        .catch(err => {
+          this.$message.error('分享语保存成功！')
+          console.log(err)
+        })
+    },
+    textSizeChange(val) {},
+    textPageChange(val) {
+      this.textCurrentPage = val
+      this.getTexts()
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.img-box {
+  position: relative;
+  padding: 50% 50%; /*宽高2：1*/
+  margin-bottom: 24px;
+
+  .img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .icon-del {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    border-radius: 50%;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+  }
+  &:hover .icon-del {
+    display: block;
+  }
+
+  &.active {
+    outline: 3px solid #409eff;
+  }
+}
+</style>
+
+<style scoped>
+.uploader-box >>> .el-upload {
+  width: 100%;
+  height: 100%;
+}
+
+.uploader-box >>> .uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100%;
+  height: 100%;
+  padding-top: 50%;
+  line-height: 0;
+  text-align: center;
+}
+</style>
+
+
+
+
+
diff --git a/src/router/modules/games.js b/src/router/modules/games.js
index b332302..3d69c55 100644
--- a/src/router/modules/games.js
+++ b/src/router/modules/games.js
@@ -30,6 +30,12 @@ const gamesRouter = {
       name: 'GamePlatforms',
       meta: { title: '平台管理' }
     },
+    {
+      path: 'lib',
+      component: () => import('@/views/games/lib'), // Parent router-view
+      name: 'GameLib',
+      meta: { title: '素材管理' }
+    },
     {
       path: 'details/:uid?',
       component: () => import('@/views/games/details/index'), // Parent router-view
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 369dc15..92a5816 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -79,6 +79,12 @@
   float: right;
 }
 
+.clear:after {
+  content: '';
+  display: table; // 也可以是'block'，或者是'list-item'
+  clear: both;
+}
+
 /* 背景 */
 .bg-fff {
   background-color: #fff;
diff --git a/src/views/games/lib.vue b/src/views/games/lib.vue
new file mode 100644
index 0000000..62faed8
--- /dev/null
+++ b/src/views/games/lib.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="app-container">
+    <share-lib />
+  </div>
+</template>
+
+
+<script>
+import ShareLib from '@/components/ShareLib'
+
+export default {
+  name: 'GameLib',
+  data() {
+    return {}
+  },
+  components: {
+    ShareLib
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0;
+}
+</style>
+
+
+<style scoped>
+.uploader-box >>> .uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 198px;
+  height: 198px;
+  line-height: 198px;
+  text-align: center;
+}
+
+.uploader-box >>> .uploader-icon {
+  width: 198px;
+  height: 198px;
+  display: block;
+}
+</style>
+
+