Browse Source

输入框组件直播样式调整

zhaoxw 4 years ago
parent
commit
ff71805a8f
5 changed files with 132 additions and 51 deletions
  1. 24 21
      components/CnumberBox.vue
  2. 1 1
      jhlive/jhlive.nvue
  3. 88 23
      pagesGood/goodForm.vue
  4. 18 4
      pagesMain/orderDetail.vue
  5. 1 2
      pagesMedia/liveDetail.nvue

+ 24 - 21
components/CnumberBox.vue

@@ -12,7 +12,8 @@
 		  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" >
+		 <!-- <input class="uni-input" v-model="number" :type="isInt?'number' : 'digit'" :disabled="isDisabled" :placeholder="placeholder" @input="onKeyInput" > -->
+		 <input class="uni-input" :value="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>
@@ -20,9 +21,9 @@
 <script>
 	export default {
 		props: {
-			// number: {
-			// 	default: 1
-			// },
+			number: {
+				default: 1
+			},
 			isDisabled: {
 				default: false
 			},
@@ -41,33 +42,35 @@
 		},
 		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);
+				// // 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);
+				this.$emit('onKeyInput',i)
 			},
 			numPlus() {
-			    this.number = (Number(this.number) + Number(this.step))
-				this.$emit('getNum',this.number);
+			    // this.number = (Number(this.number) + Number(this.step))
+				// this.$emit('getNum',this.number);
+				this.$emit('numPlus',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);
+			    // if ((Number(this.number) - Number(this.step)) >= Number(this.minNum)) {
+				   //  this.number = (Number(this.number) - Number(this.step))
+			    // }
+				// this.$emit('getNum',this.number);
+				this.$emit('numReduce',this.number,);
 			}
 		}
 	}

+ 1 - 1
jhlive/jhlive.nvue

@@ -299,7 +299,7 @@
 		/* #endif */
 		flex-direction: row;
 		bottom: 0px;
