devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp创建支付密码实现(初始密码，第二次密码)

作者：不正经 | 2024-06-01 06:47:16

赞

踩

uniapp创建支付密码实现(初始密码，第二次密码)

示例：

插件地址：自定义数字/身份证/密码输入框，键盘密码框可分离使 - DCloud 插件市场

1.下载插件并导入HBuilderX，找到文件夹，copy number-keyboard.vue一份为number-keyboard2.vue（number-keyboard.vue是键盘，password-input.vue是密码输入框）

2.修改插件键盘和密码框样式，已写好，直接copy下面代码

password-input.vue

  1. <template>
  2.   <view class="psdIptBx">
  3.     <block v-for="(item , index) in psdIptNum" :key='index'>
  4.       <view class="psdTtem">
  5.         <text v-if="numLng.length > index" class="psdTtemTxt">
  6.           <text v-if="plaintext">●</text>
  7.           <text v-else>{{numLng[index]}}</text>
  8.         </text>
  9.         <text v-if="numLng.length ==index" class="focus_move">|</text>
  10.       </view>
  11.     </block>
  12.   </view>
  13. </template>
  14.  
  15. <script>
  16.   export default {
  17.     props: {
  18.       //是否明文 默认密文
  19.       plaintext: {
  20.         type: Boolean,
  21.         default: true
  22.       },
  23.       //键盘输入的val
  24.       numLng: {
  25.         type: [String, Number],
  26.         default: ''
  27.       },
  28.       //密码框的个数
  29.       psdIptNum: {
  30.         type: [String, Number],
  31.         default: 6
  32.       }
  33.     },
  34.     data() {
  35.       return {}
  36.     },
  37.     created() {},
  38.     methods: {
  39.     }
  40.   }
  41. </script>
  42.  
  43. <style scoped>
  44.   .psdIptBx {
  45.     display: flex;
  46.     justify-content: space-between;
  47.     width: 100%;
  48.     text-align: center;
  49.     box-sizing: border-box;
  50.   }
  51.  
  52.   .psdTtem {
  53.     width: 86rpx;
  54.     height: 86rpx;
  55.     background: #F2F2F2;
  56.     border-radius: 20rpx 20rpx 20rpx 20rpx;
  57.   }
  58.  
  59.   .psdTtemTxt {
  60.     text-align: center;
  61.     line-height: 80rpx;
  62.     font-size: 30rpx;
  63.   }
  64.  
  65.   .focus_move {
  66.     /* color: #E6240F; */
  67.     font-size: 30rpx;
  68.     line-height: 80rpx;
  69.     animation: focus 0.8s infinite;
  70.   }
  71.  
  72.   @keyframes focus {
  73.     from {
  74.       opacity: 1;
  75.     }
  76.  
  77.     to {
  78.       opacity: 0;
  79.     }
  80.   }
  81. </style>

number-keyboard.vue

  1. <template>
  2. 	<view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
  3. 		<view @click="close" class="dowmImgBx">
  4. 			<view class="dowmImg"></view>
  5. 			<view v-if="confirmBtn" class="complete" @click.stop="complete">完成</view>
  6. 		</view>
  7. 		<view class="KeyboarBx">
  8. 			<view v-for="(num , index) in keyboardNum " :key='index' @click="clickBoard(num)" hover-class="hover"
  9. 				:hover-stay-time='20' class="keyboar">
  10. 				{{num}}
  11. 			</view>
  12. 			<view @click="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20'
  13. 				hover-class="hover">{{otherNum}}</view>
  14. 			<view @click="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
  15. 			<view @click="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
  16. 				<view class="keyboarDel"></view>
  17. 			</view>
  18. 		</view>
  19. 	</view>
  20. </template>
  21.  
  22. <script>
  23. 	export default {
  24. 		props: {
  25. 			//限制输入框的长度 空值不限制
  26. 			psdLength: {
  27. 				type: [Number, String],
  28. 				default: ''
  29. 			},
  30. 			//键盘码
  31. 			keyboardNum: {
  32. 				type: [Array, Object],
  33. 				default: () => {
  34. 					return [1, 2, 3, 4, 5, 6, 7, 8, 9]
  35. 				}
  36. 			},
  37. 			//特殊键盘码 .或者X  默空
  38. 			otherNum: {
  39. 				type: String,
  40. 				default: ''
  41. 			},
  42. 			//是否显示完成按钮
  43. 			confirmBtn:{
  44. 				type: Boolean,
  45. 				default: false
  46. 			},
  47. 			//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
  48. 			tabBar: {
  49. 				type: Boolean,
  50. 				default: false
  51. 			},
  52. 			value: {
  53. 				type: String,
  54. 				default: ''
  55. 			}
  56. 		},
  57. 		data() {
  58. 			return {
  59. 				bodMove: '',
  60. 				password: '', //要返回的结果
  61. 				iptNum: [], //输入的内容
  62. 				KeyboarHid: false, //键盘影藏和显示
  63. 			}
  64. 		},
  65. 		watch: {
  66. 			iptNum(newVal, oldVal) {
  67. 				this.$emit('input', newVal.join(''))
  68. 			},
  69. 			value(newVal, oldVal) {
  70. 				this.iptNum = newVal.split('')
  71. 			}
  72. 		},
  73. 		created() {
  74.  
  75. 		},
  76. 		methods: {
  77. 			open() {
  78. 				this.KeyboarHid = true;
  79. 				if (this.tabBar) {
  80. 					uni.hideTabBar()
  81. 				}
  82. 				this.$nextTick(() => {
  83. 					setTimeout(() => {
  84. 						this.bodMove = 'moveShow'
  85. 					}, 30)
  86. 				})
  87. 			},
  88. 			close() {
  89. 				if (this.tabBar) {
  90. 					uni.showTabBar()
  91. 				}
  92. 				this.bodMove = '';
  93. 				this.$nextTick(() => {
  94. 					setTimeout(() => {
  95. 						this.KeyboarHid = false
  96. 					}, 300)
  97. 				})
  98. 			},
  99. 			// 密码框
  100. 			clickBoard(num) {
  101. 				if (num == '') return;
  102. 				let iptNum = this.iptNum.filter(item => item != '');
  103. 				//判断是否限制长度
  104. 				if (this.psdLength != '') {
  105. 					if (iptNum.length >= this.psdLength) {
  106. 						return
  107. 					};
  108. 					this.iptNum.push(num);
  109. 				} else {
  110. 					this.iptNum.push(num);
  111. 				}
  112. 			},
  113. 			//完成
  114. 			complete(){
  115. 				this.$emit('confirm', this.iptNum.join(''))
  116. 			},
  117. 			//重置 清空
  118. 			reset() {
  119. 				this.iptNum = [];
  120. 			},
  121. 			//删除
  122. 			deleteKeyboar() {
  123. 				this.iptNum.pop();
  124. 			}
  125. 		}
  126. 	}
  127. </script>
  128.  
  129. <style scoped>
  130. 	.bodMove {
  131. 		transition: all .3s
  132. 	}
  133.  
  134. 	.bottomMove {
  135. 		bottom: 0;
  136. 		left: 0;
  137. 		width: 100%;
  138. 		transform: translateY(100%)
  139. 	}
  140.  
  141. 	.moveShow {
  142. 		transform: translateY(0)
  143. 	}
  144.  
  145. 	.KeyboarBody {
  146. 		position: fixed;
  147. 		bottom: 0;
  148. 		left: 0;
  149. 		right: 0;
  150. 		z-index: 99;
  151. 		background-color: #FFFFFF;
  152. 	}
  153.  
  154. 	.KeyboarBx {
  155. 		display: flex;
  156. 		flex-wrap: wrap;
  157. 		text-align: center;
  158. 		background-color: rgba(3, 3, 3, 0.1);
  159. 		padding: 10rpx 6rpx 0rpx 6rpx;
  160. 		margin-left: -12rpx;
  161. 	}
  162.  
  163.  
  164. 	.keyboar {
  165. 		width: 20%;
  166. 		flex-grow: 1;
  167. 		padding: 3%;
  168. 		font-size: 40rpx;
  169. 		background-color: #FFFFFF;
  170. 		border-radius: 10rpx;
  171. 		margin-left: 12rpx;
  172. 		margin-bottom: 10rpx;
  173. 	}
  174.  
  175. 	.dian {
  176. 		margin-top: -10rpx;
  177. 	}
  178.  
  179. 	.keyboarBtn {
  180. 		background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
  181. 		color: #fff;
  182. 	}
  183.  
  184. 	.hover {
  185. 		background: #ebedf0;
  186. 	}
  187.  
  188.  
  189. 	.bot {
  190. 		bottom: 0;
  191. 	}
  192.  
  193. 	.empty {
  194. 		background-color: #EEEEEE;
  195. 	}
  196.  
  197. 	.dowmImgBx {
  198. 		display: flex;
  199. 		justify-content: center;
  200. 		align-items: center;
  201. 		width: 100%;
  202. 		position: relative;
  203. 	}
  204.  
  205. 	.complete {
  206. 		position: absolute;
  207. 		right: 0rpx;
  208. 		bottom: 5rpx;
  209. 		font-size: 28rpx;
  210. 		padding-right: 30rpx;
  211. 		padding-left: 20rpx;
  212. 	}
  213.  
  214. 	.dowmImg {
  215. 		width: 35rpx;
  216. 		height: 35rpx;
  217. 		margin-bottom: 10rpx;
  218. 		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
  219. 		background-repeat: no-repeat;
  220. 		background-position: center center;
  221. 		background-size: 100%;
  222. 	}
  223.  
  224. 	.keyboarDel {
  225. 		width: 50rpx;
  226. 		height: 36rpx;
  227. 		margin-bottom: 10rpx;
  228. 		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
  229. 		background-repeat: no-repeat;
  230. 		background-position: center center;
  231. 		background-size: 100%;
  232. 		margin-top: 11rpx;
  233.  
  234. 	}
  235.  
  236. 	.keyboarflex {
  237. 		display: flex;
  238. 		justify-content: center;
  239. 		align-items: center;
  240. 	}
  241. </style>

