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" @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" @select="uploadImgs"></uni-file-picker>
				</view>
			</view>
		</view>
		
		<view class="title">产品规格</view>
		<view v-for="(item, i) in form.skuList" :key="i" class="block">
			<view class="form-list edit-form">
				<view class="line">
					<view class="name">规格名称</view>
					<input type="text" placeholder="请输入规格名称" v-model="item.skuName" />
				</view>
				<view class="line">
					<view class="name">价格</view>
					<view class="price-select" @click="showPrice(item)">{{ item.price || '请选择' }}</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>
		</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(0)">发布</view>
		</view>
		
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view class="block">
				<view class="form-list edit-form">
					<view class="line">
						<view class="name">售价：</view>
						<input type="text" placeholder="请输入售价" v-model="curSku.price" />
					</view>
					<view class="line">
						<view class="name">市场价：</view>
						<input type="text" 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 {
				openId: uni.getStorageSync('openId'),
				prodId: '',
				form: {
					brief: '',
					categoryId: '',
					content: '',
					pic: '',
					imgs: '',
					price: '',
					prodName: '',
					skuList: [
						{
							status: 1,
							oriPrice: '',
							price: '',
							skuName: '',
							stocks: '',
						}
					],
				},
				originSku: {},
				curSku: {},
				pic: [],
				imgs: [],
				submiting: false,
				uploading: false,
				classifications: [],
			}
		},
		onShow() {
			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.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){
				OSS(e.tempFilePaths[0], (res) => {
					this.pic.push({
						name: res.name,
						extname: res.ext,
						url: res.url,
					})
				})
			},
			// 上传主图
			uploadImgs(e){
				OSS(e.tempFilePaths[0], (res) => {
					this.imgs.push({
						name: res.name,
						extname: res.ext,
						url: res.url,
					})
				})
			},
			// 显示价格弹框
			showPrice(item) {
				this.curSku = item
				this.$refs.popup.open()
			},
			// 新增sku
			addSku() {
				this.form.skuList.push(this.originSku)
			},
			// 提交
			async submit(status) {
				if (this.submiting) return false
				const { form } = this
				if (!form.prodName) return this.$util.errMsg(`请输入商品名称！`)
				if (!this.pic.length) return this.$util.errMsg(`请上传封面图片！`)
				if (!form.brief) return this.$util.errMsg(`请输入商品描述！`)
				if (!form.skuList.length) return this.$util.errMsg(`请输入产品规格！`)
				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 => {
					if (e.stocks) stocks += e.stocks
				})
				form.totalStocks = stocks
				form.status = status
				try {
					if (this.prodId) {
						await update(form)
					} else {
						await save(form)
					}
					this.$util.sucMsg(status ? '保存成功！' : '发布成功！')
					
					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;
	}
}
.price-select {
	font-size: 24rpx;
	color: #333;
}
.title {
	margin: 40rpx 24rpx 24rpx;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
}
.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;
	}
}
</style>