FE_preschoolEdu_miniProgram/other/addGoods/addGoods.vue

<template>
	<view class="page">
		<view class="block">
			<view class="form-list edit-form">
				<view class="line">
					<view class="name">商品名称</view>
					<input type="text" placeholder="请输入商品名称" v-model="form.prodName" />
				</view>
				<view class="line">
					<view class="name">产品分类</view>
					<view class="inline">
						<uni-data-picker class="picker-input" :clear-icon="false" placeholder="请选择产品分类" popup-title="请选择产品分类" preload :localdata="classifications" :map="{text: 'categoryName', value: 'categoryId'}" v-model="form.categoryId"></uni-data-picker>
					</view>
				</view>
				<view class="py">
					<uni-file-picker v-model="pic" limit="5" title="请上传封面图片,至少一张" :auto-upload="false" @delete="delPic" @select="uploadPic"></uni-file-picker>
				</view>
			</view>
		</view>
		
		<view class="block">
			<view class="form-list edit-form">
				<view class="line textarea-line no-bd">
					<textarea placeholder="描述一下宝贝的品牌型号、货品来源..." v-model="form.brief"></textarea>
				</view>
				<view class="py">
					<uni-file-picker v-model="imgs" limit="10" title="添加优质图片" :auto-upload="false" @delete="delImgs" @select="uploadImgs"></uni-file-picker>
				</view>
			</view>
		</view>
		
		<view class="title">产品规格</view>
		<view v-for="(item, i) in form.skuList" :key="i" class="block sku-item">
			<view class="form-list edit-form">
				<view class="line">
					<view class="name">规格名称</view>
					<input type="text" placeholder="请输入规格名称" v-model="item.skuName" @blur="skuNameChange" />
				</view>
				<view class="line">
					<view class="name">价格</view>
					<view class="prices" @click="showPrice(item)">
						<view v-if="item.price">售价：{{ item.price }}元</view>
						<view v-if="item.oriPrice" class="oriPrice">市场价：{{ item.oriPrice }}元</view>
						<template v-if="!item.price && !item.oriPrice">面议</template>
					</view>
				</view>
				<view class="line">
					<view class="name">库存</view>
					<uni-number-box v-model.number="item.stocks" :max="100" :min="1"></uni-number-box>
				</view>
			</view>
			<uni-icons class="del" type="closeempty" size="18" color="#b3b3b3" @click="delSku(i)"></uni-icons>
		</view>
		<view class="plus-sku">
			<uni-icons class="icon" type="plus" size="30" color="#007eff" @click="addSku"></uni-icons>
		</view>
		
		<view class="btns">
			<view class="btn" @click="submit(3)">存草稿</view>
			<view class="btn publish" @click="submit(1)">发布</view>
		</view>
		
		<uni-popup ref="popup" background-color="#fff" type="bottom" @change="popupChange">
			<view class="block popup-block">
				<view class="form-list edit-form">
					<view class="line">
						<view class="name">售价：</view>
						<input ref="price" type="text" step="0.01" placeholder="请输入售价" v-model="curSku.price" @blur="priceChange" />
					</view>
					<view class="line">
						<view class="name">市场价：</view>
						<input type="text" step="0.01" placeholder="请输入市场价" v-model="curSku.oriPrice" />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { queryProvince, queryCity, queryTeamInfo, updateTeamInfo, enterpriseCertificationStatus } from '@/apis/modules/user.js'
	import { save, update, info, categoryInfo } from '@/apis/modules/goods.js'
	import OSS from '@/libs/Oss/upload'
	export default {
		data() {
			return {
				team: uni.getStorageSync('team'),
				openId: uni.getStorageSync('openId'),
				prodId: '',
				form: {
					brief: '',
					categoryId: '',
					content: '',
					pic: '',
					imgs: '',
					price: '',
					prodName: '',
					skuList: [
						{
							prodName: '',
							status: 1,
							oriPrice: '',
							price: '',
							skuName: '默认',
							stocks: 9999,
						}
					],
				},
				originSku: {},
				curSku: {},
				pic: [],
				imgs: [],
				submiting: false,
				uploading: false,
				classifications: [],
				showPopup: false,
			}
		},
		onLoad() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.prodId = options.prodId
			
			this.originSku = JSON.parse(JSON.stringify(this.form.skuList[0]))
			this.getCategory()
			this.prodId && this.getInfo()
		},
		methods: {
			// 商品信息
			async getInfo() {
				const { data } = await info({
					prodId: this.prodId
				})
				if (data) {
					if (data.pic) {
						const pic = data.pic.split(',')
						this.pic = pic.map(e => {
							return {
								url: e
							}
						})
					}
					
					if (data.imgs) {
						const imgs = data.imgs.split(',')
						this.imgs = imgs.map(e => {
							return {
								url: e
							}
						})
					}
					
					this.form = data
				}
			},
			// 供应商分类
			async getCategory() {
				const { data } = await categoryInfo({
					parentId: 0
				})
				this.classifications = data
			},
			// 上传主图
			uploadPic(e){
				e.tempFilePaths.forEach(n => {
					OSS(n, (res) => {
						this.pic.push({
							name: res.name,
							extname: res.ext,
							url: res.url,
						})
					})
				})
			},
			// 删除主图
			delPic(e) {
				const i = this.pic.findIndex(n => n.url === e.tempFilePath)
				if (i !== -1) this.pic.splice(i, 1)
			},
			// 上传详情图
			uploadImgs(e){
				e.tempFilePaths.forEach(n => {
					OSS(n, (res) => {
						this.imgs.push({
							name: res.name,
							extname: res.ext,
							url: res.url,
						})
					})
				})
			},
			// 删除详情图
			delImgs(e) {
				const i = this.imgs.findIndex(n => n.url === e.tempFilePath)
				if (i !== -1) this.imgs.splice(i, 1)
			},
			// 显示价格弹框
			showPrice(item) {
				this.curSku = item
				this.$refs.popup.open()
			},
			popupChange(e) {
				this.showPopup = e.show
			},
			// 删除sku
			delSku(i) {
				this.form.skuList.splice(i, 1)
			},
			// 新增sku
			addSku() {
				this.form.skuList.push(JSON.parse(JSON.stringify(this.originSku)))
			},
			// sku名称离开焦点
			skuNameChange(e) {
				console.log(3, e)
				this.form.skuList.filter(n => n.skuName === e.detail.value).length > 1 && this.$util.errMsg(`规格名称不能重复！`)
			},
			priceChange(e) {
				const { value } = e.detail
				if (value && isNaN(+value)) {
					this.$util.errMsg(`价格请输入数字！`)
				}
			},
			// 提交
			async submit(status) {
				if (this.submiting) return false
				const form = JSON.parse(JSON.stringify((this.form)))
				if (!form.prodName) return this.$util.errMsg(`请输入商品名称！`)
				if (status === 1) {
					if (!this.pic.length) return this.$util.errMsg(`请上传封面图片！`)
					// if (!form.brief) return this.$util.errMsg(`请输入商品描述！`)
					form.skuList = form.skuList.filter(e => e.skuName)
					if (!form.skuList.length) return this.$util.errMsg(`请输入产品规格！`)
					let invalid = 0
					for (const e of form.skuList) {
						if (!e.skuName) {
							this.$util.errMsg(`请输入规格名称！`)
							invalid = 1
						}
						if (e.price && isNaN(+e.price)) {
							this.$util.errMsg(`售价请输入数字！`)
							invalid = 1
						}
						if (e.oriPrice && isNaN(+e.oriPrice)) {
							this.$util.errMsg(`市场价请输入数字！`)
							invalid = 1
						}
						if (!e.stocks) {
							this.$util.errMsg(`请输入库存！`)
							invalid = 1
						}
					}
					if (invalid) return false
				}
				this.submiting = true
				form.pic = this.pic.map(e => e.url).join()
				form.imgs = this.imgs.map(e => e.url).join()
				form.oriPrice = form.skuList[0].oriPrice
				form.price = form.skuList[0].price
				let stocks = 0
				form.skuList.map(e => {
					e.prodName = form.prodName + ' ' + e.skuName
					if (e.stocks) stocks += e.stocks
				})
				form.totalStocks = stocks
				form.status = status
				form.shopId = this.team.isTeam ? this.team.teamId : this.team.parentId
				try {
					if (this.prodId) {
						await update(form)
					} else {
						await save(form)
					}
					this.$util.sucMsg(status === 3 ? '保存成功！' : '发布成功！')
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch(e) {
					this.submiting = false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 170rpx;
	-webkit-overflow-scrolling: touch;
}
/deep/.picker-input {
	.arrow-area {
		display: none;
	}
	.input-value, .selected-list {
		padding: 0;
	}
}
.prices {
	display: inline-flex;
	align-items: center;
	font-size: 28rpx;
	color: #333;
	.oriPrice {
		margin-left: 20rpx;
	}
}
.title {
	margin: 40rpx 24rpx 24rpx;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
}
.sku-item {
	position: relative;
	.del {
		z-index: 10;
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}
}
.plus-sku {
	text-align: center;
}
.btns {
	z-index: 10;
	position: fixed;
	bottom: env(safe-area-inset-bottom);
	bottom: 0;
	width: 100%;
	padding: 20rpx;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 0px 0px 7rpx 0px rgba(203, 203, 203, 0.55);
	.btn {
		padding: 16rpx 60rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #d8d8d8;
		border-radius: 20px;
	}
	.publish {
		color: #fff;
		background-color: $uni-primary;
	}
}
.popup-block {
	padding: 40rpx 30rpx;
}
</style>