同步数据
This commit is contained in:
@@ -24,11 +24,21 @@ const alPAY = (orderNo) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const dtPAY = (orderNo) => {
|
|
||||||
|
const payIndex =()=>{
|
||||||
|
return request({
|
||||||
|
url: 'mall/pay/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const dtPAY = (orderNo,password) => {
|
||||||
return request({
|
return request({
|
||||||
url: 'mall/pay/' + orderNo + '/account',
|
url: 'mall/pay/' + orderNo + '/account',
|
||||||
|
method:'post',
|
||||||
data: {
|
data: {
|
||||||
type: 'app'
|
type: 'app',
|
||||||
|
transfer_password:password
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -37,5 +47,6 @@ const dtPAY = (orderNo) => {
|
|||||||
export {
|
export {
|
||||||
wxPAY,
|
wxPAY,
|
||||||
alPAY,
|
alPAY,
|
||||||
dtPAY
|
dtPAY,
|
||||||
|
payIndex,
|
||||||
}
|
}
|
||||||
|
|||||||
307
components/mi-payKeyboard/mi-payKeyboard.vue
Normal file
307
components/mi-payKeyboard/mi-payKeyboard.vue
Normal file
@@ -0,0 +1,307 @@
|
|||||||
|
<template>
|
||||||
|
<view class="keyboard-content">
|
||||||
|
<view class="content_">
|
||||||
|
<view class="title">请输入支付密码</view>
|
||||||
|
<view class="password-error">
|
||||||
|
<text v-if="passwordError">对不起，您的支付密码不正确，请重新输入</text>
|
||||||
|
</view>
|
||||||
|
<view class="input-content">
|
||||||
|
<view class="input_">
|
||||||
|
<view v-for="item in inputArr">
|
||||||
|
<view v-if="item === '·'" class="dot"></view>
|
||||||
|
<text v-else></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="forget" @tap="forgetPass">忘记密码</view> -->
|
||||||
|
|
||||||
|
<view class="board-content">
|
||||||
|
<view class="title_">
|
||||||
|
<image src="https://z3.ax1x.com/2021/03/31/cApnN4.png" mode=""></image>
|
||||||
|
<text> DTX 安全键盘 </text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="board">
|
||||||
|
<view class="key" hover-class="hoverStyle" @tap="inputNum(item.id)" :class="{small: item.id === 'cancel' || item.id === 'del'}" v-for="item in boardArr">
|
||||||
|
<image class="backspace" v-if="item.id === 'del'" src="https://z3.ax1x.com/2021/03/31/cAp1jx.png" mode=""></image>
|
||||||
|
<text v-else>{{item.text}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '安全键盘',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputArr: ['','','','','',''],
|
||||||
|
passwordInput: '',
|
||||||
|
|
||||||
|
passwordError: false,
|
||||||
|
boardArr: [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
text: '1'
|
||||||
|
},{
|
||||||
|
id: '2',
|
||||||
|
text: '2'
|
||||||
|
},{
|
||||||
|
id: '3',
|
||||||
|
text: '3'
|
||||||
|
},{
|
||||||
|
id: '4',
|
||||||
|
text: '4'
|
||||||
|
},{
|
||||||
|
id: '5',
|
||||||
|
text: '5'
|
||||||
|
},{
|
||||||
|
id: '6',
|
||||||
|
text: '6'
|
||||||
|
},{
|
||||||
|
id: '7',
|
||||||
|
text: '7'
|
||||||
|
},{
|
||||||
|
id: '8',
|
||||||
|
text: '8'
|
||||||
|
},{
|
||||||
|
id: '9',
|
||||||
|
text: '9'
|
||||||
|
},{
|
||||||
|
id: 'cancel',
|
||||||
|
text: '取消'
|
||||||
|
},{
|
||||||
|
id: '0',
|
||||||
|
text: '0'
|
||||||
|
},{
|
||||||
|
id: 'del',
|
||||||
|
text: 'del'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 输入密码
|
||||||
|
inputNum(id) {
|
||||||
|
if(id === 'del'){ // 点击[删除]按钮
|
||||||
|
this.del()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(id === 'cancel'){ // 点击[取消]按钮
|
||||||
|
this.cancel()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(this.passwordInput.length > 11){ // 6位密码输入完毕
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let passwordInput = this.passwordInput
|
||||||
|
this.passwordInput = passwordInput + id + '|'
|
||||||
|
|
||||||
|
console.log(this.passwordInput);
|
||||||
|
this.initPass()
|
||||||
|
|
||||||
|
|
||||||
|
if(this.passwordInput.length === 12){ // 输入完毕
|
||||||
|
console.log(this.passwordInput);
|
||||||
|
this.testPassword()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除一位
|
||||||
|
del() {
|
||||||
|
this.passwordInput = this.passwordInput.substring(0, this.passwordInput.length - 2)
|
||||||
|
this.initPass()
|
||||||
|
},
|
||||||
|
// 取消 可退出输入
|
||||||
|
cancel() {
|
||||||
|
this.inputArr = ['','','','','','']
|
||||||
|
this.passwordInput = ''
|
||||||
|
this.$emit('close')
|
||||||
|
},
|
||||||
|
|
||||||
|
initPass() {
|
||||||
|
let arr = this.passwordInput.split('|');
|
||||||
|
arr.pop()
|
||||||
|
console.log(arr);
|
||||||
|
|
||||||
|
let arr_ = []
|
||||||
|
for(let i = 0; i< 6; i++){
|
||||||
|
if(i < arr.length){
|
||||||
|
arr_.push('·')
|
||||||
|
}else{
|
||||||
|
arr_.push('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.inputArr = arr_
|
||||||
|
},
|
||||||
|
|
||||||
|
// 输入完毕之后 验证密码是否正确
|
||||||
|
testPassword() {
|
||||||
|
let arr = this.passwordInput.split('|')
|
||||||
|
arr.pop()
|
||||||
|
let passStr = arr.join('')
|
||||||
|
|
||||||
|
|
||||||
|
// 测试数据 在此处可添加个人的业务代码
|
||||||
|
var isTrue = true
|
||||||
|
if(isTrue) {
|
||||||
|
this.$emit('success', passStr)
|
||||||
|
this.passwordError = false
|
||||||
|
// uni.showToast({
|
||||||
|
// title: '密码: '+passStr
|
||||||
|
// })
|
||||||
|
this.inputArr = ['','','','','','']
|
||||||
|
this.passwordInput = ''
|
||||||
|
}else{
|
||||||
|
this.passwordError = true
|
||||||
|
this.inputArr = ['','','','','','']
|
||||||
|
this.passwordInput = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击忘记密码 可跳转页面或自定义业务
|
||||||
|
forgetPass() {
|
||||||
|
this.cancel()
|
||||||
|
uni.showToast({
|
||||||
|
title: '忘记密码'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.hoverStyle{
|
||||||
|
background: #e5e5e5;
|
||||||
|
}
|
||||||
|
.keyboard-content{
|
||||||
|
background: rgba($color: #000000, $alpha: .7);
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.content_{
|
||||||
|
background: #FFFFFF;
|
||||||
|
width: 100%;
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 1px solid #dddddd;
|
||||||
|
background: #f7f7f7;
|
||||||
|
color: #1F2324;
|
||||||
|
font-size: 30rpx;
|
||||||
|
letter-spacing: 1rpx;
|
||||||
|
}
|
||||||
|
.password-error{
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #F00;
|
||||||
|
font-size: 12rpx;
|
||||||
|
}
|
||||||
|
.input-content{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #f7f7f7;
|
||||||
|
.input_{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #D9D9D9;
|
||||||
|
background: #ffffff;
|
||||||
|
>view{
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-right: 1px solid #dddddd;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&:last-child{
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
.dot{
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
background: #000000;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.forget{
|
||||||
|
color: #666;
|
||||||
|
font-size: 24rpx;
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.board-content{
|
||||||
|
.title_{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #222;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
>image{
|
||||||
|
width: 22rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.board{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border-top: 1px solid #f2f2f2;
|
||||||
|
.key{
|
||||||
|
height: 110rpx;
|
||||||
|
flex: 33%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #f2f2f2;
|
||||||
|
color: #222;
|
||||||
|
font-size: 50rpx;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
.small{
|
||||||
|
font-size: 34rpx;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
color: #686868;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.backspace{
|
||||||
|
width: 45rpx;
|
||||||
|
height: 33rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
75
components/readme.md
Normal file
75
components/readme.md
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
# 使用方法
|
||||||
|
```
|
||||||
|
<x-pay-pwd
|
||||||
|
ref="xPayPwd"
|
||||||
|
:type="1"
|
||||||
|
:maskClick="true"
|
||||||
|
top="unset"
|
||||||
|
bottom="0rpx"
|
||||||
|
:showClose="false"
|
||||||
|
@change="change"
|
||||||
|
:showHead="true"
|
||||||
|
headText="请输入支付密码"
|
||||||
|
>
|
||||||
|
<template #center>
|
||||||
|
<button @click="clear">插槽</button>
|
||||||
|
</template>
|
||||||
|
</x-pay-pwd>
|
||||||
|
```
|
||||||
|
```
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
// 监听输入框内容变化
|
||||||
|
change({password}){
|
||||||
|
console.log(password)
|
||||||
|
},
|
||||||
|
// 清空输入框内容,一般用于密码输错手动清空
|
||||||
|
clear(){
|
||||||
|
this.$refs.xPayPwd._clearKey();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
# 属性
|
||||||
|
| 字段 | 类型 | 默认 | 描述 |
|
||||||
|
| --------- | ------- | -------------- | ---------------------------------------- |
|
||||||
|
| type | Number | 1 | 0原生键盘 1自定义键盘 |
|
||||||
|
| maskClick | Boolean | true | 是否允许点击蒙版 |
|
||||||
|
| top | String | 20vh | 中间内容的top值，为absolute的top值 |
|
||||||
|
| bottom | String | 0rpx | 中间内容的bottom值，为absolute的bottom值 |
|
||||||
|
| showClose | Boolean | true | 是否显示关闭按钮 |
|
||||||
|
| showHead | Boolean | true | 是否显示标题 |
|
||||||
|
| headText | String | 请输入支付密码 | 标题文本 |
|
||||||
|
# 事件
|
||||||
|
|
||||||
|
| 事件名 | 默认参数 | 描述 |
|
||||||
|
| ------ | ---------- | -------------------------------- |
|
||||||
|
| change | {password} | 监听内容输入，参数返回输入的内容 |
|
||||||
|
|
||||||
|
# 组件方法
|
||||||
|
| 方法名 | 描述 |
|
||||||
|
| ------ | -------------------------------- |
|
||||||
|
| _open | 打开弹窗 |
|
||||||
|
| _close | 关闭弹窗 |
|
||||||
|
| _clearnKey | 请空输入内容 |
|
||||||
|
|
||||||
|
# 注意
|
||||||
|
|
||||||
|
```
|
||||||
|
ios下输入框不会自动获取焦点，需要手动点击输入区域
|
||||||
|
```
|
||||||
|
|
||||||
|
# 参与贡献
|
||||||
|
+ xueshuai(xueshuai_12@163.com)
|
||||||
|
+ Email：xueshuai_12@163.com
|
||||||
|
+ GitHub：GitHub地址
|
||||||
|
+ QQ交流群：1063233592
|
||||||
|
+ 个人博客：(薛小帅)[http://blog.xueshuai.top]
|
||||||
|
+ 个人公众号：叮当Ding
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
157
components/x-pay-pwd/x-pay-pwd.vue
Normal file
157
components/x-pay-pwd/x-pay-pwd.vue
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content" :class="{show:open}">
|
||||||
|
<view class="mask" @click="handleMaskClick"></view>
|
||||||
|
|
||||||
|
<view class="wrap native" v-if="type === 0" :style="{top:top,bottom:bottom}">
|
||||||
|
<view class="head" v-if="showHead">{{headText}}<text class="close" v-if="showClose" @click="_close">x</text></view>
|
||||||
|
<view ref="pwdTxt" class="input" @click="_focusIpt">
|
||||||
|
<input ref="pwdIpt" class="hide_ipt" type="tel" maxlength="6" v-model="passwordStr" focus @input="_input"/>
|
||||||
|
<view class="pwd_i" v-for="(item,index) in password" :key="index"><text class="pwd" v-if="item"></text></view>
|
||||||
|
</view>
|
||||||
|
<slot name="center"/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="wrap custom" v-if="type === 1" :style="{top:top,bottom:bottom}">
|
||||||
|
<view class="head" v-if="showHead">{{headText}}<text class="close" v-if="showClose" @click="_close">x</text></view>
|
||||||
|
<view class="input">
|
||||||
|
<input class="pwd_i" type="password" maxlength="1" v-model="pwdArr[0]" disabled />
|
||||||
|
<input class="pwd_i" type="password" maxlength="1" v-model="pwdArr[1]" disabled />
|
||||||
|
<input class="pwd_i" type="password" maxlength="1" v-model="pwdArr[2]" disabled />
|
||||||
|
<input class="pwd_i" type="password" maxlength="1" v-model="pwdArr[3]" disabled />
|
||||||
|
<input class="pwd_i" type="password" maxlength="1" v-model="pwdArr[4]" disabled />
|
||||||
|
<input class="pwd_i" type="password" maxlength="1" v-model="pwdArr[5]" disabled />
|
||||||
|
</view>
|
||||||
|
<slot name="center"/>
|
||||||
|
<view class="key">
|
||||||
|
<view class="key_i" v-for="(key,index) in keys" :key="index" :class="{nobg:key == '' || key == 'del',del:key == 'del'}" @click="inputKey(key)">
|
||||||
|
<text v-if="key != 'del'">{{key}}</text>
|
||||||
|
<text v-else class="text">x</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
props:{
|
||||||
|
maskClick:{//是否允许点击蒙版
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
top:{//absoute的top值
|
||||||
|
type:String,
|
||||||
|
default:'20vh'
|
||||||
|
},
|
||||||
|
bottom:{//absoulute的bottom值
|
||||||
|
type:String,
|
||||||
|
default:'0rpx'
|
||||||
|
},
|
||||||
|
showClose:{//是否显示关闭按钮
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
type:{//密码支付类型 0原生输入框 1自定义输入框
|
||||||
|
type:Number,
|
||||||
|
default:1
|
||||||
|
},
|
||||||
|
showHead:{//是否显示头部信息
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
headText:{//头部信息文字
|
||||||
|
type:String,
|
||||||
|
default:'请输入支付密码'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
passwordStr:'',//原生需要的字符串密码
|
||||||
|
password:['','','','','',''],//原生键盘输入的密码
|
||||||
|
open:false,//是否展示
|
||||||
|
pwdArr:[],//自定义支付输入的密码
|
||||||
|
keys:['1','2','3','4','5','6','7','8','9','','0','del'],//键盘
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
_input(){// 监听输入
|
||||||
|
const pwdArr = this.passwordStr.split('');
|
||||||
|
for(let i = 0;i<6;i++){
|
||||||
|
this.password[i] = pwdArr[i];
|
||||||
|
}
|
||||||
|
if(this.password.length == 6){
|
||||||
|
this.$emit('change',{password:this.password.join('')})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_focusIpt(){// 监听点击按钮使输入框获得焦点
|
||||||
|
this.$refs.pwdIpt._focus();
|
||||||
|
},
|
||||||
|
_open(){// 打开弹窗
|
||||||
|
this.open = true;
|
||||||
|
},
|
||||||
|
_close(){// 关闭弹窗
|
||||||
|
this.open = false;
|
||||||
|
},
|
||||||
|
_clearKey(){// 清空输入
|
||||||
|
this.passwordStr = '';
|
||||||
|
this.pwdArr = [];
|
||||||
|
for(let i = 0;i<6;i++){
|
||||||
|
this.password[i] = '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleMaskClick(){//点击蒙版
|
||||||
|
if(!this.maskClick) return;
|
||||||
|
this._close();
|
||||||
|
},
|
||||||
|
inputKey(k){// 监听自定义输入
|
||||||
|
if(k == '') return;
|
||||||
|
if(k != 'del'){
|
||||||
|
if(this.pwdArr.length == 6) return;
|
||||||
|
this.pwdArr.push(k);
|
||||||
|
}else{
|
||||||
|
if(this.pwdArr.length == 0) return;
|
||||||
|
this.pwdArr.splice(this.pwdArr.length-1,1)
|
||||||
|
}
|
||||||
|
this.$emit('change',{password:this.pwdArr.join('')})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{position: fixed;top: 0rpx;right: 0rpx;bottom: 0rpx;left: 0rpx; justify-content: center;display: flex;transition:.3s;transform: scale3d(0, 0, 0);
|
||||||
|
&.show{transform: scale3d(1,1,1);}
|
||||||
|
.mask{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba($color: #000000, $alpha: 0.6);z-index:1;}
|
||||||
|
.wrap{background-color: #fff;border-radius: 16rpx;padding: 40rpx;height: max-content;z-index: 2;position: absolute;width: 70%;
|
||||||
|
.head{text-align: center;font-size: 36rpx;color: #2B2B2B;font-weight: 500;margin-bottom: 36rpx;position: relative;
|
||||||
|
.close{position: absolute;right: 0rpx;top: 0rpx;width: 40rpx;height: 40rpx;font-size: 32rpx;color: #646464;display: inline-block;}
|
||||||
|
}
|
||||||
|
.input{display: flex;margin: 0rpx 0rpx 16rpx;border: 2rpx solid #F1F1F1;border-radius: 16rpx;justify-content: center;position: relative;
|
||||||
|
.pwd_i{width: 88rpx;height: 88rpx;border-right:2rpx solid #F1F1F1;text-align: center;font-size: 50rpx;display: flex;align-items: center;justify-content: center;
|
||||||
|
&:last-of-type{border-right:none;}
|
||||||
|
.pwd{display: inline-block;width: 18rpx;height: 18rpx;background-color: #000;border-radius: 50%;}
|
||||||
|
}
|
||||||
|
.hide_ipt{position: absolute;top: 0rpx;right: 0rpx;bottom: 0rpx;left: -100%;height: auto;color: transparent;z-index: -99;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.custom{width: 100%;border-radius: 16rpx 16rpx 0rpx 0rpx;padding: 40rpx 0rpx 0rpx;
|
||||||
|
.head>.close{right: 20rpx;}
|
||||||
|
.input{display: flex;margin: 0rpx 41rpx 16rpx;border: 2rpx solid #F1F1F1;border-radius: 16rpx;justify-content: center;
|
||||||
|
.pwd_i{width: 108rpx;height: 108rpx;border-right:2rpx solid #F1F1F1;text-align: center;font-size: 50rpx;
|
||||||
|
&:last-of-type{border-right:none;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.key{padding: 14rpx 12rpx 0rpx;background-color: #D2D5DB;display: flex;flex-wrap: wrap;
|
||||||
|
.key_i{width: 234rpx;height: 92rpx;margin-right: 12rpx;text-align: center;line-height: 92rpx;background-color: #fff;margin-bottom: 14rpx;
|
||||||
|
border-radius: 10rpx;box-shadow: 0px 2px 0px 0px rgba(132,134,136,1);font-size: 50rpx;color: #000000;font-weight: 500;
|
||||||
|
&:nth-of-type(3n){margin-right: 0rpx;}
|
||||||
|
&.nobg{background-color: transparent;box-shadow: none;}
|
||||||
|
&.del{display: flex;justify-content: center;align-items: center;
|
||||||
|
.text{color: #3F434A;}
|
||||||
|
}
|
||||||
|
&:active{box-shadow: 4rpx 4rpx 5rpx #444;background-color: rgba($color: #000000, $alpha: 0.2);}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
30
package.json
30
package.json
@@ -1,21 +1,13 @@
|
|||||||
{
|
{
|
||||||
"name": "dtx_store",
|
"id": "mi-payKeyboard",
|
||||||
"version": "1.0.0",
|
"name": "支付密码输入安全模拟键盘",
|
||||||
"description": "共力生态",
|
"version": "1.1.0",
|
||||||
"main": "main.js",
|
"description": "支付密码输入模拟键盘，代码简单，拿来即用。可以作为一个弹出层在任何需要输入密码的页面进行使用。",
|
||||||
"dependencies": {
|
"keywords": [
|
||||||
"moment": "^2.29.1",
|
"支付",
|
||||||
"uni-read-pages": "^1.0.5",
|
"密码输入",
|
||||||
"uni-simple-router": "^2.0.7",
|
"模拟键盘",
|
||||||
"uview-ui": "^2.0.27"
|
"6位数字密码",
|
||||||
},
|
"安全键盘"
|
||||||
"scripts": {
|
]
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://git.yuzhankeji.cn/TmOct5/ZhHealth.git"
|
|
||||||
},
|
|
||||||
"author": "唐明明",
|
|
||||||
"license": "ISC"
|
|
||||||
}
|
}
|
||||||
@@ -2,17 +2,21 @@
|
|||||||
<view>
|
<view>
|
||||||
<oct-pay :price="price" :coins="coins" :payNo="payNo" color="#34CE98" price-color="#e6576b"
|
<oct-pay :price="price" :coins="coins" :payNo="payNo" color="#34CE98" price-color="#e6576b"
|
||||||
:payPlatform="platform" @onPay="pay" />
|
:payPlatform="platform" @onPay="pay" />
|
||||||
|
<payKeyboard v-if="showKeyBoard" title="Mi安全键盘" @success="enterSuccess" @close="close"></payKeyboard>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
|
||||||
import eventBus from '../../utils/eventBus.js';
|
import eventBus from '../../utils/eventBus.js';
|
||||||
import {
|
import {
|
||||||
wxPAY,
|
wxPAY,
|
||||||
alPAY,
|
alPAY,
|
||||||
dtPAY
|
dtPAY,
|
||||||
|
payIndex
|
||||||
} from '@/apis/interfaces/pay'
|
} from '@/apis/interfaces/pay'
|
||||||
export default {
|
export default {
|
||||||
|
components: { payKeyboard },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
payNo: "",
|
payNo: "",
|
||||||
@@ -20,20 +24,26 @@
|
|||||||
coins: "",
|
coins: "",
|
||||||
platform: ['dtpay'],
|
platform: ['dtpay'],
|
||||||
oepnType: '',
|
oepnType: '',
|
||||||
canpay:true,
|
canpay: true,
|
||||||
|
has_transfer_password: true,
|
||||||
|
password: '',
|
||||||
|
showKeyBoard: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.payNo = this.$Route.query.orderNo
|
this.payNo = this.$Route.query.orderNo
|
||||||
this.price = Number(this.$Route.query.price).toFixed(2)
|
this.price = Number(this.$Route.query.price).toFixed(2)
|
||||||
this.coins = this.$Route.query.coins
|
|
||||||
if (this.$Route.query.oepnType === 'order') {
|
if (this.$Route.query.oepnType === 'order') {
|
||||||
this.oepnType = this.$Route.query.oepnType
|
this.oepnType = this.$Route.query.oepnType
|
||||||
}
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.payIndex();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
pay(e) {
|
pay(e) {
|
||||||
if (e.platform === 'dtpay') return this.getDTPAY(e.platform);
|
if (e.platform === 'dtpay') return this.inputPassword();
|
||||||
uni.getProvider({
|
uni.getProvider({
|
||||||
service: 'payment',
|
service: 'payment',
|
||||||
success: res => {
|
success: res => {
|
||||||
@@ -59,11 +69,67 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
//获取支付
|
||||||
|
|
||||||
|
payIndex() {
|
||||||
|
payIndex().then(res => {
|
||||||
|
console.log(res);
|
||||||
|
this.has_transfer_password = res.has_transfer_password;
|
||||||
|
this.coins = res.score
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon: "none",
|
||||||
|
mask: true,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// 输入支付密码
|
||||||
|
inputPassword() {
|
||||||
|
if (!this.has_transfer_password) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '温馨提示',
|
||||||
|
content: '是否现在就去设置支付密码',
|
||||||
|
confirmText: '立即设置',
|
||||||
|
confirmColor: "#34CE98",
|
||||||
|
cancelText: '再想想',
|
||||||
|
cancelColor: "#666666",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.$Router.push({
|
||||||
|
name: "AccountResetPassword"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.canpay = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.showKeyBoard = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 输入正确的回调
|
||||||
|
enterSuccess(password) {
|
||||||
|
console.log(password) // 输入的密码
|
||||||
|
this.password = password
|
||||||
|
this.showKeyBoard = false
|
||||||
|
this.getDTPAY();
|
||||||
|
},
|
||||||
|
// 点击[取消] 关闭输入框 的回调
|
||||||
|
close(){
|
||||||
|
this.showKeyBoard = false;
|
||||||
|
this.canpay = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 调用 dt 支付
|
||||||
getDTPAY() {
|
getDTPAY() {
|
||||||
console.log('dt 支付。。。')
|
console.log('dt 支付。。。')
|
||||||
if(this.canpay){
|
if (this.canpay) {
|
||||||
this.canpay = false
|
this.canpay = false
|
||||||
dtPAY(this.payNo).then(res => {
|
console.log(this.password,this.payNo,'//////////')
|
||||||
|
dtPAY(this.payNo, this.password).then(res => {
|
||||||
if (res.state === 'warning') {
|
if (res.state === 'warning') {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '当前DT积分不足',
|
title: '当前DT积分不足',
|
||||||
@@ -132,7 +198,6 @@
|
|||||||
})
|
})
|
||||||
this.canpay = true
|
this.canpay = true
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getALPAY(payType) {
|
getALPAY(payType) {
|
||||||
|
|||||||
BIN
static/.DS_Store
vendored
Normal file
BIN
static/.DS_Store
vendored
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 1.9 MiB |
BIN
static/img/code_back1.png
Normal file
BIN
static/img/code_back1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
@@ -9,7 +9,7 @@
|
|||||||
<view class="price" :style="{color: color}">{{item.price.price_min || '0'}}
|
<view class="price" :style="{color: color}">{{item.price.price_min || '0'}}
|
||||||
<view class="price-type">
|
<view class="price-type">
|
||||||
<text> DT积分</text>
|
<text> DT积分</text>
|
||||||
<text class="kucun" v-if="showSalce"> 库存量:1222</text>
|
<text class="kucun" v-if="showSalce"> 库存量:{{item.stock || '0'}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
1445
unpackage/dist/dev/app-plus/app-service.js
vendored
1445
unpackage/dist/dev/app-plus/app-service.js
vendored
File diff suppressed because one or more lines are too long
1346
unpackage/dist/dev/app-plus/app-view.js
vendored
1346
unpackage/dist/dev/app-plus/app-view.js
vendored
File diff suppressed because one or more lines are too long
BIN
unpackage/dist/dev/app-plus/static/.DS_Store
vendored
Normal file
BIN
unpackage/dist/dev/app-plus/static/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
unpackage/dist/dev/app-plus/static/img/code_back.png
vendored
BIN
unpackage/dist/dev/app-plus/static/img/code_back.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 1.9 MiB |
BIN
unpackage/dist/dev/app-plus/static/img/code_back1.png
vendored
Normal file
BIN
unpackage/dist/dev/app-plus/static/img/code_back1.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Reference in New Issue
Block a user