<template> <view class="pay-tool">	<view class="pay-tool-title border-bottom">		<strong>請輸入交易密碼</strong>	</view>	<view class="pay-tool-content">		<view class="pay-tool-inputs">			<view class="item" v-for="i in items">				<text class="icon_dot" v-if="password[i]"></text>			</view>		</view>	   <view class="pay-tool-link"><router-link class="link" to="/getP">忘記密碼？</router-link></view>	</view>	<view class="pay-tool-keyboard">	    <view class="pay-tool-keyboard-ul"> 			<view @click="keyUpHandle(index)" v-for="(val,index) in keys" :key="index">{{ val }}</view>			<view class="del" @click="delHandle">				<text class="icon-del"><</text>			</view>	    </view>	</view> </view></template><script> export default {	data () {		return {			items: [0, 1, 2, 3, 4, 5],			keys: [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0],			password: []		}	 },    methods: {		// 點選鍵盤上的數字，即輸入每一個密碼數字		keyUpHandle (index) {			console.log("index",index)			let text = this.keys[index]			let len = this.password.length			if (!text || len >= 6) return			this.password.push(text)			console.log("this.password",this.password)			this.ajaxData()		},		// 點選回退圖示		delHandle () {			if (this.password.length <= 0) return false			this.password.shift()		},		// 密碼正確與否的檢驗，頁面的跳轉		ajaxData () {			if (this.password.length >= 6) {				const stringfyPassword = this.password.join("")				console.log("密碼字串",this.password.join(""))				// 密碼正確進行跳轉				if(stringfyPassword == "123456"){					console.log("密碼正確")				}else{					// 密碼錯誤進行提示，並清空已經輸入的密碼					uni.showToast({						title: '密碼錯誤，請重新輸入'					})					this.clearPasswordHandle()				}			}			return false		},		// 清空密碼		clearPasswordHandle: function () {			this.password = []		}	},	mounted() {		this.clearPasswordHandle()	} }</script> <style lang="scss" scoped> .pay-tool {	  position: relative;	  height: 18.93333333rem;	  background-color: #fff;	  overflow: hidden;	  &-title {	   width: 100%;	   height: 2.08888888rem;	   padding: 0 0.8rem;	   line-height: 2.08888888rem;	   text-align: center;	   overflow: hidden;	   .icon {		float: left;		margin-top: 0.72222222rem;	   }	   strong {		font-size: 0.8rem;	   }	  }	  &-content {	   .pay-tool-inputs {		width: 14.46666666rem;		height: 2.31111111rem;		margin: 1.28888888rem auto 0;		border: 1px solid #b9b9b9;		border-radius: 0.26666666rem;		box-shadow: 0 0 1px #e6e6e6;		display: flex;		.item {		 width: 16.66666666%;		 height: 2.31111111rem;		 border-right: 1px solid #b9b9b9;		 line-height: 2.31111111rem;		 text-align: center;		 &:last-child {		  border-right: none;		 }		 .icon_dot {		  display: inline-block;		  width: 0.51111111rem;		  height: 0.51111111rem;		  background: url(../../../static/img/games/dot.png) no-repeat;		  background-size: cover;		 }		}	   }	   .pay-tool-link {		padding: 0.53333333rem 0.8rem 0;		text-align: right;		.link {		 font-size: 0.66666666rem;		 color: #3c8cfb;		}	   }	  }	  .pay-tool-keyboard {	   position: absolute;	   left: 0;	   bottom: 0;	   width: 100%;	   .pay-tool-keyboard-ul {		width: 100%;		display: flex;		flex-wrap: wrap;		view {		 width: 33%;		 height: 2.25442834rem;		 line-height: 2.25442834rem;		 text-align: center;		 border-right: 1px solid #aeaeae;		 border-bottom: 1px solid #aeaeae;		 font-size: 0.8rem;		 font-weight: bold;		 &:nth-child(1), &:nth-child(2), &:nth-child(3) {		  border-top: 1px solid #eee;		 }		 &:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) {		  border-right: none;		 }		 &:nth-child(10), &:nth-child(11), &:nth-child(12) {		  border-bottom: none;		 }		 &:nth-child(10), &:nth-child(12), &:active {		  background-color: #d1d4dd;		 }		 &:nth-child(12):active {		  background-color: #fff;		 }		}	   }	  } }</style>