静态页面(vue、html、view)
<!--密码-->
<view class="xs" v-if="guanbimm==true" @click="guanbi_input">
</view>
<view v-if="guanbimm==true" class="wallets-password" >
<view class="input-content-wrap">
<view class="top">
<view @click="mxmmguanbi" class="close">×</view>
<view class="txt">请输入支付密码</view>
<view @click="wjmm" class="forget">忘记密码</view>
</view>
<view class="actual_fee">
<text>消费{{goods.moxing_duihuan}}积分</text>
</view>
<view @click="set_Focus" class="input-password-wrap">
<view class="password_dot">
<i v-if="wallets_password.length>=1"></i>
</view>
<view class="password_dot">
<i v-if="wallets_password.length>=2"></i>
</view>
<view class="password_dot">
<i v-if="wallets_password.length>=3"></i>
</view>
<view class="password_dot">
<i v-if="wallets_password.length>=4"></i>
</view>
<view class="password_dot">
<i v-if="wallets_password.length>=5"></i>
</view>
<view class="password_dot">
<i v-if="wallets_password.length>=6"></i>
</view>
</view>
</view>
<input @input="set_wallets_password" class="input-content" type="number" :focus="isFocus" maxlength="6" />
</view>
<block v-if="chongshi==true">
<view class="xs" v-if="chongshi==true">
</view>
<view class="modal-dialog1">
<view class="modal-title">您输入密码错误,请重新输入正确的密码!</view>
<view @click="mxmmguanbi_1" class="payment-btn" :class="[isIphoneX?'payment-bottom':'']" style="color:#00a2ff; font-size:30upx; width: 100%;text-align: center; border: 1upx solid #d4d4d4;">重试</view>
</view>
</block>
CSS
.modal-dialog1 {
width: 46%;
overflow: hidden;
position: fixed;
top: 34%;
left: 24%;
z-index: 9999;
background: #fff;
margin: 0 auto;
border-radius: 14upx;
margin-left: 15upx;
height: 22%;
padding-left: 24upx;
padding-right: 24upx;
z-index: 999999;
}
.modal-title {
padding-top: 24upx;
font-size: 26upx;
color: #030303;
text-align: center;
}
.modal-content {
padding: 20upx 10upx;
}
.payment-btn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
height: 90upx;
line-height: 90upx;
font-size: 28upx;
border-radius: 0;
font-size: 32upx;
margin: 0 auto;
}
.xs{
width: 100%;
height: 100%;
opacity: 0.5;
background: #000000;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.wallets-password {
position: absolute;
left: 50%;
top: 64rpx;
z-index: 99999;
}
.wallets-password .input-content-wrap {
position: absolute;
top: 200upx;
left: 50%;
display: flex;
flex-direction: column;
width: 600upx;
margin-left: -300upx;
background: #fff;
border-radius: 20upx;
}
.wallets-password .input-content-wrap .top {
display: flex;
align-items: center;
height: 90upx;
border-bottom: 2upx solid #ddd;
justify-content: space-around;
}
.wallets-password .input-content-wrap .top .close {
font-size: 44upx;
color: #999;
font-weight: 100;
position: absolute;
left: 18upx;
top: 2%;
}
.wallets-password .input-content-wrap .top .forget {
color: #00a2ff;
font-size: 22upx;
position: absolute;
right: 4%;
float: right;
}
.wallets-password .input-content-wrap .actual_fee {
display: flex;
align-items: center;
justify-content: center;
color: #333;
height: 100upx;
margin: 0 23upx;
font-weight: bold;
border-bottom: 2upx solid #ddd;
}
.wallets-password .input-content-wrap .actual_fee span {
font-size: 24upx;
}
.wallets-password .input-content-wrap .actual_fee text {
font-size: 36upx;
}
.wallets-password .input-content-wrap .input-password-wrap {
display: flex;
align-items: center;
justify-content: center;
height: 150upx;
}
.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: 90upx;
height: 90upx;
border: 2upx solid #ddd;
border-left: none 0;
}
.wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {
border-left: 2upx solid #ddd;
}
.wallets-password .input-content-wrap .input-password-wrap .password_dot i {
background: #000;
border-radius: 50%;
width: 20upx;
height: 20upx;
}
.wallets-password .input-content {
position: fixed;
opacity: 0;
left: -100%;
top: 600upx;
background: #f56;
z-index: -999;
}
.wallets-password .input-content.active {
z-index: -99;
}
JS
data() {
return {
guanbimm:false,
zhifu:false,//显示提示支付内容
isFocus:false,
chongshi:false,
wallets_password:'',//支付密码
}
}
methods:{
//密码操作
wjmm(e){
uni.navigateTo({
url:'/setcontent/xiugaizhifumm'
})
},
mxmmguanbi(e){
this.wallets_password='';
this.guanbimm=false;
this.flag = !1;
},
mxmmguanbi_1(e){
this.wallets_password='';
this.isFocus=false;
this.guanbimm=true;
this.chongshi=false;
},
guanbi_input() {//取消聚焦
this.isFocus=false;
},
set_Focus() {//聚焦input
console.log(this.isFocus);
if(this.isFocus)
{
this.isFocus=false;
}
else{
this.isFocus=true;
}
this.guanbimm=true;
this.chongshi=false;
},
//账号支付密码
set_wallets_password(e){
// console.log(e);
this.wallets_password=e.detail.value;
if (this.wallets_password.length == 6) {//密码长度6位时,自动验证钱包支付结果
var that=this;
var userInfo= uni.getStorageSync('userInfo');
//验证支付密码
uni.request({
url: api['apiroot']+'order/pay-passworrd',
data: {
pay_password:that.wallets_password,
access_token:userInfo['access_token'],
_version:'2.8.9',
_platform:'wx',
},
method :"POST",
dataType:'json', //默认 json格式
header: {
'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
},
success: (res) => {
console.log(res);
if(res.data.code==500){
this.mxmmguanbi();
uni.showModal({
title: '温馨提示',
content: '您还没设置支付密码,现在跳转到设置支付密码?',
success: function (res) {
if (res.confirm) {
uni.navigateTo({
url: '/setcontent/xiugaizhifumm',
});
} else if (res.cancel) {
}
}
});
}
else{
if(res.data.code==1){
that.chongshi=true;
that.guanbimm=false;
}
else{
that.paysuccess('BALANCE_PAY');//余额支付
that.guanbimm=0;
}
}
},
})
}
},
//账号密码输入成功(WECHAT_PAY//微信支付;BALANCE_PAY//余额支付)
paysuccess(e){
var that=this;
console.log(e);
var pay_times=that.pay_times+1;
uni.request({
url: api['apiroot']+'order/pay-data',
data:{
access_token:that.userInfo['access_token'],
order_id:that.order_id,
pay_type:e,
parent_user_id:0,
condition: 2,
order_id_list:'',
pay_times:pay_times,
_platform:'wx',
_version:'2.8.9',
},
method :"GET",
dataType:'json', //默认 json格式
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res);
if(res.data.code==0){
if(e=="BALANCE_PAY"){
uni.reLaunch({
url: '/pages/money/paySuccess?order_id='+that.order_id+'&price='+that.order_detail.pay_price,
});
}else if(e=="WECHAT_PAY"){
uni.requestPayment({
provider: 'wxpay',
timeStamp:res.data.data.timeStamp,
nonceStr: res.data.data.nonceStr,
package: res.data.data.package,
signType: res.data.data.signType,
paySign: res.data.data.paySign,
success: function (res) {
uni.request({
url: api['apiroot']+'order/pay-success',
data:{
access_token:that.userInfo['access_token'],
order_id:that.order_id,
pay_times:pay_times,
},
method :"GET",
dataType:'json', //默认 json格式
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
if(pay_times==2){
console.log(res.data.weikuan);
uni.request({
url: api['apiroot']+'order/edit-weikuan',
data:{
access_token:that.userInfo['access_token'],
order_id:that.order_id,
weikuan:res.data.weikuan,
order_no:that.order_detail['order_no'],
},
method :"GET",
dataType:'json', //默认 json格式
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
},
})
}
uni.reLaunch({
url: '/pages/money/paySuccess?order_id='+that.order_id+'&price='+that.order_detail.pay_price,
});
},
})
},
fail: function (err) {
uni.showModal({
title: '温馨提示',
content: '订单尚未支付',
showCancel:false,
success: function (res) {
if (res.confirm) {
uni.redirectTo({
url: '/pages/order/order',
})
}
}
});
}
});
}
}
else{
uni.showToast({
title: '支付失败',
duration: 2000
});
}
}
})
},
}