数字输入框组件

components/CnumberBox.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="main">
+		<uni-icons type="minus-filled" size="20" color="#A67A54" @click="numReduce"></uni-icons>
+		<!-- <text class="buy-select">{{number}}</text> -->
+		<!-- <u-input
+		  v-model="number"
+		  type="number"
+		  height="40"
+		  :placeholder="placeholder"
+		  :clearable="false"
+		  :disabled="isDisabled"
+		  input-align="center"
+		  :custom-style="{width:'45px'}"
+		  @input="onKeyInput"/> -->
+		 <input class="uni-input" v-model="number" :type="isInt?'number' : 'digit'" :disabled="isDisabled" :placeholder="placeholder" @input="onKeyInput" >
+		<uni-icons type="plus-filled" size="20" color="#A67A54" @click="numPlus"></uni-icons>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			isDisabled: {
+				default: false
+			},
+			isInt: {
+				default: true
+			},
+			placeholder: {
+				default: ''
+			},
+			step: {
+				default: 1
+			},
+			minNum: {
+				default: 0.01
+			}
+		},
+		data() {
+			return {
+			    number: 1,
+			}
+		},
+		methods: {
+			onKeyInput(event) {
+				// uniapp的input用这个
+				let i = event.target.value
+				// u-view的input用这个
+				// let i = event
+				let num = i.charAt(i.length-1)
+				var reg=new RegExp("^[0-9]*$")
+				if(!reg.test(num)) {
+					this.number =  i.slice(0,-1)
+				} else {
+					this.number = i
+				}
+				this.$emit('getNum',this.number);
+			},
+			numPlus() {
+			    this.number = Number(this.number) + Number(this.step)
+				this.$emit('getNum',this.number);
+			},
+			numReduce() {
+			    if ((Number(this.number) - Number(this.step)) >= Number(this.minNum)) {
+				    this.number = Number(this.number) - Number(this.step)
+			    }
+				this.$emit('getNum',this.number);
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
+<style lang="less" scoped>
+	.main {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		.uni-input {
+			height: 40px;
+			width: 45px;
+			text-align: center;
+		}
+	}
+</style>

pagesGood/goodForm.vue

@@ -13,26 +13,31 @@
 				</view>
 			</u-form-item>
 			<u-form-item label="原价" prop="originalPrice" required>
-				<u-number-box :positive-integer="false" :min="0.01" step="1" v-model="goodInfo.originalPrice" bg-color="#51A539"
-				 color="#ffffff" :disabled="ifEdit()" digit></u-number-box>
+				<!-- <u-number-box :positive-integer="false" :min="0.01" step="1" v-model="goodInfo.originalPrice" bg-color="#51A539"
+				 color="#ffffff" :disabled="ifEdit()" digit></u-number-box> -->
+				<CnumberBox @getNum="getOriginalPrice" :isDisabled="ifEdit()" minNum="0.01" :isInt="false"></CnumberBox>
 			</u-form-item>
 			<u-form-item :label="formType == 1 ? '售价' : '采摘价格'" prop="bizPrice" required v-if="formType != 2">
-				<u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.bizPrice" bg-color="#51A539" color="#ffffff"
-				 :disabled="ifEdit()" digit></u-number-box>
+				<!-- <u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.bizPrice" bg-color="#51A539" color="#ffffff"
+				 :disabled="ifEdit()" digit></u-number-box> -->
+				<CnumberBox @getNum="getBizPrice" :isDisabled="ifEdit()" minNum="0.01" :isInt="false"></CnumberBox>
 			</u-form-item>
 			<u-form-item label="起拍价" prop="auctionStartPrice" required v-if="formType == 2">
-				<u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.auctionStartPrice" bg-color="#51A539" color="#ffffff"
-				 :disabled="ifEdit()" digit></u-number-box>
+				<!-- <u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.auctionStartPrice" bg-color="#51A539" color="#ffffff"
+				 :disabled="ifEdit()" digit></u-number-box> -->
+				<CnumberBox @getNum="getStartPrice" :isDisabled="ifEdit()" minNum="0.01" :isInt="false"></CnumberBox>
 			</u-form-item>
 			<u-form-item label="每次最低加价金额" prop="auctionMinAddPrice" required v-if="formType == 2">
-				<u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.auctionMinAddPrice" bg-color="#51A539" color="#ffffff"
-				 :disabled="ifEdit()" digit></u-number-box>
+				<!-- <u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.auctionMinAddPrice" bg-color="#51A539" color="#ffffff"
+				 :disabled="ifEdit()" digit></u-number-box> -->
+				<CnumberBox @getNum="getAddPrice" :isDisabled="ifEdit()" minNum="0.01" :isInt="false"></CnumberBox>
 			</u-form-item>
 			<u-form-item label="计量单位" prop="unit" required>
 				<u-input v-model="goodInfo.unit" type="text" placeholder="请输入计量单位" :disabled="ifEdit()"/>
 			</u-form-item>
 			<u-form-item label="库存" prop="stock" required>
-				<u-number-box :min="1" v-model="goodInfo.stock" bg-color="#51A539" color="#ffffff" :disabled="ifEdit()"></u-number-box>
+				<!-- <u-number-box :min="1" v-model="goodInfo.stock" bg-color="#51A539" color="#ffffff" :disabled="ifEdit()"></u-number-box> -->
+				<CnumberBox @getNum="getStockNum" :isDisabled="ifEdit()" minNum="1"></CnumberBox>
 			</u-form-item>
 			<u-form-item label="商品说明" prop="productDescribe" required>
 				<u-input v-model="goodInfo.productDescribe" type="textarea" placeholder="请输入商品说明" :disabled="ifEdit()"/>
@@ -57,7 +62,11 @@
 <script>
 	const NET = require('@/utils/request')
 	const API = require('@/config/api')
+	import CnumberBox from '@/components/CnumberBox.vue'
 	export default {
+		components: {
+			CnumberBox
+		},
 		data() {
 			return {
 				goodId: '',
@@ -168,6 +177,26 @@
 			}
 		},
 		methods: {
+			// 获取子组件原价
+			getOriginalPrice(num) {
+				this.goodInfo.originalPrice = num
+			},
+			// 获取售价或采摘价
+			getBizPrice(num) {
+				this.goodInfo.bizPrice = num
+			},
+			// 起拍价
+			getStartPrice(num) {
+				this.goodInfo.auctionStartPrice = num
+			},
+			// 获取拍卖加价额
+			getAddPrice(num) {
+				this.goodInfo.auctionMinAddPrice = num
+			},
+			// 获取子组件的库存数量
+			getStockNum(num) {
+				this.goodInfo.stock = num
+			},
 			//  校验当前模式
 			ifEdit() {
 				return this.type == 'add' || this.type == 'edit' ? false : true