taoke/pages/product/product-edit.vue

<template>
	<view style="overflow: hidden;">
		<view class="block input-item inline-form">
			<label class="label" for="">商品标题</label>
			<input class="input" type="text" v-model="form.name">
		</view>

		<view class="images-upload">
			<label class="label" for="">商品主图（需要上传5张图片）</label>
			<view class="block">
				<view class="images-wrapper">
					<view class="image-item" v-for="(image,i) in mainImages">
						<view class="del" @tap="mainImages.splice(i,1)">删除</view>
						<image class="image" :src="image|imagesFilter" mode="aspectFill" @tap="replaceImage(i)"></image>
					</view>

					<view class="image-item" v-if="mainImagesLimit>mainImages.length">
						<view class="add" @tap="addImage">
							<uni-icons type="plusempty" size="50" color="#EEEEEE"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="block spec" v-for="(spec,i) in specs">
			<view class="input-item inline-form">
				<label class="label" for="">颜色{{i+1}}</label>
				<view class="add" @tap="specImage(i)">
					<image v-if="spec.image" class="image" :src="spec.image|imagesFilter" mode="aspectFill"></image>
					<uni-icons v-else type="plusempty" size="24" color="#eeeeee"></uni-icons>
				</view>
				<view v-if="specs.length>1" class="remove" @tap="specs.splice(i,1)">移除</view>
			</view>
			<view class="input-item inline-form">
				<label class="label" for="">填写颜色</label>
				<input class="input" type="text" v-model="spec.name">
			</view>
			<view class="input-item inline-form">
				<label class="label" for="">库存</label>
				<input class="input" type="number" v-model="spec.stock">
			</view>
			<view class="input-item inline-form">
				<label class="label" for="">正常售价</label>
				<input class="input" type="digit" v-model="spec.org_price">
			</view>
			<view class="input-item inline-form">
				<label class="label" for="">直销价</label>
				<input class="input" type="digit" v-model="spec.price">
			</view>
		</view>
		<view class="">
			<button class="btn spec-btn" type="default" @tap="addSpec()">新增颜色分类</button>
		</view>

		<view class="details">
			<label class="label" for="">商品详情</label>
			<view class="" style="position: relative;background: white;margin: 0 20upx;">
				<robin-editor :imageUploader="imageUploader" v-model="form.details"></robin-editor>
			</view>
		</view>

		<view class="">
			<button class="btn submit-btn" type="default" @tap="submit()">立即发布</button>
		</view>
	</view>
</template>

