合并master
commit
d8b9d81f70
|
@ -31,7 +31,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app{
|
#app{
|
||||||
min-height: 100%;
|
height: 100%;
|
||||||
@include background_color($light_background_color);
|
@include background_color($light_background_color);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -92,7 +92,7 @@
|
||||||
<td>{{param.paramName}}</td><td>{{param.paramValue}}</td>
|
<td>{{param.paramName}}</td><td>{{param.paramValue}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<!-- <div v-else>暂无商品参数</div> -->
|
<div v-else>暂无商品参数</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
|
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
|
||||||
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
||||||
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
||||||
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
||||||
|
@ -18,6 +18,7 @@
|
||||||
import { getVerifyImg, postVerifyImg } from './verify.js';
|
import { getVerifyImg, postVerifyImg } from './verify.js';
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
// 传入数据,判断是登录、注册、修改密码
|
||||||
verifyType: {
|
verifyType: {
|
||||||
defalut: 'LOGIN',
|
defalut: 'LOGIN',
|
||||||
type: String
|
type: String
|
||||||
|
@ -38,16 +39,18 @@ export default {
|
||||||
distance: 0, // 拼图移动距离
|
distance: 0, // 拼图移动距离
|
||||||
flag: false, // 判断滑块是否按下
|
flag: false, // 判断滑块是否按下
|
||||||
downX: 0, // 鼠标按下位置
|
downX: 0, // 鼠标按下位置
|
||||||
bgColor: 'aqua', // 滑动背景颜色
|
bgColor: '#04ad11', // 滑动背景颜色
|
||||||
verifyText: '拖动滑块解锁' // 文字提示
|
verifyText: '拖动滑块解锁' // 文字提示
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
mouseDown (e) { // 鼠标按下操作,
|
// 鼠标按下事件,开始拖动滑块
|
||||||
|
mouseDown (e) {
|
||||||
this.downX = e.clientX;
|
this.downX = e.clientX;
|
||||||
this.flag = true;
|
this.flag = true;
|
||||||
},
|
},
|
||||||
mouseMove (e) { // 鼠标移动
|
// 鼠标移动事件,计算距离
|
||||||
|
mouseMove (e) {
|
||||||
if (this.flag) {
|
if (this.flag) {
|
||||||
let offset = e.clientX - this.downX;
|
let offset = e.clientX - this.downX;
|
||||||
|
|
||||||
|
@ -60,7 +63,8 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mouseUp () { // 鼠标抬起
|
// 鼠标抬起事件,验证是否正确
|
||||||
|
mouseUp () {
|
||||||
if (!this.flag) return false;
|
if (!this.flag) return false;
|
||||||
this.flag = false;
|
this.flag = false;
|
||||||
let params = {
|
let params = {
|
||||||
|
@ -83,33 +87,31 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
refresh () { // 刷新验证图片
|
refresh () { // 刷新滑块
|
||||||
this.flag = false;
|
this.flag = false;
|
||||||
this.downX = 0;
|
this.downX = 0;
|
||||||
this.distance = 0;
|
this.distance = 0;
|
||||||
this.bgColor = 'aqua';
|
this.bgColor = '#04ad11';
|
||||||
this.verifyText = '拖动滑块解锁';
|
this.verifyText = '拖动滑块解锁';
|
||||||
this.getImg();
|
this.init();
|
||||||
},
|
},
|
||||||
getImg () { // 获取验证图片
|
init () { // 初始化数据
|
||||||
getVerifyImg(this.type).then(res => {
|
getVerifyImg(this.type).then(res => {
|
||||||
this.data = res.result;
|
if (res.result) {
|
||||||
|
this.data = res.result;
|
||||||
|
this.show = true;
|
||||||
|
} else {
|
||||||
|
this.$Message.warning('请求失败请重试!')
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
|
||||||
// this.getImg();
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
verifyType: {
|
verifyType: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler: function (v) {
|
handler: function (v) {
|
||||||
this.type = v;
|
this.type = v;
|
||||||
// this.refresh();
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
show (v) {
|
|
||||||
if (v) this.refresh();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -143,7 +145,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.handle {
|
.handle {
|
||||||
border: 1px solid rgb(134, 134, 134);
|
border: 1px solid #e4dede;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
|
@ -156,7 +158,7 @@ export default {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
background: aqua;
|
background: #04ad11;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
|
|
|
@ -17,15 +17,15 @@ export default {
|
||||||
* @description api请求基础路径
|
* @description api请求基础路径
|
||||||
*/
|
*/
|
||||||
api_dev: {
|
api_dev: {
|
||||||
common: 'http://192.168.0.100:8890',
|
// common: 'http://192.168.0.100:8890',
|
||||||
buyer: 'http://192.168.0.100:8888',
|
// buyer: 'http://192.168.0.100:8888',
|
||||||
seller: 'http://192.168.0.100:8889',
|
// seller: 'http://192.168.0.100:8889',
|
||||||
manager: 'http://192.168.0.100:8887'
|
// manager: 'http://192.168.0.100:8887'
|
||||||
|
|
||||||
// common: 'https://common-api.pickmall.cn',
|
common: 'https://common-api.pickmall.cn',
|
||||||
// buyer: 'https://buyer-api.pickmall.cn',
|
buyer: 'https://buyer-api.pickmall.cn',
|
||||||
// seller: 'https://store-api.pickmall.cn',
|
seller: 'https://store-api.pickmall.cn',
|
||||||
// manager: 'https://admin-api.pickmall.cn'
|
manager: 'https://admin-api.pickmall.cn'
|
||||||
},
|
},
|
||||||
api_prod: {
|
api_prod: {
|
||||||
common: 'https://common-api.pickmall.cn',
|
common: 'https://common-api.pickmall.cn',
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login" @keyup.enter="handleSubmit('formInline')">
|
<div class="login" @keyup.enter="handleSubmit('formInline')">
|
||||||
<!-- 顶部logo -->
|
<!-- 顶部logo -->
|
||||||
<div class="top-content">
|
<div class="top-content" @click='$refs.verify.show = false'>
|
||||||
<div class="logo-box">
|
<div class="logo-box">
|
||||||
<img
|
<img
|
||||||
:src="logoImg"
|
:src="logoImg"
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
<!-- 轮播 -->
|
<!-- 轮播 -->
|
||||||
<Carousel loop :autoplay-speed="5000" class="login-carousel" arrow="never">
|
<Carousel loop :autoplay-speed="5000" class="login-carousel" arrow="never">
|
||||||
<CarouselItem>
|
<CarouselItem>
|
||||||
<div class="demo-carousel">
|
<div class="demo-carousel" @click='$refs.verify.show = false'>
|
||||||
<img
|
<img
|
||||||
src="https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/201811141632252680"
|
src="https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/201811141632252680"
|
||||||
/>
|
/>
|
||||||
|
@ -23,7 +23,7 @@
|
||||||
</CarouselItem>
|
</CarouselItem>
|
||||||
</Carousel>
|
</Carousel>
|
||||||
<!-- 登录模块 -->
|
<!-- 登录模块 -->
|
||||||
<div class="form-box">
|
<div class="form-box" @click='$refs.verify.show = false'>
|
||||||
<div class="account-number">
|
<div class="account-number">
|
||||||
<div class="tab-switch">
|
<div class="tab-switch">
|
||||||
<span>{{type?'账号登录':'验证码登录'}}</span>
|
<span>{{type?'账号登录':'验证码登录'}}</span>
|
||||||
|
@ -37,6 +37,7 @@
|
||||||
:model="formData"
|
:model="formData"
|
||||||
:rules="ruleInline"
|
:rules="ruleInline"
|
||||||
v-show="type === true"
|
v-show="type === true"
|
||||||
|
@click.self='$refs.verify.show = false'
|
||||||
>
|
>
|
||||||
<FormItem prop="username">
|
<FormItem prop="username">
|
||||||
<i-input
|
<i-input
|
||||||
|
@ -72,6 +73,7 @@
|
||||||
:model="formSms"
|
:model="formSms"
|
||||||
:rules="ruleInline"
|
:rules="ruleInline"
|
||||||
v-show="type === false"
|
v-show="type === false"
|
||||||
|
@click.self='$refs.verify.show = false'
|
||||||
>
|
>
|
||||||
<FormItem prop="mobile">
|
<FormItem prop="mobile">
|
||||||
<i-input
|
<i-input
|
||||||
|
@ -194,7 +196,7 @@ export default {
|
||||||
this.$refs[name].validate((valid) => {
|
this.$refs[name].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (this.type) {
|
if (this.type) {
|
||||||
this.$refs.verify.show = true;
|
this.$refs.verify.init();
|
||||||
} else {
|
} else {
|
||||||
let data = JSON.parse(JSON.stringify(this.formSms));
|
let data = JSON.parse(JSON.stringify(this.formSms));
|
||||||
apiLogin.smsLogin(data).then((res) => {
|
apiLogin.smsLogin(data).then((res) => {
|
||||||
|
@ -224,6 +226,7 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 发送手机验证码
|
||||||
sendCode () {
|
sendCode () {
|
||||||
if (this.time === 60) {
|
if (this.time === 60) {
|
||||||
if (this.formSms.mobile === '') {
|
if (this.formSms.mobile === '') {
|
||||||
|
@ -296,9 +299,10 @@ export default {
|
||||||
this.$refs.verify.show = false;
|
this.$refs.verify.show = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 开启滑块验证
|
||||||
verifyBtnClick () {
|
verifyBtnClick () {
|
||||||
if (!this.verifyStatus) {
|
if (!this.verifyStatus) {
|
||||||
this.$refs.verify.show = true;
|
this.$refs.verify.init();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleWebLogin (type) { // 第三方登录
|
handleWebLogin (type) { // 第三方登录
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login" @click='$refs.verify.show = false'>
|
||||||
<div style="height:50px;"></div>
|
<div style="height:50px;"></div>
|
||||||
<div class="logo-box">
|
<div class="logo-box">
|
||||||
<img
|
<img
|
||||||
|
@ -202,7 +202,7 @@ export default {
|
||||||
},
|
},
|
||||||
verifyBtnClick () {
|
verifyBtnClick () {
|
||||||
if (!this.verifyStatus) {
|
if (!this.verifyStatus) {
|
||||||
this.$refs.verify.show = true;
|
this.$refs.verify.init();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="forget-password" @click='$refs.verify.show = false'>
|
||||||
<div style="height:50px;"></div>
|
<div style="height:50px;"></div>
|
||||||
<!-- 顶部logo -->
|
<!-- 顶部logo -->
|
||||||
<div class="logo-box">
|
<div class="logo-box">
|
||||||
|
@ -236,7 +236,7 @@ export default {
|
||||||
},
|
},
|
||||||
verifyBtnClick () {
|
verifyBtnClick () {
|
||||||
if (!this.verifyStatus) {
|
if (!this.verifyStatus) {
|
||||||
this.$refs.verify.show = true;
|
this.$refs.verify.init();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -248,7 +248,11 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.forget-password{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.logo-box {
|
.logo-box {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
|
|
|
@ -200,9 +200,9 @@ export default {
|
||||||
width: 100,
|
width: 100,
|
||||||
render: (h, params) => {
|
render: (h, params) => {
|
||||||
if (params.row.marketEnable == "DOWN") {
|
if (params.row.marketEnable == "DOWN") {
|
||||||
return h("Tag", {props: {color: "green"},},"上架");
|
return h("Tag", {props: {color: "volcano"},},"下架");
|
||||||
} else if (params.row.marketEnable == "UPPER") {
|
} else if (params.row.marketEnable == "UPPER") {
|
||||||
return h("Tag", {props: {color: "volcano",},},"下架");
|
return h("Tag", {props: {color: "green",},},"上架");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
size="small" show-total show-elevator show-sizer></Page>
|
size="small" show-total show-elevator show-sizer></Page>
|
||||||
</Row>
|
</Row>
|
||||||
</Card>
|
</Card>
|
||||||
|
<!-- 评价详情 -->
|
||||||
<Modal v-model="infoFlag" width="800" :title="infoTitle">
|
<Modal v-model="infoFlag" width="800" :title="infoTitle">
|
||||||
|
|
||||||
<div class="info-list" style="overflow: hidden">
|
<div class="info-list" style="overflow: hidden">
|
||||||
|
@ -58,12 +58,15 @@
|
||||||
<ListItemMeta :avatar="infoData.memberProfile" :title="infoData.memberName"
|
<ListItemMeta :avatar="infoData.memberProfile" :title="infoData.memberName"
|
||||||
:description="infoData.content"/>
|
:description="infoData.content"/>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<div class="" v-if="infoData.haveImage == 1">
|
<div class="" v-if="infoData.haveImage">
|
||||||
评价图
|
评价图
|
||||||
<div style="margin-left: 40px">
|
<div style="margin-left: 40px">
|
||||||
<img style="width: 100px;height: 110px;margin-left: 2px"
|
<template v-if="infoData.images && infoData.images.length">
|
||||||
v-for="(img,index) in infoData.image.split(',')" v-if="infoData.image.length !=0" :src="img"
|
<img style="width: 100px;height: 110px;margin-left: 2px"
|
||||||
|
v-for="(img,index) in infoData.images.split(',')" :src="img"
|
||||||
alt="" :key="index"/>
|
alt="" :key="index"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</List>
|
</List>
|
||||||
|
@ -74,10 +77,13 @@
|
||||||
<div style="float: left"> 商家回复:</div>
|
<div style="float: left"> 商家回复:</div>
|
||||||
<div style="margin-left: 60px">{{ infoData.reply }}</div>
|
<div style="margin-left: 60px">{{ infoData.reply }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="infoData.haveReplyImage == 1">
|
<div v-if="infoData.haveReplyImage">
|
||||||
<div style="margin-left: 60px">
|
<div style="margin-left: 60px">
|
||||||
<img style="width: 100px;height: 110px" v-for="(img,index) in infoData.replyImage.split(',')" :key="index"
|
<template v-if="infoData.replyImage && infoData.replyImage.length">
|
||||||
v-if="infoData.replyImage.length !=0" :src="img" alt=""/>
|
<img style="width: 100px;height: 110px" v-for="(img,index) in infoData.replyImage.split(',')" :key="index"
|
||||||
|
:src="img" alt=""/>
|
||||||
|
</template>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login" @click='$refs.verify.show = false'>
|
||||||
<Row @keydown.enter.native="submitLogin" class="flex">
|
<Row @keydown.enter.native="submitLogin" class="flex">
|
||||||
<Col style="width: 368px">
|
<Col style="width: 368px">
|
||||||
<Header />
|
<Header />
|
||||||
|
@ -111,7 +111,7 @@ export default {
|
||||||
// 登录操作
|
// 登录操作
|
||||||
this.$refs.usernameLoginForm.validate((valid) => {
|
this.$refs.usernameLoginForm.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
this.$refs.verify.show = true;
|
this.$refs.verify.init();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -161,7 +161,7 @@ export default {
|
||||||
}
|
}
|
||||||
.verify-con {
|
.verify-con {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 90px;
|
top: 150px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
|
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
|
||||||
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
||||||
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
||||||
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
||||||
|
@ -18,7 +18,8 @@
|
||||||
import { getVerifyImg, postVerifyImg } from './verify.js';
|
import { getVerifyImg, postVerifyImg } from './verify.js';
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
verifyType: { // 验证方式,登录,注册等
|
// 传入数据,判断是登录、注册、修改密码
|
||||||
|
verifyType: {
|
||||||
defalut: 'LOGIN',
|
defalut: 'LOGIN',
|
||||||
type: String
|
type: String
|
||||||
}
|
}
|
||||||
|
@ -38,15 +39,17 @@ export default {
|
||||||
distance: 0, // 拼图移动距离
|
distance: 0, // 拼图移动距离
|
||||||
flag: false, // 判断滑块是否按下
|
flag: false, // 判断滑块是否按下
|
||||||
downX: 0, // 鼠标按下位置
|
downX: 0, // 鼠标按下位置
|
||||||
bgColor: 'aqua', // 滑动背景颜色
|
bgColor: '#04ad11', // 滑动背景颜色
|
||||||
verifyText: '拖动滑块解锁' // 文字提示
|
verifyText: '拖动滑块解锁' // 文字提示
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 鼠标按下事件,开始拖动滑块
|
||||||
mouseDown (e) {
|
mouseDown (e) {
|
||||||
this.downX = e.clientX;
|
this.downX = e.clientX;
|
||||||
this.flag = true;
|
this.flag = true;
|
||||||
},
|
},
|
||||||
|
// 鼠标移动事件,计算距离
|
||||||
mouseMove (e) {
|
mouseMove (e) {
|
||||||
if (this.flag) {
|
if (this.flag) {
|
||||||
let offset = e.clientX - this.downX;
|
let offset = e.clientX - this.downX;
|
||||||
|
@ -60,6 +63,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 鼠标抬起事件,验证是否正确
|
||||||
mouseUp () {
|
mouseUp () {
|
||||||
if (!this.flag) return false;
|
if (!this.flag) return false;
|
||||||
this.flag = false;
|
this.flag = false;
|
||||||
|
@ -83,17 +87,22 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
refresh () {
|
refresh () { // 刷新滑块
|
||||||
this.flag = false;
|
this.flag = false;
|
||||||
this.downX = 0;
|
this.downX = 0;
|
||||||
this.distance = 0;
|
this.distance = 0;
|
||||||
this.bgColor = 'aqua';
|
this.bgColor = '#04ad11';
|
||||||
this.verifyText = '拖动滑块解锁';
|
this.verifyText = '拖动滑块解锁';
|
||||||
this.getImg();
|
this.init();
|
||||||
},
|
},
|
||||||
getImg () {
|
init () { // 初始化数据
|
||||||
getVerifyImg(this.type).then(res => {
|
getVerifyImg(this.type).then(res => {
|
||||||
this.data = res.result;
|
if (res.result) {
|
||||||
|
this.data = res.result;
|
||||||
|
this.show = true;
|
||||||
|
} else {
|
||||||
|
this.$Message.warning('请求失败请重试!')
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -102,11 +111,7 @@ export default {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler: function (v) {
|
handler: function (v) {
|
||||||
this.type = v;
|
this.type = v;
|
||||||
// this.refresh();
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
show (v) {
|
|
||||||
if (v) this.refresh();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -140,7 +145,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.handle {
|
.handle {
|
||||||
border: 1px solid rgb(134, 134, 134);
|
border: 1px solid #e4dede;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
|
@ -153,7 +158,7 @@ export default {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
background: aqua;
|
background: #04ad11;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login" @click="$refs.verify.show = false">
|
||||||
<Row type="flex" @keydown.enter.native="submitLogin">
|
<Row type="flex" @keydown.enter.native="submitLogin">
|
||||||
<Col style="width: 368px">
|
<Col style="width: 368px">
|
||||||
<Header />
|
<Header />
|
||||||
|
@ -128,7 +128,7 @@ export default {
|
||||||
// 登录提交
|
// 登录提交
|
||||||
this.$refs.usernameLoginForm.validate((valid) => {
|
this.$refs.usernameLoginForm.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
this.$refs.verify.show = true;
|
this.$refs.verify.init();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
|
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
|
||||||
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
||||||
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
||||||
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
||||||
|
@ -18,6 +18,7 @@
|
||||||
import { getVerifyImg, postVerifyImg } from './verify.js';
|
import { getVerifyImg, postVerifyImg } from './verify.js';
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
// 传入数据,判断是登录、注册、修改密码
|
||||||
verifyType: {
|
verifyType: {
|
||||||
defalut: 'LOGIN',
|
defalut: 'LOGIN',
|
||||||
type: String
|
type: String
|
||||||
|
@ -38,15 +39,17 @@ export default {
|
||||||
distance: 0, // 拼图移动距离
|
distance: 0, // 拼图移动距离
|
||||||
flag: false, // 判断滑块是否按下
|
flag: false, // 判断滑块是否按下
|
||||||
downX: 0, // 鼠标按下位置
|
downX: 0, // 鼠标按下位置
|
||||||
bgColor: 'aqua', // 滑动背景颜色
|
bgColor: '#04ad11', // 滑动背景颜色
|
||||||
verifyText: '拖动滑块解锁' // 文字提示
|
verifyText: '拖动滑块解锁' // 文字提示
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 鼠标按下事件,开始拖动滑块
|
||||||
mouseDown (e) {
|
mouseDown (e) {
|
||||||
this.downX = e.clientX;
|
this.downX = e.clientX;
|
||||||
this.flag = true;
|
this.flag = true;
|
||||||
},
|
},
|
||||||
|
// 鼠标移动事件,计算距离
|
||||||
mouseMove (e) {
|
mouseMove (e) {
|
||||||
if (this.flag) {
|
if (this.flag) {
|
||||||
let offset = e.clientX - this.downX;
|
let offset = e.clientX - this.downX;
|
||||||
|
@ -60,6 +63,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 鼠标抬起事件,验证是否正确
|
||||||
mouseUp () {
|
mouseUp () {
|
||||||
if (!this.flag) return false;
|
if (!this.flag) return false;
|
||||||
this.flag = false;
|
this.flag = false;
|
||||||
|
@ -83,33 +87,31 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
refresh () {
|
refresh () { // 刷新滑块
|
||||||
this.flag = false;
|
this.flag = false;
|
||||||
this.downX = 0;
|
this.downX = 0;
|
||||||
this.distance = 0;
|
this.distance = 0;
|
||||||
this.bgColor = 'aqua';
|
this.bgColor = '#04ad11';
|
||||||
this.verifyText = '拖动滑块解锁';
|
this.verifyText = '拖动滑块解锁';
|
||||||
this.getImg();
|
this.init();
|
||||||
},
|
},
|
||||||
getImg () {
|
init () { // 初始化数据
|
||||||
getVerifyImg(this.type).then(res => {
|
getVerifyImg(this.type).then(res => {
|
||||||
this.data = res.result;
|
if (res.result) {
|
||||||
|
this.data = res.result;
|
||||||
|
this.show = true;
|
||||||
|
} else {
|
||||||
|
this.$Message.warning('请求失败请重试!')
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
|
||||||
// this.getImg();
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
verifyType: {
|
verifyType: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler: function (v) {
|
handler: function (v) {
|
||||||
this.type = v;
|
this.type = v;
|
||||||
// this.refresh();
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
show (v) {
|
|
||||||
if (v) this.refresh();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -143,7 +145,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.handle {
|
.handle {
|
||||||
border: 1px solid rgb(134, 134, 134);
|
border: 1px solid #e4dede;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
|
@ -156,7 +158,7 @@ export default {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
background: aqua;
|
background: #04ad11;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
|
|
Loading…
Reference in New Issue