feat:添加信息设置以及图片裁剪、去水印以及合成功能

.postcssrc.js

 // https://github.com/michael-ciniawsky/postcss-load-config
-
+/*
 module.exports = {
   "plugins": {
     "postcss-import": {},
@@ -7,4 +7,4 @@ module.exports = {
     // to edit target browsers: use "browserslist" field in package.json
     "autoprefixer": {}
   }
-}
+}*/

config/dev.env.js

 module.exports = {
 	NODE_ENV: '"development"',
     ENV_CONFIG: '"dev"',
-    BASE_API: '"http://quanku-system-dev.wanwudezhi.com/"'
+    BASE_API: '"http://quanku-system-dev.wanwudezhi.com/admin"'
 }

package.json

@@ -40,7 +40,9 @@
     "v-charts": "1.19.0",
     "vue": "2.5.17",
     "vue-count-to": "1.0.13",
+    "vue-cropper": "^0.6.2",
     "vue-i18n": "7.3.2",
+    "vue-picture-cut": "^2.0.17",
     "vue-router": "3.0.1",
     "vue2-org-tree": "^1.3.6",
     "vued3tree": "^5.1.0",
@@ -93,6 +95,7 @@
     "shelljs": "0.8.2",
     "svg-sprite-loader": "3.8.0",
     "svgo": "1.0.5",
+    "typescript": "^3.2.2",
     "uglifyjs-webpack-plugin": "1.2.7",
     "url-loader": "1.0.1",
     "vue-loader": "15.3.0",

src/api/business/goods.js

@@ -26,8 +26,8 @@ export function publishGoods(data) {
 
 export function detailGoods(id) {
   return request({
-    url: '/goods/detail',
-    method: 'get',
+    url: '/item/findDetail',
+    method: 'post',
     params: { id }
   })
 }

src/main.js

@@ -22,7 +22,11 @@ import './permission' // permission control
 import * as filters from './filters' // global filters
 
 import permission from '@/directive/permission/index.js' // 权限判断指令
-
+import 'vue-picture-cut/lib/vue-picture-cut.css'
+import VuePictureCut from 'vue-picture-cut'
+Vue.use(VuePictureCut)
+import VueCropper from 'vue-cropper'
+Vue.use(VueCropper)
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)

src/router/index.js

@@ -157,6 +157,18 @@ export const asyncRouterMap = [
       icon: 'tab'
     },
     children: [
+      {
+        path: 'infoSet',
+        component: () => import('@/views/goods/infoSet'),
+        name: 'category',
+        meta: {
+          perms: ['GET /admin/category/list', 'POST /admin/category/create', 'GET /admin/category/read', 'POST /admin/category/update', 'POST /admin/category/delete', 'POST /admin/category/getSubCategory', 'POST /admin/bidrecord/list'],
+          title: '信息设置',
+          icon: 'list',
+          noCache: true
+        },
+        hidden: true
+      },
       {
         path: 'category',
         component: () => import('@/views/mall/category'),

src/views/goods/components/lamaImageDialog.vue

+<template>
+  <el-dialog
+    :visible.sync="showLamaDialog"
+    title="去水印"
+    width="1000px">
+    <div >
+      <iframe
+        ref="iframe"
+        :src="iframeSrc"
+        width="900px"
+        height="600px"
+        frameborder="0"
+        scrolling="no"/>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'LamaImageDialog',
+  props: {
+    showLamaDialog: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      iframeSrc: ' http://lama.wanwudezhi.work/'
+    }
+  },
+  mounted() {
+    window.addEventListener('message', this.handleMessage)
+  },
+  // vue实例销毁时销毁一些监听事件
+  methods: {
+    handleMessage(event) {
+      console.log('===从子应用的传递的===', event.data)
+      const data = event.data
+      switch (data.cmd) {
+        case 'base64Str':
+          // 业务逻辑
+          console.log('===从子应用的传递的returnHeight===', data.params)
+          this.$emit('imageBase64', data.params && data.params.imgUrlBase64 || '')
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/goods/components/selectImageDialog.vue

+<template>
+  <div>
+    <el-dialog
+      :visible.sync="selectImageDialogVisible"
+      :before-close="handleClose"
+      width="800px"
+      height="800px"
+      title="选择图片">
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSelectSuccess">确定</el-button>
+      </div>
+      <div class="list">
+        <div v-for="(item, index) in imageList" :key="item + index" class="select_item" @click="handleCheckImg(index)">
+          <img :src="item" class="gallery">
+          <img :src="index === currentPosition ? checkedImg : checkImg" class="check_img">
+        </div>
+      </div>
+
+    </el-dialog>
+    <LamaImageDialog
+      :show-lama-dialog="showLamaImageDialog"
+      @imageBase64="handleGetImageBase64"/>
+  </div>
+
+</template>
+
+<script>
+import LamaImageDialog from './lamaImageDialog'
+export default {
+  name: 'SelectImageDialog',
+  components: { LamaImageDialog },
+  props: {
+    selectImageDialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    selectType: { // 1去水印
+      type: Number,
+      default: 0
+    },
+    imageList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      showLamaImageDialog: false,
+      currentPosition: -1,
+      checked: false,
+      checkImg: 'https://cdn.wanwudezhi.com/static/web-static/image/830b6dba5de0ad1cf4840df24d13b176_128x128.png',
+      checkedImg: 'https://cdn.wanwudezhi.com/static/web-static/image/efc07a5868f35cb0fb66c1b232a3bc92_128x128.png'
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('closeDialog')
+    },
+    handleCheckImg(index) {
+      this.currentPosition = index
+    },
+    handleSelectSuccess() {
+      if (this.currentPosition === -1) {
+        this.$message.error('请选择图片')
+        return
+      }
+      debugger
+      if (this.selectType === 1) { // 去水印
+        this.showLamaImageDialog = true
+      } else {
+        this.$emit('selectSuccess', this.imageList[this.currentPosition])
+        this.$emit('closeDialog')
+      }
+    },
+    handleGetImageBase64(imgUrlBase64) {
+      this.$emit('imageBase64Str', imgUrlBase64)
+      this.showLamaImageDialog = false
+      this.$emit('closeDialog')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.list {
+  width: 720px;
+  .select_item {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    display: inline-block;
+
+    .gallery {
+      width: 100px;
+      height: 100px;
+    }
+    .check_img {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+</style>

src/views/goods/list.vue

@@ -61,8 +61,9 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="操作" width="150" 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 type="primary" size="mini" style="width: 80px" @click="handleSet(scope.row)">钱币设置</el-button>
           <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
           <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
         </template>
@@ -150,6 +151,9 @@ export default {
     handleUpdate(row) {
       this.$router.push({ path: '/goods/edit', query: { id: row.id }})
     },
+    handleSet(row) {
+      this.$router.push({ path: '/goods/infoSet', query: { id: row.id }})
+    },
     showDetail(detail) {
       this.goodsDetail = detail
       this.detailDialogVisible = true