number-keyboard2.vue

  1. <template>
  2. 	<view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
  3. 		<view class="KeyboarBx">
  4. 			<view v-for="(num , index) in keyboardNum " :key='index' @click="clickBoard(num)" hover-class="hover"
  5. 				:hover-stay-time='20' class="keyboar">
  6. 				{{num}}
  7. 			</view>
  8. 			<view @click="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20'
  9. 				hover-class="hover">{{otherNum}}</view>
  10. 			<view @click="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
  11. 			<view @click="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
  12. 				<view class="keyboarDel"></view>
  13. 			</view>
  14. 		</view>
  15. 	</view>
  16. </template>
  17.  
  18. <script>
  19. 	export default {
  20. 		props: {
  21. 			//限制输入框的长度 空值不限制
  22. 			psdLength: {
  23. 				type: [Number, String],
  24. 				default: ''
  25. 			},
  26. 			//键盘码
  27. 			keyboardNum: {
  28. 				type: [Array, Object],
  29. 				default: () => {
  30. 					return [1, 2, 3, 4, 5, 6, 7, 8, 9]
  31. 				}
  32. 			},
  33. 			//特殊键盘码 .或者X  默空
  34. 			otherNum: {
  35. 				type: String,
  36. 				default: ''
  37. 			},
  38. 			//是否显示完成按钮
  39. 			confirmBtn:{
  40. 				type: Boolean,
  41. 				default: false
  42. 			},
  43. 			//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
  44. 			tabBar: {
  45. 				type: Boolean,
  46. 				default: false
  47. 			},
  48. 			value: {
  49. 				type: String,
  50. 				default: ''
  51. 			}
  52. 		},
  53. 		data() {
  54. 			return {
  55. 				bodMove: '',
  56. 				password: '', //要返回的结果
  57. 				iptNum: [], //输入的内容
  58. 				KeyboarHid: false, //键盘影藏和显示
  59. 			}
  60. 		},
  61. 		watch: {
  62. 			iptNum(newVal, oldVal) {
  63. 				this.$emit('input', newVal.join(''))
  64. 			},
  65. 			value(newVal, oldVal) {
  66. 				this.iptNum = newVal.split('')
  67. 			}
  68. 		},
  69. 		created() {
  70.  
  71. 		},
  72. 		methods: {
  73. 			open() {
  74. 				this.KeyboarHid = true;
  75. 				if (this.tabBar) {
  76. 					uni.hideTabBar()
  77. 				}
  78. 				this.$nextTick(() => {
  79. 					setTimeout(() => {
  80. 						this.bodMove = 'moveShow'
  81. 					}, 30)
  82. 				})
  83. 			},
  84. 			close() {
  85. 				if (this.tabBar) {
  86. 					uni.showTabBar()
  87. 				}
  88. 				this.bodMove = '';
  89. 				this.$nextTick(() => {
  90. 					setTimeout(() => {
  91. 						this.KeyboarHid = false
  92. 					}, 300)
  93. 				})
  94. 			},
  95. 			// 密码框
  96. 			clickBoard(num) {
  97. 				if (num == '') return;
  98. 				let iptNum = this.iptNum.filter(item => item != '');
  99. 				//判断是否限制长度
  100. 				if (this.psdLength != '') {
  101. 					if (iptNum.length >= this.psdLength) {
  102. 						return
  103. 					};
  104. 					this.iptNum.push(num);
  105. 				} else {
  106. 					this.iptNum.push(num);
  107. 				}
  108. 			},
  109. 			//完成
  110. 			complete(){
  111. 				this.$emit('confirm', this.iptNum.join(''))
  112. 			},
  113. 			//重置 清空
  114. 			reset() {
  115. 				this.iptNum = [];
  116. 			},
  117. 			//删除
  118. 			deleteKeyboar() {
  119. 				this.iptNum.pop();
  120. 			}
  121. 		}
  122. 	}
  123. </script>
  124.  
  125. <style scoped>
  126. 	.bodMove {
  127. 		transition: all .3s
  128. 	}
  129.  
  130. 	.bottomMove {
  131. 		bottom: 0;
  132. 		left: 0;
  133. 		width: 100%;
  134. 		transform: translateY(100%)
  135. 	}
  136.  
  137. 	.moveShow {
  138. 		transform: translateY(0)
  139. 	}
  140.  
  141. 	.KeyboarBody {
  142. 		background-color: #FFFFFF;
  143. 	}
  144.  
  145. 	.KeyboarBx {
  146. 		display: flex;
  147. 		flex-wrap: wrap;
  148. 		text-align: center;
  149. 		background-color: rgba(3, 3, 3, 0.1);
  150. 		padding: 10rpx 6rpx 0rpx 6rpx;
  151. 		margin-left: -12rpx;
  152. 	}
  153.  
  154.  
  155. 	.keyboar {
  156. 		width: 20%;
  157. 		flex-grow: 1;
  158. 		padding: 3%;
  159. 		font-size: 40rpx;
  160. 		background-color: #FFFFFF;
  161. 		border-radius: 10rpx;
  162. 		margin-left: 12rpx;
  163. 		margin-bottom: 10rpx;
  164. 	}
  165.  
  166. 	.dian {
  167. 		margin-top: -10rpx;
  168. 	}
  169.  
  170. 	.keyboarBtn {
  171. 		background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
  172. 		color: #fff;
  173. 	}
  174.  
  175. 	.hover {
  176. 		background: #ebedf0;
  177. 	}
  178.  
  179.  
  180. 	.bot {
  181. 		bottom: 0;
  182. 	}
  183.  
  184. 	.empty {
  185. 		background-color: #EEEEEE;
  186. 	}
  187.  
  188. 	.dowmImgBx {
  189. 		display: flex;
  190. 		justify-content: center;
  191. 		align-items: center;
  192. 		width: 100%;
  193. 		position: relative;
  194. 	}
  195.  
  196. 	.complete {
  197. 		position: absolute;
  198. 		right: 0rpx;
  199. 		bottom: 5rpx;
  200. 		font-size: 28rpx;
  201. 		padding-right: 30rpx;
  202. 		padding-left: 20rpx;
  203. 	}
  204.  
  205. 	.dowmImg {
  206. 		width: 35rpx;
  207. 		height: 35rpx;
  208. 		margin-bottom: 10rpx;
  209. 		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
  210. 		background-repeat: no-repeat;
  211. 		background-position: center center;
  212. 		background-size: 100%;
  213. 	}
  214.  
  215. 	.keyboarDel {
  216. 		width: 50rpx;
  217. 		height: 36rpx;
  218. 		margin-bottom: 10rpx;
  219. 		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
  220. 		background-repeat: no-repeat;
  221. 		background-position: center center;
  222. 		background-size: 100%;
  223. 		margin-top: 11rpx;
  224.  
  225. 	}
  226.  
  227. 	.keyboarflex {
  228. 		display: flex;
  229. 		justify-content: center;
  230. 		align-items: center;
  231. 	}
  232. </style>

