uniapp余额银行卡支付密码界面实现(直接复制)

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

示例：

插件地址：自定义数字/身份证/密码输入框，键盘密码框可分离使 - 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>

3.这里我用uview 2.0中的Popup弹出层写的弹窗,没用过的小伙伴，先安装uview
Popup 弹出层 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

4.写一个弹出层，按钮demo

<template>
  <view class="withdrawal">
    <view class="foot">
        <view class="submit" @click="submitTX">打开弹窗</view>
    </view>
    <u-popup :show="show" :round="24" mode="bottom" @close="close" :closeOnClickOverlay="true">
		<view class="windowBox">
            <image class="closeIcon" src="打叉按钮图片路径" @click="closeWindow"/>
            <view class="windowtitle">请输入支付密码</view>
            <view class="txmoney">提现金额</view>
            <view class="pricesss"><view class="rmb">¥</view>{{money}}</view>
            <view class="windowLine"></view>
            <view class="windowWX">
                <view class="xtz">提现至</view>
                <view class="bankNameBox">
                    <image class="bankLogo" :src="selectObj.bank_logo_img" />
                    <view class="bankName">{{selectObj.bank_name}}</view>
                </view>
            </view>
            <view class="item" @tap='KeyboarOpen'>
              <password-input :numLng='password'></password-input>
              <view class="errMsg" v-if="errMsg">{{errMsg}}</view>
            </view>
            <number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
		</view>
	</u-popup>
  </view>
</template>

<script>
import numberKeyboard from '@/components/number-keyboard/number-keyboard2.vue';
import passwordInput from '@/components/password-input/password-input.vue';
export default {
  data () {
    return {
        money: '10',
        show: false,
        password: '',
        errMsg: '', //错误提示
        selectObj: {
            bank_logo_img: '', //银行图片路径，自己写
            bank_name: '' //银行名称，自己写
        },
    }
  },
  components: {
    numberKeyboard,
    passwordInput,
  },
  async onLoad(){
  },
  async onShow(){
    this.selectObj = {}
  },
  watch:{
    errMsg(newVal,oldVal){
      if(newVal){
        setTimeout(()=>{
          this.errMsg = ''
        },2000)
      }
    },
  },
  methods:{
    KeyboarOpen(e) {
      this.$refs.KeyboarHid.open();
    },
    //输入的值
    async onInput(val) {
        this.password = val;
        if(this.password.length == 6){
            // this.errMsg = '支付密码错误，请重新输入'
            console.log('当前输入的密码是',this.password);
            try{
                //这里写输入完正确密码后，调接口逻辑
            }catch(err){
                console.log('err',err);
                this.errMsg = err.msg // 错误提示可以根据接口返回的，也可以自己写 '密码错误等...'
                this.password = ''
                this.show = false
            }
        }
    },
    submitTX(){
        this.show = true
        setTimeout(()=>{
            this.$refs.KeyboarHid.open();
        },50)
    },
    close(){
        this.show = false
        this.password = ''
    },
    open(){

    },
    closeWindow(){
        this.show = false
        this.password = ''
        this.errMsg = ''
    },
  }
}
</script>

<style lang='scss' scoped>
.withdrawal{
    min-height: 100vh;
    background-color: #f7f7f7;
    .foot{
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 8rpx 26rpx 74rpx;
        box-sizing: border-box;
        background-color: #ffffff;
        .submit{
            width: 698rpx;
            height: 86rpx;
            line-height: 86rpx;
            text-align: center;
            background: #FF843E;
            border-radius: 44rpx 44rpx 44rpx 44rpx;
            font-weight: 500;
            font-size: 30rpx;
            color: #FFFFFF;
        }
    }
}

