mike
2 years ago
6 changed files with 624 additions and 8 deletions
-
282agentApp/components/cu-keyboard/cu-keyboard.vue
-
41agentApp/components/cu-keyboard/exmple.vue
-
279agentApp/components/uni-transition/uni-transition.vue
-
6agentApp/manifest.json
-
1agentApp/pages/allpages/index.vue
-
23agentApp/pages/payment/payment.vue
@ -0,0 +1,282 @@ |
|||
<template> |
|||
<view class="key-container" @click="hide" v-show="showMask"> |
|||
<uni-transition :modeClass="['slide-bottom']" :show="show" |
|||
:styles="{height:'100vh'}" |
|||
:duration="duration"> |
|||
<view class="key-content" @click.stop> |
|||
<slot></slot> |
|||
<view class="key-box block flex"> |
|||
<view class="key-left"> |
|||
<view class="key-top flex flex-wrap"> |
|||
<view class="btn-box" v-for="(item,index) in numArr" :key="index"> |
|||
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown(item)">{{item}}</button> |
|||
</view> |
|||
</view> |
|||
<view class="key-bottom"> |
|||
<view class="btn-zero"> |
|||
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown('0')">0</button> |
|||
</view> |
|||
<view class="btn-point"> |
|||
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown('.')">.</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="key-right"> |
|||
<view class="del"> |
|||
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="del"> |
|||
<text class="zm iconbackspace text-xl"></text> |
|||
</button> |
|||
</view> |
|||
<view class="confirm"> |
|||
<button hover-class="active" :style="[confirmStyle]" class="cu-btn" @click.stop="confirm"> |
|||
<text class="confirm-text">{{confirmText}}</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-transition> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* 付款组件 |
|||
* @property {Number} duration - 弹出动画时长，默认为300 |
|||
* @event {Function} change - 数字改变触发，参数为数字 |
|||
* @event {Function} confirm - 付款时触发，参数为数字 |
|||
* @event {Function} hide - 关闭键盘触发，参数为空 |
|||
*/ |
|||
// 使用方法,查看同级目录exmple |
|||
import uniTransition from '../uni-transition/uni-transition.vue' |
|||
export default{ |
|||
components:{ |
|||
uniTransition |
|||
}, |
|||
props:{ |
|||
duration:{ |
|||
type:Number,//弹出动画时常 |
|||
default:300 |
|||
}, |
|||
confirmText:{ |
|||
type:String, |
|||
default:'付款' |
|||
}, |
|||
confirmStyle:{ |
|||
type:Object, |
|||
default:()=>{ |
|||
return{ |
|||
backgroundColor:'#57BE6D' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data(){ |
|||
return{ |
|||
value:'',//输出的值 |
|||
show:false,//显示键盘 |
|||
showMask:false,//遮罩层 |
|||
numArr:[1,2,3,4,5,6,7,8,9] |
|||
} |
|||
}, |
|||
|
|||
watch:{ |
|||
value(newval,oldval){ |
|||
this.$emit("change",newval); |
|||
} |
|||
}, |
|||
methods:{ |
|||
close(){ |
|||
this.show = false; |
|||
setTimeout(()=>{ |
|||
this.showMask = false; |
|||
},this.duration) |
|||
}, |
|||
open(){ |
|||
this.value = ''; |
|||
this.show = true; |
|||
this.showMask = true; |
|||
}, |
|||
del(){ |
|||
if(this.value.length){ |
|||
this.value = this.value.slice(0,this.value.length-1); |
|||
} |
|||
}, |
|||
keydown(e){ |
|||
switch(e){ |
|||
case '.': |
|||
// 当输入为点的时候，如果第一次输入点，则补零 |
|||
if(!this.value.length){ |
|||
this.value = '0.'; |
|||
}else{ |
|||
if(this.value.indexOf('.')>-1){ |
|||
// 如果已经有点，则无效 |
|||
}else{ |
|||
this.value = this.value+''+e; |
|||
} |
|||
} |
|||
break; |
|||
case '0': |
|||
if(this.value.length === 0){ |
|||
this.value = this.value+''+e; |
|||
} |
|||
if(Number(this.value) === 0 && this.value.indexOf('.')== -1){ |
|||
// 当输入为零的时候，如果value转换成数字为零，且没有点则无效 |
|||
}else{ |
|||
this.value = this.value+''+e; |
|||
} |
|||
break; |
|||
default: |
|||
this.value = this.value+''+e; |
|||
break; |
|||
} |
|||
}, |
|||
hide(){ |
|||
this.$emit('hide'); |
|||
this.close(); |
|||
}, |
|||
confirm(){ |
|||
this.$emit('confirm',this.value); |
|||
this.close(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@font-face { |
|||
font-family: 'zm'; /* project id 2442084 */ |
|||
src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot'); |
|||
src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot?#iefix') format('embedded-opentype'), |
|||
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff2') format('woff2'), |
|||
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff') format('woff'), |
|||
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.ttf') format('truetype'), |
|||
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.svg#zm') format('svg'); |
|||
} |
|||
|
|||
.zm { |
|||
font-family: "zm" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.iconbackspace:before { |
|||
content: "\ef11"; |
|||
} |
|||
|
|||
.flex{ |
|||
display: flex; |
|||
} |
|||
.flex-wrap{ |
|||
flex-wrap: wrap; |
|||
} |
|||
.cu-btn { |
|||
position: relative; |
|||
border: 0rpx; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
font-size: 28rpx; |
|||
height: 64rpx; |
|||
line-height: 1; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
overflow: visible; |
|||
margin-left: initial; |
|||
transform: translate(0rpx, 0rpx); |
|||
margin-right: initial; |
|||
} |
|||
|
|||
.cu-btn::after { |
|||
display: none; |
|||
} |
|||
.text-xl{ |
|||
font-size:36rpx; |
|||
font-weight: bold; |
|||
font-family: 'microsoft-yahei'; |
|||
} |
|||
.text-black{ |
|||
color:#333; |
|||
} |
|||
.active{ |
|||
background-color: #ddd !important; |
|||
transform: translate(2rpx,2rpx); |
|||
} |
|||
.key-container{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
top:0; |
|||
left:0; |
|||
right:0; |
|||
.key-content{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100vw; |
|||
background-color: #F7F7F7; |
|||
} |
|||
} |
|||
.key-box{ |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding:10rpx 10rpx 0; |
|||
.key-left{ |
|||
width: 75%; |
|||
} |
|||
.key-right{ |
|||
width: 25%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.key-bottom{ |
|||
width: 100%; |
|||
display: flex; |
|||
} |
|||
} |
|||
.del{ |
|||
width: 100%; |
|||
} |
|||
.btn-box{ |
|||
width: 33.33%; |
|||
padding:0 10rpx 10rpx 0; |
|||
box-sizing: border-box; |
|||
} |
|||
.btn-zero{ |
|||
width: 66.66%; |
|||
padding:0 10rpx 10rpx 0; |
|||
box-sizing: border-box; |
|||
} |
|||
.btn-point{ |
|||
width: 33.33%; |
|||
padding:0 10rpx 10rpx 0; |
|||
box-sizing: border-box; |
|||
} |
|||
.key-right{ |
|||
flex-shrink: 0; |
|||
} |
|||
.key-btn{ |
|||
background-color: #fff; |
|||
width: 100%; |
|||
height: 90rpx; |
|||
} |
|||
|
|||
.confirm{ |
|||
width: 100%; |
|||
flex:1; |
|||
padding: 10rpx 0 10rpx 0; |
|||
box-sizing: border-box; |
|||
button{ |
|||
width: 100%; |
|||
height: 100%; |
|||
.confirm-text{ |
|||
color:#fff; |
|||
display: block; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,41 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<button type="default" @click="open">打开键盘</button> |
|||
{{value}} |
|||
<cu-keyboard ref="cukeyboard" @change="change" @confirm="confirm" @hide="hide"></cu-keyboard> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value:'' |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
change(e){ |
|||
this.value = e; |
|||
console.log("数字改变",e); |
|||
}, |
|||
open(){ |
|||
console.log("打开键盘"); |
|||
this.$refs.cukeyboard.open(); |
|||
}, |
|||
confirm(e){ |
|||
console.log("付款",e); |
|||
}, |
|||
hide(){ |
|||
console.log("关闭键盘") |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,279 @@ |
|||
<template> |
|||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject" |
|||
@click="change"> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// #ifdef APP-NVUE |
|||
const animation = uni.requireNativePlugin('animation'); |
|||
// #endif |
|||
/** |
|||
* Transition 过渡动画 |
|||
* @description 简单过渡动画组件 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985 |
|||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏 |
|||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型 |
|||
* @value fade 渐隐渐出过渡 |
|||
* @value slide-top 由上至下过渡 |
|||
* @value slide-right 由右至左过渡 |
|||
* @value slide-bottom 由下至上过渡 |
|||
* @value slide-left 由左至右过渡 |
|||
* @value zoom-in 由小到大过渡 |
|||
* @value zoom-out 由大到小过渡 |
|||
* @property {Number} duration 过渡动画持续时间 |
|||
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` |
|||
*/ |
|||
export default { |
|||
name: 'uniTransition', |
|||
props: { |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modeClass: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
duration: { |
|||
type: Number, |
|||
default: 300 |
|||
}, |
|||
styles: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
transform: '', |
|||
ani: { in: '', |
|||
active: '' |
|||
} |
|||
}; |
|||
}, |
|||
watch: { |
|||
show: { |
|||
handler(newVal) { |
|||
if (newVal) { |
|||
this.open() |
|||
} else { |
|||
this.close() |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
computed: { |
|||
stylesObject() { |
|||
let styles = { |
|||
...this.styles, |
|||
'transition-duration': this.duration / 1000 + 's' |
|||
} |
|||
let transfrom = '' |
|||
for (let i in styles) { |
|||
let line = this.toLine(i) |
|||
transfrom += line + ':' + styles[i] + ';' |
|||
} |
|||
return transfrom |
|||
} |
|||
}, |
|||
created() { |
|||
// this.timer = null |
|||
// this.nextTick = (time = 50) => new Promise(resolve => { |
|||
// clearTimeout(this.timer) |
|||
// this.timer = setTimeout(resolve, time) |
|||
// return this.timer |
|||
// }); |
|||
}, |
|||
methods: { |
|||
change() { |
|||
this.$emit('click', { |
|||
detail: this.isShow |
|||
}) |
|||
}, |
|||
open() { |
|||
clearTimeout(this.timer) |
|||
this.isShow = true |
|||
this.transform = '' |
|||
this.ani.in = '' |
|||
for (let i in this.getTranfrom(false)) { |
|||
if (i === 'opacity') { |
|||
this.ani.in = 'fade-in' |
|||
} else { |
|||
this.transform += `${this.getTranfrom(false)[i]} ` |
|||
} |
|||
} |
|||
this.$nextTick(() => { |
|||
setTimeout(() => { |
|||
this._animation(true) |
|||
}, 50) |
|||
}) |
|||
|
|||
}, |
|||
close(type) { |
|||
clearTimeout(this.timer) |
|||
this._animation(false) |
|||
}, |
|||
_animation(type) { |
|||
let styles = this.getTranfrom(type) |
|||
// #ifdef APP-NVUE |
|||
if(!this.$refs['ani']) return |
|||
animation.transition(this.$refs['ani'].ref, { |
|||
styles, |
|||
duration: this.duration, //ms |
|||
timingFunction: 'ease', |
|||
needLayout: false, |
|||
delay: 0 //ms |
|||
}, () => { |
|||
if (!type) { |
|||
this.isShow = false |
|||
} |
|||
this.$emit('change', { |
|||
detail: this.isShow |
|||
}) |
|||
}) |
|||
// #endif |
|||
// #ifndef APP-NVUE |
|||
this.transform = '' |
|||
for (let i in styles) { |
|||
if (i === 'opacity') { |
|||
this.ani.in = `fade-${type?'out':'in'}` |
|||
} else { |
|||
this.transform += `${styles[i]} ` |
|||
} |
|||
} |
|||
this.timer = setTimeout(() => { |
|||
if (!type) { |
|||
this.isShow = false |
|||
} |
|||
this.$emit('change', { |
|||
detail: this.isShow |
|||
}) |
|||
|
|||
}, this.duration) |
|||
// #endif |
|||
|
|||
}, |
|||
getTranfrom(type) { |
|||
let styles = { |
|||
transform: '' |
|||
} |
|||
this.modeClass.forEach((mode) => { |
|||
switch (mode) { |
|||
case 'fade': |
|||
styles.opacity = type ? 1 : 0 |
|||
break; |
|||
case 'slide-top': |
|||
styles.transform += `translateY(${type?'0':'-100%'}) ` |
|||
break; |
|||
case 'slide-right': |
|||
styles.transform += `translateX(${type?'0':'100%'}) ` |
|||
break; |
|||
case 'slide-bottom': |
|||
styles.transform += `translateY(${type?'0':'100%'}) ` |
|||
break; |
|||
case 'slide-left': |
|||
styles.transform += `translateX(${type?'0':'-100%'}) ` |
|||
break; |
|||
case 'zoom-in': |
|||
styles.transform += `scale(${type?1:0.8}) ` |
|||
break; |
|||
case 'zoom-out': |
|||
styles.transform += `scale(${type?1:1.2}) ` |
|||
break; |
|||
} |
|||
}) |
|||
return styles |
|||
}, |
|||
_modeClassArr(type) { |
|||
let mode = this.modeClass |
|||
if (typeof(mode) !== "string") { |
|||
let modestr = '' |
|||
mode.forEach((item) => { |
|||
modestr += (item + '-' + type + ',') |
|||
}) |
|||
return modestr.substr(0, modestr.length - 1) |
|||
} else { |
|||
return mode + '-' + type |
|||
} |
|||
}, |
|||
// getEl(el) { |
|||
// console.log(el || el.ref || null); |
|||
// return el || el.ref || null |
|||
// }, |
|||
toLine(name) { |
|||
return name.replace(/([A-Z])/g, "-$1").toLowerCase(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-transition { |
|||
transition-timing-function: ease; |
|||
transition-duration: 0.3s; |
|||
transition-property: transform, opacity; |
|||
} |
|||
|
|||
.fade-in { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.fade-active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.slide-top-in { |
|||
/* transition-property: transform, opacity; */ |
|||
transform: translateY(-100%); |
|||
} |
|||
|
|||
.slide-top-active { |
|||
transform: translateY(0); |
|||
/* opacity: 1; */ |
|||
} |
|||
|
|||
.slide-right-in { |
|||
transform: translateX(100%); |
|||
} |
|||
|
|||
.slide-right-active { |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
.slide-bottom-in { |
|||
transform: translateY(100%); |
|||
} |
|||
|
|||
.slide-bottom-active { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.slide-left-in { |
|||
transform: translateX(-100%); |
|||
} |
|||
|
|||
.slide-left-active { |
|||
transform: translateX(0); |
|||
opacity: 1; |
|||
} |
|||
|
|||
.zoom-in-in { |
|||
transform: scale(0.8); |
|||
} |
|||
|
|||
.zoom-out-active { |
|||
transform: scale(1); |
|||
} |
|||
|
|||
.zoom-out-in { |
|||
transform: scale(1.2); |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue