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