键盘
This commit is contained in:
DESKTOP-GMUNQ1B\k
parent
48cc5f9c2a
commit
cae33636fa
@ -1,308 +0,0 @@
|
||||
<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>
|
||||
{{value}}
|
||||
<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) {
|
||||
setTimeout(() => {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
keydown(e) {
|
||||
if (this.value.lastIndexOf('.') != -1 && this.value.length - this.value.lastIndexOf('.') == 3) return;
|
||||
if (this.value.length >= 9) return;
|
||||
|
||||
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>
|
||||
@ -1,41 +0,0 @@
|
||||
<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>
|
||||
151
components/popups/index.vue
Normal file
151
components/popups/index.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<uni-popup ref="popup" type="bottom" safeArea backgroundColor="#fff" :animation="true">
|
||||
<view class="keyboard">
|
||||
<view class="keyboard-left">
|
||||
<block v-for="(item,indx) in keys" :key="indx">
|
||||
<view class="keyboard-left-item word active" v-if="item != 'del'" @click="handleClick(item)">
|
||||
{{item}}
|
||||
</view>
|
||||
<view class="keyboard-left-item active del" v-else @click="handleClick(item)">
|
||||
<image style="width: 60rpx;height: 60rpx;" src="@/static/del.webp" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="keyboard-right">
|
||||
<view class="keyboard-right-clear word active" @click="handleClear">清空</view>
|
||||
<view class="keyboard-right-pay word active-pay" @click="handlePay">付款</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "popups",
|
||||
data() {
|
||||
return {
|
||||
keys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.', 'del'],
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 键盘点击
|
||||
handleClick(item) {
|
||||
if (this.value.length >= 10) return;
|
||||
if (item == ".") {
|
||||
if (!this.value) {
|
||||
this.value = '0.';
|
||||
} else {
|
||||
if (this.value.indexOf('.') > -1) return;
|
||||
this.value = this.value + item;
|
||||
}
|
||||
} else if (item == 'del') {
|
||||
if (this.value == "0.")
|
||||
this.value = this.value.substring(0, 0);
|
||||
else
|
||||
this.value = this.value.substring(0, this.value.length - 1);
|
||||
} else if (item == 0) {
|
||||
if (this.value) {
|
||||
if (this.value.lastIndexOf('.') != -1 && this.value.length - this.value.lastIndexOf('.') == 3)
|
||||
return;
|
||||
|
||||
this.value = this.value + item;
|
||||
}
|
||||
} else {
|
||||
if (this.value.lastIndexOf('.') != -1 && this.value.length - this.value.lastIndexOf('.') == 3) return;
|
||||
this.value = this.value + item;
|
||||
}
|
||||
|
||||
this.$emit('change', this.value);
|
||||
},
|
||||
|
||||
// 清空
|
||||
handleClear() {
|
||||
this.value = '';
|
||||
this.$emit('clear');
|
||||
},
|
||||
|
||||
// 付款
|
||||
handlePay() {
|
||||
this.$emit('confirm', this.value);
|
||||
this.handleClose();
|
||||
},
|
||||
|
||||
// 开启
|
||||
handleOpen() {
|
||||
this.$refs.popup.open();
|
||||
},
|
||||
|
||||
// 关闭
|
||||
handleClose() {
|
||||
this.$refs.popup.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-transition {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
display: flex;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.keyboard-left {
|
||||
width: 75%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.keyboard-left-item {
|
||||
width: 33.3%;
|
||||
height: 120rpx;
|
||||
line-height: 102rpx;
|
||||
border-bottom: 2rpx solid #E6E6E6;
|
||||
border-right: 2rpx solid #E6E6E6;
|
||||
}
|
||||
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard-right {
|
||||
width: 25%;
|
||||
|
||||
.keyboard-right-clear {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
line-height: 226rpx;
|
||||
}
|
||||
|
||||
.keyboard-right-pay {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
line-height: 226rpx;
|
||||
text-align: center;
|
||||
background-color: #40AE36;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.word {
|
||||
font-weight: 600;
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.active:active {
|
||||
background-color: rgba(232, 232, 232, 0.5);
|
||||
}
|
||||
|
||||
.active-pay:active {
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -209,7 +209,8 @@
|
||||
<view class="content-clip"></view>
|
||||
<view class='footer acea-row row-right row-middle'>
|
||||
<view class="bnt cancel" @click.stop="cancelOrder">取消订单</view>
|
||||
<view class='bnt bgColor' @tap='pay_open(orderInfo.order_id)'>立即付款</view>
|
||||
<view class='bnt bgColor' @tap='pay_open(orderInfo.order_id)' v-if="orderInfo.pay_type != 10">立即付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id"
|
||||
|
||||
@ -6,24 +6,22 @@
|
||||
</u-navbar>
|
||||
</view>
|
||||
<view style="height: 50rpx;"></view>
|
||||
<view class="wrap" >
|
||||
<view class="wrap">
|
||||
<view class="shop">
|
||||
<image src="@/static/shop_logo.webp" style="width: 62rpx;height: 54rpx;" />
|
||||
<text class="shop-name" v-if="mer_name">{{mer_name||''}}</text>
|
||||
</view>
|
||||
<uni-popup type="bottom" ref="pop">
|
||||
<view style="height: 500rpx;background-color: #fff;width: 100%;"></view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 付款金额 -->
|
||||
<view class="v-con">
|
||||
<view class="v-con-text">订单金额</view>
|
||||
<view class="v-con-input">
|
||||
<view class="v-con-input" @click="handleOpenKeyboard">
|
||||
<text style="color: #303133;font-size:32rpx;">￥</text>
|
||||
<u--input type="text" fontSize="23" height="112rpx" placeholder="请输入金额" border="none"
|
||||
<u--input type="text" fontSize="23" height="112rpx" placeholder="请输入金额" border="none" readonly
|
||||
v-model="cartForm.total_amount" placeholderStyle="color:#999;font-size:32rpx"
|
||||
@input="validateDecimal">
|
||||
</u--input>
|
||||
<view class="placeholder"></view>
|
||||
</view>
|
||||
|
||||
<view class="v-con-group">
|
||||
@ -65,6 +63,7 @@
|
||||
@authColse="authColse" @onLoadFun="onLoadFun">
|
||||
</authorize>
|
||||
</view> -->
|
||||
<popups ref="popups" @confirm="handleConfirm" @clear="handleClear" @change="handleChange"></popups>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -83,9 +82,11 @@
|
||||
import {
|
||||
Toast
|
||||
} from "../../libs/uniApi";
|
||||
import popups from "@/components/popups/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
authorize,
|
||||
popups
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLogin']),
|
||||
@ -120,7 +121,7 @@
|
||||
mer_id: '',
|
||||
tips: '暂未登陆~',
|
||||
changeTxt: '展开',
|
||||
isOpen: true,
|
||||
isOpen: false,
|
||||
keyBoardShow: false,
|
||||
mer_name: ''
|
||||
}
|
||||
@ -130,8 +131,8 @@
|
||||
that = this;
|
||||
this.mer_id = opt.mer_id;
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.getProductInfoByMerid(this.mer_id);
|
||||
if (!this.isLogin) {
|
||||
Cache.set("login_back_url_weixin", "/" + getCurrentPages()[0].route + "?mer_id=" + this.mer_id);
|
||||
this.isAuto = true;
|
||||
@ -146,12 +147,42 @@
|
||||
this.checkForm.cart_id = [];
|
||||
this.getProductInfoByMerid(this.mer_id);
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
test(){
|
||||
this.$refs.pop.open()
|
||||
},
|
||||
// 打开键盘
|
||||
handleOpenKeyboard() {
|
||||
if (!this.isLogin) {
|
||||
Cache.set("login_back_url_weixin", "/" + getCurrentPages()[0].route + "?mer_id=" + this.mer_id);
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true;
|
||||
if (this.isWeixin) {
|
||||
this.tips = '加载中...';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.authRef.toWecahtAuth();
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$refs.popups.handleOpen();
|
||||
}
|
||||
},
|
||||
|
||||
// 键盘回调
|
||||
handleConfirm(e) {
|
||||
if (!e) return;
|
||||
this.cartForm.total_amount = e;
|
||||
this.submitOrder();
|
||||
},
|
||||
|
||||
// 清空
|
||||
handleClear() {
|
||||
this.cartForm.total_amount = '';
|
||||
},
|
||||
|
||||
// 输入数字
|
||||
handleChange(e) {
|
||||
this.cartForm.total_amount = e;
|
||||
},
|
||||
|
||||
validateDecimal(event) {
|
||||
let val = (that.cartForm.total_amount.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
|
||||
that.$nextTick(() => {
|
||||
@ -237,12 +268,12 @@
|
||||
},
|
||||
|
||||
getProductInfoByMerid(merid, money) {
|
||||
// if (!that.cartForm.total_amount) return;
|
||||
console.log(123123);
|
||||
getProductInfo({
|
||||
mer_id: that.mer_id,
|
||||
money: that.cartForm.total_amount
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
console.log(res);
|
||||
if (!that.cartForm.total_amount) {
|
||||
this.mer_name = res.data.merchant;
|
||||
} else {
|
||||
@ -316,7 +347,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #fff;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.empty {
|
||||
@ -413,6 +444,14 @@
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.v-wrap {
|
||||
|
||||
BIN
static/del.webp
Normal file
BIN
static/del.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user