editPayPassword.vue

  1. <template>
  2.   <view class="editPayPassword">
  3.     <view class="topApp">
  4.         <image class="return" src="https://res.qyjpay.cn/static/res/jiangcunyinxiang-return.png" @click="leftClick"/>
  5.       <view class="title">{{!flag ? '身份认证' : '设置支付密码'}}</view>
  6.     </view>
  7.     <view class="content">{{!flag ? '输入支付密码' : '再次输入支付密码'}}</view>
  8.     <view class="item" @tap='KeyboarOpen' v-if="!flag">
  9.       <password-input :numLng='password'></password-input>
  10.     </view>
  11.     <view class="item" @tap='KeyboarOpen2' v-else>
  12.       <password-input2 :numLng='changePassword'></password-input2>
  13.     </view>
  14.     <view class="errMsg" v-if="errMsg">{{errMsg}}</view>
  15.     <number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6' v-if="!flag"></number-keyboard>
  16.     <number-keyboard2 tabBar ref='KeyboarHid' @input='onInput2' psdLength='6' v-else></number-keyboard2>
  17.   </view>
  18. </template>
  19.  
  20. <script>
  21. import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue'
  22. import numberKeyboard2 from '@/components/number-keyboard/number-keyboard.vue'
  23. import passwordInput from '@/components/password-input/password-input.vue'
  24. import passwordInput2 from '@/components/password-input/password-input.vue'
  25. export default {
  26.   data () {
  27.     return {
  28.         flag: false,
  29.         password: "",
  30.         changePassword: '',
  31.         errMsg: '',      
  32.     }
  33.   },
  34.   components: {
  35.     numberKeyboard,
  36.     numberKeyboard2,
  37.     passwordInput,
  38.     passwordInput2
  39.   },
  40.   watch:{
  41.     errMsg(newVal,oldVal){
  42.       if(newVal){
  43.         setTimeout(()=>{
  44.           this.errMsg = ''
  45.         },2000)
  46.       }
  47.     }
  48.   },
  49.   onLoad(option) {
  50.     console.log('接收到的数据',option);
  51.     //因为此时实例没有挂载完成，需要延迟操作
  52.     setTimeout(() => {
  53.       this.$refs.KeyboarHid.open()
  54.     }, 50)
  55.   },
  56.   methods:{
  57.     leftClick(){
  58.         uni.navigateBack({})
  59.     },
  60.     //打开键盘
  61.     KeyboarOpen(e) {
  62.       this.$refs.KeyboarHid.open();
  63.     },
  64.     KeyboarOpen2(e) {
  65.       this.$refs.KeyboarHid.open();
  66.     },
  67.     //输入的值
  68.     onInput(val) {
  69.         this.password = val;
  70.         if(this.password.length == 6){
  71.             this.flag = true
  72.             setTimeout(()=>{
  73.                 this.KeyboarOpen2()
  74.             },100)
  75.         }
  76.     },
  77.     async onInput2(val){
  78.         this.changePassword = val;
  79.         if(this.changePassword.length == 6){
  80.             console.log('第一次输入的密码是',this.password);
  81.             console.log('第二次输入的密码是',this.changePassword);
  82.             if(this.password != this.changePassword){
  83.                 this.errMsg = '两次输入密码不一致'
  84.             }else{
  85.                 this.errMsg = ''
  86.                 try{
  87.                   //调接口处理
  88.                 }catch(err){
  89.                   // uni.showToast({
  90.                   //   title: err.msg,
  91.                   //   icon: 'none'
  92.                   // })
  93.                   this.errMsg = err.msg
  94.                   return
  95.                 }
  96.             }
  97.         }
  98.     }
  99.   }
  100. }
  101. </script>
  102.  
  103. <style lang='scss' scoped>
  104. .editPayPassword{
  105.     min-height: 100vh;
  106.     background-color: #fff;
  107.     .topApp{
  108.       display: flex;
  109.       align-items: center;
  110.       // justify-content: flex-start;
  111.       background-color: #fff;
  112.       padding: 60rpx 0 30rpx 26rpx;
  113.       // #ifdef APP-PLUS
  114.       padding: 110rpx 0 30rpx 26rpx;
  115.       // #endif
  116.       box-sizing: border-box;
  117.       width: 100%;
  118.       .return{
  119.           width: 36rpx;
  120.           height: 36rpx;  
  121.           margin-right: 20rpx;
  122.       }
  123.       .title{
  124.           position: absolute;
  125.           // top: 100rpx;
  126.           left: 50%;
  127.           transform: translate(-50%,0);
  128.           font-weight: 500;
  129.           font-size: 32rpx;
  130.           color: #111111;
  131.       }
  132.     }
  133.     .content{
  134.         margin: 140rpx 0 40rpx 0;
  135.         font-weight: 500;
  136.         font-size: 46rpx;
  137.         color: #111111;
  138.         text-align: center;
  139.     }
  140.     .errMsg{
  141.         font-weight: normal;
  142.         font-size: 22rpx;
  143.         color: #F72323;
  144.         margin-top: 20rpx;
  145.         text-align: center;
  146.     }
  147. }
  148. .main {
  149.   padding: 0rpx 40rpx;
  150. }
  151. .ipt {
  152.   border-bottom: 1rpx solid #CCCCCC;
  153. }
  154. .item {
  155.   padding: 10rpx 87rpx;
  156. }
  157. .title {
  158.   margin: 30rpx 0;
  159. }
  160. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/656488
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号