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" @click="uploadImgs">
					<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] || 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] || 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] || 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 class="colR">*</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>{{description == ''  ? '去编辑' : '已编辑'}}</text>
					<image src="../../../static/images/arror-r-s.png"></image>
				</view>
			</view>
		</view>
		<!-- //规格属性 -->
		<view class="set-title">规格设置</view>
		<view class="setattr-box">
			<view class="attr-item colB" @click="addAttr">添加属性</view>
			<view class="attr-item acea-row row-between row-middle" 
				v-for="(item,index) in attrArr" 
				:key="index"
				@click="editAttr(index)"
			>
				<view class="attr-item-l">{{item.value}}({{item.detail.length}})</view>
				<image src="../../../static/images/arror-r-s.png"></image>
				
				<view class="del-attr" @tap.stop="delAttr(index)">×</view>
			</view>
		</view>
		<!-- 批量操作 -->
		<view class="batch-set-box" v-if="batchData.titleStr != ''">
			<view class="box-top acea-row row-between-wrapper">
				<view class="name">{{batchData.titleStr}}</view>
				<view class="acea-row row-middle batch" @click="setAttrVal(0,1)">
					<image src="../../../static/images/batch-icon.png"></image>
					<text>批量修改</text>
				</view>
			</view>
			<block v-for="(i,idx) in batchData.priceArr" :key="idx">
				<view class="box-b acea-row row-between-wrapper" @click="setAttrVal(idx,0)">
					<view class="box-b-l acea-row row-middle ">
						<image src="../../../static/images/upload.png" class="attrImg" v-if="i.pic == ''" @tap.stop="uploadAttrImg(idx)"></image>
						<image :src="i.pic" class="attrImg"  mode="aspectFill" v-else  @tap.stop="uploadAttrImg(idx)"></image>
						<view class="name line1">{{i.sku.split(',').reverse().join('/')}}</view>
					</view>
					<view class="acea-row row-middle">
						<view class="box-b-r">
							<view>售价￥{{i.price}}</view>
							<view>库存{{i.stock}}</view>
						</view>
						<image class="arrow" src="../../../static/images/arror-r-s.png"></image>
					</view>
				</view>
			</block>
		</view>
		
		<view class="temp-box acea-row row-between-wrapper" @click="toTempList">
			<text>运费模板</text>
			<view class="acea-row row-middle">
				<text>{{temp}}</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="1" :checked="isShow == 1" /><text>上架</text>
					</label>
					<label>
						<radio :value="0" :checked="isShow == 0" /><text>不上架</text>
					</label>
				</radio-group>
			</view>
		</view> -->
		<view class="btn-box">
			<view class="btn" @tap="submit">提交</view>
		</view>
		<!-- 设置单个属性弹框 -->
		<view class="set-attr-val" :class="showAttrVal ? 'isShow' : ''">
			<view class="title">{{attrValTitle}}</view>
			<view class="inp-box">
				<text>售价(￥)</text>
				<input type="number" placeholder="0" v-model="price">
			</view>
			<view class="inp-box">
				<text>原价(￥)</text>
				<input type="number" placeholder="0" v-model="ot_price">
			</view>
			<view class="inp-box">
				<text>库存</text>
				<input type="number" placeholder="0" v-model="stock">
			</view>
			<view class="btn-box">
				<view class="cancel-btn" @click="cancelClick">取消</view>
				<view class="submit-btn" @click="submitClick">确定</view>
			</view>
		</view>
		<!-- //添加规格弹框 -->
		<view class="mask-box" v-if="maskShow ==  true">
			<view class="addattr-dialog" v-if="addOptionsDialog == true">
				<view class="dialog-top acea-row row-between row-middle">
					<text>规格属性</text>
					<view class="close" @click="maskShow = false; addOptionsDialog = false">×</view>
				</view>
				<view>
					<view class="a-name"><input type="text" v-model="attr.value" placeholder="输入属性名称,如:颜色"></view>
					<view class="o-name-box">
						<block v-for="(o,i) in attr.detail" :key="i">
							<view class="o-item-box acea-row row-between row-middle">
								<input type="text" v-model="attr.detail[i]" placeholder="输入选项,如:红色">
								<text class="close" @click="delOption(i)">×</text>
							</view>
						</block>
						<view class="add-option-btn" @click="addOption">+选项</view>
					</view>
				</view>
				<view class="s-btn" @click="submitAddAttr">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { chooseImage, chooseImages } from "@/utils"
	import { addProduct, getProductInfo, editProduct, getFormatAttr } from '@/api/store'
	export default{
		data(){
			return {
				id: '',
				store_name: '',
				unit_name: '',
				image:'', //主图
				slider_image: [] ,// 轮播图
				description: '', //商品详情富文本
				tempId: 1, //运费方案
				temp: '默认免邮',
				attrs: [  // 单规格一个，多规格多个
					{
						pic: '', //"规格图片 --可选",
						price: '', //"价格 元", 
						ot_price: '', //"市场价格 --可选",
						stock: '', //"库存",  
						weight: '', //"重量  --可选",
						volume: '', //"体积  --可选"
					}
				],
				price: '',
				ot_price: '',
				stock:'',
				isShow: 0,
				spec_type: 0,
				items: [],
				attrArr:[{
					value: '规格',
					detail:['默认']
				}],
				attr:{},
				state: 0,
				maskShow: false,
				addOptionsDialog: false,
				infinite: false,
				batchData: {
					titleStr: '规格',
					priceArr: [
						{
							bar_code: "",
							brokerage: 0,
							brokerage_two: 0,
							cost: 0,
							integral: 0,
							ot_price: 0,
							pic: "",
							pink_price: 0,
							pink_stock: 0,
							price: 0,
							seckill_price: 0,
							seckill_stock: 0,
							sku: "默认",
							stock: 0,
							value1: "",
							volume: 0,
							weight: 0,
						}
					],
				},
				editattr: false,
				idx: null,
				showAttrVal: false,
				attrValTitle: ''
				
			}
		},
		onLoad() {
			this.id = this.$yroute.query.id || ''
			if(this.id){
				uni.setNavigationBarTitle({
				　title:'修改商品'
				})
				getProductInfo({id: this.id}).then((res)=>{
					var info = res.data
					this.slider_image = info.slider_image
					this.image = info.slider_image[0]
					this.unit_name = info.unit_name
					this.description = info.description
					this.store_name = info.store_name
					this.items = info.items
					this.attrArr = info.items
					this.spec_type = 1
					this.isShow = info.is_show
					this.tempId = info.shippingTemplatesDto.id
					this.temp = info.name
					let strArr = info.items.map(item=>{
						return item.value
					})
					this.getFormatAttr()
				})
			} else{
				this.spec_type = 0
				console.log('新增')
			}
		},
		methods:{
			uploadImgs(){
				var imgurls = []
				chooseImages((imgs)=>{
					imgurls.push(imgs)
					this.slider_image = imgurls
				})
				
			},
			uploadImg(idx){
				chooseImage((img)=>{
					if(this.slider_image[idx]){
						this.$set(this.slider_image,idx,img)
					} else{
						this.slider_image.push(img)
					}
				})
			},
			toGoodsDetails(){
				uni.navigateTo({
				  url: '/pages/life/goodsDetails/index?desc='+encodeURIComponent(this.description)
				});
			},
			toTempList(){
				uni.navigateTo({
					url: '/pages/life/tempList/index'
				})
			},
			//添加属性按钮
			addAttr(){
				let j = { value: '', detail:[''] }
				this.attr = j
				this.editattr = false;  //添加新属性时是否编辑attr切换成FALSE
				this.maskShow = true;
				this.addOptionsDialog = true
			},
			//修改属性
			editAttr(i){
				this.attr = this.attrArr[i]
				this.editattr = true; //修改属性时是否编辑attr切换成true
				this.maskShow = true;
				this.addOptionsDialog = true
			},
			delAttr(i){
				if(this.attrArr.length == 1){
					return this.alertMessage('至少有一个规格')
				}
				this.attrArr.splice(i,1)
				this.getFormatAttr()
			},
			addOption(){
				this.attr.detail.push('')
			},
			delOption(i){
				this.attr.detail.splice(i,1)
			},
			///添加属性提交
			submitAddAttr(){
				if(this.attr.value == ''){
					return this.alertMessage('请填写属性名称','none')
				}
				try{
					var o = this.attr.detail;
					if(o.length == 0){
						throw "请至少填写一个属性值！";
					}
				  o.forEach(function(item,index) {
				    if(item == ""){
				      throw "属性值不能为空！";
				    }
				  });
				} catch(e){
					uni.showToast({
						title: e,
						icon: 'none'
					})
					return false
				}
				if(!this.editattr){
					this.attrArr.push(this.attr)
				}
				this.items = this.attrArr
				this.getFormatAttr()
				this.addOptionsDialog = false
				this.maskShow = false
			},
			//属性数据接口
			getFormatAttr(){
				let data = { attrs: this.items, productId: this.id || 0 }
				getFormatAttr(data).then((res)=>{
					if(res.success){
						this.$set(this.batchData,'priceArr',res.data.value)
						if(res.data.attr){
							let strArr = res.data.attr.map(item=> item.value)
							this.$set(this.batchData,'titleStr',strArr.join('/'))
						} else{
							this.$set(this.batchData,'titleStr','')
						}
					} else{
						this.alertMessage(res.msg)
					}
				})
			},
			//数组整合
			setData(attrArr){
				var tmp = []
				for (var i in attrArr) {
				  tmp.push(attrArr[i].detail)
				}
				function cartesianProductOf() {
				    return Array.prototype.reduce.call(arguments, function (a, b) {
				        var ret = [];
				        a.forEach(function (a) {
				            b.forEach(function (b) {
				                ret.push(a.concat([b]));
				            });
				        });
				        return ret;
				    }, [[]]);
				}
				let allArr = cartesianProductOf(...tmp)
				return allArr
			},
			
			//上传规格图片
			uploadAttrImg(idx){
				chooseImage((img)=>{
					this.batchData.priceArr[idx].pic= img
				})
			},
			//设置规格属性值
			setAttrVal(idx,type){
				if(type == 0){
					this.idx = idx
					this.price= this.batchData.priceArr[idx].price
					this.ot_price= this.batchData.priceArr[idx].ot_price
					this.stock= this.batchData.priceArr[idx].stock
					this.attrValTitle = this.batchData.priceArr[idx].sku.split(',').reverse().join('/')
				} else{
					this.attrValTitle = '批量修改规格'
				}
				this.showAttrVal= true
			},
			cancelClick(){
				this.idx = null
				this.showAttrVal= false
			},
			submitClick(){
				const idx = this.idx
				// console.log(this.price,this.ot_price,this.stock)
				if(this.stock == 0){
					return this.alertMessage('商品库存不能为0')
				}
				if(this.attrValTitle == '批量修改规格'){
					this.batchData.priceArr.forEach((item)=>{
						item.price = this.price
						item.ot_price = this.ot_price
						item.stock = this.stock
					})
				} else{
					this.$set(this.batchData.priceArr[idx],'price',this.price)
					this.$set(this.batchData.priceArr[idx],'ot_price',this.ot_price)
					this.$set(this.batchData.priceArr[idx],'stock',this.stock)
				}
				this.showAttrVal= false
			},
			radioChange(e){
				this.isShow= e.detail.value
			},
			submit(){
				// console.log(this.batchData)
				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, //商品详情富文本
					temp_id: this.tempId, //运费方案
					attrs: this.batchData.priceArr,
					isShow: this.isShow,
					items: this.items
				}
				console.log(form.slider_image[0])
				if(form.store_name == ''){
					return this.alertMessage('请填写商品名称','none')
				} else if(!form.slider_image[0]){
					return this.alertMessage('请至少上传一张商品图片','none')
				} else if(form.description == ''){
					return this.alertMessage('请填写商品详情','none')
				} else if(form.description == ''){
					return this.alertMessage('请填写商品详情','none')
				}
				form.attrs.forEach((item,index)=>{
					if(item.price == '' || item.price == 0){
						return this.alertMessage('请商品规格价格','none')
					} else if(item.stock == '' || item.stock == 0){
						return this.alertMessage('商品规格库存不能为0','none')
					}
				})
				if(this.id != ''){
					form.id = this.id
					form.spec_type = this.spec_type
					editProduct(form).then((res)=>{
						if(res.success){
							this.alertMessage(res.msg,'success')
							setTimeout((res)=>{
								uni.redirectTo({
								   url: '/pages/user/goodsManage/index?type=' + 0
								});
							},1500)
						} else{
							this.alertMessage(res.msg,'none')
						}
					})
				} else{
					form.spec_type = this.batchData.priceArr.length > 1 ? 1 : 0
					addProduct(form).then((res)=>{
						if(res.success){
							this.alertMessage(res.msg,'success')
							setTimeout((res)=>{
								uni.redirectTo({
								   url: '/pages/user/goodsManage/index?type=' + 0
								});
							},1500)
						} else{
							this.alertMessage(res.msg,'none')
						}
					})
				}
			},
			alertMessage(msg,type){
				uni.showToast({
					title: msg,
					icon: type,
					duration: 1500
				})
			}
		}
	}
