Skip to content

S
shop-new
提交 f50b6fb5 authored 作者: 王天霸's avatar 王天霸
浏览文件
操作

1111

上级 2ef7a507
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1372 行增加 和 180 行删除
package.json
浏览文件 @ f50b6fb5
......@@ -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
浏览文件 @ f50b6fb5
......@@ -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 0 → 100644
浏览文件 @ f50b6fb5
<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
浏览文件 @ f50b6fb5
......@@ -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
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论