微信小程序里密码输入框的设计代码解析

why 228 2024-08-27

这篇文章主要介绍了微信小程序 密码输入的相关资料,需要的朋友可以参考下

设计支付密码的输入框

效果如下：

image.png

实例代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<view class="pay">

<view class="title">支付方式</view>

<view catchtap="wx_pay" class="wx_pay">

<i class="icon {{payment_mode==1?&#39;active&#39;:&#39;&#39;}}" type="String"></i>

<text>微信支付</text>

</view>

<view catchtap="offline_pay" class="offline_pay">

<i class="icon {{payment_mode==0?&#39;active&#39;:&#39;&#39;}}" type="String"></i>

<text>对公打款</text>

</view>

<block wx:if="{{balance!=0}}">

<view catchtap="wallet_pay" class="wallet_pay">

<i class="icon {{payment_mode==2?&#39;active&#39;:&#39;&#39;}}" type="String"></i>

<text>钱包支付(余额:{{balance/100}}元)</text>

</view>

</block>

<block wx:if="{{balance==0}}">

<view class="wallet_pay">

<i class="icon" type="String" style="background:#e8e8e8;border:none;"></i>

<text style="color:#999">钱包支付(余额不足)</text>

</view>

</block>

</view>

<view catchtap="pay" class="save">确定</view>

<!--输入钱包密码-->

<view wx:if="{{wallets_password_flag}}" class="wallets-password">

<view class="input-content-wrap">

<view class="top">

<view catchtap="close_wallets_password" class="close">×</view>

<view class="txt">请输入支付密码</view>

<view catchtap="modify_password" class="forget">忘记密码</view>

</view>

<view class="actual_fee">

<span>￥</span>

<text>{{actual_fee/100}}</text>

</view>

<view catchtap="set_Focus" class="input-password-wrap">

<view class="password_dot">

<i wx:if="{{wallets_password.length>=1}}"></i>

</view>

<view class="password_dot">

<i wx:if="{{wallets_password.length>=2}}"></i>

</view>

<view class="password_dot">

<i wx:if="{{wallets_password.length>=3}}"></i>

</view>

<view class="password_dot">

<i wx:if="{{wallets_password.length>=4}}"></i>

</view>

<view class="password_dot">

<i wx:if="{{wallets_password.length>=5}}"></i>

</view>

<view class="password_dot">

<i wx:if="{{wallets_password.length>=6}}"></i>

</view>

</view>

</view>

<input bindinput="set_wallets_password" class="input-content" password type="number" focus="{{isFocus}}" maxlength="6" />

</view>


index.js


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

