QianNiaoShop/pages/goods/SkuOneStore.vue

<template>
	<view class="sku-view">
		<!-- 是否是多规格 -->
		<view class="switch-view clearfix">
			<view class="float_left">启用多规格</view>
			<view class="float_right"><u-switch size="40" @change="specTypeChange" v-model="specType"></u-switch></view>
		</view>
		<view class="sku-name-view" v-if="specType">
			<view class="sku-ul">
				<view class="sku-li" v-for="(item, index) in spec_group" :key="index">
					<view class="sku-label clearfix">
						<view class="float_left">
							{{ item.groupSpec.specName }}
							<text class="custom-icon custom-icon-delete" @click="deletSpecGroup(index)"></text>
						</view>
						<view class="float_right sku-val-add-btn" @click="openSkuLabelPop('sku_val_pop', index, item.groupSpec.specId)">
							<text class="custom-icon custom-icon-xinzeng"></text>
							新增规格值
						</view>
					</view>

					<view class="sku-val-ul">
						<view class="sku-val-li" v-for="(ic, inc) in item.params" :key="inc">
							{{ ic.specName }}
							<text class="custom-icon custom-icon-delete" @click="deletSpecValue(index, inc)"></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="sku-group" v-if="specType">
			<view class="sku-group-tit clearfix">
				<text>规格组合</text>
				<view class="rest-btn float_right" @click="openSkuLabelPop('sku_label_pop')">添加规格组合</view>
			</view>
			<!-- 同步规格 -->
			<view class="sku-group-main">
				<view class="sku-top">
					<view class="sku-top-li">
						<view class="label">规格图片</view>
						<view class="sku-main"><upload :images="set.specImage ? [set.specImage] : []" @handleRemove="imgRemoveTotal" @uploadSuccess="uploadSuccessTotal" /></view>
						<u-button size="mini" type="primary" @click="synchro('specImage')">同步</u-button>
					</view>
					<view class="sku-top-li">
						<view class="label">是否销售</view>
						<view class="input-view"><u-switch size="30" v-model="set.isSale"></u-switch></view>
						<u-button size="mini" type="primary" @click="synchro('isSale')">同步</u-button>
					</view>
					<view class="sku-top-li">
						<view class="label">销售价</view>
						<view class="input-view">
							<input v-if="!set.enabledLadder" type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="set.salePrice" />
							<view class="other-view" v-else>
								<u-button size="mini" type="primary" @click="openLadder(-1, set)">{{ set.ladderPrice.length > 0 ? '已设置' : '去设置' }}</u-button>
							</view>
						</view>
					
						<u-button size="mini" type="primary" @click="synchro('salePrice')">同步</u-button>
					</view>
				</view>
				<view class="sku-top">
					<view class="sku-top-li">
						<view class="label">会员价</view>
						<view class="input-view"><input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="set.memberPrice" /></view>
						<u-button size="mini" type="primary" @click="synchro('memberPrice')">同步</u-button>
					</view>
					<view class="sku-top-li">
						<view class="label">市场价</view>
						<view class="input-view"><input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="set.marketPrice" /></view>
						<u-button size="mini" type="primary" @click="synchro('marketPrice')">同步</u-button>
					</view>
					<view class="sku-top-li">
						<view class="label">起订数量</view>
						<view class="input-view"><input type="number" placeholder="请输入" placeholder-class="input-pl" v-model="set.setNum" /></view>
						<u-button size="mini" type="primary" @click="synchro('setNum')">同步</u-button>
					</view>
				</view>
				<view class="sku-top">
					<view class="sku-top-li">
						<view class="label">启用阶梯价</view>
						<view class="input-view"><u-switch size="30" v-model="set.enabledLadder"></u-switch></view>
						<u-button size="mini" type="primary" @click="synchro('enabledLadder')">同步</u-button>
					</view>
					<view class="sku-top-li">
						<view class="label">商品条码</view>
						<view class="input-view"><input type="text" placeholder="请输入" placeholder-class="input-pl" v-model="set.barCode" /></view>
						<u-button size="mini" type="primary" @click="synchro('barCode')">同步</u-button>
					</view>
					<view class="sku-top-li">
						<view class="label">重量/g</view>
						<view class="input-view"><input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="set.weight" /></view>
						<u-button size="mini" type="primary" @click="synchro('weight')">同步</u-button>
					</view>
				</view>
			</view>
			<!-- 单个规格 -->
			<view>
				<view v-if="specMultipleUnit.length > 1" style="border-bottom: 1px solid #EEEEEE;">
					<u-tabs-swiper @change="tabChange" ref="tabs" name="unitName" :current="tab_current" :list="specMultipleUnit" :is-scroll="false"></u-tabs-swiper>
				</view>
				<view class="sku-group-main" v-for="(sku, index) in specMultipleUnit[tab_current].specMultiple" :key="index">
					<view class="sku-group-label clearfix">
						<view class="float_left">
							<text>{{ specMultipleUnit[tab_current].unitName }};</text>
							<text>{{ sku.specName }};</text>
						</view>
						<view class="float_right">
							<text class="default-label">默认:</text>
							<view class="default-switch"><u-switch size="30" v-model="sku.isDefault" @change="isDefaultChange($event, index)"></u-switch></view>
						</view>
					</view>
					<view class="sku-top">
						<view class="sku-top-li">
							<view class="label">规格图片</view>
							<view class="sku-main">
								<upload :images="sku.specImage ? [sku.specImage] : []" @uploadSuccess="uploadSuccess($event, index)" @handleRemove="imgRemove(index)" />
							</view>
						</view>
						<view class="sku-top-li">
							<view class="label">是否销售</view>
							<view class="other-view"><u-switch size="30" v-model="sku.isSale"></u-switch></view>
						</view>
						<view class="sku-top-li">
							<view class="label">销售价</view>
							<input v-if="!sku.enabledLadder" type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="sku.salePrice" />
							<view class="other-view" v-else>
								<u-button size="mini" type="primary" @click="openLadder(index, sku)">{{ sku.ladderPrice.length > 0 ? '已设置' : '去设置' }}</u-button>
							</view>
						</view>
					</view>
					<view class="sku-top">
						<view class="sku-top-li">
							<view class="label">会员价</view>
							<input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="sku.memberPrice" />
						</view>
						<view class="sku-top-li">
							<view class="label">市场价</view>
							<input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="sku.marketPrice" />
						</view>
						<view class="sku-top-li">
							<view class="label">起订数量</view>
							<input type="number" placeholder="请输入" placeholder-class="input-pl" v-model="sku.setNum" />
						</view>
					</view>
					<view class="sku-top">
						<view class="sku-top-li">
							<view class="label">启用阶梯价</view>
							<view class="other-view"><u-switch size="30" v-model="sku.enabledLadder"></u-switch></view>
						</view>
						<view class="sku-top-li">
							<view class="label">商品条码</view>
							<input type="text" placeholder="请输入" placeholder-class="input-pl" v-model="sku.barCode" />
						</view>
						<view class="sku-top-li">
							<view class="label">重量/g</view>
							<input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="sku.weight" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 不启用多规格 单位 -->
		<view class="sku-group unit-group" v-else>
			<view class="sku-group-main" v-for="(item, index) in unit_data" :key="index">
				<view class="sku-group-label clearfix">
					<text class="float_left">{{ item.unitName }}</text>
					<view class="float_right">
						<text class="default-label">默认:</text>
						<view class="default-switch"><u-switch size="30" v-model="item.isDefault" @change="isDefaultChange($event, index)"></u-switch></view>
					</view>
				</view>
				<view class="sku-top">
					<view class="sku-top-li">
						<view class="label">规格图片</view>
						<view class="sku-main" style="height: auto;">
							<upload :images="item.specImage ? [item.specImage] : []" @uploadSuccess="uploadSuccess($event, index)" @handleRemove="imgRemove(index)" />
						</view>
					</view>
					<view class="sku-top-li">
						<view class="label">是否销售</view>
						<view class="other-view"><u-switch size="30" v-model="item.isSale"></u-switch></view>
					</view>
					<view class="sku-top-li">
						<view class="label">销售价</view>
						<input v-if="!item.enabledLadder" type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="item.salePrice" />
						<view class="other-view" v-else>
							<u-button size="mini" type="primary" @click="openLadder(index, item)">{{ item.ladderPrice.length > 0 ? '已设置' : '去设置' }}</u-button>
						</view>
					</view>
				</view>
				<view class="sku-top">
					<view class="sku-top-li">
						<view class="label">会员价</view>
						<input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="item.memberPrice" />
					</view>
					<view class="sku-top-li">
						<view class="label">市场价</view>
						<input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="item.marketPrice" />
					</view>
					<view class="sku-top-li">
						<view class="label">起订数量</view>
						<input type="number" placeholder="请输入" placeholder-class="input-pl" v-model="item.setNum" />
					</view>
				</view>
				<view class="sku-top">
					<view class="sku-top-li">
						<view class="label">启用阶梯价</view>
						<view class="other-view"><u-switch size="30" v-model="item.enabledLadder"></u-switch></view>
					</view>
					<view class="sku-top-li">
						<view class="label">商品条码</view>
						<input type="text" placeholder="请输入" placeholder-class="input-pl" v-model="item.barCode" />
					</view>
					<view class="sku-top-li">
						<view class="label">重量/g</view>
						<input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="item.weight" />
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn"><view class="btn-min" @click="skuConfirm">确定</view></view>
		<!-- 选择规格组 -->
		<u-popup v-model="sku_label_pop" border-radius="16" mode="bottom">
			<view class="pop-view">
				<view class="handel-btn clearfix">
					<text class="float_left" @click="cancelSkuLabelPop('sku_label_pop')">取消</text>
					<text class="float_right" @click="specConfitm">确定</text>
				</view>
				<view class="pop-cont">
					<block v-for="(item, index) in spec_list" :key="index">
						<view class="sku-li clearfix" :class="[spec_group.find(its => its.groupSpec.specId === item.id) ? 'sku-on' : '']" @click="changeSpec(item.id)">
							<text class="sku-val-label float_left">{{ item.specName }}</text>
							<text class="custom-icon custom-icon-radio float_right" style="color: #999999;" v-if="spec_group.find(its => its.groupSpec.specId === item.id)"></text>
							<text class="custom-icon float_right" v-else :class="[temporary_spec_id === item.id ? 'custom-icon-xuanze_xuanzhong' : 'custom-icon-xuanze']"></text>
						</view>
					</block>
				</view>
			</view>
		</u-popup>
		<!-- 选择规格值 -->
		<u-popup v-model="sku_val_pop" border-radius="16" mode="bottom">
			<view class="pop-view">
				<view class="handel-btn clearfix">
					<text class="float_left" @click="cancelSkuLabelPop('sku_val_pop')">取消</text>
					<text class="float_right" @click="specValueConfirm">确定</text>
				</view>
				<view class="pop-cont">
					<view class="sku-li clearfix" v-for="(item, index) in spec_data_child" :key="index" @click="selSpecChild(item.id)">
						<text class="sku-val-label float_left">{{ item.specName }}</text>
						<text class="custom-icon float_right" :class="[temporary_spec_chid.indexOf(item.id) > -1 ? 'custom-icon-xuanze_xuanzhong' : 'custom-icon-xuanze']"></text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 阶梯价 -->
		<u-popup v-model="ladder_show" border-radius="16" mode="bottom">
			<view class="pop-view">
				<view class="handel-btn clearfix">
					<text class="float_left" @click="cancelSkuLabelPop('ladder_show')">取消</text>
					<text class="float_right" @click="ladderPriceConfirm">确定</text>
				</view>
				<view class="pop-cont">
					<view class="sku-li" v-for="(ladder, ladderI) in ladderPrice" :key="ladderI">
						<view class="input-view"><input disabled type="digit" v-model="ladder.from" /></view>
						至
						<view class="input-view">
							<input @blur="ladderBlur($event, ladderI)" type="digit" v-if="ladderI !== ladderPrice.length - 1" v-model="ladder.to" />
							<input v-else disabled value="∞" />
							<u-tag :text="unitName || '件'" mode="light" />
						</view>
						=
						<view class="input-view">
							<input type="digit" v-model="ladder.price" />
							<u-tag text="元" mode="light" />
							<u-icon
								name="shanchu"
								v-if="ladderPrice.length > 2 && ladderI !== ladderPrice.length - 1"
								color="#ff4501"
								custom-prefix="custom-icon"
								@click="delLadderPrice(ladderI)"
							></u-icon>
						</view>
					</view>
				</view>
				<view @click="addLadderprice" class="btn-view" :style="{ backgroundColor: ladderPrice.length > 2 ? '#999999' : '' }">新增</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import upload from '@/components/qiniu/QiniuUpload.vue';
