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

最新推荐文章于 2024-06-28 18:48:20 发布
最新推荐文章于 2024-06-28 18:48:20 发布
阅读量757 收藏 7
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rio_Gaven/article/details/139345477
版权

示例：

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

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

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

password-input.vue

<template>
  <view class="psdIptBx">
    <block v-for="(item , index) in psdIptNum" :key='index'>
      <view class="psdTtem">
        <text v-if="numLng.length > index" class="psdTtemTxt">
          <text v-if="plaintext">●</text>
          <text v-else>{{numLng[index]}}</text>
        </text>
        <text v-if="numLng.length ==index" class="focus_move">|</text>
      </view>
    </block>
  </view>
</template>

<script>
  export default {
    props: {
      //是否明文 默认密文
      plaintext: {
        type: Boolean,
        default: true
      },
      //键盘输入的val
      numLng: {
        type: [String, Number],
        default: ''
      },
      //密码框的个数
      psdIptNum: {
        type: [String, Number],
        default: 6
      }
    },
    data() {
      return {}
    },
    created() {},
    methods: {
    }
  }
</script>

<style scoped>
  .psdIptBx {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .psdTtem {
    width: 86rpx;
    height: 86rpx;
    background: #F2F2F2;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .psdTtemTxt {
    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
  }

  .focus_move {
    /* color: #E6240F; */
    font-size: 30rpx;
    line-height: 80rpx;
    animation: focus 0.8s infinite;
  }

  @keyframes focus {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }
</style>

number-keyboard.vue

<template>
	<view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
		<view @click="close" class="dowmImgBx">
			<view class="dowmImg"></view>
			<view v-if="confirmBtn" class="complete" @click.stop="complete">完成</view>
		</view>
		<view class="KeyboarBx">
			<view v-for="(num , index) in keyboardNum " :key='index' @click="clickBoard(num)" hover-class="hover"
				:hover-stay-time='20' class="keyboar">
				{{num}}
			</view>
			<view @click="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20'
				hover-class="hover">{{otherNum}}</view>
			<view @click="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
			<view @click="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
				<view class="keyboarDel"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//限制输入框的长度 空值不限制
			psdLength: {
				type: [Number, String],
				default: ''
			},
			//键盘码
			keyboardNum: {
				type: [Array, Object],
				default: () => {
					return [1, 2, 3, 4, 5, 6, 7, 8, 9]
				}
			},
			//特殊键盘码 .或者X  默空
			otherNum: {
				type: String,
				default: ''
			},
			//是否显示完成按钮
			confirmBtn:{
				type: Boolean,
				default: false
			},
			//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
			tabBar: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				bodMove: '',
				password: '', //要返回的结果
				iptNum: [], //输入的内容
				KeyboarHid: false, //键盘影藏和显示
			}
		},
		watch: {
			iptNum(newVal, oldVal) {
				this.$emit('input', newVal.join(''))
			},
			value(newVal, oldVal) {
				this.iptNum = newVal.split('')
			}
		},
		created() {

		},
		methods: {
			open() {
				this.KeyboarHid = true;
				if (this.tabBar) {
					uni.hideTabBar()
				}
				this.$nextTick(() => {
					setTimeout(() => {
						this.bodMove = 'moveShow'
					}, 30)
				})
			},
			close() {
				if (this.tabBar) {
					uni.showTabBar()
				}
				this.bodMove = '';
				this.$nextTick(() => {
					setTimeout(() => {
						this.KeyboarHid = false
					}, 300)
				})
			},
			// 密码框
			clickBoard(num) {
				if (num == '') return;
				let iptNum = this.iptNum.filter(item => item != '');
				//判断是否限制长度
				if (this.psdLength != '') {
					if (iptNum.length >= this.psdLength) {
						return
					};
					this.iptNum.push(num);
				} else {
					this.iptNum.push(num);
				}
			},
			//完成
			complete(){
				this.$emit('confirm', this.iptNum.join(''))
			},
			//重置 清空
			reset() {
				this.iptNum = [];
			},
			//删除
			deleteKeyboar() {
				this.iptNum.pop();
			}
		}
	}
</script>

