| @@ -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) | |||
| } | |||