Page({

 data: {

  payment_mode: 1,//默认支付方式 微信支付

  isFocus: false,//控制input 聚焦

  balance:100,//余额

  actual_fee:20,//待支付

  wallets_password_flag:false//密码输入遮罩

 },

 //事件处理函数

  

 onLoad: function () {

   

 },

 wx_pay() {//转换为微信支付

  this.setData({

   payment_mode: 1

  })

 },

 offline_pay() {//转换为转账支付

  this.setData({

   payment_mode: 0

  })

 },

 wallet_pay() {

  this.setData({//转换为钱包支付

   payment_mode: 2

  })

 },

 set_wallets_password(e) {//获取钱包密码

  this.setData({

   wallets_password: e.detail.value

  });

  if (this.data.wallets_password.length == 6) {//密码长度6位时，自动验证钱包支付结果

   wallet_pay(this)

  }

 },

 set_Focus() {//聚焦input

  console.log(&#39;isFocus&#39;, this.data.isFocus)

  this.setData({

   isFocus: true

  })

 },

 set_notFocus() {//失去焦点

  this.setData({

   isFocus: false

  })

 },

 close_wallets_password () {//关闭钱包输入密码遮罩

  this.setData({

   isFocus: false,//失去焦点

   wallets_password_flag: false,

  })

 },

 pay() {//去支付

  pay(this)

 }

})

/*-----------------------------------------------*/

/*支付*/

function pay(_this) {

 let apikey = _this.data.apikey;

 let id = _this.data.id;

 let payment_mode = _this.data.payment_mode

 if (payment_mode == 1) {

 // 微信支付

 // 微信自带密码输入框

  console.log(&#39;微信支付&#39;)

 } else if (payment_mode == 0) {

 // 转账支付 后续跳转至传转账单照片

  console.log(&#39;转账支付&#39;)

 } else if (payment_mode == 2) {

  // 钱包支付 输入密码

  console.log(&#39;钱包支付&#39;)

  _this.setData({

   wallets_password_flag: true,

   isFocus: true

  })

 }

 

}

// 钱包支付

function wallet_pay(_this) {

 console.log(&#39;钱包支付请求函数&#39;)

 /*

 1.支付成功

 2.支付失败：提示；清空密码；自动聚焦isFocus:true，拉起键盘再次输入

 */

}


index.wxss


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

page {

 height: 100%;

 width: 100%;

 background: #e8e8e8;

}

 

page .pay {

 display: flex;

 flex-direction: column;

 background: #fff;

}

 

page .pay .title {

 height: 90rpx;

 line-height: 90rpx;

 font-size: 28rpx;

 color: #353535;

 padding: 0 23rpx;

 border-bottom: 1rpx solid #ddd;

 box-sizing: border-box;

}

 

page .pay .wx_pay, page .pay .offline_pay, page .pay .wallet_pay {

 margin: 0 26rpx;

 height: 90rpx;

 line-height: 90rpx;

 border-bottom: 2rpx solid #ddd;

 box-sizing: border-box;

 display: flex;

 align-items: center;

 justify-content: flex-start;

}

 

page .pay .wx_pay .icon, page .pay .offline_pay .icon,

page .pay .wallet_pay .icon {

 width: 34rpx;

 height: 34rpx;

 border: 2rpx solid #ddd;

 box-sizing: border-box;

 border-radius: 50%;

}

 

page .pay .wx_pay .icon.active, page .pay .offline_pay .icon.active,

page .pay .wallet_pay .icon.active {

 border: 10rpx solid #00a2ff;

}

 

page .pay .wx_pay text, page .pay .offline_pay text, page .pay .wallet_pay text {

 margin-left: 20rpx;

 color: #353535;

 font-size: 26rpx;

}

 

page .pay .wallet_pay {

 border: 0;

 border-top: 2rpx solid #ddd;

}

 

page .pay .offline_pay {

 border: 0 none;

}

 

page .save {

 margin: 80rpx 23rpx;

 color: #fff;

 background: #00a2ff;

 height: 88rpx;

 line-height: 88rpx;

 text-align: center;

 font-size: 30rpx;

 border-radius: 10rpx;

}

 

page .wallets-password {

 position: absolute;

 left: 0;

 top: 0;

 width: 100%;

 height: 100%;

 background: rgba(0, 0, 0, 0.6);

}

 

page .wallets-password .input-content-wrap {

 position: absolute;

 top: 200rpx;

 left: 50%;

 display: flex;

 flex-direction: column;

 width: 600rpx;

 margin-left: -300rpx;

 background: #fff;

 border-radius: 20rpx;

}

 

page .wallets-password .input-content-wrap - {

 display: flex;

 align-items: center;

 height: 90rpx;

 border-bottom: 2rpx solid #ddd;

 justify-content: space-around;

}

 

page .wallets-password .input-content-wrap - .close {

 font-size: 44rpx;

 color: #999;

 font-weight: 100;

}

 

page .wallets-password .input-content-wrap - .forget {

 color: #00a2ff;

 font-size: 22rpx;

}

 

page .wallets-password .input-content-wrap .actual_fee {

 display: flex;

 align-items: center;

 justify-content: center;

 color: #000;

 height: 100rpx;

 margin: 0 23rpx;

 border-bottom: 2rpx solid #ddd;

}

 

page .wallets-password .input-content-wrap .actual_fee span {

 font-size: 24rpx;

}

 

page .wallets-password .input-content-wrap .actual_fee text {

 font-size: 36rpx;

}

 

page .wallets-password .input-content-wrap .input-password-wrap {

 display: flex;

 align-items: center;

 justify-content: center;

 height: 150rpx;

}

 

page .wallets-password .input-content-wrap .input-password-wrap .password_dot {

 display: flex;

 align-items: center;

 justify-content: center;

 text-align: center;

 color: #000;

 box-sizing: border-box;

 width: 90rpx;

 height: 90rpx;

 border: 2rpx solid #ddd;

 border-left: none 0;

}

 

page .wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {

 border-left: 2rpx solid #ddd;

}

 

page .wallets-password .input-content-wrap .input-password-wrap .password_dot i {

 background: #000;

 border-radius: 50%;

 width: 20rpx;

 height: 20rpx;

}

 

page .wallets-password .input-content {

 position: absolute;

 opacity: 0;

 left: -100%;

 top: 600rpx;

 background: #f56;

 z-index: -999;

}

 

page .wallets-password .input-content.active {

 z-index: -99;

}


以上就是本文的全部内容，希望对大家的学习有所帮助。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：解析 程序 代码 输入 微信小程序
上一篇:微信小程序中LOL英雄的开发相关介绍
下一篇:微信小程序实现微信支付的具体步骤详解
相关文章

 发表评论

暂时没有评论，来抢沙发吧~