yunshengtai-uniapp/pages/life/addGoods/index.vue

<template>
	<view class="index-box">
		<view class="add-goodsimg-box">
			<view class="img-box acea-row">
				<view class="upload-box">
					<image src="../../../static/images/upload.png"></image>
				</view>
				<view class="upload-box" @click="uploadImg(0)">
					<image src="../../../static/images/addimg.png" v-if="slider_image[0] == ''"></image>
					<image :src="slider_image[0]" mode="aspectFill" v-else></image>
				</view>
				<view class="upload-box" @click="uploadImg(1)">
					<image src="../../../static/images/addimg.png" v-if="slider_image[1] == ''"></image>
					<image :src="slider_image[1]" mode="aspectFill" v-else></image>
				</view>
				<view class="upload-box" @click="uploadImg(2)">
					<image src="../../../static/images/addimg.png" v-if="slider_image[2] == ''"></image>
					<image :src="slider_image[2]" mode="aspectFill" v-else></image>
				</view>
			</view>
			<view class="tips acea-row row-middle">
				<image src="../../../static/images/tips-icon.png"></image>
				<text>最少上传一张，最多只能上传三张图片哦！</text>
			</view>
		</view>
		<view class="goodsInfo-box">
			<view class="goodsInfo-item">
				<text>商品名称<text class="colR">*</text></text>
				<input type="text" v-model="store_name" placeholder="输入商品名称" />
			</view>
			<view class="goodsInfo-item">
				<text>商品单位</text>
				<input type="text" v-model="unit_name" placeholder="输入商品单位" />
			</view>
			<view class="goodsInfo-item">
				<text>商品详情<text class="colR">*</text></text>
				<view class="toEdit acea-row row-middle" @click="toGoodsDetails">
					<text>去编辑</text>
					<image src="../../../static/images/arror-r-s.png"></image>
				</view>
			</view>
		</view>
		<view class="title2" @click="addSku">添加规格</view>
		<view class="add-sku-box">
			<view class="sku-item" v-for="(item,index) in attrs" :key="index">
				<view class="close-btn" @click="delSku(index)">×</view>
				<view class="sku img-sku acea-row row-middle row-between">
					<text>图片</text>
					<image src="../../../static/images/upload.png" v-if="item.pic == ''" @tap="uploadSkuImg(index)"></image>
					<image :src="item.pic" v-else @tap="uploadSkuImg(index)" mode="aspectFill"></image>
				</view>
				<view class="sku img-sku acea-row row-middle row-between">
					<text>价格<text class="colR">*</text></text>
					<input type="text" v-model="item.price" placeholder="请输入售价(元)" />
				</view>
				<view class="sku img-sku acea-row row-middle row-between">
					<text>市场价格</text>
					<input type="text" v-model="item.ot_orice" placeholder="请输入市场价格(元)" />
				</view>
				<view class="sku img-sku acea-row row-middle row-between">
					<text>库存<text class="colR">*</text></text>
					<input type="text" v-model="item.stock" placeholder="请输入库存" />
				</view>
				<view class="sku img-sku acea-row row-middle row-between">
					<text>重量</text>
					<input type="text" v-model="item.weight" placeholder="请输入重量" />
				</view>
				<view class="sku img-sku acea-row row-middle row-between">
					<text>体积</text>
					<input type="text" v-model="item.volume" placeholder="请输入体积" />
				</view>
			</view>
		</view>
		<view class="temp-box acea-row row-between-wrapper">
			<text>运费模板</text>
			<view class="acea-row row-middle">
				<text>全国包邮(默认)</text>
				<image src="../../../static/images/arror-r-s.png"></image>
			</view>
		</view>
		<view class="temp-box goods-state acea-row row-between-wrapper">
			<text>商品状态</text>
			<view class="acea-row row-middle">
				<radio-group @change="radioChange">
					<label>
						<radio :value="0" :checked="state == 0" /><text>上架</text>
					</label>
					<label>
						<radio :value="1" :checked="state == 1" /><text>下架</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import { chooseImage } from "@/utils"
	import { addProduct } from '@/api/store'
	export default{
		data(){
			return {
				store_name: '',
				unit_name: '',
				image:'', //主图
				slider_image: ['','',''] ,// 轮播图
				description: '', //商品详情富文本
				tempId: 1, //运费方案
				attrs: [  // 单规格一个，多规格多个
					{
						pic: '', //"规格图片 --可选",
						price: '', //"价格 元", 
						ot_orice: '', //"市场价格 --可选",
						stock: '', //"库存",  
						weight: '', //"重量  --可选",
						volume: '', //"体积  --可选"
					}
				],
				state: 0
			}
		},
		methods:{
			uploadImg(idx){
				chooseImage((img)=>{
					this.$set(this.slider_image,idx,img)
				})
			},
			uploadSkuImg(idx){
				chooseImage((img)=>{
					this.$set(this.attrs,idx,{pic: img})
				})
			},
			toGoodsDetails(){
				uni.navigateTo({
				  url: '/pages/life/goodsDetails/index'
				});
			},
			addSku(){
				let item = {
					pic: '', //"规格图片 --可选",
					price: '', //"价格 元", 
					ot_orice: '', //"市场价格 --可选",
					stock: '', //"库存",  
					weight: '', //"重量  --可选",
					volume: '', //"体积  --可选"
				}
				this.attrs.push(item)
			},
			delSku(idx){
				this.attrs.splice(idx,1)
			},
			radioChange(e){
				console.log(e)
				this.state = e.detail.value
			},
			submit(){
				let form = {
					store_name: this.store_name,
					unit_name: this.unit_name,
					image: this.slider_image[0], //主图
					slider_image: this.slider_image , // 轮播图
					description: this.description, //商品详情富文本
					tempId: 1, //运费方案
					attrs: this.attrs,
					state: this.state,
					spec_type: this.attrs.length > 1 ? 1 : 0   //单规格，多规格
				}
				if(form.store_name == ''){
					this.alertMessage('请填写商品名称')
					return 
				} else if(form.slider_image[0] == ''){
					this.alertMessage('请至少上传一张商品图片')
					return
				} else if(form.description == ''){
					this.alertMessage('请填写商品详情')
					return
				} else if(form.description == ''){
					this.alertMessage('请填写商品详情')
					return
				}
				form.attrs.forEach((item,index)=>{
					if(item.price == ''){
						this.alertMessage('请商品规格价格')
						return
					} else if(item.stock == ''){
						this.alertMessage('请商品规格库存')
						return
					}
				})
				addProduct(form).then((res)=>{
					
				})
				console.log(form,'form')
			},
			alertMessage(msg){
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="less">
	.index-box{
		width: 100%;
		min-height: 100vh;
		background: #F5F6F7;
		padding: 20rpx 40rpx 110rpx;
		position: relative;
		.add-goodsimg-box{
			width: 100%;
			padding: 24rpx;
			background: #fff;
			border-radius: 8rpx;
			.upload-box{
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
				border-radius: 8rpx;
				&:nth-last-child(1){
					margin-right: 0;
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
			.tips{
				color: #FF0707;
				font-size: 20rpx;
				margin-top: 16rpx;
				image{
					width: 18rpx;
					height: 18rpx;
					margin-right: 8rpx;
				}
			}
		}
		.goodsInfo-box{
			width: 100%;
			background: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-weight: 500;
			margin-top: 40rpx;
			.goodsInfo-item{
				width: 100%;
				height: 116rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #EEEEEE;
				&:nth-last-child(1){
					border: none;
				}
				input{
					text-align: right;
				}
				.toEdit{
					image{
						width: 24rpx;
						height: 24rpx;
						margin-left: 6rpx;
					}
				}
			}
		}
		.title2{
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			border: 2rpx solid #B8B8B8;
			background: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
			text-align: center;
			margin: 24rpx auto; 
		}
		.add-sku-box{
			width: 100%;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-weight: 500;
			image{
				width: 110rpx;
				height: 110rpx;
			}
			.sku-item{
				padding: 32rpx 0;
				background: #fff;
				margin-bottom: 12rpx;
				position: relative;
				.close-btn{
					color: #fff;
					font-size: 38rpx;
					position: absolute;
					right: -16rpx;
					top: -22rpx;
					border-radius: 50%;
					line-height: 40rpx;
					width: 46rpx;
					height: 46rpx;
					text-align: center;
					background: #FF5E16;
					border-radius: 50%;
				}
				.sku{
					padding: 0 32rpx;
					width: 100%;
					min-height: 86rpx;
					border-bottom: 2rpx solid #EEEEEE;
				}
				
				input{
					text-align: right;
				}
			}
		}
		.temp-box{
			width: 100%;
			background: #fff;
			border-radius: 8rpx;
			padding: 32rpx;
			font-size: 28rpx;
			font-weight: 500;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}
		}
		label{
			margin-left: 16rpx;
		}
		.btn-box{
			.btn{
				width: 230rpx;
				height: 80rpx;
				background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
				text-align: center;
				line-height: 80rpx;
				font-size: 38rpx;
				font-weight: 500;
				border-radius: 40rpx;
				color: #fff;
				margin: 32rpx auto;
			}
		}
		.colR{
			color: #FF0000;
		}
	}
</style>