<style scoped>
	.bodMove {
		transition: all .3s
	}

	.bottomMove {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.moveShow {
		transform: translateY(0)
	}

	.KeyboarBody {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}

	.KeyboarBx {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		background-color: rgba(3, 3, 3, 0.1);
		padding: 10rpx 6rpx 0rpx 6rpx;
		margin-left: -12rpx;
	}


	.keyboar {
		width: 20%;
		flex-grow: 1;
		padding: 3%;
		font-size: 40rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 12rpx;
		margin-bottom: 10rpx;
	}

	.dian {
		margin-top: -10rpx;
	}

	.keyboarBtn {
		background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
		color: #fff;
	}

	.hover {
		background: #ebedf0;
	}


	.bot {
		bottom: 0;
	}

	.empty {
		background-color: #EEEEEE;
	}

	.dowmImgBx {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: relative;
	}

	.complete {
		position: absolute;
		right: 0rpx;
		bottom: 5rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
		padding-left: 20rpx;
	}

	.dowmImg {
		width: 35rpx;
		height: 35rpx;
		margin-bottom: 10rpx;
		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');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}

	.keyboarDel {
		width: 50rpx;
		height: 36rpx;
		margin-bottom: 10rpx;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
		margin-top: 11rpx;

	}

	.keyboarflex {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

number-keyboard2.vue

<template>
	<view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
		<view class="KeyboarBx">
			<view v-for="(num , index) in keyboardNum " :key='index' @click="clickBoard(num)" hover-class="hover"
				:hover-stay-time='20' class="keyboar">
				{{num}}
			</view>
			<view @click="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20'
				hover-class="hover">{{otherNum}}</view>
			<view @click="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
			<view @click="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
				<view class="keyboarDel"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//限制输入框的长度 空值不限制
			psdLength: {
				type: [Number, String],
				default: ''
			},
			//键盘码
			keyboardNum: {
				type: [Array, Object],
				default: () => {
					return [1, 2, 3, 4, 5, 6, 7, 8, 9]
				}
			},
			//特殊键盘码 .或者X  默空
			otherNum: {
				type: String,
				default: ''
			},
			//是否显示完成按钮
			confirmBtn:{
				type: Boolean,
				default: false
			},
			//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
			tabBar: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				bodMove: '',
				password: '', //要返回的结果
				iptNum: [], //输入的内容
				KeyboarHid: false, //键盘影藏和显示
			}
		},
		watch: {
			iptNum(newVal, oldVal) {
				this.$emit('input', newVal.join(''))
			},
			value(newVal, oldVal) {
				this.iptNum = newVal.split('')
			}
		},
		created() {

		},
		methods: {
			open() {
				this.KeyboarHid = true;
				if (this.tabBar) {
					uni.hideTabBar()
				}
				this.$nextTick(() => {
					setTimeout(() => {
						this.bodMove = 'moveShow'
					}, 30)
				})
			},
			close() {
				if (this.tabBar) {
					uni.showTabBar()
				}
				this.bodMove = '';
				this.$nextTick(() => {
					setTimeout(() => {
						this.KeyboarHid = false
					}, 300)
				})
			},
			// 密码框
			clickBoard(num) {
				if (num == '') return;
				let iptNum = this.iptNum.filter(item => item != '');
				//判断是否限制长度
				if (this.psdLength != '') {
					if (iptNum.length >= this.psdLength) {
						return
					};
					this.iptNum.push(num);
				} else {
					this.iptNum.push(num);
				}
			},
			//完成
			complete(){
				this.$emit('confirm', this.iptNum.join(''))
			},
			//重置 清空
			reset() {
				this.iptNum = [];
			},
			//删除
			deleteKeyboar() {
				this.iptNum.pop();
			}
		}
	}
</script>