const ladderPrice = [
	{
		from: 1,
		price: '',
		to: 2
	},
	{
		from: 3,
		price: '',
		to: 4
	},
	{
		from: 5,
		price: '',
		to: 999999999
	}
];
export default {
	components: {
		upload
	},
	data() {
		return {
			set: {
				specImage: '',
				enabledLadder: false,
				ladderPrice: [],
				salePrice: '',
				marketPrice: '',
				memberPrice:'',
				setNum: '',
				barCode: '',
				weight: '',
				isSale: 5
			},
			ladderPrice: [],
			ladder_show: false,
			specMultiple: [], //组合好的规格明细
			spec_group_index: '', // 当前规格下标
			spec_data_child: [],
			specImage: '',
			barCode: {},
			weight: {},
			specType: false,
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			sku_label_pop: false,
			sku_val_pop: false,
			unit_data: [],
			spec_list: [],
			spec_group: [], // 属性组
			specMultipleUnit: [],
			tab_current: 0,
			temporary_spec_id: '', // 临时存储规格id
			temporary_spec_chid: [], // 临时存储属性值id
			unit_data_obj: [] // 单位数据
		};
	},
	watch: {
		specType(val) {
			if (val) {
				// this.specGroupRest();
			}
		}
	},
	onLoad(options) {
		this.specType = parseInt(options.specType) === 2;
		// 存一份原始单位数据
		this.unit_data_obj = JSON.parse(options.unitData);
		this.getAllSpecManage();
		this.initialization(options);
	},
	methods: {
		// 初始化
		initialization(options) {
			const unitData = JSON.parse(options.unitData);
			console.log(unitData);
			if (!this.specType) {
				this.unit_data = unitData.map(item => {
					let params = {};
					let obj = {
						enabledLadder: false,
						isDefault: item.isDefault === 5,
						salePrice: '',
						marketPrice: '',
						memberPrice:'',
						setNum: 1,
						isSale: item.isSale !== 4,
						barCode: '',
						weight: '',
						specImage: '',
						ladderPrice: [],
						salePriceAreaType: 1,
						...item
					};
					if (item.salePrice) {
						params = {
							...obj,
							...item.salePrice,
							isDefault: item.isDefault === 5,
							isSale: item.isSale !== 4,
							enabledLadder: item.enabledLadder === 1
						};
					} else {
						params = { ...obj, enabledLadder: item.enabledLadder === 1 };
					}
					return params;
				});
				console.log(this.unit_data);
			} else {
				const obj = {};
				this.specMultiple = JSON.parse(options.specMultiple);
				this.spec_group = JSON.parse(options.specGroup).map(item => {
					return {
						groupSpec: item.groupSpec,
						params: item.params.map(sku => {
							return {
								specId: sku.specValueId,
								specName: sku.specValueName
							};
						})
					};
				});
				let specMultipleUnit = unitData.map(item => {
					return {
						unitId: item.unitId,
						unitName: item.unitName,
						conversion: item.conversion || 0,
						isMaster: item.isMaster,
						specMultiple: []
					};
				});
				console.log(this.specMultiple);
				specMultipleUnit.forEach(item => {
					this.specMultiple.forEach(sku => {
						if (sku.unitId === item.unitId) {
							const specName = sku.specGroup.map(spec => spec.specValueName).join('_');
							const specId = sku.specGroup.map(spec => spec.specValueId).join('_');
							const groupSpecName = sku.specGroup.map(spec => spec.specName).join('_');
							const groupSpecId = sku.specGroup.map(spec => spec.specId).join('_');
							const specMultipleItem = {
								isDefault: sku.isDefault === 5,
								isSale: sku.isSale !== 4,
								specImage: sku.specImage,
								enabledLadder: sku.salePrice.enabledLadder === 1,
								ladderPrice: sku.salePrice.ladderPrice,
								salePrice: sku.salePrice.salePrice,
								marketPrice: sku.salePrice.marketPrice,
								memberPrice: sku.memberPrice,
								setNum: sku.salePrice.setNum,
								barCode: sku.barCode,
								weight: sku.weight,
								specGroup: sku.specGroup,
								unitId: item.unitId,
								unitName: item.unitName,
								specName: specName,
								specId: specId,
								groupSpecName: groupSpecName,
								groupSpecId: groupSpecId
							};
							item.specMultiple.push(specMultipleItem);
						}
					});
				});
				this.specMultipleUnit = specMultipleUnit;
			}
		},
		// 单位切换
		tabChange(current) {
			this.tab_current = current;
		},
		// 获取属性列表
		getAllSpecManage() {
			this.$u.api
				.getAllSpecManage({
					page: 1,
					pageSize: 100
				})
				.then(res => {
					this.spec_list = res.data;
				});
		},
		// 默认属性切换
		isDefaultChange(value, unitIndex) {
			if (value) {
				if (!this.specType) {
					this.unit_data.forEach((item, index) => {
						if (index !== unitIndex) {
							item.isDefault = false;
						}
					});
				} else {
					this.specMultipleUnit.forEach((item,index)=>{
						if (index !== this.tab_current) {
							item.specMultiple.forEach(sku=>{
								sku.isDefault = false;
							})
						}else{
							item.specMultiple.forEach((sku,skuindex)=>{
								if (skuindex !== unitIndex) {
									sku.isDefault = false;
								}
							})
						}
					})
				}
			}
		},
		//弹窗打开
		openSkuLabelPop(key, index, specId) {
			this[key] = true;
			if (key === 'sku_val_pop') {
				this.spec_group_index = index;
				const obj = this.spec_list.find(item => item.id === specId);
				this.spec_data_child = obj.child || [];
				this.temporary_spec_chid = this.spec_group[index].params.map(item => item.specId);
			}
		},
		// 弹窗取消
		cancelSkuLabelPop(key) {
			this[key] = false;
		},
		// 单位切换
		tabsChange(index) {
			this.current = index;
		},
		// 图片上传成功
		uploadSuccess(imgUrl, index) {
			if (this.specType) {
				this.specMultipleUnit[this.tab_current].specMultiple[index].specImage = imgUrl;
			} else {
				this.unit_data[index].specImage = imgUrl;
			}
		},
		// 删除图片
		imgRemove(index) {
			if (this.specType) {
				this.specMultipleUnit[this.tab_current].specMultiple[index].specImage = '';
			} else {
				this.unit_data[index].specImage = '';
			}
		},
		// 同步规格上传成功
		uploadSuccessTotal(imgUrl) {
			this.set.specImage = imgUrl;
		},
		// 同步规格图片删除
		imgRemoveTotal(arr) {
			this.set.specImage = '';
		},
		// 选择规格组
		changeSpec(id) {
			if (this.spec_group.find(its => its.groupSpec.specId === id)) {
				return;
			}
			if (this.temporary_spec_id !== id) {
				this.temporary_spec_id = id;
			}
		},
		// 切换多规格开关
		specTypeChange(val) {
			if (val && !this.specMultipleUnit.length) {
				this.specMultipleUnit = this.unit_data_obj.map(item => {
					return {
						unitId: item.unitId,
						unitName: item.unitName,
						conversion: item.conversion || 0,
						isMaster: item.isMaster,
						specMultiple: []
					};
				});
			}
		},
		// 选择属性名
		specConfitm() {
			const obj = this.spec_list.find(item => item.id === this.temporary_spec_id);
			if (obj) {
				this.spec_group.push({
					groupSpec: {
						specName: obj.specName,
						specId: obj.id
					},
					params: []
				});
			}
			this.sku_label_pop = false;
			this.temporary_spec_id = '';
		},

		// 选择属性值
		selSpecChild(id) {
			const index = this.temporary_spec_chid.indexOf(id);
			if (index === -1) {
				this.temporary_spec_chid.push(id);
			} else {
				this.temporary_spec_chid.splice(index, 1);
			}
		},
		// 选择属性值确定
		specValueConfirm() {
			const target = this.$u.deepClone(this.temporary_spec_chid);
			this.spec_group[this.spec_group_index].params = target.map(item => {
				const specName = this.spec_data_child.find(itemf => itemf.id === item).specName;
				return {
					specId: item,
					specName: specName
				};
			});
			this.sku_val_pop = false;
			this.temporary_spec_chid = [];
			this.specGroupRest();
		},
		// 重排规格组合
		specGroupRest() {
			const skuArr = this.spec_group.map(item => {
				item.params = item.params.map(itemP => {
					return {
						...itemP,
						groupSpecName: item.groupSpec.specName,
						groupSpecId: item.groupSpec.specId
					};
				});
				return item.params;
			});
			let skuArrDo = [];
			if (skuArr.length) {
				skuArrDo = this.doExchange(skuArr);
			}
			// 备份一份规格明细，用来填充重排规格组之前的图片
			const cloneUnitData = this.$u.deepClone(this.specMultipleUnit);
			this.specMultipleUnit = this.specMultipleUnit.map((item, index) => {
				const cloneSpecGroup = cloneUnitData[index].specMultiple || [];
				return {
					...item,
					specMultiple: skuArrDo.map(itemSp => {
						const indexSS = cloneSpecGroup.findIndex(itemC => itemC.id === itemSp.id);
						let obj = {};
						if (indexSS > -1) {
							obj = {
								...itemSp,
								isDefault: cloneSpecGroup[indexSS].isDefault,
								isSale: cloneSpecGroup[indexSS].isSale !== 4,
								specImage: cloneSpecGroup[indexSS].specImage,
								enabledLadder: cloneSpecGroup[indexSS].enabledLadder === 1,
								ladderPrice: cloneSpecGroup[indexSS].ladderPrice,
								salePrice: cloneSpecGroup[indexSS].salePrice,
								marketPrice: cloneSpecGroup[indexSS].marketPrice,
								memberPrice: cloneSpecGroup[indexSS].memberPrice,
								setNum: cloneSpecGroup[indexSS].setNum,
								barCode: cloneSpecGroup[indexSS].barCode,
								weight: cloneSpecGroup[indexSS].weight
							};
						} else {
							obj = {
								...itemSp,
								isDefault: itemSp.isDefault || false,
								isSale: itemSp.isSale || 5,
								specImage: itemSp.specImage || '',
								enabledLadder: itemSp.enabledLadder || false,
								ladderPrice: itemSp.ladderPrice || [],
								salePrice: itemSp.salePrice || 0,
								marketPrice: itemSp.marketPrice || 0,
								memberPrice: itemSp.memberPrice || 0,
								setNum: itemSp.setNum || 1,
								barCode: itemSp.barCode || '',
								weight: itemSp.weight || 0
							};
						}
						return obj;
					})
				};
			});
		},
		// 规格组合
		doExchange(doubleArrays) {
			console.log(doubleArrays);
			const len = doubleArrays.length;
			if (len >= 2) {
				const len1 = doubleArrays[0].length;
				const len2 = doubleArrays[1].length;
				const newlen = len1 * len2;
				const temp = new Array(newlen);
				let index = 0;
				for (let i = 0; i < len1; i++) {
					for (let j = 0; j < len2; j++) {
						temp[index] = {
							groupSpecId: doubleArrays[0][i].groupSpecId + '_' + doubleArrays[1][j].groupSpecId,
							groupSpecName: doubleArrays[0][i].groupSpecName + '_' + doubleArrays[1][j].groupSpecName,
							specId: doubleArrays[0][i].specId + '_' + doubleArrays[1][j].specId,
							specName: doubleArrays[0][i].specName + '_' + doubleArrays[1][j].specName,
							specImage: '',
							setNum: 1,
							isSale: true,
							salePrice: 0,
							enabledLadder: 0,
							ladderPrice: [],
							marketPrice: 0,
							memberPrice:'',
							barCode: '',
							weight: '',
							isDefault: false
						};
						index++;
					}
				}
				let newArray = new Array(len - 1);
				newArray[0] = temp;
				if (len > 2) {
					let _count = 1;
					for (let i = 2; i < len; i++) {
						newArray[_count] = doubleArrays[i];
						_count++;
					}
				}
				return this.doExchange(newArray);
			} else {
				return doubleArrays[0].map(item => {
					return {
						...item,
						specImage: '',
						setNum: 1,
						isSale: true,
						barCode: '',
						weight: '',
						isDefault: false,
						salePrice: 0,
						enabledLadder: false,
						ladderPrice: [],
						marketPrice: 0,
						memberPrice:'',
					};
				});
			}
		},
		// 删除规格组
		deletSpecGroup(index) {
			this.spec_group.splice(index, 1);
			this.specGroupRest();
		},
		// 删除规格值
		deletSpecValue(index, iVal) {
			this.spec_group[index].params.splice(iVal, 1);
			this.specGroupRest();
		},
		// 同步
		synchro(key) {
			this.specMultipleUnit[this.tab_current].specMultiple.forEach(item => {
				item[key] = this.set[key];
			});
		},
		// 阶梯价输入框失去焦点
		ladderBlur(e, index) {
			let val = Number(e.detail.value);
			const target = this.$u.deepClone(this.ladderPrice);
			if (val <= target[index].from) {
				val = target[index].from + 1;
				target[index].to = val;
			}
			target[index + 1].from = val + 1;
			if (index === 0) {
				target[index + 1].to = val + 2;
				if (target[index + 2]) {
					target[index + 2].from = val + 3;
				}
			}
			this.ladderPrice = target;
		},
		// 阶梯价弹窗确定
		ladderPriceConfirm() {
			if (this.sku_index === -1) {
				this.set.ladderPrice = this.ladderPrice;
			} else {
				if (this.specType) {
					// 多规格
					this.specMultipleUnit[this.tab_current].specMultiple[this.sku_index].ladderPrice = this.ladderPrice;
				} else {
					// 单规格
					this.unit_data[this.sku_index].ladderPrice = this.ladderPrice;
				}
			}
			this.ladder_show = false;
		},
		// 阶梯价删除
		delLadderPrice(index) {
			const target = this.$u.deepClone(this.ladderPrice);
			target.splice(index, 1);
			target[0].from = 1;
			target[target.length - 1].from = target[0].to + 1;
			this.ladderPrice = target;
		},
		// 打开阶梯价弹窗
		openLadder(index, row) {
			this.sku_index = index;
			this.ladderPrice = row.ladderPrice.length > 0 ? row.ladderPrice : this.$u.deepClone(ladderPrice);
			this.ladder_show = true;
		},
		// 增加一条阶梯价
		addLadderprice() {
			if (this.ladderPrice.length >= 3) {
				return;
			}
			const target = this.$u.deepClone(this.ladderPrice);
			if (!target.length) {
				target.push({
					from: 1,
					price: '',
					to: 2
				});
			} else {
				const upL = target[0];
				target.splice(1, '', {
					from: upL.to + 1,
					price: '',
					to: upL.to + 2
				});
				if (target.length === 3) {
					target[target.length - 1].from = upL.to + 3;
				}
			}
			this.ladderPrice = target;
		},
		// 规格确定
		skuConfirm() {
			if (!this.specType) {
				const specMultiple = this.unit_data.map(item => {
					const salePriceS = {
						conversion: item.conversion || 0,
						unitName: item.unitName,
						unitId: item.unitId,
						isMaster: item.isMaster,
						deleteStatus: 4,
						enabledLadder: item.enabledLadder ? 1 : 0,
						salePriceAreaType: 1,
						salePrice: item.salePrice,
						ladderPrice: item.ladderPrice,
						marketPrice: item.marketPrice,
						memberPrice:item.memberPrice,
						setNum: item.setNum
					};
					return {
						barCode: item.barCode,
						weight: item.weight,
						unitId: item.unitId,
						unitName: item.unitName,
						isMaster: item.isMaster,
						conversion: item.conversion || 0,
						specImage: item.specImage,
						specGroup: [],
						salePrice: salePriceS,
						customerTypePrice: [],
						customerPrice: [],
						isDefault: item.isDefault ? 5 : 4
					};
				});
				console.log('specMultiple', specMultiple);
				this._prePage().form.specMultiple = specMultiple;
			} else {
				console.log(this.specMultipleUnit);
				let specMultiple = [];
				this.specMultipleUnit.forEach(item => {
					item.specMultiple.forEach(sku => {
						const groupSpecName = sku.groupSpecName.split('_');
						const groupSpecId = sku.groupSpecId.toString().split('_');
						const specName = sku.specName.split('_');
						const specId = sku.specId.toString().split('_');

						const specGroup = groupSpecName.map((item, index) => {
							return {
								specId: groupSpecId[index],
								specName: item,
								specValueName: specName[index],
								specValueId: specId[index]
							};
						});
						specMultiple.push({
							barCode: sku.barCode,
							weight: sku.weight,
							isDefault: sku.isDefault ? 5 : 4,
							unitId: item.unitId,
							unitName: item.unitName,
							isMaster: item.isMaster,
							conversion: item.conversion,
							specImage: sku.specImage,
							specGroup: specGroup,
							salePrice: {
								unitName: item.unitName,
								unitId: item.unitId,
								isMaster: item.isMaster,
								conversion: item.conversion,
								deleteStatus: 4,
								enabledLadder: sku.enabledLadder ? 1 : 0,
								salePriceAreaType: 1,
								salePrice: sku.salePrice,
								ladderPrice: sku.ladderPrice,
								marketPrice: sku.marketPrice,
								memberPrice:sku.memberPrice,
								setNum: sku.setNum,
								isSale: sku.isSale
							},
							customerPrice: [],
							customerTypePrice: []
						});
					});
				});
				const specGroup = this.spec_group.map(item => {
					return {
						groupSpec: item.groupSpec,
						params: item.params.map(sku => {
							return {
								specValueId: sku.specId,
								specValueName: sku.specName
							};
						})
					};
				});
				console.log('specMultiple', specMultiple);
				console.log('spec_group', specGroup);
				this._prePage().form.specMultiple = specMultiple;
				this._prePage().form.specGroup = specGroup;
			}
			this._prePage().form.specType = this.specType ? 2 : 1;

			console.log('specType', this.specType);
			// return
			uni.navigateBack();
		}
	}
};
</script>

