|
@@ -13,12 +13,13 @@
|
|
|
<view class="slide-content">
|
|
|
|
|
|
<view class="slider-pintu">
|
|
|
- <image id="pintuImg" src="@/static/logo.png" class="pintu">
|
|
|
+ <image id="pintuImg" :src="pintuImgs[pintuIndex]" class="pintu">
|
|
|
</image>
|
|
|
<!-- <image id="pintuImg" :src="'@/static/images/slider-verify/' + img + '.png'" class="pintu">
|
|
|
</image> -->
|
|
|
<view class="pintukuai" :style="{ top: top + 'px', left: oldx + 'px' }">
|
|
|
- <image src="@/static/logo.png" :style="{ top: '-' + top + 'px', left: '-' + left + 'px'}">
|
|
|
+ <image :src="pintuImgs[pintuIndex]"
|
|
|
+ :style="{ top: '-' + top + 'px', left: '-' + left + 'px'}">
|
|
|
</image>
|
|
|
</view>
|
|
|
|
|
@@ -58,6 +59,12 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ pintuImgs: [
|
|
|
+ require('@/static/images/login/img_01.jpg'),
|
|
|
+ require('@/static/images/login/img_02.jpg'),
|
|
|
+ require('@/static/images/login/img_03.jpg'),
|
|
|
+ ],
|
|
|
+ pintuIndex: 0,
|
|
|
x: 0, //初始距离
|
|
|
oldx: 0, //移动的距离
|
|
|
img: 'logo', //显示哪张图片
|
|
@@ -70,26 +77,36 @@
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
- var that = this;
|
|
|
- that.refreshVerify();
|
|
|
+ // this.open();
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+
|
|
|
open() {
|
|
|
this.refreshVerify();
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.popupRef.open();
|
|
|
})
|
|
|
},
|
|
|
+ setPintuIndex() {
|
|
|
+ const n = Math.random() * 10;
|
|
|
+ if (n < 3) {
|
|
|
+ this.pintuIndex = 0
|
|
|
+ } else if (n >= 3 && n <= 6) {
|
|
|
+ this.pintuIndex = 1
|
|
|
+ } else {
|
|
|
+ this.pintuIndex = 2
|
|
|
+ };
|
|
|
+ },
|
|
|
//刷新验证
|
|
|
refreshVerify() {
|
|
|
+ this.setPintuIndex()
|
|
|
this.moveSuccess = false;
|
|
|
this.sliderErrText = '';
|
|
|
this.clearMoveTime()
|
|
|
var gl = Math.random().toFixed(2);
|
|
|
- const leftNum = uni.upx2px(560) * gl > uni.upx2px(280) ? uni.upx2px(280) : uni.upx2px(560) * gl + uni.upx2px(
|
|
|
- 150); //生成随机X轴最终距离
|
|
|
+ const leftNum = uni.upx2px(560) * gl > uni.upx2px(280) ? uni.upx2px(280) : uni.upx2px(560) * gl + uni
|
|
|
+ .upx2px(
|
|
|
+ 150); //生成随机X轴最终距离
|
|
|
this.top = uni.upx2px(190) * gl; //生成随机Y轴初始距离
|
|
|
const maxLeft = uni.upx2px(560) - uni.upx2px(90) - uni.upx2px(70)
|
|
|
this.left = leftNum > maxLeft ? maxLeft : leftNum
|
|
@@ -122,7 +139,7 @@
|
|
|
this.oldx = e.detail.x;
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
|
|
|
setMoveTime(clear = false) {
|
|
@@ -150,9 +167,9 @@
|
|
|
clearMoveTime() {
|
|
|
this.setMoveTime(true);
|
|
|
},
|
|
|
- change(e){
|
|
|
- this.$emit('change' , e.show)
|
|
|
- console.log('change = ' ,e.show)
|
|
|
+ change(e) {
|
|
|
+ this.$emit('change', e.show)
|
|
|
+ console.log('change = ', e.show)
|
|
|
},
|
|
|
/* 滑动结束 */
|
|
|
endTouchMove() {
|
|
@@ -170,7 +187,7 @@
|
|
|
setTimeout(() => {
|
|
|
this.$refs.popupRef.close();
|
|
|
this.$emit('slideImgSuccess')
|
|
|
- },1000)
|
|
|
+ }, 1000)
|
|
|
} else {
|
|
|
this.sliderErrText = '请控制拼图对齐切口'
|
|
|
setTimeout(() => {
|
|
@@ -200,7 +217,8 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
$imgSize: 80rpx;
|
|
|
- $pintuH:360rpx;
|
|
|
+ $pintuH: 360rpx;
|
|
|
+
|
|
|
.verifyBox {
|
|
|
// position: absolute;
|
|
|
// top: 50%;
|