shop-applet/components/popups/index.vue

<template>
	<view>
		<uni-popup ref="popup" type="bottom" :mask-background-color="isPay?'rgba(0,0,0,.8)':'transparent'" safeArea
			backgroundColor="transparent" :animation="true" @maskClick="maskClick">
			<view class="popup-wrap" :style="{'border-radius':isPay?'': 0}">
				<view class="paybox" v-if="isPay">
					<view class="paybox-title">
						<view class="paybox-title-left"></view>
						<view class="paybox-title-middle">{{title}}</view>
						<view class="paybox-titler-right" @click="handleClose">
							<u-icon name="close" size="18" color="#666" />
						</view>
					</view>
					<view class="paybox-input">
						<u-code-input v-model="value" mode="box" dot readonly></u-code-input>
					</view>
				</view>

				<view class="keyboard">
					<view class="keyboard-left" :style="{width:isPay?'100%':''}">
						<block v-for="(item,indx) in keys" :key="indx">
							<view class="keyboard-left-item active del" v-if="item=='del'" @click="handleClick(item)">
								<image style="width: 48rpx;height: 48rpx;" src="@/static/del.webp" />
							</view>

							<view class="keyboard-left-item word active"
								:style="{width:isPay?'0%':'',border:isPay?'0':''}" v-else-if="item == '.'"
								@click="handleClick(item)">
								{{isPay?'':item}}
							</view>

							<view class="keyboard-left-item word active"
								:style="{width:(isPay && item == '0')?'66.66%':''}" v-else @click="handleClick(item)">
								{{item}}
							</view>
						</block>
					</view>
					<view class="keyboard-right" :style="{width:isPay?'0%':''}">
						<view class="keyboard-right-clear word active" @click="handleClear">清空</view>
						<view class="keyboard-right-pay word active-pay" @click="handlePay">{{txt}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "popups",
		props: {
			txt: {
				type: String,
				default: '付款'
			},
			isPay: { //区分支付密码还是输入数字
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '请输入支付密码'
			}
		},
		data() {
			return {
				keys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.', 'del'],
				value: '',
			}
		},

		watch: {
			value(newVal, oldVal) {
				// 输入密码走此处
				if (newVal.length == 6 && this.isPay) {
					this.handlePay();
				}
			}
		},

		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.isPay) {
						this.value = this.value + item;
					} else {
						if (this.value) {
							if (this.value.lastIndexOf('.') != -1 && this.value.length - this.value.lastIndexOf('.') == 3)
								return;
							this.value = this.value + item;
						} else {
							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.value = '';
				this.$refs.popup.open();
			},

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

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

<style lang="scss" scoped>
	.popup-wrap {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;

		.paybox {
			.paybox-title {
				display: flex;
				justify-content: space-between;
				padding: 40rpx;

				.paybox-title-left {}

				.paybox-title-middle {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.paybox-titler-right {}
			}

			.paybox-input {
				display: flex;
				justify-content: center;
				margin-bottom: 40rpx;

				/deep/.u-code-input__item {
					background-color: #E6E6E6;
					border-radius: 8rpx;
					border: 0 !important;
				}
			}
		}
	}

	.keyboard {
		display: flex;
		padding-bottom: 20rpx;
		border-top: 2rpx solid #E6E6E6;

		.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>