新增登录验证的图片

components/slider-verify/slider-verify.vue

@@ -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%;

pages/login/index.vue

@@ -130,7 +130,10 @@
 						}
 					}, 300)
 				}).catch(err => {
-
+					uni.showToast({
+						title: '登录失败',
+						icon: "none"
+					})
 				}).finally(() => {
 					setTimeout(() => {
 						this.limina = false;