shop-applet/components/popups/index_backup.vue

<template>
	<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0)" safeArea backgroundColor="#fff"
		:animation="true" @maskClick="maskClick">

		<view style="padding:40rpx;display: flex;justify-content: center;align-items: center;">
			<u-code-input v-model="value" mode="box" dot readonly></u-code-input>
		</view>

		<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: 48rpx;height: 48rpx;" 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() {
				// 如果最后一位是. 去除
				if (this.value && this.value.endsWith('.')) {
					this.value = this.value.replace('.', '');
				}

				this.$emit('confirm', this.value);
				this.handleClose();
			},

			// 开启
			handleOpen() {
				this.$refs.popup.open();
			},

			// 关闭
			handleClose() {
				this.$refs.popup.close();
			},

			maskClick() {
				// 如果最后一位是. 去除
				if (this.value && this.value.endsWith('.')) {
					this.value = this.value.replace('.', '');
				}
				this.$emit('change', this.value);
			}
		}
	}
</script>

<style lang="scss">
	.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>