<style scoped>
	.bodMove {
		transition: all .3s
	}

	.bottomMove {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.moveShow {
		transform: translateY(0)
	}

	.KeyboarBody {
		background-color: #FFFFFF;
	}

	.KeyboarBx {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		background-color: rgba(3, 3, 3, 0.1);
		padding: 10rpx 6rpx 0rpx 6rpx;
		margin-left: -12rpx;
	}


	.keyboar {
		width: 20%;
		flex-grow: 1;
		padding: 3%;
		font-size: 40rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 12rpx;
		margin-bottom: 10rpx;
	}

	.dian {
		margin-top: -10rpx;
	}

	.keyboarBtn {
		background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
		color: #fff;
	}

	.hover {
		background: #ebedf0;
	}


	.bot {
		bottom: 0;
	}

	.empty {
		background-color: #EEEEEE;
	}

	.dowmImgBx {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: relative;
	}

	.complete {
		position: absolute;
		right: 0rpx;
		bottom: 5rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
		padding-left: 20rpx;
	}

	.dowmImg {
		width: 35rpx;
		height: 35rpx;
		margin-bottom: 10rpx;
		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');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}

	.keyboarDel {
		width: 50rpx;
		height: 36rpx;
		margin-bottom: 10rpx;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
		margin-top: 11rpx;

	}

	.keyboarflex {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

editPayPassword.vue

<template>
  <view class="editPayPassword">
    <view class="topApp">
        <image class="return" src="https://res.qyjpay.cn/static/res/jiangcunyinxiang-return.png" @click="leftClick"/>
      <view class="title">{{!flag ? '身份认证' : '设置支付密码'}}</view>
    </view>
    <view class="content">{{!flag ? '输入支付密码' : '再次输入支付密码'}}</view>
    <view class="item" @tap='KeyboarOpen' v-if="!flag">
      <password-input :numLng='password'></password-input>
    </view>
    <view class="item" @tap='KeyboarOpen2' v-else>
      <password-input2 :numLng='changePassword'></password-input2>
    </view>
    <view class="errMsg" v-if="errMsg">{{errMsg}}</view>
    <number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6' v-if="!flag"></number-keyboard>
    <number-keyboard2 tabBar ref='KeyboarHid' @input='onInput2' psdLength='6' v-else></number-keyboard2>
  </view>
</template>

<script>
import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue'
import numberKeyboard2 from '@/components/number-keyboard/number-keyboard.vue'
import passwordInput from '@/components/password-input/password-input.vue'
import passwordInput2 from '@/components/password-input/password-input.vue'
export default {
  data () {
    return {
        flag: false,
        password: "",
        changePassword: '',
        errMsg: '',      
    }
  },
  components: {
    numberKeyboard,
    numberKeyboard2,
    passwordInput,
    passwordInput2
  },
  watch:{
    errMsg(newVal,oldVal){
      if(newVal){
        setTimeout(()=>{
          this.errMsg = ''
        },2000)
      }
    }
  },
  onLoad(option) {
    console.log('接收到的数据',option);
    //因为此时实例没有挂载完成，需要延迟操作
    setTimeout(() => {
      this.$refs.KeyboarHid.open()
    }, 50)
  },
  methods:{
    leftClick(){
        uni.navigateBack({})
    },
    //打开键盘
    KeyboarOpen(e) {
      this.$refs.KeyboarHid.open();
    },
    KeyboarOpen2(e) {
      this.$refs.KeyboarHid.open();
    },
    //输入的值
    onInput(val) {
        this.password = val;
        if(this.password.length == 6){
            this.flag = true
            setTimeout(()=>{
                this.KeyboarOpen2()
            },100)
        }
    },
    async onInput2(val){
        this.changePassword = val;
        if(this.changePassword.length == 6){
            console.log('第一次输入的密码是',this.password);
            console.log('第二次输入的密码是',this.changePassword);
            if(this.password != this.changePassword){
                this.errMsg = '两次输入密码不一致'
            }else{
                this.errMsg = ''
                try{
                  //调接口处理
                }catch(err){
                  // uni.showToast({
                  //   title: err.msg,
                  //   icon: 'none'
                  // })
                  this.errMsg = err.msg
                  return
                }
            }
        }
    }
  }
}
</script>

<style lang='scss' scoped>
.editPayPassword{
    min-height: 100vh;
    background-color: #fff;
    .topApp{
      display: flex;
      align-items: center;
      // justify-content: flex-start;
      background-color: #fff;
      padding: 60rpx 0 30rpx 26rpx;
      // #ifdef APP-PLUS
      padding: 110rpx 0 30rpx 26rpx;
      // #endif
      box-sizing: border-box;
      width: 100%;
      .return{
          width: 36rpx;
          height: 36rpx;  
          margin-right: 20rpx;
      }
      .title{
          position: absolute;
          // top: 100rpx;
          left: 50%;
          transform: translate(-50%,0);
          font-weight: 500;
          font-size: 32rpx;
          color: #111111;
      }
    }
    .content{
        margin: 140rpx 0 40rpx 0;
        font-weight: 500;
        font-size: 46rpx;
        color: #111111;
        text-align: center;
    }
    .errMsg{
        font-weight: normal;
        font-size: 22rpx;
        color: #F72323;
        margin-top: 20rpx;
        text-align: center;
    }
}
.main {
  padding: 0rpx 40rpx;
}
.ipt {
  border-bottom: 1rpx solid #CCCCCC;
}
.item {
  padding: 10rpx 87rpx;
}
.title {
  margin: 30rpx 0;
}
</style>

Rio_Gaven
关注
uniapp钱包支付、与设置密码页面
可可的博客
08-31 513
1. 钱包支付功能描述 功能概述： 钱包支付功能允许用户使用账户余额进行支付，通常适用于电商、服务订购等场景。该功能需要集成支付模块，提供支付金额的输入、支付确认和支付结果反馈。 主要功能： 余额查询：显示用户当前账户的可用余额。 支付金额输入：允许用户输入支付金额，并检查输入是否合法（例如不能超过账户余额）。 支付确认：在用户确认支付时，显示支付金额、余额和确认按钮。 支付结果反馈：显示支付成功或失败的结果，并提供相应的操作提示。 支付记录：保存和显示用户的支付历史记录。 实现步骤： 获取用户余额：
uniapp使用uni-popup组件实现密码支付功能
m0_62217360的博客
11-28 1002
uniapp使用uni-popup组件实现密码支付功能
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-09 1246
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二
自定义键盘支付：u-keyboard、u-message-input
sunluyi的博客
03-18 1931
<!-- 余额支付输入密码 --> <u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false" v-model="paypasswordShow" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @bac
uni-app 自定义支付密码键盘
最新发布
qq_36529240的博客
06-28 530
1.新建最贱 payKeyboard .vue。
uniapp写的密码本，用于记录生活常用的密码
m0_67392182的博客
05-15 245
软件介绍 该软件用来储存日常生活中的一些常用密码 建议不要储存过于重要的密码，如银行卡密码支付宝支付密码等 请务必牢记您的登录密码，该版本暂不支持忘记密码 这个世界没有绝对的安全，尽管我在努力的提高该软件的安全性，但是这也不能确保把密码存放在这里就是绝对的安全，所以如果您在使用过程中出现一些意外的情况，如密码丢失等，作者概不负责 同意以上原则可继续使用 该软件承诺不联网，不窃取用户信息 开源地址 https://gitee.com/linzhehao/password 软件截图 技术栈 使用技术
uniapp云购商城源码的快速搭建与部署指南
3. 订单管理：实现订单的创建、修改、查询、支付、发货和售后等功能。 4. 促销活动：支持优惠券、团购、秒杀等促销活动的管理。 5. 购物车功能：用户可以将商品添加到购物车，并进行结算。 6. 物流系统：集成物流...
java版Spring Cloud+Mybatis 微服务商城 b2b2c商城 直播商城 小程序商城 多商家入驻商城 APP商城源码 聚合支付商城
iteye_3750的博客
03-07 1万+
B2B2C多商家入驻直播/短视频带货版本： 标准多商户入驻+直播、短视频带货+二级分销体系+满减、满送、优惠券、组合销售、平台礼包等营销活动
uniCloud介绍及实战
小马甲
11-07 1619
是 联合阿里云、腾讯云，为开发者提供的基于 模式和 编程的云开发平台。 的 web控制台地址：https://unicloud.dcloud.net.cn对于程序员：用熟悉的，轻松搞定前后台整体业务。对于开发商：因为共享大资源池，云服务厂商的成本大幅下降，开发者无需为闲置资源付费，云函数被调用才计费。从技术原理上就有明显成本优势，所以租用比租用传统云要便宜的多。在传统云的世界里，有大量的收费产品。防的高防套餐，每个月至少几万元。而这些费用，在中无需支付。为什么不用买高防也不害怕：由于阿里云和腾讯云的有
20191107 关于mui的app打包
do what you like && brave
11-07 3412
HTML5 Plus应用概述 HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。 HTML5 Plus规范 通过HTML5开发移动App时，会发现HTML5很多能力不具备。为弥补HTML5能力的不足，在W3C中国的指导下成立了HTML5中...
从零开始开发微信小程序：全面指南
百态老人的博客
06-03 2410
学习制作微信小程序，希望通过这次学习能够实现跨平台的统一开发，从而提高自己的编程和开发能力。
uniapp 自定义多框输入验证码/支付密码
ke_sin的博客
05-23 2892
样式很简单，大家主要看功能哈哈哈 效果图 需求 手动输入验证码，监听数据变化，输入后自动跳转页面 代码实现 <template> <view class="wrap"> <view class="wrap-header"> <view class="wrap-header-item">请输入验证码</view> </view> <view> <view class="input-wrap"
uniapp密码验证
qq_59297167的博客
05-16 867
data中的表单数据和验证规则。
【样式，登录，uniapp】账号，密码 登录样式
AAAXiaoApple的博客
03-27 438
【代码】【样式，登录，uniapp】账号，密码 登录样式。
uniapp 绘制手势密码 (支持多端)
m0_60317712的博客
06-05 887
title:'密码错误',使用 hackout-draw-lock 插件。//图形密码绘制完成。
vue实现密码的表单验证~（旧密码，新密码，重复新密码）
热门推荐
weixin_33672400的博客
05-09 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
uni-app 实现记住账号密码功能
7c
07-20 7028
第一次登录输入账号密码默认是勾选记住账号密码的,登录会将账号密码存入进缓存。（复选框做了缓存的存入与销毁，勾选就将账号密码存入缓存，不勾选就销毁缓存。）第二次及往后每次登录,都会先从缓存中获取账号密码key，将账号密码填充进文本框，没有就不填充。...............
uniapp实现确认密码验证
maowencai的博客
09-02 4691
实现验证两次密码一致
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值