扫码支付
This commit is contained in:
duan
@@ -127,6 +127,7 @@ async function request(options) {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
return res
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
|
|||||||
@@ -231,7 +231,7 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "订单详情"
|
"navigationBarTitleText": "订单详情"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
|
|||||||
192
pages/order_detail/components/payPassword.vue
Normal file
192
pages/order_detail/components/payPassword.vue
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<view>
|
||||||
|
<view class="pay-title">
|
||||||
|
<text>请输入6位支付密码</text>
|
||||||
|
</view>
|
||||||
|
<view class="pay-password" @click="onPayUp">
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 1">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 2">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 3">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 4">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 5">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 6">●</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint" @click="gopaypassword">
|
||||||
|
<text>忘记支付密码？</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
|
||||||
|
<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// AffirmStatus: 1,
|
||||||
|
passwordArr: [],
|
||||||
|
oldPasswordArr: [],
|
||||||
|
newPasswordArr: [],
|
||||||
|
afPasswordArr: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 忘记支付密码
|
||||||
|
gopaypassword() {
|
||||||
|
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||||
|
// shopId_id: uni.cache.get('shopUser')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 唤起键盘
|
||||||
|
*/
|
||||||
|
onPayUp() {
|
||||||
|
this.$refs.CodeKeyboard.show();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 支付键盘回调
|
||||||
|
* @param {Object} val
|
||||||
|
*/
|
||||||
|
KeyInfo(val) {
|
||||||
|
|
||||||
|
if (val.index >= 6) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 判断是否输入的是删除键
|
||||||
|
if (val.keyCode === 8) {
|
||||||
|
// 删除最后一位
|
||||||
|
this.passwordArr.splice(val.index + 1, 1)
|
||||||
|
}
|
||||||
|
// 判断是否输入的是.
|
||||||
|
else if (val.keyCode == 190) {
|
||||||
|
// 输入.无效
|
||||||
|
} else {
|
||||||
|
this.passwordArr.push(val.key);
|
||||||
|
}
|
||||||
|
|
||||||
|
// uni.showModal({
|
||||||
|
// title: '温馨提示',
|
||||||
|
// content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
|
||||||
|
// })
|
||||||
|
|
||||||
|
// 判断是否等于6
|
||||||
|
if (this.passwordArr.length === 6) {
|
||||||
|
// this.AffirmStatus = this.AffirmStatus + 1;
|
||||||
|
let str = ''
|
||||||
|
this.passwordArr.forEach(res => {
|
||||||
|
str += res
|
||||||
|
})
|
||||||
|
this.$emit('accountPayevent', str)
|
||||||
|
this.passwordArr = [];
|
||||||
|
}
|
||||||
|
// 判断到哪一步了
|
||||||
|
// if (this.AffirmStatus === 1) {
|
||||||
|
// this.oldPasswordArr = this.passwordArr;
|
||||||
|
// } else if (this.AffirmStatus === 2) {
|
||||||
|
// this.newPasswordArr = this.passwordArr;
|
||||||
|
// } else if (this.AffirmStatus === 3) {
|
||||||
|
// this.afPasswordArr = this.passwordArr;
|
||||||
|
// } else if (this.AffirmStatus === 4) {
|
||||||
|
// console.log(this.oldPasswordArr.join(''));
|
||||||
|
// console.log(this.newPasswordArr.join(''));
|
||||||
|
// console.log(this.afPasswordArr.join(''));
|
||||||
|
// uni.showToast({
|
||||||
|
// title: '修改成功',
|
||||||
|
// icon: 'none'
|
||||||
|
// })
|
||||||
|
// setTimeout(() => {
|
||||||
|
// uni.navigateBack();
|
||||||
|
// }, 2000)
|
||||||
|
// }
|
||||||
|
this.$forceUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
$base: #555; // 基础颜色
|
||||||
|
|
||||||
|
.page {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 200rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-password {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 90%;
|
||||||
|
height: 80rpx;
|
||||||
|
margin: 20rpx auto;
|
||||||
|
border: 2rpx solid $base;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 16.666%;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 2rpx solid #EEEEEE;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list:nth-child(6) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -176,12 +176,18 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 支付密码 -->
|
||||||
|
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-show="ispws"></payPassword>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import webSocketUtils from '@/common/js/websocket.js'
|
import webSocketUtils from '@/common/js/websocket.js'
|
||||||
|
import payPassword from './components/payPassword.vue'
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
payPassword
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
height: '',
|
height: '',
|
||||||
@@ -200,7 +206,10 @@
|
|||||||
vipId: null,
|
vipId: null,
|
||||||
orderInfo: '',
|
orderInfo: '',
|
||||||
// 可用优惠券数据
|
// 可用优惠券数据
|
||||||
couponAmount: 0
|
couponAmount: 0,
|
||||||
|
// 输入支付密码
|
||||||
|
passwordArr: [],
|
||||||
|
ispws: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -208,6 +217,8 @@
|
|||||||
uni.$off('getMessage')
|
uni.$off('getMessage')
|
||||||
},
|
},
|
||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
|
// 获取用户信息
|
||||||
|
this.loginwxuserInfo()
|
||||||
// console.log(e, 140)
|
// console.log(e, 140)
|
||||||
let res = JSON.parse(e.tableId)
|
let res = JSON.parse(e.tableId)
|
||||||
this.listinfo.detailList = res
|
this.listinfo.detailList = res
|
||||||
@@ -239,6 +250,14 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
async loginwxuserInfo() {
|
||||||
|
let res = await this.api.loginwxuserInfo({
|
||||||
|
userId: uni.cache.get('userInfo').id
|
||||||
|
})
|
||||||
|
if (res.code == 0) {
|
||||||
|
uni.cache.set('userInfo', res.data);
|
||||||
|
}
|
||||||
|
},
|
||||||
async getcoupon() {
|
async getcoupon() {
|
||||||
let res = await this.api.userCoupon({
|
let res = await this.api.userCoupon({
|
||||||
"orderNum": this.listinfo.amount,
|
"orderNum": this.listinfo.amount,
|
||||||
@@ -344,45 +363,19 @@
|
|||||||
shopId_id: uni.cache.get('shopUser')
|
shopId_id: uni.cache.get('shopUser')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 余额支付
|
|
||||||
async accountPayevent(id) {
|
|
||||||
console.log(this.amountVIP, '会员信息')
|
|
||||||
|
|
||||||
let res = await this.api.accountPay({
|
|
||||||
orderId: id,
|
|
||||||
memberId: this.vipId
|
|
||||||
})
|
|
||||||
console.log(res, '调试12')
|
|
||||||
if (res) {
|
|
||||||
this.ispayPws()
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.goRecharge()
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 是否有支付密码
|
|
||||||
ispayPws() {
|
|
||||||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
|
||||||
if (this.amountVIP.isPwd == 0) {
|
|
||||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
|
||||||
shopId_id: uni.cache.get('shopUser')
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async showpopupclickdd(i) {
|
async showpopupclickdd(i) {
|
||||||
let res = await this.api.payorderPay({
|
if (this.radiovalue1 == 1) {
|
||||||
orderId: this.listinfoid
|
let res = await this.api.payorderPay({
|
||||||
}) //判断是否支付成功
|
orderId: this.listinfoid
|
||||||
if (res.code == 0) {
|
}) //判断是否支付成功
|
||||||
uni.showLoading({
|
if (res.code == 0) {
|
||||||
title: '加载中',
|
// uni.showLoading({
|
||||||
mask: true
|
// title: '加载中',
|
||||||
})
|
// mask: true
|
||||||
// #ifdef MP-WEIXIN
|
// })
|
||||||
if (this.radiovalue1 == 1) {
|
// #ifdef MP-WEIXIN
|
||||||
|
// 微信支付还是余额支付
|
||||||
uni.requestPayment({
|
uni.requestPayment({
|
||||||
provider: 'wxpay', //支付类型-固定值
|
provider: 'wxpay', //支付类型-固定值
|
||||||
partnerid: res.data.appId, // 微信支付商户号
|
partnerid: res.data.appId, // 微信支付商户号
|
||||||
@@ -395,7 +388,7 @@
|
|||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "支付成功"
|
title: "支付成功"
|
||||||
})
|
})
|
||||||
uni.cache.set('shopUser','')//删除shopUser
|
uni.cache.set('shopUser', '') //删除shopUser
|
||||||
this.paymodfiyOrderInfo()
|
this.paymodfiyOrderInfo()
|
||||||
setTimeout(res => {
|
setTimeout(res => {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
@@ -425,25 +418,61 @@
|
|||||||
console.log(data, '成功与否')
|
console.log(data, '成功与否')
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
// #endif
|
||||||
// 判断是否有绑定支付密码
|
}
|
||||||
let isVip = uni.cache.get('userInfo').isPwd
|
} else {
|
||||||
console.log(isVip,'调试 123')
|
// 判断是否有绑定支付密码
|
||||||
if (isVip == 0) {
|
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
let isVip = uni.cache.get('userInfo').isPwd
|
||||||
shopId_id: uni.cache.get('shopUser')
|
if (isVip == 0) {
|
||||||
})
|
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||||
} else {
|
// shopId_id: uni.cache.get('shopUser')
|
||||||
this.accountPayevent(this.listinfoid)
|
})
|
||||||
}
|
} else {
|
||||||
|
this.ispws = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.payPwd.onPayUp();
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 余额支付
|
||||||
|
async accountPayevent(pwd) {
|
||||||
|
this.ispws = false
|
||||||
|
let res = await this.api.accountPay({
|
||||||
|
orderId: this.listinfoid,
|
||||||
|
memberId: this.amountVIP.id,
|
||||||
|
pwd: pwd
|
||||||
|
})
|
||||||
|
console.log(res, '是否支付成功')
|
||||||
|
if(res.code ==0){
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '支付成功',
|
||||||
|
success:()=>{
|
||||||
|
setTimeout(()=>{
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/order/order_detail?orderId=' + this.listinfoid
|
||||||
|
});
|
||||||
|
},2000)
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(res.data==1){
|
||||||
|
setTimeout(() => {
|
||||||
|
// 去充值
|
||||||
|
this.goRecharge()
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
clickselect(b) {
|
clickselect(b) {
|
||||||
this.pay_type = b
|
this.pay_type = b
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
//#ifdef MP-WEIXIN || H5
|
//#ifdef MP-WEIXIN || H5
|
||||||
|
|||||||
8
uni_modules/cc-defineKeyboard/changelog.md
Normal file
8
uni_modules/cc-defineKeyboard/changelog.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
## 2.0（2023-08-03）
|
||||||
|
修复小程序bug
|
||||||
|
## 1.0.2（2023-06-21）
|
||||||
|
组件优化 增加键盘高度
|
||||||
|
## 1.0.1（2023-06-21）
|
||||||
|
组件优化
|
||||||
|
## 1.0.0（2023-06-21）
|
||||||
|
组件初始化
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
.page-total{
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-list{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1% 3%;
|
||||||
|
height: 90%;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
.list{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 32%;
|
||||||
|
height: 92rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
|
||||||
|
margin-right: 1.7%;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
text{
|
||||||
|
font-size: 38rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list:nth-child(3n){
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.special{
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
box-shadow: none;
|
||||||
|
text{
|
||||||
|
color: #959595;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-total" v-show="isShow">
|
||||||
|
<view class="key-list">
|
||||||
|
<view class="list" v-for="(item,index) in keyList"
|
||||||
|
:class="{'special':item.keyCode==190||item.keyCode==8}"
|
||||||
|
@click="onKeyList(item,index)"
|
||||||
|
:key="item.keyCode">
|
||||||
|
<text>{{item.key}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: false,
|
||||||
|
keyList: [
|
||||||
|
{
|
||||||
|
key: 1,
|
||||||
|
en: '',
|
||||||
|
keyCode: 49,
|
||||||
|
},{
|
||||||
|
key: 2,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 50,
|
||||||
|
},{
|
||||||
|
key: 3,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 51,
|
||||||
|
},{
|
||||||
|
key: 4,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 52,
|
||||||
|
},{
|
||||||
|
key: 5,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 53,
|
||||||
|
},{
|
||||||
|
key: 6,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 54,
|
||||||
|
},{
|
||||||
|
key: 7,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 55,
|
||||||
|
},{
|
||||||
|
key: 8,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 56,
|
||||||
|
},{
|
||||||
|
key: 9,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 57,
|
||||||
|
},{
|
||||||
|
key: '.',
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 190,
|
||||||
|
},{
|
||||||
|
key: 0,
|
||||||
|
en: 'ABC',
|
||||||
|
keyCode: 48,
|
||||||
|
},{
|
||||||
|
key: 'del',
|
||||||
|
en: 'DEL',
|
||||||
|
keyCode: 8,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
keyIndex: -1,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
passwrdType: {
|
||||||
|
type: String,
|
||||||
|
default: 'pay'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
show(){
|
||||||
|
this.isShow = true;
|
||||||
|
},
|
||||||
|
hide(){
|
||||||
|
this.isShow = false;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 密码键盘按下
|
||||||
|
* @param {Object} item
|
||||||
|
* @param {Number} index
|
||||||
|
*/
|
||||||
|
onKeyList(item,index){
|
||||||
|
let KeyInfo = item;
|
||||||
|
// 删除键
|
||||||
|
if(KeyInfo.keyCode === 8 && this.keyIndex > -1){
|
||||||
|
this.keyIndex--;
|
||||||
|
}
|
||||||
|
// 不是删除键
|
||||||
|
if(KeyInfo.keyCode != 8){
|
||||||
|
if(this.passwrdType == 'pay' && this.keyIndex >= 5){
|
||||||
|
console.log('支付键盘');
|
||||||
|
this.keyIndex = -1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.keyIndex++;
|
||||||
|
}
|
||||||
|
KeyInfo.index = this.keyIndex;
|
||||||
|
this.$emit('KeyInfo',KeyInfo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import 'cc-defineKeyboard.scss';
|
||||||
|
</style>
|
||||||
87
uni_modules/cc-defineKeyboard/package.json
Normal file
87
uni_modules/cc-defineKeyboard/package.json
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
{
|
||||||
|
"id": "cc-defineKeyboard",
|
||||||
|
"displayName": "自定义支付密码输入键盘Keyboard和支付设置输入框Input",
|
||||||
|
"version": "2.0",
|
||||||
|
"description": "自定义支付密码输入键盘Keyboard和支付设置输入框Input",
|
||||||
|
"keywords": [
|
||||||
|
"支付密码",
|
||||||
|
"键盘",
|
||||||
|
"",
|
||||||
|
"支付密码输入键盘",
|
||||||
|
"Keyboard",
|
||||||
|
"",
|
||||||
|
"自定义键盘"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.7.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y",
|
||||||
|
"钉钉": "y",
|
||||||
|
"快手": "y",
|
||||||
|
"飞书": "y",
|
||||||
|
"京东": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
232
uni_modules/cc-defineKeyboard/readme.md
Normal file
232
uni_modules/cc-defineKeyboard/readme.md
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
# cc-defineKeyboard
|
||||||
|
|
||||||
|
|
||||||
|
#### 使用方法
|
||||||
|
```使用方法
|
||||||
|
<!-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入监测事件 -->
|
||||||
|
<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
|
||||||
|
|
||||||
|
/** * 唤起键盘 */
|
||||||
|
onPayUp() {
|
||||||
|
this.$refs.CodeKeyboard.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
/*** 支付键盘回调* @param {Object} val */
|
||||||
|
|
||||||
|
KeyInfo(val) {
|
||||||
|
|
||||||
|
if (val.index >= 6) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 判断是否输入的是删除键
|
||||||
|
if (val.keyCode === 8) {
|
||||||
|
// 删除最后一位
|
||||||
|
this.passwordArr.splice(val.index + 1, 1)
|
||||||
|
}
|
||||||
|
// 判断是否输入的是.
|
||||||
|
else if (val.keyCode == 190) {
|
||||||
|
// 输入.无效
|
||||||
|
} else {
|
||||||
|
this.passwordArr.push(val.key);
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: '温馨提示',
|
||||||
|
content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### HTML代码实现部分
|
||||||
|
```html
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<view>
|
||||||
|
<view class="pay-title">
|
||||||
|
<text v-show="AffirmStatus === 1">请输入6位支付密码</text>
|
||||||
|
<text v-show="AffirmStatus === 2">请设置6位支付密码</text>
|
||||||
|
<text v-show="AffirmStatus === 3">请确认6位支付密码</text>
|
||||||
|
</view>
|
||||||
|
<view class="pay-password" @click="onPayUp">
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 1">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 2">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 3">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 4">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 5">●</text>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<text v-show="passwordArr.length >= 6">●</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint">
|
||||||
|
<text>忘记支付密码？</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
|
||||||
|
<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
AffirmStatus: 1,
|
||||||
|
passwordArr: [],
|
||||||
|
oldPasswordArr: [],
|
||||||
|
newPasswordArr: [],
|
||||||
|
afPasswordArr: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 唤起键盘
|
||||||
|
*/
|
||||||
|
onPayUp() {
|
||||||
|
this.$refs.CodeKeyboard.show();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 支付键盘回调
|
||||||
|
* @param {Object} val
|
||||||
|
*/
|
||||||
|
KeyInfo(val) {
|
||||||
|
|
||||||
|
|
||||||
|
if (val.index >= 6) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 判断是否输入的是删除键
|
||||||
|
if (val.keyCode === 8) {
|
||||||
|
// 删除最后一位
|
||||||
|
this.passwordArr.splice(val.index + 1, 1)
|
||||||
|
}
|
||||||
|
// 判断是否输入的是.
|
||||||
|
else if (val.keyCode == 190) {
|
||||||
|
// 输入.无效
|
||||||
|
} else {
|
||||||
|
this.passwordArr.push(val.key);
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: '温馨提示',
|
||||||
|
content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// 判断是否等于6
|
||||||
|
if (this.passwordArr.length === 6) {
|
||||||
|
this.passwordArr = [];
|
||||||
|
this.AffirmStatus = this.AffirmStatus + 1;
|
||||||
|
}
|
||||||
|
// 判断到哪一步了
|
||||||
|
if (this.AffirmStatus === 1) {
|
||||||
|
this.oldPasswordArr = this.passwordArr;
|
||||||
|
} else if (this.AffirmStatus === 2) {
|
||||||
|
this.newPasswordArr = this.passwordArr;
|
||||||
|
} else if (this.AffirmStatus === 3) {
|
||||||
|
this.afPasswordArr = this.passwordArr;
|
||||||
|
} else if (this.AffirmStatus === 4) {
|
||||||
|
console.log(this.oldPasswordArr.join(''));
|
||||||
|
console.log(this.newPasswordArr.join(''));
|
||||||
|
console.log(this.afPasswordArr.join(''));
|
||||||
|
uni.showToast({
|
||||||
|
title: '修改成功',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
this.$forceUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
$base: orangered; // 基础颜色
|
||||||
|
|
||||||
|
.page {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 200rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-password {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 90%;
|
||||||
|
height: 80rpx;
|
||||||
|
margin: 20rpx auto;
|
||||||
|
border: 2rpx solid $base;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 16.666%;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 2rpx solid #EEEEEE;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list:nth-child(6) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user