.windowBox{
    position: relative;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    z-index: 200000000000;
    // padding: 50rpx 46rpx;
    .closeIcon{
        position: absolute;
        left: 46rpx;
        top: 50rpx;
        width: 30rpx;
        height: 30rpx;
    }
    .windowtitle{
        font-weight: normal;
        font-size: 28rpx;
        color: #111111;
        text-align: center;
        margin-top: 42rpx
    }
    .txmoney{
        margin-top: 56rpx;
        text-align: center;
        font-weight: normal;
        font-size: 32rpx;
        color: #707070;
    }
    .pricesss{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 36rpx;
        font-weight: 400;
        font-size: 76rpx;
        color: #111111;
        .rmb{
            font-weight: normal;
            font-size: 46rpx;
            color: #111111;
            margin-right: 10rpx;
        }
    }
    .windowLine{
        width: 658rpx;
        height: 2rpx;
        background: #EEEEEE;
        margin: 0 auto;
        margin-bottom: 32rpx;
    }
    .windowWX{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 46rpx;
        box-sizing: border-box;
        margin-bottom: 46rpx;
        .xtz{
            font-weight: normal;
            font-size: 26rpx;
            color: #707070;
        }
        .bankNameBox{
            display: flex;
            align-items: center;
            .bankLogo{
                width: 36rpx;
                height: 36rpx;
                border-radius: 50%;
                margin-right: 10rpx;
            }
            .bankName{
                font-weight: normal;
                font-size: 26rpx;
                color: #707070;
            }
        }
    }
}
.main {
  padding: 0rpx 40rpx;
}
.ipt {
  border-bottom: 1rpx solid #CCCCCC;
}
.item {
  position: relative;
  padding: 10rpx 78rpx;
  margin-bottom: 60rpx;
  .errMsg{
    position: absolute;
    left: 50%;
    bottom: -40rpx;
    transform: translate(-50%,0);
    font-weight: normal;
    font-size: 22rpx;
    color: #F72323;
  }
}
.title {
  margin: 30rpx 0;
}
</style>

