usingComponents refers to applet components
{
"path" : "pages/paymentCodeOpen",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"usingComponents": {
"microdone": "/wxcomponents/microdone/microdone"
}
}
}this.selectComponent(string) can return the instance object of the component used
<template>
<view>
<view class="gui-flex gui-justify-content-center">
<view class="gui-flex gui-columns gui-text-center gui-margin-top">
<text class="gui-h5 gui-bold">开启付款</text>
<text class="gui-h5 gui-margin-top-large">请输入默认银行卡的支付密码，已验证身份</text>
<text class="gui-h5 gui-color-gray gui-margin-top">当前默认使用银行卡({
{cardNoShow(cardNo)}})</text>
<view class="gui-margin-top gui-flex gui-rows gui-justify-content-center">
<text class="gui-number-input gui-block-text" :style="vcode[0] ? 'border-color:#008AFF' : ''" data-p='0' data-type="1" readonly="readonly" @tap.stop="bindButtonTap">{
{vcode[0] ? '·' : ''}}</text>
<text class="gui-number-input gui-block-text" :style="vcode[1] ? 'border-color:#008AFF' : ''" data-p='0' data-type="1" readonly="readonly" @tap.stop="bindButtonTap">{
{vcode[1] ? '·' : ''}}</text>
<text class="gui-number-input gui-block-text" :style="vcode[2] ? 'border-color:#008AFF' : ''" data-p='0' data-type="1" readonly="readonly" @tap.stop="bindButtonTap">{
{vcode[2] ? '·' : ''}}</text>
<text class="gui-number-input gui-block-text" :style="vcode[3] ? 'border-color:#008AFF' : ''" data-p='0' data-type="1" readonly="readonly" @tap.stop="bindButtonTap">{
{vcode[3] ? '·' : ''}}</text>
<text class="gui-number-input gui-block-text" :style="vcode[4] ? 'border-color:#008AFF' : ''" data-p='0' data-type="1" readonly="readonly" @tap.stop="bindButtonTap">{
{vcode[4] ? '·' : ''}}</text>
<text class="gui-number-input gui-block-text" :style="vcode[5] ? 'border-color:#008AFF' : ''" data-p='0' data-type="1" readonly="readonly" @tap.stop="bindButtonTap">{
{vcode[5] ? '·' : ''}}</text>
</view>
</view>
</view>
<microdone @microdoneevent="onMyEvent"
:place-holder="placeHolder"
keyboard-num="3"
imgaddress="/static/images/"
:bod2top="bod2top"
:starstr="starstr"
:license="license"
:SM24-public-key="SM24publickey"
chaosMode="0"
id="bbb"/>
</view>
</template>
<script>
import {
apiGetRandomKey,
apiGetDefaultCardInfo,
apiBindCheckPwd
} from '@/mall/api/mall.js';
import { isEmpty } from 'lodash';
export default {
data() {
return {
placeHolder: ["输入密码", "输入密码"],
bod2top:"",
// kbvalue:{}
starstr:[],
license:"RmNUL21rcTRrQTNQbHY3WTMxc3dncUVSdTUzTlBHUjlFeEZnZU4xeWROWWtCTU95ek1BeEVqRjJCMmpkdVZ0OW5aaXEvaWFtb2FUUDFKeVUxejU5Z0trTUZYTWtkMjF0TGV4UU51Z1NvN094NW9vYzU2aGczY2lPOU81UFV6MlZHc2xod2pyTWhoNGdCNS9LYTAwblJDNGszb293Y1B2MktuRnRNYXA3ZWFnPXsiaWQiOjAsInR5cGUiOiJ0ZXN0IiwicGxhdGZvcm0iOjEyLCJub3RiZWZvcmUiOiIyMDIyMDYyOCIsIm5vdGFmdGVyIjoiMjAyMjEyMjgifQ==",
SM24publickey:"0ED7BF5A38AD5A5EA9D0B0A7B79D04845F9118F90F1D29C2CE0553D6FE363DCB9C11FCC0B9430EF48F396DD14E3336A9E57D7E84AA7D9CA8286670C8BA9C017B",
vcode: [],
randomFactor: '',
randomFactorKey: '',
mapping: '',
mappingKey: '',
ciphertext: '',
defaultCardInfo: {},
cardNo: '',
cardId: '',
switchValue: true,
flag: 0,
backFlag: 0
}
},
computed: {
cardNoShow() {
return function(cardNo) {
let cardNumber = cardNo.substr(cardNo.length-4);
return cardNumber;
}
}
},
onLoad:function(e){
console.log(e)
this.flag = e.flag;
if(this.flag) {
this.cardId = e.cardId;
this.cardNo = e.cardNo;
this.switchValue = (e.switchValue == 'true') ? true : false;
} else {
this.getDefaultCardInfo();
}
if(!this.backFlag) {
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
console.log("prevPage",prevPage)
prevPage.$vm.backFlag = this.backFlag;
// prevPage.$vm.cardId = e.oldCardId;
}
// this.getRandomKey();
},
onShow:function(){
this.clear1();
this.starstr = [];
this.vcode = [];
},
methods: {
async getDefaultCardInfo() {
const res = await apiGetDefaultCardInfo();
this.defaultCardInfo = res.data.data;
this.cardNo = this.defaultCardInfo.cardNo;
this.cardId = this.defaultCardInfo.id;
},
async getRandomKey() {
const res = await apiGetRandomKey();
console.log("res",res)
let randomKey = res.data.data;
if (!isEmpty(randomKey)) {
randomKey.forEach((item, index) => {
if (item.name == "randomFactor") {
this.randomFactor = item.value;
this.randomFactorKey = item.key;
}
if (item.name == "mapping") {
this.mapping = item.value;
this.mappingKey = item.key;
}
});
// console.log("randomFactor",this.randomFactor)
// console.log("mapping",this.mapping)
let myComponent = this.selectComponent('#bbb');
myComponent.pwdSetSk(this.randomFactor);
myComponent.pwdSetMap(this.mapping);
}
},
async bindCheckPwd() {
this.backFlag = 1;
console.log("bindCheckPwd",this.vcode)
const res = await apiBindCheckPwd({
cardId: this.cardId,
ciphertext: this.ciphertext
// mappingKey: this.mappingKey,
// suijiKey: this.randomFactorKey
});
if(res.data.code == 200) {
if(this.flag) {
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
console.log("prevPage",prevPage)
prevPage.$vm.cardId = this.cardId;
prevPage.$vm.cardNo = this.cardNo;
prevPage.$vm.switchValue = this.switchValue;
prevPage.$vm.backFlag = this.backFlag;
prevPage.$vm.$refs.guipopup.close();
uni.navigateBack();
} else {
uni.navigateTo({
url: '/mall/pages/paymentCode?cardId=' + this.cardId
})
}
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
},
// 组件的监听事件
onMyEvent: function (e) {
//数据绑定
// this.setData(
// e.detail.date
// );
// 关闭键盘事件e.detail.date.callBackfn=a;其中(a代表第几个键盘的下标)
if(e.detail.date.callBackfn!==undefined){
console.log("callBackfn",e.detail.date.callBackfn)
}
// 键盘点击事件e.detail.date.addfn=[a,b];其中(a代表第几个键盘的下标，b代表长度)
if (e.detail.date.addfn !== undefined) {
console.log("add", e.detail.date)
let index = e.detail.date.addfn[1]-1;
this.starstr = [];
this.starstr.push(e.detail.date.starstr[0]);
console.log("starstr", this.starstr)
for (var i=0;i<this.starstr[0].length;i++) {
this.vcode[i] = this.starstr[0].substr(i-1, 1);
}
if (this.starstr[0].length == 6) {
this.regist3();
}
console.log("this.vcode", this.vcode)
}
// 键盘删除事件e.detail.date.delfn=[a,b];其中(a代表第几个键盘的下标，b代表长度)
if (e.detail.date.delfn !== undefined) {
console.log("del", e.detail.date)
let index = e.detail.date.delfn[1]-1;
this.starstr = [];
this.starstr.push(e.detail.date.starstr[0]);
this.vcode.splice(index,1)
console.log("index", index)
console.log("this.vcode", this.vcode)
}
},
clear1:function(){
let myComponent = this.selectComponent('#bbb');
myComponent.clearpwd(0)
},
clear2: function () {
let myComponent = this.selectComponent('#bbb');
myComponent.clearpwd(1)
},
// 以下
bindButtonTap:function(e){
let myComponent = this.selectComponent('#bbb');
myComponent.bindButtonTap(e)
},
callkeyboard:function(e){
let myComponent = this.selectComponent('#bbb');
myComponent.bindButtonTap(e,1)
},
closePWD:function(){
let myComponent = this.selectComponent('#bbb');
myComponent.close()
},
regist3:function(){
let myComponent = this.selectComponent('#bbb');
// let miwen = myComponent.getoutputSM(0);
let miwen = myComponent.getoutputSMLZ(0);
console.log("regist3",miwen);
console.log("this.starstr[0]",this.starstr[0]);
this.ciphertext = miwen;
this.bindCheckPwd();
},
}
}
</script>
<style scoped>
.gui-number-input{width:80rpx; height:80rpx; line-height:80rpx; font-size:32rpx; font-weight:700; color:#A5A7B2; text-align:center; margin:10rpx; border-width:1px; border-style:solid; border-color:#D5D6D8; background-color:#FFFFFF; border-radius:10rpx;}
</style>