@@ -68,7 +68,7 @@ export function doSendPhoneCode(data) { | |||||
export function doUpdPass(loginParams) { | export function doUpdPass(loginParams) { | ||||
return request({ | return request({ | ||||
url: `/api/user/updPass`, | url: `/api/user/updPass`, | ||||
method: 'get', | |||||
method: 'post', | |||||
data: loginParams | 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> | ||||
<el-col :span="9"> | <el-col :span="9"> | ||||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | <!-- <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> | ||||
<el-col :span="2"> | <el-col :span="2"> | ||||
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | <i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | ||||
@@ -533,6 +533,7 @@ export default { | |||||
try { | try { | ||||
const res = await doUpdPass(data) | const res = await doUpdPass(data) | ||||
console.log(res) | console.log(res) | ||||
Toast.success('修改密码成功') | |||||
this.loginType = 1 | this.loginType = 1 | ||||
} catch (error) { | } catch (error) { | ||||
console.log(error, 'error') | console.log(error, 'error') | ||||
@@ -6,13 +6,16 @@ | |||||
<div class="content"> | <div class="content"> | ||||
<!-- 展示图片 --> | <!-- 展示图片 --> | ||||
<div v-if="imgUrl" class="shouModelImg"> | <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-html="textareaContent" | ||||
v-show="showSubtitle" | v-show="showSubtitle" | ||||
class="shouModelImg-subtitle" | class="shouModelImg-subtitle" | ||||
></div> | |||||
></div> --> | |||||
</div> | </div> | ||||
<!-- 文字 --> | <!-- 文字 --> | ||||
<div class="addText"> | <div class="addText"> | ||||
@@ -51,9 +54,9 @@ | |||||
<!-- 合成按钮 --> | <!-- 合成按钮 --> | ||||
<div class="makeVideo" @click="submit">立即制作</div> | <div class="makeVideo" @click="submit">立即制作</div> | ||||
<!-- 上移下移 --> | <!-- 上移下移 --> | ||||
<div v-if="false" class="upAndBottomBtn"> | |||||
<div class="upAndBottomBtn"> | |||||
<div class="moveLayer"> | <div class="moveLayer"> | ||||
<div class="btnContent"> | |||||
<div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | |||||
<img | <img | ||||
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" | src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" | ||||
alt="" | alt="" | ||||
@@ -62,7 +65,10 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="moveLayer below"> | <div class="moveLayer below"> | ||||
<div class="btnContent active"> | |||||
<div | |||||
class="btnContent active" | |||||
@click="$refs.EditPosition.controlImg(4)" | |||||
> | |||||
<img | <img | ||||
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" | src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" | ||||
alt="" | alt="" | ||||
@@ -327,6 +333,7 @@ import { Toast } from 'vant' | |||||
import { mapState, mapActions } from 'vuex' | import { mapState, mapActions } from 'vuex' | ||||
import HeadTop from './../../components/common/head.vue' | import HeadTop from './../../components/common/head.vue' | ||||
import CutImg from '../../components/CutImg.vue' | import CutImg from '../../components/CutImg.vue' | ||||
import EditPosition from '../../components/editPosition.vue' | |||||
// 工具 | // 工具 | ||||
import { scrollToID } from '../../utils' | import { scrollToID } from '../../utils' | ||||
@@ -348,13 +355,24 @@ Vue.use(Toast) | |||||
export default { | export default { | ||||
components: { | components: { | ||||
HeadTop, | HeadTop, | ||||
CutImg | |||||
CutImg, | |||||
EditPosition | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
audioUrl: null, // 声音试听 | audioUrl: null, // 声音试听 | ||||
inPage: false, | 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, | modelId: null, | ||||
mouldSmId: null, | mouldSmId: null, | ||||
saveID: null, // 作品id | saveID: null, // 作品id | ||||
@@ -586,6 +604,14 @@ export default { | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.editPosition { | |||||
position: relative; | |||||
width: 200px; | |||||
height: 350px; | |||||
border-radius: 12px; | |||||
overflow: hidden; | |||||
background-color: pink; | |||||
} | |||||
.CutImg { | .CutImg { | ||||
} | } | ||||
.page { | .page { | ||||
@@ -741,7 +767,7 @@ export default { | |||||
} | } | ||||
.active { | .active { | ||||
opacity: 0.5; | |||||
// opacity: 0.5; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -19,15 +19,10 @@ | |||||
:key="index" | :key="index" | ||||
class="material" | class="material" | ||||
:style="{ | :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> | <div>{{ item.text }}</div> | ||||
@@ -63,11 +58,10 @@ export default { | |||||
{ | { | ||||
text: '小div1', | text: '小div1', | ||||
url: 'img/BG@2x.b0cf224b.png', | url: 'img/BG@2x.b0cf224b.png', | ||||
x: 300, | |||||
x: 300, // 相对左上角XY坐标 | |||||
y: 300, | y: 300, | ||||
scale: 1, | |||||
zIndex: 3, | |||||
num: 1 | |||||
scale: 1, //缩放 | |||||
zIndex: 3 //层级 | |||||
}, | }, | ||||
{ | { | ||||
text: '小div2', | text: '小div2', | ||||
@@ -144,9 +138,11 @@ export default { | |||||
event.preventDefault() | event.preventDefault() | ||||
if (!this.dragging) return | if (!this.dragging) return | ||||
if (this.domIndex != index) 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 deltaX = event.touches[0].clientX - this.startX | ||||
const deltaY = event.touches[0].clientY - this.startY | const deltaY = event.touches[0].clientY - this.startY | ||||
console.log(deltaX) | |||||
this.materialList[index].x += deltaX | this.materialList[index].x += deltaX | ||||
this.materialList[index].y += deltaY | this.materialList[index].y += deltaY | ||||
@@ -157,14 +153,13 @@ export default { | |||||
const sonRect = document | const sonRect = document | ||||
.getElementById(`item${index}`) | .getElementById(`item${index}`) | ||||
.getBoundingClientRect() | .getBoundingClientRect() | ||||
console.log(fatherRect) | |||||
console.log(sonRect) | |||||
// 限制X轴 | // 限制X轴 | ||||
if (this.materialList[index].x < 0) { | if (this.materialList[index].x < 0) { | ||||
this.materialList[index].x = 0 | this.materialList[index].x = 0 | ||||
} | } | ||||
if (sonRect.left > fatherRect.width - sonRect.width / 2) { | if (sonRect.left > fatherRect.width - sonRect.width / 2) { | ||||
this.materialList[index].x = fatherRect.width - sonRect.width | this.materialList[index].x = fatherRect.width - sonRect.width | ||||
this.exceed() | |||||
} | } | ||||
// 限制Y轴 | // 限制Y轴 | ||||
if (this.materialList[index].y < 0) { | if (this.materialList[index].y < 0) { | ||||
@@ -172,8 +167,10 @@ export default { | |||||
} | } | ||||
if (sonRect.top > fatherRect.height - sonRect.height / 2) { | if (sonRect.top > fatherRect.height - sonRect.height / 2) { | ||||
this.materialList[index].y = fatherRect.height - sonRect.height | this.materialList[index].y = fatherRect.height - sonRect.height | ||||
this.exceed() | |||||
} | } | ||||
}, | }, | ||||
// 控制台 | |||||
controlImg(type) { | controlImg(type) { | ||||
if (this.domIndex == -1) { | if (this.domIndex == -1) { | ||||
Toast('请选择素材') | Toast('请选择素材') | ||||
@@ -191,6 +188,10 @@ export default { | |||||
this.materialList[this.domIndex].zIndex -= 1 | this.materialList[this.domIndex].zIndex -= 1 | ||||
} | } | ||||
}, | }, | ||||
// 素材超出显示范围 | |||||
exceed() { | |||||
Toast('素材超出显示范围') | |||||
}, | |||||
go(url) { | go(url) { | ||||
this.$router.push(url) | this.$router.push(url) | ||||
} | } | ||||
@@ -3,12 +3,12 @@ | |||||
<div id="top"></div> | <div id="top"></div> | ||||
<div class="content" ref="fatherBox"> | <div class="content" ref="fatherBox"> | ||||
<!-- 控制框 --> | <!-- 控制框 --> | ||||
<div class="control"> | |||||
<!-- <div class="control"> | |||||
<div @click="controlImg(1)">放大</div> | <div @click="controlImg(1)">放大</div> | ||||
<div @click="controlImg(2)">缩小</div> | <div @click="controlImg(2)">缩小</div> | ||||
<div @click="controlImg(3)">上移一层</div> | <div @click="controlImg(3)">上移一层</div> | ||||
<div @click="controlImg(4)">下移一层</div> | <div @click="controlImg(4)">下移一层</div> | ||||
</div> | |||||
</div> --> | |||||
<div | <div | ||||
:id="'item' + index" | :id="'item' + index" | ||||
@@ -48,6 +48,7 @@ export default { | |||||
return { | return { | ||||
inPage: false, | inPage: false, | ||||
dragging: false, | dragging: false, | ||||
startDistance: 0, //两指起始位置 | |||||
startX: 0, | startX: 0, | ||||
startY: 0, // 鼠标位置x y | startY: 0, // 鼠标位置x y | ||||
windowWidth: 0, | windowWidth: 0, | ||||
@@ -123,6 +124,13 @@ export default { | |||||
onMouseDown(index) { | onMouseDown(index) { | ||||
this.dragging = true | this.dragging = true | ||||
this.domIndex = index | this.domIndex = index | ||||
//双指缩放初始化 | |||||
if (event.touches[1]) { | |||||
this.startDistance = this.getDistance( | |||||
event.touches[0], | |||||
event.touches[1] | |||||
) | |||||
} | |||||
// 记录点击瞬间的鼠标坐标 | // 记录点击瞬间的鼠标坐标 | ||||
this.startX = event.touches[0].clientX | this.startX = event.touches[0].clientX | ||||
this.startY = event.touches[0].clientY | this.startY = event.touches[0].clientY | ||||
@@ -140,6 +148,12 @@ export default { | |||||
if (this.domIndex != index) return | if (this.domIndex != index) return | ||||
console.log(event.touches[0]) | 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 deltaX = event.touches[0].clientX - this.startX | ||||
const deltaY = event.touches[0].clientY - this.startY | const deltaY = event.touches[0].clientY - this.startY | ||||
console.log(deltaX) | console.log(deltaX) | ||||
@@ -148,6 +162,7 @@ export default { | |||||
this.startX = event.touches[0].clientX | this.startX = event.touches[0].clientX | ||||
this.startY = event.touches[0].clientY | this.startY = event.touches[0].clientY | ||||
// 得到父子盒子信息 | // 得到父子盒子信息 | ||||
const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | ||||
const sonRect = document | const sonRect = document | ||||
@@ -192,6 +207,12 @@ export default { | |||||
exceed() { | exceed() { | ||||
Toast('素材超出显示范围') | 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) { | go(url) { | ||||
this.$router.push(url) | this.$router.push(url) | ||||
} | } | ||||