1111

package.json

@@ -61,6 +61,7 @@
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
     "vue": "2.6.10",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
     "vue-quill-editor": "^3.0.6",
@@ -72,8 +73,8 @@
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
-    "@babel/register": "7.0.0",
     "@babel/parser": "^7.7.4",
+    "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.5.3",
     "@vue/cli-plugin-eslint": "^3.9.1",
     "@vue/cli-plugin-unit-jest": "3.5.3",
@@ -102,6 +103,7 @@
     "serve-static": "^1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.0",
+    "swiper": "^6.8.0",
     "vue-template-compiler": "2.6.10"
   },
   "engines": {

src/api/module/goodsgement.js

@@ -8,7 +8,7 @@ export function getlistGoods(query) {
         params: query
     })
 }
-//上架商品
+//上下架商品
 export function shelvesStatus(data) {
     return request({
         url: '/system/goodsNew/shelvesStatus',
@@ -16,73 +16,20 @@ export function shelvesStatus(data) {
         data: data
     })
 }
-
-
-
-
-
-
-
-
-
-
-
-// 查询类别
-export function GetCategory(query) {
-    return request({
-        url: '/system/goods/getCategory',
-        method: 'get',
-        params: query
-    })
-}
-// 查询运费模板
-export function GetFreight(query) {
+//删除还原商品
+export function delgoodsStatus(data) {
     return request({
-        url: '/system/goods/getFreight',
-        method: 'get',
-        params: query
-    })
-}
-// 查询goods详细
-export function getGoods (id) {
-    return request({
-        url: '/system/goods/edit?goodsId='+id,
-        method: 'get'
-    })
-}
-
-
-// 新增goods
-export function addGoods(data) {
-    return request({
-        url: '/system/goods/add',
+        url: '/system/goodsNew/goodsStatus',
         method: 'post',
         data: data
     })
 }
 
-// 修改goods
-export function updateGoods(data) {
+// 商品详情
+export function getgoodsdetail(query) {
     return request({
-        url: '/system/goods/edit',
-        method: 'post',
-        data: data
-    })
-}
-
-// 删除goods
-export function delGoods(ids) {
-    return request({
-        url: '/system/goods/delete',
-        method: 'delete',
-        data:{ids:ids}
-    })
-}
-//上传图片
-export function UploadImg(data) {
-    return request({
-        url: '/system/goods/uploadImg',
-        method: 'post',
-        data: data
+        url: '/system/goodsNew/info',
+        method: 'get',
+        params: query
     })
 }

src/components/Magnifying/index.vue

+<template>
+  <!-- 放大镜 -->
+  <div style="display: flex;position: relative">
+    <div
+      class="box Magnifying"
+      :style="minImgBoxStyle"
+      @mouseleave="mouseLeave"
+      @mouseenter="mouseEnter"
+      @mousemove="mousemove($event)"
+    >
+      <!-- <div>{{title}}</div> -->
+      <!--原始照片-小照片 :src="finalMinIMGsrc"-->
+      <img ref="minImg" :style="minImgStyle" fit="contain" :src="imageurl">
+      <!--探测块-->
+      <div v-show="show" class="areaMark" :style="areaMarkStyle" />
+    </div>
+    <div v-show="show" class="box maxImgBox" :style="maxImgBoxStyle">
+      <!--放大后的照片-->
+      <img :style="maxImgStyle" fit="contain" :src="imageurl">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Magnifying',
+  props: {
+    imageurl: {},
+    imgsurl: {}, // 父组件图片
+    // imageurl: '',
+    minIMGsrc: String,
+    maxIMGsrc: String,
+    scale: {
+      type: Number,
+      default: 2
+    },
+    width: {
+      type: Number,
+      default: 380
+    },
+    height: {
+      type: Number,
+      default: 380
+    }
+  },
+  data() {
+    return {
+      show: false,
+      finalMinIMGsrc: '',
+      finalMaxIMGsrc: '',
+      imgBoxWidth: 380,
+      imgBoxHeight: 380,
+      areaWidth: 210,
+      areaHeight: 210,
+      areaMarkStyle: {},
+      minImgBoxStyle: {
+        cursor: 'move'
+      },
+      minImgStyle: {},
+      maxImgBoxStyle: {},
+      maxImgStyle: {
+        position: 'absolute'
+      }
+    }
+  },
+  watch: {
+    imgsurl: function(newVal, oldVal) {
+      this.finalMinIMGsrc = newVal // 监听父组件图片 改变组件内图片地址
+      console.log(newVal)
+    },
+    minIMGsrc() {
+      this.init()
+    },
+    maxIMGsrc() {
+      this.init()
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.imgBoxWidth = this.width
+      this.imgBoxHeight = this.height
+      this.$set(this.minImgStyle, 'width', this.imgBoxWidth + 'px')
+      this.$set(this.minImgStyle, 'height', this.imgBoxHeight + 'px')
+      this.$set(this.maxImgStyle, 'width', this.imgBoxWidth + 'px')
+      this.$set(this.maxImgStyle, 'height', this.imgBoxHeight + 'px')
+      this.$set(this.minImgBoxStyle, 'width', this.imgBoxWidth + 'px')
+      this.$set(this.minImgBoxStyle, 'height', this.imgBoxHeight + 'px')
+      this.$set(this.maxImgBoxStyle, 'width', this.imgBoxWidth + 'px')
+      this.$set(this.maxImgBoxStyle, 'height', this.imgBoxHeight + 'px')
+      this.$set(this.maxImgBoxStyle, 'left', this.imgBoxWidth + 'px')
+      this.areaWidth = this.imgBoxWidth / this.scale
+      this.areaHeight = this.imgBoxHeight / this.scale
+      this.finalMinIMGsrc = this.minIMGsrc
+      if (!this.maxIMGsrc) {
+        this.finalMaxIMGsrc = this.minIMGsrc
+      }
+      this.$set(this.areaMarkStyle, 'width', this.areaWidth + 'px')
+      this.$set(this.areaMarkStyle, 'height', this.areaHeight + 'px')
+      this.$set(this.maxImgStyle, 'transform', 'scale(' + this.scale + ')')
+    },
+    mouseEnter() {
+      this.show = true
+    },
+    mouseLeave() {
+      this.show = false
+    },
+    mousemove(e) {
+      // 获取文档顶端与屏幕顶部之间的距离
+      // scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度
+      const documentScrollTop =
+        document.documentElement.scrollTop || document.body.scrollTop
+      // 获取鼠标相对于屏幕的坐标
+      const mouseClientX = e.clientX
+      const mouseClientY = e.clientY
+      // 获取小照片相对于屏幕位置信息
+      // getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
+      const minImgPosition = this.$refs.minImg.getBoundingClientRect()
+      const minImgX = minImgPosition.left
+      const minImgY = minImgPosition.top
+      // 计算出探测块相对于小图片的坐标
+      let areaLeft = mouseClientX - minImgX - this.areaWidth / 2
+      let areaTop = mouseClientY - minImgY - this.areaHeight / 2
+      if (documentScrollTop > 0) {
+        areaTop = documentScrollTop + areaTop
+      }
+      const minLeft = 0
+      const maxLeft = this.imgBoxWidth - this.areaWidth
+      const minTop = 0
+      const maxTop = this.imgBoxHeight - this.areaHeight
+      // 禁止探测块移出小图片
+      if (areaLeft < minLeft) {
+        areaLeft = minLeft
+      }
+      if (areaLeft > maxLeft) {
+        areaLeft = maxLeft
+      }
+      if (areaTop < minTop) {
+        areaTop = minTop
+      }
+      if (areaTop > maxTop) {
+        areaTop = maxTop
+      }
+      // 更新探测块的坐标
+      this.$set(this.areaMarkStyle, 'left', areaLeft + 'px')
+      this.$set(this.areaMarkStyle, 'top', areaTop + 'px')
+      // 更新放大后照片的坐标
+      this.$set(
+        this.maxImgStyle,
+        'left',
+        ((this.scale - 1) * this.imgBoxWidth) / 2 - areaLeft * this.scale + 'px'
+      )
+      this.$set(
+        this.maxImgStyle,
+        'top',
+        ((this.scale - 1) * this.imgBoxHeight) / 2 - areaTop * this.scale + 'px'
+      )
+    }
+  }
+}
+</script>
+<style scoped>
+.Magnifying {
+  height: 380px;
+  width: 380px;
+}
+.box {
+  border: 1px solid darkgray;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.areaMark {
+  position: absolute;
+  background: url(//img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png);
+}
+.maxImgBox {
+  position: absolute;
+  z-index: 999;
+}
+</style>

src/main.js

@@ -21,7 +21,10 @@ import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, download, handleTree } from "@/utils/ruoyi";
 import Pagination from "@/components/Pagination";
 
-
+import VueAwesomeSwiper from 'vue-awesome-swiper' // 引入swiper
+Vue.use(VueAwesomeSwiper) // 注册swiper
+// import 'swiper/css/swiper.css' // 引入swiper样式/
+import 'swiper/swiper-bundle.css'
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey