+图库

src/api/lib.js

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 获取图片列表
+export function getPics(params) {
+  return request({
+    url: '/maps',
+    method: 'get',
+    params,
+  })
+}
+
+// 新增图片信息
+export function addPic(data) {
+  return request({
+    url: '/maps',
+    method: 'post',
+    data
+  })
+}
+
+// 删除图片
+export function delPic(data) {
+    return request({
+      url: '/maps',
+      method: 'delete',
+      data
+    })
+  }

src/components/PicLib/index.vue

@@ -0,0 +1,331 @@
+<template>
+    <div>
+        <el-row
+            :gutter="24"
+            class="mgb-20"
+        >
+            <el-col
+                :span="24"
+                v-if="!useAsCom"
+            >
+                <el-button
+                    type="primary"
+                    size="mini"
+                    @click="selectAllImgs"
+                >全选</el-button>
+                <el-button
+                    type="danger"
+                    size="mini"
+                    @click="delImgs"
+                >批量删除</el-button>
+                <el-button
+                    type="primary"
+                    size="mini"
+                    @click="deselectImgs"
+                    v-if="imgsSelected.length > 0"
+                    plain
+                >取消选择</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="uploadUrl"
+                        name="image-file"
+                        :on-success="uploadSuccess"
+                        :on-error="uploadErr"
+                        :show-file-list="false"
+                        :before-upload="beforeUpload"
+                    >
+
+                        <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>
+    </div>
+</template>
+
+<script>
+import {getPics, addPic, delPic} from '@/api/lib'
+import {Promise, reject} from 'q'
+export default {
+  name: 'PicLib',
+  props: {
+    // 用作组件 只可单选
+    useAsCom: {
+      type: Boolean,
+      default: false,
+    },
+    username: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      // common
+      selectedData: {
+        imgs: [],
+      },
+      uploadUrl: `${process.env.VUE_APP_UPLOAD}`,
+      imgList: [],
+      imgsNum: 0,
+      imgsSelected: [], //选中图片的Index
+      imgMultiSelect: true,
+    }
+  },
+  watch: {
+    selectedData: {
+      handler: function(nVal) {
+        if (this.useAsCom) this.exportData()
+      },
+      immediate: true,
+      deep: true,
+    },
+    username: {
+      handler: async function(nVal) {
+        console.log('username', nVal)
+        if (!nVal) return
+        this.getData()
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    //common
+    getPics(params) {
+      return new Promise((resolve, reject) => {
+        getPics(params)
+          .then(res => {
+            const data = res.data
+            resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+            console.log(err)
+          })
+      })
+    },
+    addPic(data) {
+      return new Promise((resolve, reject) => {
+        addPic(data)
+          .then(res => {
+            const data = res.data
+            resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+            console.log(err)
+          })
+      })
+    },
+    delPic(data) {
+      return new Promise((resolve, reject) => {
+        delPic(data)
+          .then(res => {
+            const data = res.data
+            resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+            console.log(err)
+          })
+      })
+    },
+    async getData() {
+      const data = await this.getPics({
+        user: this.username,
+      })
+
+      this.imgList = data.message.filter(item=>item.status===1)
+      this.imgsSelected = []
+      this.selectedData.imgs = []
+    },
+
+    // other
+    exportData() {
+      this.$emit('selectMaterial', this.selectedData)
+    },
+    beforeUpload(file) {
+      const isLt600k = file.size / 1024 / 1024 < 0.6
+
+      if (!isLt600k) {
+        this.$message.error('图片不可超过 600k!')
+      }
+      return isLt600k
+    },
+    async uploadSuccess(res, file) {
+      const data = await this.addPic({
+        url: res.message.url,
+        user: this.username,
+      })
+      this.$message.success('图片上传成功！')
+      this.getData({user: this.username})
+    },
+    uploadErr() {
+      this.$message.error('图片上传失败！')
+    },
+    clickImg(index) {
+      // 切换图片选中状态
+      if (this.imgsSelected.includes(index)) {
+        const idx = this.imgsSelected.indexOf(index)
+        this.imgsSelected.splice(idx, 1)
+      } else {
+        // 用作组件则只可单选
+        if (this.useAsCom) {
+          this.imgsSelected = []
+          this.selectedData.imgs = []
+        }
+        this.imgsSelected.push(index)
+      }
+
+      const selectedImgs = []
+      this.imgsSelected.map(item => {
+        selectedImgs.push(this.imgList[item])
+      })
+      this.selectedData.imgs = selectedImgs
+    },
+    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(async () => {
+          const arr = []
+          const self = this
+          this.selectedData.imgs.map(item => {
+            arr.push(self.delPic({mapid: item.mapid}))
+          })
+          await Promise.all(arr)
+          this.$message.success('删除成功！')
+          this.getData()
+        })
+        .catch(() => {
+          this.$message.info('已取消删除！')
+        })
+    },
+    delImg(index) {
+      this.$confirm(`是否删除选中图片？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(async () => {
+          await this.delPic({
+            mapid: this.imgList[index].mapid,
+          })
+          this.getData()
+          this.$message.success('删除成功!')
+
+          console.log(this.imgList[index])
+        })
+        .catch(() => {
+          this.$message.info('已取消删除！')
+        })
+    },
+  },
+}
+</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: 5px;
+    right: 5px;
+    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>
+
+
+
+
+

src/icons/svg/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568093430268" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><defs><style type="text/css"></style></defs><path d="M117.5 73.1l833.4 833.4c12.2 12.2 12.2 32.1 0 44.3-12.2 12.2-32.1 12.2-44.3 0L73.1 117.5C61 105.3 61 85.3 73.1 73.1c12.2-12.1 32.2-12.1 44.4 0z" fill="" p-id="2766"></path><path d="M950.9 117.5L117.5 950.9c-12.2 12.2-32.1 12.2-44.3 0-12.2-12.2-12.2-32.1 0-44.3L906.5 73.1c12.2-12.2 32.1-12.2 44.3 0 12.2 12.2 12.2 32.2 0.1 44.4z" fill="" p-id="2767"></path></svg>

src/icons/svg/pic.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568085164421" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2028" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><defs><style type="text/css"></style></defs><path d="M304.28 509.818c30.015 0 59.805-30.443 59.805-59.783s-29.79-59.805-59.805-59.805c-30.015 0-59.805 30.443-59.805 59.805s29.768 59.782 59.805 59.782zM782.608 270.643h-657.72c-30.015 0-59.805 30.465-59.805 59.805v478.35c0 29.34 29.768 59.76 59.805 59.76h657.72c30.015 0 59.783-30.442 59.783-59.76v-478.35c0.022-29.34-29.767-59.805-59.783-59.805zM782.608 808.798h-657.72v-179.393c43.74 22.050 102.983 59.782 179.37 59.782 58.86 0 123.097-29.205 179.392-59.782 58.073-31.567 104.513-59.805 149.49-59.805 55.62 0 113.085 36.203 149.49 59.805v179.393zM782.608 569.623c-36.675-23.558-102.87-59.783-149.49-59.783-44.797 0-83.273 33.547-149.49 59.783-58.568 23.22-117.315 59.805-175.185 59.805-77.333 0-139.41-37.665-183.578-59.805v-239.175h657.72v239.175zM334.183 151.055v59.805h568.035v508.23h59.783v-568.035h-627.817z" p-id="2029"></path></svg>

src/router/index.js

@@ -12,6 +12,7 @@ import adRouter from './ad'
 import comRouter from './com'
 import adminRouter from './admin'
 import userRouter from './user'
+import libRouter from './lib'
 import errRouter from './error'
 
 /**
@@ -56,6 +57,7 @@ export const constantRoutes = [
   // TODO: 首页暂时隐藏
   // dashboardRouter,
   adRouter,
+  libRouter,
   // comRouter,
   // adminRouter,
   errRouter,

src/router/lib.js

@@ -0,0 +1,23 @@
+/** When your routing table is too long, you can split it into small modules **/
+
+import Layout from '@/layout'
+
+const libRouter = {
+  path: '/lib',
+  component: Layout,
+  name: 'lib',
+  meta: {
+    title: '资源库',
+    icon: 'pic',
+  },
+  children: [
+    {
+      path: '',
+      component: () => import('@/views/lib/index'), // Parent router-view
+      name: 'LibPic',
+      meta: {title: '图片管理'},
+    },
+  ],
+}
+
+export default libRouter

src/views/ad/edit.vue

@@ -162,7 +162,7 @@
           name="image-file"
           :on-success="uploadSuccess"
           :on-error="uploadErr"
-          :disabled="!writeable"
+          :disabled="true"
           :show-file-list="false"
           :before-upload="beforeUpload"
         >
@@ -180,6 +180,11 @@
           class="ipt-tip"
           style="margin-top: 6px;"
         >只能上传小于 600k 的图片</span>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="openModal"
+        >选择图片</el-button>
       </el-form-item>
       <el-form-item
         label="是否跳转"
@@ -278,6 +283,36 @@
       </el-form-item>
     </el-form>
 
+    <!-- Modal -->
+
+    <el-dialog
+      title="图库"
+      :visible.sync="modalVisible"
+      width="700px"
+      top="3vh"
+      :before-close="closeModal"
+    >
+      <el-scrollbar
+        style="height: 500px;"
+        class="scrollbar"
+      >
+        <pic-lib
+          @selectMaterial="changePic"
+          ref="picLib"
+          :useAsCom="true"
+          :username="user"
+        />
+      </el-scrollbar>
+
+      <span slot="footer">
+        <el-button @click="closeModal">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="confirmPic"
+        >确 定</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -286,9 +321,17 @@ import {getAdPos, getAd, addAd, updateAd, getAdAreaList} from '@/api/ad'
 import {getGameList} from '@/api/game'
 import {typeList, modeList} from '@/utils/ad-data'
 import moment from 'moment'
+import PicLib from '@/components/PicLib'
+import {mapGetters} from 'vuex'
 
 export default {
   name: 'AdEdit',
+  components: {
+    PicLib,
+  },
+  computed: {
+    ...mapGetters(['username']),
+  },
   data() {
     const validateJumpParams = (rule, value, callback) => {
       if (
@@ -313,6 +356,7 @@ export default {
 
     return {
       //common
+      user: '',
       writeable: false,
       companyid: 0,
       allGame: [],
@@ -388,9 +432,15 @@ export default {
           {type: 'number', message: '是否推荐必须是数值', trigger: 'blur'},
         ],
       },
+      // modal
+      modalVisible: false,
+      tempPic: '',
     }
   },
   async mounted() {
+    // 获取用户
+    this.user = this.username
+
     // 位置相关数据导入
     this.modeList = modeList
     this.typeList = typeList
@@ -647,8 +697,32 @@ export default {
         console.log(err)
       }
     },
+    // modal
+    openModal() {
+      this.modalVisible = true
+    },
+    closeModal() {
+      this.modalVisible = false
+    },
+    changePic(data) {
+      this.tempPic = data.imgs[0] && data.imgs[0].url
+    },
+    confirmPic() {
+      this.adForm.ad_image = this.tempPic
+      this.closeModal()
+    },
   },
 }
 </script>
 
 
+<style scoped>
+.scrollbar >>> .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+
+.scrollbar >>> .el-scrollbar__bar.is-horizontal {
+  display: none;
+}
+</style>
+

src/views/lib/index.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="app-container">
+        <pic-lib :username="user"></pic-lib>
+    </div>
+</template>
+
+
+<script>
+import PicLib from '@/components/PicLib'
+import {mapGetters} from 'vuex'
+
+export default {
+  name: 'Lib',
+  components: {
+    PicLib,
+  },
+  computed: {
+    ...mapGetters(['username']),
+  },
+  mounted() {
+    this.user = this.username
+  },
+  data() {
+    return {
+      user: '',
+    }
+  },
+}
+</script>
+