<template>
<div ref="content" style="display: flex;justify-content: center;align-items: center;">
<van-nav-bar :placeholder="true" :fixed='true' title="海报内容位置设置" left-text="返回" right-text="确认" left-arrow :safe-area-inset-top="true" @click-left="onClickLeft" @click-right="Posterbtn" />
<div class="poster-bgdiv" style="margin-top:30px;">
<img :src="Posterimg" alt="">
<div @touchstart="down" @touchmove="move" @touchend="end" id="circlebox" class="circle name">昵称</div>
<div @touchstart="downone" @touchmove="moveone" @touchend="endone" id="circlebox1" class="circle photo">头像</div>
<div @touchstart="downtwo" @touchmove="movetwo" @touchend="endtwo" id="circlebox2" class="circle code">二维码</div>
<!-- <van-uploader :after-read="afterRead">更换图片</van-uploader> -->
</div>
</div>
</template>
<script>
import { Toast } from 'vant';
import { HeightAuto } from '../../assets/js/height.js'; //公共 js 判断是否给html 和 body 添加 height1
export default {
data() {
return {
user_activity_id:this.$route.query.user_activity_id,
activity_id:this.$route.query.activity_id,// 成功领取活动后 领取活动id
url:this.$route.query.url, //上一页路由
post_url: localStorage.getItem("post_url"), //接口
Posterimg: localStorage.getItem("posterImg"), //海报img
loadingImg:false,
posterone:{ /* 昵称 */
positionX: 0,
positionY:0,
innerHeight: 0,
innerWidth: 0,
},
postertwo:{ /* 头像 */
positionXone:0,
positionYone: 0,
innerHeightone: 0,
innerWidthone: 0,
},
posterthree:{/* 二维码 */
positionXtwo: 0,
positionYonetwo: 0,
innerHeightonetwo: 0,
innerWidthonetwo: 0,
}
};
},
created: function() {
this.getPosition();
this.clientHeight();
},
methods: {
/* 获取 拖拽位置 */
getPosition(){
let data = {
user_activity_id: this.activity_id,
json:'',
}
this.$api.post('/request' + this.post_url, data).then(res => {
console.log("表单数据回显", res)
if (res.code == 0) {
this.posterone.positionX = document.getElementById("circlebox").offsetLeft;
this.posterone.positionY = document.getElementById("circlebox").offsetTop;
this.postertwo.positionXone = document.getElementById("circlebox1").offsetLeft;
this.postertwo.positionYone = document.getElementById("circlebox1").offsetTop;
this.posterthree.positionXTwo = document.getElementById("circlebox2").offsetLeft;
this.posterthree.positionYTwo = document.getElementById("circlebox2").offsetTop;
}
});
},
/* 阻止移动端屏幕默认滑动 */
default (e, data) {
let divv = document.getElementById(data);
divv.addEventListener('touchmove',function(e) {
e.preventDefault();
}, {
passive: false
}
);
},
getThisNode(positionXs, positionYs, innerWidths, innerHeights, data) {
let odiv = document.getElementById(data); //移动 盒子
let div = document .getElementsByClassName("poster-bgdiv")[0]; //固定 盒子
//最小左边距 (屏幕宽 - 固定盒子宽)的一半 + 移动元素宽度的一半
let minleft = (innerWidths - div.clientWidth) / 2 + odiv.clientWidth / 2;
//最大左边距 (屏幕宽 - 固定盒子宽)的一半 + 固定盒子宽 - 移动元素宽度的一半
let maxleft = (innerWidths - div.clientWidth) / 2 + div.clientWidth - odiv.clientWidth / 2;
//最小顶边距 (屏幕高 - 固定盒子高)的一半 + 移动元素高度的一半 (+30 是因为上边距高度 大于 下边距高度 具体加多少 需要自己调)
let mintop = (innerHeights - div.clientHeight) / 2 + odiv.clientHeight / 2 + 30;
//最大顶边距 (屏幕高 - 固定盒子高)的一半 + 固定盒子高 - 移动元素高度的一半 (+28 是因为上边距高度 大于 下边距高度 具体加多少 需要自己调)
let maxtop = (innerHeights - div.clientHeight) / 2 + div.clientHeight - odiv.clientHeight / 2 + 28;
if (positionXs <= minleft) {
positionXs = minleft;
} else if (positionXs >= maxleft) {
positionXs = maxleft;
} else {
positionXs = positionXs;
}
if (positionYs <= mintop) {
positionYs = mintop
} else if (positionYs >= maxtop) {
positionYs = maxtop
} else {
positionYs = positionYs
}
odiv.style.left = `${positionXs - minleft}px`;
odiv.style.top = `${positionYs - mintop}px`;
},
// 光标按下
down(e) {
this.default(e, "circlebox");
this.posterone.innerHeight = e.view.innerHeight;
this.posterone.innerWidth = e.view.innerWidth;
this.posterone.positionX = e.changedTouches[0].pageX;
this.posterone.positionY = e.changedTouches[0].pageY;
},
// 光标移动
move(e) {
this.getThisNode(this.posterone.positionX, this.posterone.positionY, this.posterone.innerWidth, this.posterone.innerHeight, "circlebox");
this.default(e, "circlebox");
this.posterone.positionX = e.changedTouches[0].pageX;
this.posterone.positionY = e.changedTouches[0].pageY;
this.getThisNode(this.posterone.positionX, this.posterone.positionY, this.posterone.innerWidth, this.posterone.innerHeight, "circlebox");
},
// 光标抬起
end(e) {
// console.log('end');
},
// 光标按下
downone(e) {
this.default(e, "circlebox1");
this.postertwo.innerHeightone = e.view.innerHeight;
this.postertwo.innerWidthone = e.view.innerWidth;
this.postertwo.positionXone = e.changedTouches[0].pageX;
this.postertwo.positionYone = e.changedTouches[0].pageY;
},
// 光标移动
moveone(e) {
this.getThisNode(this.postertwo.positionXone, this.postertwo.positionYone, this.postertwo.innerWidthone, this.postertwo.innerHeightone,
"circlebox1");
this.default(e, "circlebox1");
this.postertwo.positionXone = e.changedTouches[0].pageX;
this.postertwo.positionYone = e.changedTouches[0].pageY;
this.getThisNode(this.postertwo.positionXone, this.postertwo.positionYone, this.postertwo.innerWidthone, this.postertwo.innerHeightone,
"circlebox1");
},
// 光标抬起
endone(e) {
// console.log('end');
},
// 光标按下
downtwo(e) {
this.default(e, "circlebox1");
this.posterthree.innerHeighttwo = e.view.innerHeight;
this.posterthree.innerWidthtwo = e.view.innerWidth;
this.posterthree.positionXtwo = e.changedTouches[0].pageX;
this.posterthree.positionYtwo = e.changedTouches[0].pageY;
},
// 光标移动
movetwo(e) {
this.getThisNode(this.posterthree.positionXtwo, this.posterthree.positionYtwo, this.posterthree.innerWidthtwo, this.posterthree.innerHeighttwo,"circlebox2");
this.default(e, "circlebox2");
this.posterthree.positionXtwo = e.changedTouches[0].pageX;
this.posterthree.positionYtwo = e.changedTouches[0].pageY;
this.getThisNode(this.posterthree.positionXtwo, this.posterthree.positionYtwo, this.posterthree.innerWidthtwo, this.posterthree.innerHeighttwo, "circlebox2");
},
// 光标抬起
endtwo(e) {
// console.log('end');
},
/* 点击更换图片*/
// afterRead(file) {
// // 此时可以自行将文件上传至服务器
// this.poster.loadingImg = true;
// let imgData = new FormData();
// imgData.append('img[]', file.file);
// this.$api.post('/request/index/market/upload2OSS', imgData).then(res => {
// console.log(res);
// setTimeout(()=>{
// this.loadingImg = false;
// this.Posterimg = res[0];
// Toast('上传图片成功');
// },1500);
// })
// },
/* 点击 确认 */
Posterbtn(){
if(this.Posterimg == ''){
Toast("请上传背景图");
}else{
var json ={
posterone:JSON.stringify(this.posterone),
postertwo:JSON.stringify(this.postertwo),
posterthree:JSON.stringify(this.posterthree)
};
let data={
user_activity_id:this.activity_id,
json:JSON.stringify(json),
}
this.$api.post("/request/index/face/distr/index/actman", data).then(res => {
console.log(res)
if(res.code==0){
Toast(res.msg);
this.onClickLeft();
}
}).catch(error => {
console.log(error);
});
}
},
/* 返回我的页 */
onClickLeft() {
this.$router.push({
path: this.url,
query:{
user_activity_id:this.user_activity_id,
activity_id:this.activity_id,
url:'/Administration'
}
});
localStorage.removeItem("post_url");
localStorage.removeItem("posterImg");
},
/* 页面 填充 */
clientHeight() {
var timer = setInterval(() => {
if (this.$refs.content.offsetHeight != undefined) {
clearInterval(timer);
let eleObj = {
offsetHeight: this.$refs.content.offsetHeight,
clientHeight: Number(`${document.documentElement.clientHeight}`),
};
this.$refs.content.style.height = HeightAuto(eleObj);
}
}, 500);
},
}
};
</script>
<style>
.poster-bgdiv {
width: 85%;
margin:0px auto 0px auto;
position: relative;
}
.circle {
position: absolute;
z-index: 999;
touch-action: none;
background: #eee;
color: #777;
display: flex;
justify-content: center;
align-items: center;
}
.name {
left:5%;
top: 7.5%;
padding:4px 8px;
font-size:16px;
}
.photo {
width: 60px;
height: 60px;
right: 5%;
top: 5%;
overflow: hidden;
font-size:18px;
}
.code {
width: 80px;
height: 80px;
left:5%;
bottom: 5%;
font-size:18px;
}
img {
width: 100%;
height: 100%;
}
.poster-bgdiv .van-uploader{
width:22%;
background:rgba(0,0,0,0.7) ;
padding:8px 12px;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top:50px;
right: 0px;
z-index: 999;
color: #fff;
font-size:14px;
}
</style>
网友评论