-		background-color:rgba(0, 0, 0, 0.4);
+		/* background-color:rgba(0, 0, 0, 0.4); */
 	}
 	.jhim-message-box {
 		max-height: 375rpx;

+ 88 - 23
pagesGood/goodForm.vue

@@ -15,29 +15,29 @@
 			<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> -->
-				<CnumberBox @getNum="getOriginalPrice" :isDisabled="ifEdit()" minNum="0.01" :isInt="false"></CnumberBox>
+				<CnumberBox  :number="goodInfo.originalPrice" :isDisabled="ifEdit()" :isInt="false" :minNum="minNum" @numPlus="plusPrice($event, 1)" @numReduce="reducePrice($event, 1)" @onKeyInput="onKeyInput($event, 1)"></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> -->
-				<CnumberBox @getNum="getBizPrice" :isDisabled="ifEdit()" minNum="0.01" :isInt="false"></CnumberBox>
+				<CnumberBox :number="goodInfo.bizPrice" :isDisabled="ifEdit()" :isInt="false" :minNum="minNum" @numPlus="plusPrice($event, 2)" @numReduce="reducePrice($event, 2)" @onKeyInput="onKeyInput($event, 2)"></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> -->
-				<CnumberBox @getNum="getStartPrice" :isDisabled="ifEdit()" minNum="0.01" :isInt="false"></CnumberBox>
+				<CnumberBox :isDisabled="ifEdit()" :isInt="false" :number="goodInfo.auctionStartPrice" :minNum="minNum" @numPlus="plusPrice($event, 4)" @numReduce="reducePrice($event, 4)" @onKeyInput="onKeyInput($event, 4)"></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> -->
-				<CnumberBox @getNum="getAddPrice" :isDisabled="ifEdit()" minNum="0.01" :isInt="false"></CnumberBox>
+				<CnumberBox :isDisabled="ifEdit()" :isInt="false" :number="goodInfo.auctionMinAddPrice" :minNum="minNum" @numPlus="plusPrice($event, 5)" @numReduce="reducePrice($event, 5)" @onKeyInput="onKeyInput($event, 5)"></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> -->
-				<CnumberBox @getNum="getStockNum" :isDisabled="ifEdit()" minNum="1"></CnumberBox>
+				<CnumberBox :isDisabled="ifEdit()" :number="goodInfo.stock" @numPlus="plusPrice($event, 3)" @numReduce="reducePrice($event, 3)" @onKeyInput="onKeyInput($event, 3)"></CnumberBox>
 			</u-form-item>
 			<u-form-item label="商品说明" prop="productDescribe" required>
 				<u-input v-model="goodInfo.productDescribe" type="text" placeholder="请输入商品说明" :disabled="ifEdit()"/>
@@ -108,7 +108,8 @@
 				customStyle: { //  底部悬浮按钮样式
 					height: '40px',
 					backgroundColor: '#56a83a'
-				}
+				},
+				minNum: 0.01, // 输入框最小值
 			}
 		},
 		onLoad(options) {
@@ -177,25 +178,89 @@
 			}
 		},
 		methods: {
-			// 获取子组件原价
-			getOriginalPrice(num) {
-				this.goodInfo.originalPrice = num
-			},
-			// 获取售价或采摘价
-			getBizPrice(num) {
-				this.goodInfo.bizPrice = num
-			},
-			// 起拍价
-			getStartPrice(num) {
-				this.goodInfo.auctionStartPrice = num
+			// 加事件
+			plusPrice(num,numType) {
+				if (this.ifEdit()) {
+					return
+				}
+				let result = Number(num) + 1;
+				switch(numType) {
+				  case 1:
+				    this.goodInfo.originalPrice = result
+				    break;
+				  case 2:
+				    this.goodInfo.bizPrice = result
+				    break;
+				  case 3:
+				    this.goodInfo.stock = result
+				    break;
+				  case 4:
+				    this.goodInfo.auctionStartPrice = result
+				    break;
+				  case 5:
+				    this.goodInfo.auctionMinAddPrice = result
+				    break;
+				}
 			},
-			// 获取拍卖加价额
-			getAddPrice(num) {
-				this.goodInfo.auctionMinAddPrice = num
+			// 减事件
+			reducePrice(num,numType) {
+				if (this.ifEdit()) {
+					return
+				}
+				if (numType == 3) {
+					this.minNum = 1
+				} else {
+					this.minNum = 0.01
+				}
+				if ((Number(num) - 1) >= Number(this.minNum)) {
+					let result = Number(num) - 1;
+					switch(numType) {
+					  case 1:
+					    this.goodInfo.originalPrice = result
+					    break;
+					  case 2:
+					    this.goodInfo.bizPrice = result
+					    break;
+					  case 3:
+					    this.goodInfo.stock = result
+					    break;
+					  case 4:
+					    this.goodInfo.auctionStartPrice = result
+					    break;
+					  case 5:
+					    this.goodInfo.auctionMinAddPrice = result
+					    break;
+					}
+				}
+				
 			},
-			// 获取子组件的库存数量
-			getStockNum(num) {
-				this.goodInfo.stock = num
+			// 输入框改变事件
+			onKeyInput(value,numType) {
+				let lastNum = value.charAt(value.length-1)
+				let reg=new RegExp("^[0-9]*$")
+				var result
+				if(!reg.test(lastNum)) {
+					result = value.slice(0,-1)
+				} else {
+					result = value
+				}
+				switch(numType) {
+				  case 1:
+				    this.goodInfo.originalPrice = result
+				    break;
+				  case 2:
+				    this.goodInfo.bizPrice = result
+				    break;
+				  case 3:
+				    this.goodInfo.stock = result
+				    break;
+				  case 4:
+				    this.goodInfo.auctionStartPrice = result
+				    break;
+				  case 5:
+				    this.goodInfo.auctionMinAddPrice = result
+				    break;
+				}
 			},
 			//  校验当前模式
 			ifEdit() {

+ 18 - 4
pagesMain/orderDetail.vue

@@ -37,7 +37,7 @@
 							<text class="plant-text" v-if="item.productType == 4">有效期:{{item.term}}天</text>
 						</view>
 						<view class="goods-editnumber">
-							<CnumberBox v-if="item.productType == 3 && isEdit" isDisabled @getNum="getStockNum($event,index)" minNum="1"></CnumberBox>
+							<CnumberBox v-if="item.productType == 3 && isEdit" isDisabled minNum="1" :number="item.buyNum" @numPlus="plusPrice($event, index)" @numReduce="reducePrice($event, index)"></CnumberBox>
 						</view>
 					</view>
 				</view>
@@ -281,12 +281,26 @@
 				})
 			},
 			// 获取子组件的库存数量/
-			getStockNum(num,index) {
+			// getStockNum(num,index) {
+			// 	this.isClick = true
+			// 	this.orderData.merchantInfoResVO.products[index].buyNum = num
+			// 	this.getEditSum()
+			// },
+			// 加事件
+			plusPrice(num,index) {
 				this.isClick = true
-				debugger
-				this.orderData.merchantInfoResVO.products[index].buyNum = num
+				this.orderData.merchantInfoResVO.products[index].buyNum = Number(num) + 1;
 				this.getEditSum()
 			},
+			// 减事件
+			reducePrice(num,index) {
+				this.isClick = true
+				if ((Number(num) - 1) >= 1) {
+					this.orderData.merchantInfoResVO.products[index].buyNum = Number(num) - 1;
+				}
+				this.getEditSum()
+				
+			},
 			// 计算实付额和订单总额
 			getEditSum() {
 				let price = this.orderData.merchantInfoResVO.products.reduce((total, site) => {

+ 1 - 2
pagesMedia/liveDetail.nvue

@@ -323,7 +323,7 @@
 	.popup-box {
 		background-color: #FFFFFF;
 		width: 750rpx;
-		height: 265px;
+		height: 750rpx;
 		// border-radius: 10px 10px 0 0;
 		border-top-left-radius:10px;
 		border-top-right-radius: 10px;
@@ -356,7 +356,6 @@
 	
 	.good-box2 {
 		width: 750rpx;
-		height: 230px;
 		padding: 0 0 10px 0;
 		overflow: visible;
 	}