|
|
@@ -1,4 +1,9 @@
|
|
|
<template>
|
|
|
+ <!--
|
|
|
+ 用途:商品购买/加购弹窗中的加减数量与规格选择
|
|
|
+ 谁用:花店采购端/客户
|
|
|
+ 解决什么问题:提供实体按钮样式的数量加减与输入,提高点击体验
|
|
|
+ -->
|
|
|
<div class="sel-popup">
|
|
|
<bottom-popup class="popup-wrap" :show="show" @close="close()">
|
|
|
<app-close @close="close()" />
|
|
|
@@ -15,7 +20,27 @@
|
|
|
<div class="tui-scrolldiv-box">
|
|
|
<div class="tui-number-box tui-bold tui-attr-title">
|
|
|
<div class="tui-attr-title">数量</div>
|
|
|
- <number-box :max="maxStock" :min="1" :value="buyNum" @change="change"></number-box>
|
|
|
+ <div class="custom-step-box">
|
|
|
+ <button
|
|
|
+ class="step-btn step-btn-minus"
|
|
|
+ :class="{ 'step-btn-disabled': buyNum <= 1 }"
|
|
|
+ :disabled="buyNum <= 1"
|
|
|
+ @click="reduceNum"
|
|
|
+ >-</button>
|
|
|
+ <input
|
|
|
+ class="step-input"
|
|
|
+ type="number"
|
|
|
+ :value="buyNum"
|
|
|
+ @input="onNumInput"
|
|
|
+ @blur="onNumBlur"
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ class="step-btn step-btn-plus"
|
|
|
+ :class="{ 'step-btn-disabled': buyNum >= maxStock }"
|
|
|
+ :disabled="buyNum >= maxStock"
|
|
|
+ @click="addNum"
|
|
|
+ >+</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</scroll-view>
|
|
|
@@ -78,6 +103,34 @@ export default {
|
|
|
change(e) {
|
|
|
this.$emit("change", e);
|
|
|
},
|
|
|
+ // 减少购买数量
|
|
|
+ reduceNum() {
|
|
|
+ if (this.buyNum <= 1) return;
|
|
|
+ const val = this.buyNum - 1;
|
|
|
+ this.$emit("change", { value: val });
|
|
|
+ },
|
|
|
+ // 增加购买数量
|
|
|
+ addNum() {
|
|
|
+ if (this.buyNum >= this.maxStock) return;
|
|
|
+ const val = this.buyNum + 1;
|
|
|
+ this.$emit("change", { value: val });
|
|
|
+ },
|
|
|
+ // 监听输入框实时变化
|
|
|
+ onNumInput(e) {
|
|
|
+ let val = parseInt(e.detail.value, 10);
|
|
|
+ if (isNaN(val)) return;
|
|
|
+ this.$emit("change", { value: val });
|
|
|
+ },
|
|
|
+ // 输入框失焦时纠正校验边界
|
|
|
+ onNumBlur(e) {
|
|
|
+ let val = parseInt(e.detail.value, 10);
|
|
|
+ if (isNaN(val) || val < 1) {
|
|
|
+ val = 1;
|
|
|
+ } else if (val > this.maxStock) {
|
|
|
+ val = this.maxStock;
|
|
|
+ }
|
|
|
+ this.$emit("change", { value: val });
|
|
|
+ },
|
|
|
close() {
|
|
|
this.$emit("close")
|
|
|
},
|
|
|
@@ -121,6 +174,11 @@ export default {
|
|
|
.button-com {
|
|
|
width: 80%;
|
|
|
font-size: 32upx;
|
|
|
+ padding: 32.5upx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -214,6 +272,63 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
padding: 20upx 0 30upx 0;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
+ .custom-step-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .step-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 80upx;
|
|
|
+ height: 76upx;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 16upx;
|
|
|
+ font-size: 44upx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-btn-minus {
|
|
|
+ background-color: #f2f4f7;
|
|
|
+ color: #333333;
|
|
|
+ border: 1upx solid #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-btn-plus {
|
|
|
+ background-color: #049e2c;
|
|
|
+ color: #ffffff;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(4, 158, 44, 0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-btn-disabled {
|
|
|
+ background-color: #f7f8fa !important;
|
|
|
+ color: #cccccc !important;
|
|
|
+ border-color: #eeeeee !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-input {
|
|
|
+ width: 130upx;
|
|
|
+ height: 76upx;
|
|
|
+ margin: 0 16upx;
|
|
|
+ background-color: #f8fafc;
|
|
|
+ border: 1upx solid #e2e8f0;
|
|
|
+ border-radius: 16upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|