</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;
				&:nth-last-child(1){
					margin-right: 0;
				}
				image{
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
			.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: 82rpx;
				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;
			margin-top: 24rpx;
			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;
			margin-bottom: 12rpx;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}
		}
		label{
			margin-left: 16rpx;
		}
		.btn-box{
			.btn{
				width: 230rpx;
				height: 80rpx;
				background: #000;
				text-align: center;
				line-height: 80rpx;
				font-size: 38rpx;
				font-weight: 500;
				border-radius: 40rpx;
				color: #fff;
				margin: 32rpx auto;
			}
		}
		.colR{
			color: #FF0000;
		}
		.set-title{
			font-size: 32rpx;
			color: #343434;
			margin: 34rpx 0 24rpx;
		}
		.setattr-box{
			width: 100%;
			background: #fff;
			
			.attr-item{
				width: 100%;
				padding: 20rpx 50rpx 20rpx 32rpx;
				border-bottom: 2rpx solid #eee;
				font-size: 28rpx;
				position: relative;
				.del-attr{
					font-size: 40rpx;
					position: absolute;
					right: 10rpx;
					top: 20rpx;
					width: 36rpx;
					height: 36rpx;
					// background: #FFA079;
					line-height: 32rpx;
					text-align: center;
					border-radius: 50%;
					color: #FFA079;
				}
				image{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		// 批量设置库存
		.batch-set-box{
			width: 100%;
			background: #fff;
			padding: 24rpx;
			color: #343434;
			font-size: 28rpx;
			margin: 12rpx 0;
			.box-top{
				padding: 0 0 12rpx;
				border-bottom: 2rpx solid #EEEEEE;
				color: #ABABAB;
				.name{
					width: 60%;
				}
				.w15{
					width: 19%;
					text-align: center;
				}
				.batch{
					font-size: 24rpx;
					color: #000;
					image{
						width: 24rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}
				}
			}
			.box-b{
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				border: 2rpx solid #C0C0C0;
				border-radius: 8rpx;
				margin-top: 22rpx;
				padding: 0 20rpx;
				.box-b-l{
					width: 60%;
					.name{
						width: calc(100% - 90rpx);
					}
					.attrImg{
						width: 70rpx;
						height: 70rpx;
						border-radius: 8rpx;
						margin-right: 16rpx;
					}
				}
				.box-b-r{
					font-size: 24rpx;
					color: #FF0000;
					font-weight: 500;
					margin-right: 14rpx;
				}
				.arrow{
					width: 24rpx;
					height: 24rpx;
					transform: rotate(90deg);
				}
				.inp-box{
					text-align: center;
					height: 44rpx;
					border-radius: 12rpx;
					background: #DCDCDC;
					input{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.set-attr-val{
			width: 100%;
			padding: 0 40rpx 90rpx;
			border-radius: 60rpx 60rpx 0px 0px;
			background:#fff;
			box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.2);
			position: fixed;
			left: 0;
			bottom: -999rpx;
			transition: bottom .2s ease ;
			&.isShow{
				bottom: 0;
			}
			.title{
				font-size: 44rpx;
				color: #343434;
				text-align: center;
				padding: 44rpx 0;
			}
			.inp-box{
				display: flex;
				align-items: center;
				width: 100%;
				height: 72rpx;
				background: #F1F1F1;
				border-radius: 8rpx;
				padding: 0 40rpx;
				font-size: 32rpx;
				color: #000;
				margin-bottom: 28rpx;
				text{
					width: 200rpx;
					display: inline-block;
				}
			}
			.btn-box{
				display: flex;
				justify-content: space-around;
				view{
					width: 230rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: #E9E9E9;
					border-radius: 40rpx;
					font-size: 38rpx;
					color: #fff;
				}
				.cancel-btn{
					bakcground:#E9E9E9
				}
				.submit-btn{
					background: #000;
				}
			}
		}
		//弹出层
		.mask-box{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.7);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			.addattr-dialog{
				width: 680rpx;
				min-height: 590rpx;
				background: #FFFFFF;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				border-radius: 40rpx;
				padding: 80rpx 64rpx;
				.dialog-top{
					margin-bottom: 26rpx;
				}
				.close{
					font-size: 46rpx;
				}
				.a-name{
					width: 560rpx;
					// height: 104rpx;
					background: #F7F7F7;
					border-radius: 12rpx;
					padding: 30rpx;
				}
				.o-name-box{
					background: #f7f7f7;
					padding: 36rpx 42rpx 0;
					margin: 28rpx 0 0;
					border-radius: 12rpx;
					font-size: 26rpx;
					input{
						width: 80%;
					}
					.o-item-box{
						height: 74rpx;
						padding-bottom: 10rpx;
						margin-bottom: 10rpx;
						border-bottom: 2rpx solid #ececec;
					}
				}
				.add-option-btn{
					width: 100%;
					padding: 20rpx 0;
					text-align: center;
					color: #BFBFBF;
					background: #f7f7f7;
					// border-top: 2rpx solid #ececec;
					font-size: 26rpx;
				}
				.s-btn{
					width: 230rpx;
					height: 80rpx;
					background: #000;
					border-radius: 40rpx;
					text-align: center;
					line-height: 80rpx;
					color: #fff;
					font-size: 26rpx;
					margin: 70rpx auto 0;
				}
			}
		}
		.colB{
			color: #0932FF;
		}
	}
</style>