<style scoped lang="scss">
.sku-view {
	padding-bottom: 140rpx;
	.switch-view {
		line-height: 100rpx;
		padding: 0 24rpx;
		background-color: #ffffff;
		border-bottom: 1px solid #f5f5f5;
	}
}
.sku-name-view {
	padding: 0 24rpx;
	.sku-ul {
		padding-top: 30rpx;
		.sku-li {
			margin-bottom: 30rpx;
			.sku-label {
				.float_left {
					padding: 0 20rpx;
					line-height: 50rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					display: inline-block;
					border: 1px dotted $uni-color-primary;
					color: $uni-color-primary;
					.custom-icon {
						margin-left: 20rpx;
					}
				}

				.sku-val-add-btn {
					font-size: 24rpx;
					color: $uni-color-primary;
					.custom-icon-xinzeng {
						font-size: 24rpx;
					}
				}
			}
			.sku-val-ul {
				padding-top: 14rpx;
				.sku-val-li {
					padding: 0 20rpx;
					line-height: 50rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					display: inline-block;
					background-color: $uni-color-primary;
					color: #ffffff;
					margin-right: 10rpx;
					.custom-icon {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
}
.sku-group {
	.sku-group-tit {
		padding: 20rpx 24rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		.rest-btn {
			line-height: 50rpx;
			background-color: $uni-color-primary;
			border-radius: 6rpx;
			padding: 0 20rpx;
			color: #ffffff;
		}
	}
	.sku-group-main {
		background-color: #ffffff;
		margin-bottom: 30rpx;
		.sku-group-label {
			line-height: 74rpx;
			height: 70rpx;
			padding: 0 46rpx;
			position: relative;
			border-bottom: 1px solid #f5f5f5;
			.float_right {
				height: 68rpx;
				line-height: 68rpx;
				.default-label {
					font-size: 24rpx;
					margin-right: 24rpx;
				}
				.default-switch {
					display: inline-block;
					vertical-align: middle;
					transform: translateY(4rpx);
				}
			}
			&::before {
				content: '';
				position: absolute;
				display: block;
				width: 6rpx;
				height: 34rpx;
				background-color: $uni-color-primary;
				left: 24rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.sku-top {
			font-size: 24rpx;
			padding: 20rpx 0;
			display: flex;
			width: 750rpx;
			border-bottom: 1px solid #f5f5f5;
			&:last-child {
				border-bottom: 0 none;
			}
			.sku-top-li {
				flex: 5;
				text-align: center;
				border-right: 1px solid #f5f5f5;
				input {
					border: 1px solid #f5f5f5;
					line-height: 60rpx;
					height: 60rpx;
					display: block;
					margin: 20rpx;
				}
				.other-view {
					margin: 20rpx 0;
					height: 60rpx;
					line-height: 60rpx;
				}
				.label {
					.yuan {
						color: $uni-color-primary;
					}
				}
				.sku-main {
					margin: 20rpx 0;
				}
				.input-view {
					margin: 20rpx 0;
					// min-height: 128rpx;
					view {
						padding-bottom: 10rpx;
						text {
							margin-right: 10rpx;
						}
						input {
							border: 1px solid #f5f5f5;
							line-height: 50rpx;
							height: 50rpx;
							width: 150rpx;
							vertical-align: middle;
							display: inline-block;
						}
					}
				}
				&:last-child {
					border-bottom: 0 none;
				}
			}
		}
	}
}
.unit-group {
	margin-top: 20rpx;
	.sku-group-main {
		.sku-top {
			padding-bottom: 0;
			.sku-top-li {
				input {
					border: 1px solid #f5f5f5;
					line-height: 60rpx;
					height: 60rpx;
					display: block;
					margin: 20rpx;
				}
				.sku-main {
					line-height: 60rpx;
					height: 60rpx;
					margin: 20rpx;
				}
			}
		}
	}
}
.pop-view {
	.handel-btn {
		padding: 0 30rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #f5f5f5;
		.float_right {
			color: $uni-color-primary;
		}
	}
	.pop-cont {
		max-height: 800rpx;
		overflow: auto;
		padding: 0 30rpx;
		.sku-li {
			line-height: 80rpx;
			border-bottom: 1px solid #f5f5f5;
			.custom-icon {
				font-size: 40rpx;
				color: $uni-color-primary;
			}
			.input-view {
				display: inline-block;
				margin-right: 10rpx;
				input {
					width: 120rpx;
					border: 1px solid #eee;
					border-radius: 4rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					display: inline-block;
					vertical-align: middle;
					margin: 0 10rpx;
				}
			}
		}
		.sku-on {
			color: #999999;
		}
	}
	.btn-view {
		height: 80rpx;
		margin-top: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
		background-color: $uni-color-primary;
		&.disabled-btn {
			background-color: #999999;
		}
	}
}
</style>