Initial commit: 积分兑换电商平台多商户版 MER-2.2
Made-with: Cursor
This commit is contained in:
apple
BIN
mer_uniapp/pages/users/components/move-verify/arrow.png
Normal file
BIN
mer_uniapp/pages/users/components/move-verify/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
150
mer_uniapp/pages/users/components/move-verify/move-verify.vue
Normal file
150
mer_uniapp/pages/users/components/move-verify/move-verify.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<view :data-theme="theme">
|
||||
<view class="move-path bg-color" @touchend="handleOnTouchEnd" @touchstart="start">
|
||||
<view class="move-content">
|
||||
<view v-if="vertify" class="success">{{this.tipWords}}</view>
|
||||
<view v-else>拖动滑块验证</view>
|
||||
</view>
|
||||
<movable-area :animation="true">
|
||||
<movable-view class="move-view" :x="x" direction="horizontal" @change="handleOnMoving" :disabled="vertify"
|
||||
:class="{'active':vertify}"></movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp();
|
||||
export default {
|
||||
name: 'move-vertify',
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
oldx: 0,
|
||||
vertify: false,
|
||||
size: {},
|
||||
isMove: false,
|
||||
tipWords: '', // 提示语
|
||||
startMoveTime: "", //移动开始的时间
|
||||
endMovetime: '', //移动结束的时间
|
||||
theme: app.globalData.theme,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
//鼠标按下
|
||||
start: function(e) {
|
||||
this.startMoveTime = new Date().getTime();
|
||||
},//开始滑动的时间
|
||||
//鼠标松开
|
||||
end: function() {
|
||||
this.endMovetime = new Date().getTime();
|
||||
},
|
||||
init() {
|
||||
this.getSize(".move-path").then((pathway) => {
|
||||
this.size.pathway = pathway;
|
||||
this.getSize(".move-view").then((track) => {
|
||||
this.size.track = track;
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取元素宽度
|
||||
*/
|
||||
getSize(selector) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const view = uni.createSelectorQuery().in(this).select(selector);
|
||||
view.fields({
|
||||
size: true,
|
||||
}, (res) => {
|
||||
resolve(res.width);
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 滑动过程
|
||||
*/
|
||||
handleOnMoving(e) {
|
||||
this.oldx = e.detail.x;
|
||||
},
|
||||
/**
|
||||
* 滑动结束
|
||||
*/
|
||||
handleOnTouchEnd() {
|
||||
this.endMovetime = new Date().getTime();
|
||||
|
||||
if (this.vertify || this.oldx < 1) return;
|
||||
this.x = this.oldx;
|
||||
if ((this.oldx + 2) > (this.size.pathway - this.size.track)) this.vertify = true;
|
||||
else {
|
||||
this.$nextTick(() => {
|
||||
this.x = 0;
|
||||
this.oldx = 0;
|
||||
});
|
||||
}
|
||||
this.tipWords =`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`;
|
||||
setTimeout(() => {
|
||||
this.$emit("vertify", this.vertify);
|
||||
}, 1000)
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.move-path {
|
||||
margin: 20rpx auto;
|
||||
color: #333;
|
||||
height: 80rpx;
|
||||
border-radius: 80rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.move-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
z-index: 3;
|
||||
|
||||
.success {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
movable-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
movable-view {
|
||||
width: 120rpx;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 80rpx;
|
||||
background-color: #fff;
|
||||
@include coupons_border_color(theme);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 32rpx;
|
||||
background-image: url('./arrow.png');
|
||||
}
|
||||
|
||||
movable-view.active {
|
||||
background-size: 30% 30%;
|
||||
background-image: url('./success.png');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
160
mer_uniapp/pages/users/components/move-verify/new_file.vue
Normal file
160
mer_uniapp/pages/users/components/move-verify/new_file.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="move-path" @touchend="handleOnTouchEnd" @touchstart="start">
|
||||
<view class="move-content">
|
||||
<view v-if="vertify" class="success">{{this.tipWords}}</view>
|
||||
<view v-else>拖动滑块验证</view>
|
||||
</view>
|
||||
<movable-area :animation="true">
|
||||
<movable-view class="move-view" :x="x" direction="horizontal" @change="handleOnMoving" :disabled="vertify"
|
||||
:class="{'active':vertify}"></movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
<!-- <transition name="tips">
|
||||
<text class="verify-tips" v-if="tipWords" :class="vertify ? 'suc-bg':'err-bg'">{{tipWords}}</text>
|
||||
</transition> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'move-vertify',
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
oldx: 0,
|
||||
vertify: false,
|
||||
size: {},
|
||||
isMove: false,
|
||||
tipWords: '', // 提示语
|
||||
startMoveTime: "", //移动开始的时间
|
||||
endMovetime: '', //移动结束的时间
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
//鼠标按下
|
||||
start: function(e) {
|
||||
this.startMoveTime = new Date().getTime();
|
||||
},//开始滑动的时间
|
||||
//鼠标松开
|
||||
end: function() {
|
||||
this.endMovetime = new Date().getTime();
|
||||
},
|
||||
init() {
|
||||
this.getSize(".move-path").then((pathway) => {
|
||||
this.size.pathway = pathway;
|
||||
this.getSize(".move-view").then((track) => {
|
||||
this.size.track = track;
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取元素宽度
|
||||
*/
|
||||
getSize(selector) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const view = uni.createSelectorQuery().in(this).select(selector);
|
||||
view.fields({
|
||||
size: true,
|
||||
}, (res) => {
|
||||
resolve(res.width);
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 滑动过程
|
||||
*/
|
||||
handleOnMoving(e) {
|
||||
this.oldx = e.detail.x;
|
||||
},
|
||||
/**
|
||||
* 滑动结束
|
||||
*/
|
||||
handleOnTouchEnd() {
|
||||
this.endMovetime = new Date().getTime();
|
||||
if (this.vertify || this.oldx < 1) return;
|
||||
this.x = this.oldx;
|
||||
if ((this.oldx + 2) > (this.size.pathway - this.size.track)) this.vertify = true;
|
||||
else {
|
||||
this.$nextTick(() => {
|
||||
this.x = 0;
|
||||
this.oldx = 0;
|
||||
});
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.$emit("vertify", this.vertify);
|
||||
}, 1000)
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.verify-tips {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: rgba(231, 27, 27, .5);
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
.move-path {
|
||||
margin: 20rpx auto;
|
||||
color: #333;
|
||||
height: 80rpx;
|
||||
border-radius: 80rpx;
|
||||
background: linear-gradient(to right, #FEEF3C, #F3CD34);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.move-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 32rpx;
|
||||
z-index: 3;
|
||||
|
||||
.success {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
movable-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
movable-view {
|
||||
width: 120rpx;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 80rpx;
|
||||
background-color: #fff;
|
||||
border: #FEEF3C solid 1px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 32rpx;
|
||||
background-image: url('./arrow.png');
|
||||
}
|
||||
|
||||
movable-view.active {
|
||||
background-size: 30% 30%;
|
||||
background-image: url('./success.png');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
mer_uniapp/pages/users/components/move-verify/success.png
Normal file
BIN
mer_uniapp/pages/users/components/move-verify/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
149
mer_uniapp/pages/users/components/move-verify/verify.vue
Normal file
149
mer_uniapp/pages/users/components/move-verify/verify.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view :class="mode=='pop'?'masks':''" v-if="clickShow">
|
||||
<view :class="mode=='pop'?'verifybox':''">
|
||||
<view class="verifybox-top" v-if="mode=='pop'">
|
||||
请完成安全验证
|
||||
<text class="verifybox-close" @click="clickShow = false">
|
||||
<text class="iconfont icon-close"></text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="verifybox-bottom" :style="{padding:mode=='pop'?'15px':'0'}">
|
||||
<!-- 验证码容器 -->
|
||||
<move-verify :style="{ marginTop: '40rpx'} " @vertify='vertifyResult'></move-verify>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import moveVerify from './move-verify.vue';
|
||||
|
||||
export default {
|
||||
name: 'MoveVerify',
|
||||
components: {
|
||||
moveVerify,
|
||||
},
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'pop'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vertify: false, //验证是否成功
|
||||
// showBox:true,
|
||||
clickShow: false,
|
||||
// 内部类型
|
||||
verifyType: undefined,
|
||||
tipWords: '', // 提示语
|
||||
startMoveTime: "", //移动开始的时间
|
||||
endMovetime: '', //移动结束的时间
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 滑动验证
|
||||
*/
|
||||
vertifyResult(vertify) {
|
||||
this.vertify = vertify
|
||||
if(this.vertify) this.$emit('success', this.vertify)
|
||||
},
|
||||
show() {
|
||||
if (this.mode == "pop") {
|
||||
this.clickShow = true;
|
||||
}
|
||||
},
|
||||
hide() {
|
||||
if (this.mode == "pop") {
|
||||
this.clickShow = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
instance() {
|
||||
return this.$refs.instance || {}
|
||||
},
|
||||
showBox() {
|
||||
if (this.mode == 'pop') {
|
||||
return this.clickShow
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.verifybox {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #e4e7eb;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.verifybox-top {
|
||||
padding: 0 15px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: #45494c;
|
||||
border-bottom: 1px solid #e4e7eb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-bottom {
|
||||
/* padding: 15px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-close {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 9px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.masks {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
/* display: none; */
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.verify-tips {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: rgb(231, 27, 27, .5);
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tips-enter,
|
||||
.tips-leave-to {
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
.tips-enter-active,
|
||||
.tips-leave-active {
|
||||
transition: bottom .5s;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user