<script>
	import robinEditor from '@/uni_modules/robin-editor/components/robin-editor/robin-editor'
	const specTpl = {
		image: '',
		name: '',
		stock: undefined,
		org_price: undefined,
		price: undefined
	}
	export default {
		data() {
			return {
				mainImages: [],
				mainImagesLimit: 5,
				form: {},
				specs: [{
					...specTpl
				}]
			}
		},
		components: {
			robinEditor
		},
		onLoad(option) {
			console.log(option)
			this.$http.get({
				url: "/product",
				data: {
					id: option.id
				},
				success: (res) => {
					this.mainImages = res.data.data.images.split(",")
					this.form.name = res.data.data.name
					this.form.details = res.data.data.details
					this.specs = JSON.parse(res.data.data.specs)
					this.form.id = res.data.data.id
				}
			})
		},
		methods: {
			imageUploader(path, callback) {
				this.$http.upload({
					filePath: path,
					name: 'file',
					success: (res) => {
						console.log(res.data.data)
						callback(res.data.data.fullurl)
					}
				})

			},
			specImage(index) {
				this.chooseImage().then((res) => {
					console.log(res)
					this.$http.upload({
						file: res.tempFiles[0],
						filePath: res.tempFilePaths[0],
						name: 'file',
						success: (res) => {
							console.log(res.data.data)
							this.$set(this.specs[index], 'image', res.data.data.url)
						}
					})
				})
			},
			addSpec() {
				this.specs.push({
					...specTpl
				})
			},
			addImage() {
				this.chooseImage().then((res) => {
					console.log(res)
					for (let i in res.tempFilePaths) {
						this.$http.upload({
							file: res.tempFiles[i],
							filePath: res.tempFilePaths[i],
							name: 'file',
							success: (res) => {
								console.log(res.data.data)
								this.mainImages.push(res.data.data.url)
							}
						})
					}
				});
			},
			replaceImage(index) {
				console.log(index)
				this.chooseImage().then((res) => {
					this.$http.upload({
						file: res.tempFiles[0],
						filePath: res.tempFilePaths[0],
						name: 'file',
						success: (res) => {
							// this.mainImages[index] = res.data.data.url
							this.$set(this.mainImages, index, res.data.data.url)
						}
					})

				});
			},
			chooseImage() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: this.mainImagesLimit - this.mainImages.length,
						extension: ['jpg', 'png', 'bmp', 'jpeg'],
						success(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
			submit() {
				this.form.org_price = this.specs.reduce((accumulator, currentValue, currentIndex, array) => {
					return Math.min(accumulator, currentValue.org_price)
				}, this.specs[0].org_price)

				this.form.price = this.specs.reduce((accumulator, currentValue, currentIndex, array) => {
					return Math.min(accumulator, currentValue.price)
				}, this.specs[0].price)

				this.form.stock = this.specs.reduce((accumulator, currentValue, currentIndex, array) => {
					return parseInt(accumulator) + parseInt(currentValue.stock)
				}, 0)
				this.form.images = this.mainImages.join(",");
				this.form.specs = JSON.stringify(this.specs);
				console.log(this.form)

				for (var i = 0; i < this.specs.length; i++) {
					if (!this.specs[i].image) {
						uni.showToast({
							icon: "none",
							title: `请上传颜色${i+1}的图片`
						})
						return;
					}
					if (!this.specs[i].name) {
						uni.showToast({
							icon: "none",
							title: `请填写颜色${i+1}的名称`
						})
						return;
					}
					if (!this.specs[i].org_price) {
						uni.showToast({
							icon: "none",
							title: `请填写颜色${i+1}的正常售价`
						})
						return;
					}
					if (!this.specs[i].price) {
						uni.showToast({
							icon: "none",
							title: `请填写颜色${i+1}的直销价`
						})
						return;
					}
					if (!this.specs[i].stock) {
						uni.showToast({
							icon: "none",
							title: `请填写颜色${i+1}的库存`
						})
						return;
					}
				}

				this.$http.post({
					url: "/product/create",
					data: this.form,
					success: (res) => {
						console.log(res)
						uni.showModal({
							title: "商品发布",
							content: "发布成功",
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.block {
		background: white;
		margin: 20upx;
		border-radius: 10upx;
	}

	.input-item.inline-form {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 28upx;
		padding: 0 20upx;

		.label {
			width: 160upx;
			// flex: 1 1 160upx;
		}

		.input {
			flex-grow: 1;
		}
	}

	.images-upload {
		.label {
			margin: 20upx;
			padding: 20upx;
			font-size: 28upx;
		}

		.images-wrapper {
			padding: 0;
			padding-top: 40upx;
			display: flex;
			flex-wrap: wrap;

			// justify-content: space-between;

			.image-item {
				position: relative;
				width: 33.33%;
				text-align: center;
				margin-bottom: 40upx;

				.del {
					position: absolute;
					top: 0;
					right: 42upx;
					z-index: 1;
					font-size: 24upx;
					background-color: $primary-color;
					color: white;
					padding: 2upx 15upx;
				}
			}

			.image {
				width: 150upx;
				height: 150upx;
				background: #EEEEEE;
				flex: 0 0 150upx;

			}

			.add {
				width: 150upx;
				height: 150upx;
				display: inline-block;
				line-height: 140upx;

				border: 4upx #EEEEEE dashed;
				box-sizing: border-box;
			}
		}
	}

	.details {
		.label {
			height: 80upx;
			font-size: 28upx;
			padding: 0 40upx;
			display: block;
			line-height: 80upx;
		}
	}

	.btn {
		margin: 0 20upx;
		line-height: 80upx;
		font-size: 30upx;
		color: white;
	}

	.btn.spec-btn {
		background: #007AFF;
	}

	.btn.submit-btn {
		background: $primary-color;
		margin: 20upx;
	}

	.spec.block {
		.add {
			border: 4upx dashed #eeeeee;
			width: 50upx;
			height: 50upx;

			.image {
				width: 50upx;
				height: 50upx;

			}
		}

		.remove {
			margin-left: 380upx;
			color: #007AFF;
		}
	}
</style>