<template>
<div
class="floatball"
id="floatball"
@mousedown.="down"
@touchstart.stop="down"
@mousemove.prevent="move"
@touchmove.prevent="move"
@mouseup="end"
@touchend.stop="end"
:style="{ top: position.y + 'px', left: position.x + 'px' }"
></div>
</template>
<script>
// 鼠标位置和div的左上角位置 差值
var dx, dy;
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
export default {
data() {
return {
flags: false,
position: {
x: 287,
y: 220
}
};
},
methods: {
// 实现移动端拖拽
down(event) {
this.flags = true;
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
console.log("鼠标点所在位置", touch.clientX, touch.clientY);
console.log(
"div左上角位置",
event.target.offsetTop,
event.target.offsetLeft
);
dx = touch.clientX - event.target.offsetLeft;
dy = touch.clientY - event.target.offsetTop;
},
move(event) {
if (this.flags) {
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
// 定位滑块的位置
this.position.x = touch.clientX - dx;
this.position.y = touch.clientY - dy;
// 限制滑块超出页面
// console.log('屏幕大小', screenWidth, screenHeight )
if (this.position.x < 0) {
this.position.x = 0;
} else if (
this.position.x >
screenWidth - touch.target.clientWidth
) {
this.position.x = screenWidth - touch.target.clientWidth;
}
if (this.position.y < 0) {
this.position.y = 0;
} else if (
this.position.y >
screenHeight - touch.target.clientHeight
) {
this.position.y = screenHeight - touch.target.clientHeight;
}
//阻止页面的滑动默认事件
document.addEventListener(
"touchmove",
function(event) {
event.stopPropagation();
event.preventDefault();
},
false
);
}
event.stopPropagation();
},
//鼠标释放时候的函数
end(event) {
console.log("end");
console.log(screenWidth);
if(event.target.offsetLeft<(screenWidth/2)){
this.position.x = 0;
}else{
this.position.x = screenWidth-74;
}
this.flags = false;
}
}
};
</script>
<style>
.floatball {
height: 158px;
width: 142px;
z-index: 990;
position: fixed;
top: 500px;
right: 220px;
background: url("../../assets/blind/Group 435.png") no-repeat;
background-size: 100% 100%;
margin-right: 50px;
/* border-radius: 50%; */
/* background-color: rgba(29, 157, 237, 0.8); */
}
</style>
使用
<template>
<section class="blindset">
<TopBar title="盲定" class="rulesHeader" />
<div>
<div class="coming">
<p>
来自张三12345678912转让订单，请于<b
style="color:#3AFBDC;margin:0 3px;"
>23:00</b
>前完成订单支付
</p>
</div>
<h3>欢迎选择<span>Z</span>车型</h3>
<div class="center_img">
<p class="decs_car">
<span>长城T30</span
>车型配置、图片等信息可能会与最终量产车型存在差异
</p>
<p class="desc_img"><img :src="picture1" alt="" /></p>
</div>
<div>
<h4>盲定权益</h4>
<span>前10000名创始用户专享</span>
</div>
<BlindIconList :cloumn="cloumn" />
<div class="title3">
<h2>购车人信息</h2>
<!-- <a :href="mobile"><span></span>我有疑问，致电客服中心</a> -->
</div>
<div>
<van-form>
<!-- <van-cell-group> -->
<van-field
v-model="formData.username"
label="购车人"
label-width="100px"
placeholder="请填写购车人姓名"
/>
<!-- </van-cell-group> -->
<!-- <van-cell-group> -->
<van-field
disabled
v-model="formData.tel"
label="联系电话"
label-width="100px"
placeholder="请填写购车人姓名"
/>
<!-- </van-cell-group> -->
<!-- <van-cell-group> -->
<van-field
v-model="formData.IdCard"
label="身份证"
label-width="100px"
placeholder="请填写购车人身份证号"
/>
<!-- </van-cell-group> -->
<!-- <van-cell-group> -->
<van-field
readonly
clickable
name="area"
:value="formData.value"
label="购车城市"
placeholder="未选择"
right-icon="arrow"
@click="showArea = true"
/>
<van-popup v-model="showArea" position="bottom">
<van-area
:area-list="areaList"
@confirm="onConfirm"
@cancel="showArea = false"
/>
</van-popup>
<!-- </van-cell-group> -->
<!-- <van-cell-group> -->
<van-field
v-model="formData.sms"
center
clearable
label="验证码"
placeholder="请填写验证码"
>
<template #button>
<span size="large" style="color:#3AFBDC;"
>获取验证码</span
>
</template>
</van-field>
<!-- </van-cell-group> -->
<div>
<p class="bbotom">
<van-checkbox
v-model="formData.checked"
shape="square"
><span style="color:#fff;lineHeight:20px;"
>我已阅读并同意
<a @click="implement">《购车须知》</a></span
>
</van-checkbox>
</p>
<div class="total_payment">
<div>
<p>
<span>合计：</span>
<span style="color:#3AFBDC;"
>￥<b
style="fontSize:24px;fontWeight:normal;"
>9999</b
></span
>
</p>
<p>如改变购车计划,预定金可退</p>
</div>
<div>
<span class="payment" @click="payEarnest"
>支付定金</span
>
</div>
</div>
</div>
</van-form>
</div>
</div>
<!-- 拨打电话图标 需要拖拽的元素 -->
<Drag />
</section>
</template>
<script>
import TopBar from "../../components/TopBar/Main.vue";
import BlindIconList from "../../components/BlindIconList/Main.vue";
import { areaList } from "@vant/area-data";
import Drag from "../../components/Drag/Main.vue";
export default {
name: "blindset",
components: {
TopBar,
BlindIconList,
Drag
},
data() {
return {
areaList,
mobile: "tel:13552157693",
drag: false,
page: { x: "", y: "" },
formData: {
username: "",
tel: "12345678945",
IdCard: "",
value: "",
sms: "",
checked: false
},
showArea: false
};
},
methods: {
// 城市选择
onConfirm(values) {
this.formData.value = values
.filter(item => !!item)
.map(item => item.name)
.join("/");
this.showArea = false;
},
// 点击购物须知事件
implement() {
console.log("点击了购车须知");
},
// 提交事件
payEarnest() {
console.log(this.formData);
}
}
};
</script>
<style lang="less">
.blindset {
box-sizing: border-box;
background: url(../../assets/bg.png) no-repeat #092536;
background-size: 100%;
min-height: 100vh;
width: 100%;
z-index: 100;
line-height: 50px;
color: #fff;
font-family: PingFang SC;
// font-size: 28px;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 30px;
position: relative;
}
</style>