@@ -68,7 +68,7 @@ export function doSendPhoneCode(data) { | |||
export function doUpdPass(loginParams) { | |||
return request({ | |||
url: `/api/user/updPass`, | |||
method: 'get', | |||
method: 'post', | |||
data: loginParams | |||
}) | |||
} | |||
@@ -0,0 +1,312 @@ | |||
<template> | |||
<div :class="inPage ? 'page active' : 'page'"> | |||
<div class="content" :style="bgStyle" ref="fatherBox"> | |||
<!-- 控制框 --> | |||
<!-- <div class="control"> | |||
<div @click="controlImg(1)">放大</div> | |||
<div @click="controlImg(2)">缩小</div> | |||
<div @click="controlImg(3)">上移一层</div> | |||
<div @click="controlImg(4)">下移一层</div> | |||
</div> --> | |||
<div | |||
:id="'item' + index" | |||
@touchmove="onMouseMove(index)" | |||
@touchstart="onMouseDown(index)" | |||
@touchend="onMouseUp(index)" | |||
v-for="(item, index) in materialList" | |||
:key="index" | |||
class="material" | |||
:style="{ | |||
transform: 'scale(' + item.scale + ') ', | |||
zIndex: item.zIndex, | |||
top: item.y + 'px', | |||
left: item.x + 'px' | |||
}" | |||
> | |||
<div>{{ item.text }}</div> | |||
<img :src="item.url" alt="" /> | |||
<!-- 边框 --> | |||
<div :class="domIndex == index ? 'active' : ''"></div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
// 组件 | |||
import Vue from 'vue' | |||
import { Toast } from 'vant' | |||
import { mapState, mapActions } from 'vuex' | |||
// 工具 | |||
import { scrollToID } from '../utils' | |||
Vue.use(Toast) | |||
export default { | |||
props: { | |||
imgUrl: { | |||
default: false | |||
// type: String | |||
} | |||
// scList: { | |||
// default: false, | |||
// type: Array | |||
// } | |||
}, | |||
data() { | |||
return { | |||
inPage: false, | |||
dragging: false, | |||
startDistance: 0, //两指起始位置 | |||
startX: 0, | |||
startY: 0, // 鼠标位置x y | |||
windowWidth: 0, | |||
windowHeight: 0, | |||
scale: 1, | |||
domIndex: -1, //当前点击的图片 | |||
materialList: [ | |||
{ | |||
text: '小div1', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 10, // 相对左上角XY坐标 | |||
y: 190, | |||
scale: 1, //缩放 | |||
zIndex: 1 //层级 | |||
}, | |||
{ | |||
text: '小div2', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 100, | |||
y: 0, | |||
scale: 1, | |||
zIndex: 2 | |||
}, | |||
{ | |||
text: '小div3', | |||
url: require('../assets/img/bg.png'), | |||
x: 0, | |||
y: 100, | |||
scale: 1, | |||
zIndex: 3 | |||
}, | |||
{ | |||
text: '小div4', | |||
url: require('../assets/img/cn.jpeg'), | |||
x: 100, | |||
y: 100, | |||
scale: 1, | |||
zIndex: 4 | |||
}, | |||
{ | |||
text: '小div5', | |||
url: require('../assets/img/ft.png'), | |||
x: 100, | |||
y: 280, | |||
scale: 1, | |||
zIndex: 5 | |||
} | |||
] | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
//动态计算样式 | |||
bgStyle() { | |||
return { | |||
backgroundImage: `url(${this.imgUrl})`, | |||
backgroundSize: 'cover', | |||
backgroundPosition: 'center' | |||
} | |||
} | |||
}) | |||
// imageStyles() { | |||
// return this.images.map((image, index) => { | |||
// return { | |||
// zIndex: index, | |||
// width: `${image.width}px`, | |||
// height: `${image.height}px`, | |||
// position: 'absolute', | |||
// top: `${image.y}px`, | |||
// left: `${image.x}px`, | |||
// }; | |||
// }); | |||
// }, | |||
}, | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
// 鼠标按下事件 | |||
onMouseDown(index) { | |||
this.dragging = true | |||
this.domIndex = index | |||
//双指缩放初始化 | |||
if (event.touches[1]) { | |||
this.startDistance = this.getDistance( | |||
event.touches[0], | |||
event.touches[1] | |||
) | |||
} | |||
// 记录点击瞬间的鼠标坐标 | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
}, | |||
// 鼠标抬起 | |||
onMouseUp(index) { | |||
this.dragging = false | |||
// this.domIndex = -1 | |||
}, | |||
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||
onMouseMove(index) { | |||
// 禁止默认事件--下拉 | |||
event.preventDefault() | |||
if (!this.dragging) return | |||
if (this.domIndex != index) return | |||
// console.log(event.touches[0]) | |||
// 双指缩放 | |||
if (event.touches[1]) { | |||
const distance = this.getDistance(event.touches[0], event.touches[1]) | |||
const scale = distance / this.startDistance | |||
this.materialList[index].scale = scale | |||
} | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
// console.log(deltaX) | |||
this.materialList[index].x += deltaX | |||
this.materialList[index].y += deltaY | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
// 得到父子盒子信息 | |||
const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | |||
// 子盒子信息 | |||
const sonRect = document | |||
.getElementById(`item${index}`) | |||
.getBoundingClientRect() | |||
// 限制X轴 | |||
// console.log(fatherRect) | |||
// console.log(sonRect) | |||
if (this.materialList[index].x < -sonRect.width) { | |||
this.materialList[index].x = 0 | |||
this.exceed() | |||
} | |||
if (this.materialList[index].x > fatherRect.width) { | |||
this.materialList[index].x = 0 | |||
this.exceed() | |||
} | |||
// 限制Y轴 | |||
if (this.materialList[index].y < -sonRect.height) { | |||
this.materialList[index].y = 0 | |||
this.exceed() | |||
} | |||
if (this.materialList[index].y > fatherRect.height) { | |||
this.materialList[index].y = 0 | |||
this.exceed() | |||
} | |||
}, | |||
// 控制台 | |||
controlImg(type) { | |||
if (this.domIndex == -1) { | |||
Toast('请选择素材') | |||
return | |||
} | |||
if (type == 1) { | |||
this.materialList[this.domIndex].scale += 0.1 | |||
} | |||
if (type == 2) { | |||
this.materialList[this.domIndex].scale -= 0.1 | |||
} | |||
if (type == 3) { | |||
this.materialList[this.domIndex].zIndex += 1 | |||
} | |||
if (type == 4) { | |||
this.materialList[this.domIndex].zIndex -= 1 | |||
} | |||
}, | |||
// 素材超出显示范围 | |||
exceed() { | |||
Toast('素材超出显示范围') | |||
}, | |||
// 计算双指距离 | |||
getDistance(touch1, touch2) { | |||
const dx = touch1.pageX - touch2.pageX | |||
const dy = touch1.pageY - touch2.pageY | |||
return Math.sqrt(dx * dx + dy * dy) | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
} | |||
}, | |||
created() {}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
* { | |||
box-sizing: content-box !important; | |||
} | |||
.control { | |||
position: absolute; | |||
top: 0; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
display: flex; | |||
justify-content: space-around; | |||
width: 200px; | |||
height: 30px; | |||
text-align: center; | |||
line-height: 30px; | |||
background-color: #fff; | |||
z-index: 999999; | |||
} | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
&.active { | |||
opacity: 1; | |||
transform: translateX(0); | |||
} | |||
height: 100%; | |||
width: 100%; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
} | |||
.content { | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
background-color: green; | |||
overflow: hidden; | |||
.active { | |||
position: absolute; | |||
top: -10px; | |||
left: -10px; | |||
width: 100%; | |||
height: 100%; | |||
border: 10px solid rgba(0, 0, 0, 0.5); | |||
} | |||
.material { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
// width: 150px; | |||
// height: 140px; | |||
// background-color: red; | |||
img { | |||
width: 150px; | |||
height: 150px; | |||
// background-color: red; | |||
} | |||
} | |||
} | |||
</style> |
@@ -134,7 +134,7 @@ | |||
</el-col> | |||
<el-col :span="9"> | |||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||
<img class="yzmImg" :src="codeImg" alt="" /> | |||
<img v-if="showCodeImg" class="yzmImg" :src="codeImg" alt="" /> | |||
</el-col> | |||
<el-col :span="2"> | |||
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | |||
@@ -533,6 +533,7 @@ export default { | |||
try { | |||
const res = await doUpdPass(data) | |||
console.log(res) | |||
Toast.success('修改密码成功') | |||
this.loginType = 1 | |||
} catch (error) { | |||
console.log(error, 'error') | |||
@@ -6,13 +6,16 @@ | |||
<div class="content"> | |||
<!-- 展示图片 --> | |||
<div v-if="imgUrl" class="shouModelImg"> | |||
<img :src="imgUrl" alt="" /> | |||
<div class="editPosition"> | |||
<EditPosition ref="EditPosition" :imgUrl="imgUrl"></EditPosition> | |||
</div> | |||
<!-- <img :src="imgUrl" alt="" /> --> | |||
<!-- 字幕 --> | |||
<div | |||
<!-- <div | |||
v-html="textareaContent" | |||
v-show="showSubtitle" | |||
class="shouModelImg-subtitle" | |||
></div> | |||
></div> --> | |||
</div> | |||
<!-- 文字 --> | |||
<div class="addText"> | |||
@@ -51,9 +54,9 @@ | |||
<!-- 合成按钮 --> | |||
<div class="makeVideo" @click="submit">立即制作</div> | |||
<!-- 上移下移 --> | |||
<div v-if="false" class="upAndBottomBtn"> | |||
<div class="upAndBottomBtn"> | |||
<div class="moveLayer"> | |||
<div class="btnContent"> | |||
<div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | |||
<img | |||
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" | |||
alt="" | |||
@@ -62,7 +65,10 @@ | |||
</div> | |||
</div> | |||
<div class="moveLayer below"> | |||
<div class="btnContent active"> | |||
<div | |||
class="btnContent active" | |||
@click="$refs.EditPosition.controlImg(4)" | |||
> | |||
<img | |||
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" | |||
alt="" | |||
@@ -327,6 +333,7 @@ import { Toast } from 'vant' | |||
import { mapState, mapActions } from 'vuex' | |||
import HeadTop from './../../components/common/head.vue' | |||
import CutImg from '../../components/CutImg.vue' | |||
import EditPosition from '../../components/editPosition.vue' | |||
// 工具 | |||
import { scrollToID } from '../../utils' | |||
@@ -348,13 +355,24 @@ Vue.use(Toast) | |||
export default { | |||
components: { | |||
HeadTop, | |||
CutImg | |||
CutImg, | |||
EditPosition | |||
}, | |||
data() { | |||
return { | |||
audioUrl: null, // 声音试听 | |||
inPage: false, | |||
imgUrl: null, | |||
imgUrl: false, | |||
sclist: [ | |||
{ | |||
text: '小div1', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 300, // 相对左上角XY坐标 | |||
y: 300, | |||
scale: 1, //缩放 | |||
zIndex: 3 //层级 | |||
} | |||
], //素材列表 | |||
modelId: null, | |||
mouldSmId: null, | |||
saveID: null, // 作品id | |||
@@ -586,6 +604,14 @@ export default { | |||
</script> | |||
<style lang="scss" scoped> | |||
.editPosition { | |||
position: relative; | |||
width: 200px; | |||
height: 350px; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
background-color: pink; | |||
} | |||
.CutImg { | |||
} | |||
.page { | |||
@@ -741,7 +767,7 @@ export default { | |||
} | |||
.active { | |||
opacity: 0.5; | |||
// opacity: 0.5; | |||
} | |||
} | |||
} | |||
@@ -19,15 +19,10 @@ | |||
:key="index" | |||
class="material" | |||
:style="{ | |||
transform: | |||
'scale(' + | |||
item.scale + | |||
') translate(' + | |||
item.x + | |||
'px, ' + | |||
item.y + | |||
'px)', | |||
zIndex: item.zIndex | |||
transform: 'scale(' + item.scale + ') ', | |||
zIndex: item.zIndex, | |||
top: item.y + 'px', | |||
left: item.x + 'px' | |||
}" | |||
> | |||
<div>{{ item.text }}</div> | |||
@@ -63,11 +58,10 @@ export default { | |||
{ | |||
text: '小div1', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 300, | |||
x: 300, // 相对左上角XY坐标 | |||
y: 300, | |||
scale: 1, | |||
zIndex: 3, | |||
num: 1 | |||
scale: 1, //缩放 | |||
zIndex: 3 //层级 | |||
}, | |||
{ | |||
text: '小div2', | |||
@@ -144,9 +138,11 @@ export default { | |||
event.preventDefault() | |||
if (!this.dragging) return | |||
if (this.domIndex != index) return | |||
// console.log(event.touches[0]) | |||
console.log(event.touches[0]) | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
console.log(deltaX) | |||
this.materialList[index].x += deltaX | |||
this.materialList[index].y += deltaY | |||
@@ -157,14 +153,13 @@ export default { | |||
const sonRect = document | |||
.getElementById(`item${index}`) | |||
.getBoundingClientRect() | |||
console.log(fatherRect) | |||
console.log(sonRect) | |||
// 限制X轴 | |||
if (this.materialList[index].x < 0) { | |||
this.materialList[index].x = 0 | |||
} | |||
if (sonRect.left > fatherRect.width - sonRect.width / 2) { | |||
this.materialList[index].x = fatherRect.width - sonRect.width | |||
this.exceed() | |||
} | |||
// 限制Y轴 | |||
if (this.materialList[index].y < 0) { | |||
@@ -172,8 +167,10 @@ export default { | |||
} | |||
if (sonRect.top > fatherRect.height - sonRect.height / 2) { | |||
this.materialList[index].y = fatherRect.height - sonRect.height | |||
this.exceed() | |||
} | |||
}, | |||
// 控制台 | |||
controlImg(type) { | |||
if (this.domIndex == -1) { | |||
Toast('请选择素材') | |||
@@ -191,6 +188,10 @@ export default { | |||
this.materialList[this.domIndex].zIndex -= 1 | |||
} | |||
}, | |||
// 素材超出显示范围 | |||
exceed() { | |||
Toast('素材超出显示范围') | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
} | |||
@@ -3,12 +3,12 @@ | |||
<div id="top"></div> | |||
<div class="content" ref="fatherBox"> | |||
<!-- 控制框 --> | |||
<div class="control"> | |||
<!-- <div class="control"> | |||
<div @click="controlImg(1)">放大</div> | |||
<div @click="controlImg(2)">缩小</div> | |||
<div @click="controlImg(3)">上移一层</div> | |||
<div @click="controlImg(4)">下移一层</div> | |||
</div> | |||
</div> --> | |||
<div | |||
:id="'item' + index" | |||
@@ -48,6 +48,7 @@ export default { | |||
return { | |||
inPage: false, | |||
dragging: false, | |||
startDistance: 0, //两指起始位置 | |||
startX: 0, | |||
startY: 0, // 鼠标位置x y | |||
windowWidth: 0, | |||
@@ -123,6 +124,13 @@ export default { | |||
onMouseDown(index) { | |||
this.dragging = true | |||
this.domIndex = index | |||
//双指缩放初始化 | |||
if (event.touches[1]) { | |||
this.startDistance = this.getDistance( | |||
event.touches[0], | |||
event.touches[1] | |||
) | |||
} | |||
// 记录点击瞬间的鼠标坐标 | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
@@ -140,6 +148,12 @@ export default { | |||
if (this.domIndex != index) return | |||
console.log(event.touches[0]) | |||
// 双指缩放 | |||
if (event.touches[1]) { | |||
const distance = this.getDistance(event.touches[0], event.touches[1]) | |||
const scale = distance / this.startDistance | |||
this.materialList[index].scale = scale | |||
} | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
console.log(deltaX) | |||
@@ -148,6 +162,7 @@ export default { | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
// 得到父子盒子信息 | |||
const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | |||
const sonRect = document | |||
@@ -192,6 +207,12 @@ export default { | |||
exceed() { | |||
Toast('素材超出显示范围') | |||
}, | |||
// 计算双指距离 | |||
getDistance(touch1, touch2) { | |||
const dx = touch1.pageX - touch2.pageX | |||
const dy = touch1.pageY - touch2.pageY | |||
return Math.sqrt(dx * dx + dy * dy) | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
} | |||