qjd-shell-uniapp/pagesGood/goodForm.vue

<template>
	<view class="container">
		<u-form :model="goodInfo" ref="goodInfo" label-width="240">
			<u-form-item label="商品名称" prop="productName" required>
				<u-input v-model="goodInfo.productName" type="text" placeholder="请输入商品名称" :disabled="ifEdit()"/>
			</u-form-item>
			<u-form-item label="请上传商品图片(上限5张)" required label-position="top">
				<view class="good-img">
					<u-image class="good-img-item" width="98px" height="98px" border-radius="5px" v-for="(item, index) in fileList" :src="item"
					 v-if="ifEdit()"></u-image>
					<u-upload :action="uploadUrl" :file-list="defaultList" :form-data="uploadData" @on-success="uploadSuccess"
					 @on-error="uploadError" @on-remove="uploadRemove" max-count="5" :disabled="ifEdit()"></u-upload>
				</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> -->
				<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 :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 :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 :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 :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()"/>
			</u-form-item>
			<u-form-item label="商品分类" right-icon="arrow-right" required @click.native="selectShow = !ifEdit()">
				<text>{{sortText}}</text>
			</u-form-item>
			<u-form-item label="拍卖截止时间" right-icon="arrow-right" required @click.native="dateShow = !ifEdit()" v-if="formType == 2">
				<text>{{goodInfo.auctionEndTime}}</text>
			</u-form-item>
		</u-form>
		<view class="handle-fix-box">
			<u-button type="success" shape="circle" :ripple="true" :custom-style="customStyle" @click="submitData" :disabled="getPermit()">{{type == 'add' ? '提交' : (type == 'detail' ? '编辑' : '保存')}}</u-button>
		</view>
		<u-picker mode="time" v-model="dateShow" :start-year="startYear" :params="params" @confirm="setDate"></u-picker>
		<u-select v-model="selectShow" mode="mutil-column-auto" :list="sortList" @confirm="setSort"></u-select>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-keyboard mode="number" v-model="keyboardShow" @change="valChange" @backspace="backspace"></u-keyboard>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	import CnumberBox from '@/components/CnumberBox.vue'
	export default {
		components: {
			CnumberBox
		},
		data() {
			return {
				goodId: '',
				type: '',
				formType: '1',
				goodInfo: {
					productName: '',
					originalPrice: 1,
					bizPrice: 1,
					unit: '',
					stock: 1,
					productDescribe: '',
					categoryId: '',
					auctionStartPrice: 1,
					auctionMinAddPrice: 1,
					auctionEndTime: '',
				},
				selectShow: false,
				parentId: '',
				sortList: [],
				sortText: '',
				dateShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				startYear: '',
				uploadData: {
					folderId: 0,
				},
				uploadUrl: '',
				fileList: [],
				defaultList: [],
				keyboardShow: false,
				customStyle: { //  底部悬浮按钮样式
					height: '40px',
					backgroundColor: '#56a83a'
				},
				minNum: 0.01, // 输入框最小值
			}
		},
		onLoad(options) {
			this.uploadUrl = API.uploadFile
			this.goodId = options.goodId
			this.type = options.type
			this.formType = options.formType
			this.startYear = new Date().getFullYear()
			NET.request(API.getSortList, {}, 'POST').then(res => {
				this.sortList = res.data.map(item => {
					return {
						value: item.cateCode,
						label: item.cateValue,
						children: item.oneCategory ? item.oneCategory.map(site => {
							return {
								value: site.cateCode,
								label: site.cateValue,
							}
						}) : []
					}
				})
				if (this.parentId && this.goodInfo.categoryId && !this.sortText) {
					let sort = this.sortList.find(site => site.value == this.parentId)
					this.sortText = sort.label + '-' + sort.children.find(site => site.value == this.goodInfo.categoryId).label
				}
			}).catch(res => {
				this.$refs.uTips.show({
					title: '获取商品分类失败',
					type: 'warning',
				})
			})
			if (options.type == 'detail') {
				NET.request(API.getGoodDetail, {
					id: options.goodId
				}, 'POST').then(res => {
					this.goodInfo = {
						productName: res.data.productName,
						originalPrice: parseFloat(res.data.originalPrice),
						bizPrice: parseFloat(res.data.bizPrice),
						unit: res.data.unit,
						stock: res.data.stock,
						productDescribe: res.data.productDescribe,
						categoryId: res.data.categoryId,
						auctionStartPrice: parseFloat(res.data.auctionStartPrice),
						auctionMinAddPrice: parseFloat(res.data.auctionMinAddPrice),
						auctionEndTime: res.data.auctionEndTime,
					}
					this.parentId = res.data.parentId
					this.fileList = res.data.imgPath
					this.defaultList = res.data.imgPath.map(site => {
						return {
							url: site
						}
					})
					if (this.sortList.length) {
						let sort = this.sortList.find(site => site.value == res.data.parentId)
						this.sortText = sort.label + '-' + sort.children.find(site => site.value == res.data.categoryId).label
					}
				}).catch(res => {
					console.log('454543', res)
					this.$refs.uTips.show({
						title: '获取商品详情失败',
						type: 'warning',
					})
				})
			}
		},
		methods: {
			// 加事件
			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;
				}
			},
			// 减事件
			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;
					}
				}
				
			},
			// 输入框改变事件
			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() {
				return this.type == 'add' || this.type == 'edit' ? false : true
			},
			//  文件上传成功回调
			uploadSuccess(res, index, lists, name) {
				this.fileList.push(res.data.url)
				this.$refs.uTips.show({
					title: '文件上传成功',
					type: 'success',
				})
				return true
			},
			//  文件上传失败回调
			uploadError(res, index, lists, name) {
				this.$refs.uTips.show({
					title: '文件上传失败',
					type: 'warning',
				})
			},
			//  移除文件回调
			uploadRemove(index, lists, name) {
				this.fileList.splice(index, 1)
			},
			//  设置分类
			setSort(data) {
				this.goodInfo.categoryId = data[1].value
				this.sortText = data[0].label + '-' + data[1].label
			},
			//  设置时间
			setDate(data) {
				console.log('时间data', data)
				this.goodInfo.auctionEndTime = data.year + '-' + data.month + '-' + data.day + ' ' + data.hour + ':' + data.minute +
					':' + data.second
			},
			//  检查必填项
			getPermit() {
				if (this.type == 'detail') {
					return false
				} else {
					if (!this.fileList.length) {
						return true
					}
					if (!this.goodInfo.productName || !this.goodInfo.unit || !this.goodInfo.categoryId || !this.goodInfo.stock) {
						return true
					}
					if (this.formType == 2 && (!this.goodInfo.auctionStartPrice || !this.goodInfo.auctionMinAddPrice || !this.goodInfo
							.auctionEndTime)) {
						return true
					} else if (this.formType != 2 && !this.goodInfo.bizPrice) {
						return true
					}
					return false
				}
			},
			//  提交
			submitData() {
				if (this.formType == 2) {
					this.goodInfo.bizPrice = this.goodInfo.auctionStartPrice
				}
				if (this.type == 'detail') {
					this.type = 'edit'
				} else if (this.type == 'edit') {
					NET.request(API.editGood, {
						...this.goodInfo,
						id: this.goodId,
						imgPath: this.fileList,
					}, 'POST').then(res => {
						this.$refs.uTips.show({
							title: '编辑成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}).catch(res => {
						this.$refs.uTips.show({
							title: '编辑失败',
							type: 'warning',
						})
					})
				} else {
					NET.request(API.addGood, {
						...this.goodInfo,
						imgPath: this.fileList,
						productType: this.formType
					}, 'POST').then(res => {
						this.$refs.uTips.show({
							title: '新增成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}).catch(res => {
						this.$refs.uTips.show({
							title: '新增失败',
							type: 'warning',
						})
					})
				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.goodInfo.originalPrice += val;
				console.log(this.goodInfo.originalPrice);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.goodInfo.originalPrice.length) {
					this.goodInfo.originalPrice = this.goodInfo.originalPrice.substr(0, this.goodInfo.originalPrice.length - 1);
				}
				console.log(this.goodInfo.originalPrice);
			}
		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="less" scoped>
	.container {
		width: 100%;
		float: left;
		padding: 0 15px 60px 15px;

		.handle-fix-box {
			width: 100%;
			box-sizing: border-box;
			padding: 10px 15px;
			position: fixed;
			left: 0;
			bottom: 0;
			height: 60px;
			background-color: #FFFFFF;
			z-index: 999;
		}
		.good-img {
			display: flex;
			flex-wrap: wrap;
			.good-img-item {
				margin-right: 5px;
				margin-bottom: 5px;
			}
		}
	}
</style>