Rio_Gaven
关注
uniapp(全端兼容) - 最新详细实现支付键盘功能组件，从底部弹出数字键盘输入支付密码进行付款交互效果，自定义支付密码键盘仿微信、支付宝支付键盘，1~9密码数字键盘，电商支付（详细示例代码复制运行
高级前端工程师
07-11 2209
uniapp，微信小程序，自定义数字键盘，输入支付密码的键盘组件，uniapp小程序如何实现从底部弹出输入支付密码自定义键盘功能，uniapp小程序密码支付键盘组件插件，自定义数字键盘输入页面，怎么封装底部弹窗自定义数字键盘用于输入支付密码，uniapp小程序仿类似电商支付密码输入模态框，uniapp微信小程序平台实现自定义支付密码键盘，uniapp 密码支付，数字键盘,安全键盘,交易键盘,交易密码,交易密码输入框，uniapp自定义支付键盘: uniapp自定义支付键盘，uniapp小程序端实现键盘输入支
uni-app 实现6位数字密码键盘页面
weixin_42028153的博客
04-21 1021
【代码】uni-app 实现6位数字密码键盘页面。
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-09 1246
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二
uniapp实现微信小程序支付（前端）
叶落无痕的博客
09-11 544
3.我把web-view单独写了一个页面，将H5的网址利用路由传参的方式传递个web-view页面（因为需要传入用户信息），受到路由长度的限制，需要先利用encodeURIComponent对格式进行转换，在web-view页面再用decodeURIComponent对传入参数进行解析。2.我这里的H5页面是有uni生成的，自动生成的H5项目是hash模式，如果我们需要向H5页面传参，在src中写网址的时候就必须带#/，例如：http://192.168.0.1/#/?
uniapp银联支付
malanjun11的博客
04-18 853
1.跳webview页面。
uni-app自定义验证码、密码输入框
weixin_34067980的博客
02-19 3674
Getting started github地址，喜欢的可以star下哦 插件预览图 使用教程 1.插件代码拷贝 下载后把components目录下validCode.vue文件拷贝到自己项目目录下 2.插件全局配置 在项目里main.js中配置如下代码 import validCode from './components/valid...
uniapp密码输入框
Smile_ping的博客
05-26 4813
uniapp自定义密码输入框 可用于短信验证码输入框、密码数字框… 文章目录uniapp自定义密码输入框效果图定义组件templatejsscss使用templatejs 效果图 定义组件 提示： 这里把输入框定义为组件，其他可根据需求调整 template <template> <view> <view class="password-input-warp fcc"> <view class="password-input_item fcc"
uni-app自定义交易密码弹框
weixin_47551643的博客
04-12 811
自定义交易密码弹框
uniapp自定义输入框，实现验证码输入框、密码输入框、兼容微信小程序
m0_67584973的博客
04-10 8261
在移动端或者小程序项目中，验证码输入框、密码输入框也是很常见的，uniapp实现验证码输入框、兼容微信小程序。
微信小程序uniapp银行卡卡片样式组件
05-09
2. **数据绑定**：利用uniapp的Vue.js语法，将后台获取的银行卡信息动态绑定到组件上，如卡号、姓名等，确保数据的实时更新。 3. **图片处理**：银行Logo需要适配不同尺寸和格式，可能需要使用CSS背景图或者引入...
仿支付宝app源码，基于uniapp框架，精仿支付宝UI界面，界面漂亮颜值高，视频商城小工具等，支持订制开发，模拟支付宝APP！
09-02
精仿支付宝UI界面，基于SumerUI 3.0和Uniapp前端框架，界面漂亮颜值高，视频商城小工具等，支持订制开发，模拟支付宝扫码支付/收付款，蚂蚁森林种树养鸡农场偷菜，用于视频，商城，直播，聊天，等场景 完全开源 无...
银行卡扫描识别卡号demo
10-25
在IT行业中，银行卡扫描识别卡号的技术是一种广泛应用的实用功能，尤其在移动支付、金融管理应用及银行服务中。这个"银行卡扫描识别卡号demo"是实现这一功能的一个实例，它能够有效地帮助用户自动提取银行卡上的卡号...
uniapp使用uni-popup组件实现密码支付功能
m0_62217360的博客
11-28 1002
uniapp使用uni-popup组件实现密码支付功能
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 密码框的眼睛
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
04-07 1061
通过v-if控制显示不同的眼睛（即选中/未选中状态）
uniapp 手机验证码输入框（随机数、倒计时、隐藏手机号码中间四位）可以直接使用
qq_59795720的博客
11-29 2842
uniapp 手机验证码发送倒计时效果，复制即可用。 包括了倒计时、生成随机数、手机号中间隐藏4位、input输入框聚焦
uniapp自定义input输入框提示内容，常用于记住账号密码
可可的博客
08-08 226
【代码】uniapp自定义input输入框提示内容，常用于记住账号密码。
采用uniapp实现的银行卡卡片, 支持H5和微信小程序
狼性书生
02-21 699
采用uniapp-vue3实现的银行卡卡片，支持H5和微信小程序
【vue2+uniapp】密码框输入密码显示和隐藏小功能（两种方法实现）
qq_44971635的博客
03-22 2884
【vue2+uniapp】密码框输入密码显示和隐藏小功能（两种方法实现）
模仿uniapp支付宝银行卡折叠样式
最新发布
10-17
UniApp是一款基于Vue.js的跨平台框架，用于快速构建原生应用。模仿支付宝的银行卡折叠样式，通常需要关注以下几个步骤： 1. **UI设计**：首先参考支付宝的设计规范，创建一个包含银行卡信息（如卡号、持卡人姓名、开户银行等）的卡片组件。可以利用UniApp提供的Flex布局和CSS样式调整，使卡片看起来像折叠效果。 ```html <view class="card-container"> <view class="card" @tap="toggleFold"> <view class="folded"> <!-- 卡片正面 --> <text class="bank-name">{{ bankName }}</text> <text class="account-number">卡号：{{ accountNumber }}</text> </view> <view v-if="isFolded" class="unfolded"> <!-- 卡片展开后的内容 --> <text>持卡人：{{ cardholderName }}</text> <text>开户行：{{ bank }}</text> <uni-button type="primary" @click="closeCard">关闭</uni-button> </view> </view> </view> ``` ```css .card { background-color: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .folded { /* 展开前的状态 */ } .unfolded { display: none; /* 展开后的状态 */ padding: 8px; transform: rotateY(0deg); /* 添加动画效果 */ } .card-container { transition: transform 0.3s; } .isFolded .card-container { transform: rotateY(-90deg); } ``` 2. **JavaScript事件处理**：通过JavaScript控制卡片的展开和折叠，比如使用`@tap`监听点击事件，以及自定义`toggleFold`和`closeCard`方法。 这个例子只是一个基础的实现，实际的支付宝界面会更复杂，并且可能会有交互反馈和加载动画。如果你需要详细了解如何在UniApp中完全模拟支付宝的银行卡折叠效果，建议查阅支付宝的官方文档或者查看其开源项目的源码作为参考。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值