QianNiaoShop/pages/goods/sku.vue

<template>
	<view class="sku-view">
		<!-- 是否是多规格 -->
		<view class="switch-view clearfix">
			<view class="float_left">启用多规格</view>
			<view class="float_right"><u-switch size="40" 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.specValueName }}
							<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="specImage ? [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">
							<view v-for="(item, index) in unit_data" :key="index">
								<text>{{ item.unitName }}:</text>
								<input type="text" placeholder="请输入" placeholder-class="input-pl" v-model="barCode[item.unitId]" />
							</view>
						</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">
							<view v-for="(item, index) in unit_data" :key="index">
								<text>{{ item.unitName }}:</text>
								<input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="weight[item.unitId]" />
							</view>
						</view>
						<u-button size="mini" type="primary" @click="synchro('weight')">同步</u-button>
					</view>
				</view>
			</view>
			<!-- 单个规格 -->
			<view class="sku-group-main" v-for="(sku, index) in specMultiple" :key="index">
				<view class="sku-group-label">{{ sku.specValueName }}</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="input-view">
							<view v-for="(item, index) in unit_data" :key="index">
								<text>{{ item.unitName }}:</text>
								<input type="text" placeholder="请输入" placeholder-class="input-pl" v-model="sku.barCode[item.unitId]" />
							</view>
						</view>
					</view>
					<view class="sku-top-li">
						<view class="label">重量/g</view>
						<view class="input-view">
							<view v-for="(item, index) in unit_data" :key="index">
								<text>{{ item.unitName }}:</text>
								<input type="digit" placeholder="请输入" placeholder-class="input-pl" v-model="sku.weight[item.unitId]" />
							</view>
						</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">{{ item.unitName }}</view>
				<view class="sku-top">
					<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 class="sku-top-li">
						<view class="label">默认属性</view>
						<view class="sku-main">
							<u-switch size="30" v-model="item.isDefault" @change='unit'></u-switch>
						</view>
					</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-weixuanze']"
						></text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import upload from '@/components/qiniu/QiniuUpload.vue';
export default {
	components: {
		upload
	},
	data() {
		return {
			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: [], // 属性组
			temporary_spec_id: '', // 临时存储规格id
			temporary_spec_chid: [] // 临时存储属性值id
		};
	},
	watch: {
		specType(val) {
			if (val) {
				this.specGroupRest();
			}
		}
	},
	onLoad(options) {
		this.specType = parseInt(options.specType) === 2;
		this.unit_data = JSON.parse(options.unitData);
		// console.log(this.unit_data);
		const obj = {};
		this.unit_data.forEach(item => {
			obj[item.unitId] = '';
			item.isDefault = item.isDefault === 5;
		});
		this.barCode = this.$u.deepClone(obj);
		this.weight = this.$u.deepClone(obj);
		if (this.specType) {
			this.specMultiple = JSON.parse(options.specMultiple).map(item => {
				const groupSpecId = item.specGroup.map(itemP => itemP.specId).join('_');
				const groupSpecName = item.specGroup.map(itemP => itemP.specName).join('_');
				const specValueId = item.specGroup.map(itemP => itemP.specValueId).join('_');
				const specValueName = item.specGroup.map(itemP => itemP.specValueName).join('_');
				return {
					...item,
					groupSpecId: groupSpecId,
					groupSpecName: groupSpecName,
					specValueId: specValueId,
					specValueName: specValueName
				};
			});
			this.spec_group = JSON.parse(options.specGroup);
		}
		this.getAllSpecManage();
	},

	methods: {
		// 获取属性列表
		getAllSpecManage() {
			this.$u.api
				.getAllSpecManage({
					page: 1,
					pageSize: 100
				})
				.then(res => {
					this.spec_list = res.data;
				});
		},
		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);
				// console.log(obj, specId);
				this.spec_data_child = obj.child || [];
				this.temporary_spec_chid = this.spec_group[index].params.map(item => item.specValueId);
			}
		},
		cancelSkuLabelPop(key) {
			this[key] = false;
		},
		// 单位切换
		tabsChange(index) {
			this.current = index;
		},
		uploadSuccess(imgUrl, index) {
			this.specMultiple[index].specImage = imgUrl;
		},
		imgRemove(index) {
			this.specMultiple[index].specImage = '';
		},
		uploadSuccessTotal(imgUrl) {
			this.specImage = imgUrl;
		},
		imgRemoveTotal(arr) {
			this.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;
			}
		},
		// 选择属性名
		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 specValueName = this.spec_data_child.find(itemf => itemf.id === item).specName;
				return {
					specValueId: item,
					specValueName: specValueName
				};
			});
			this.sku_val_pop = false;
			this.temporary_spec_chid = [];
			this.specGroupRest();
		},
		//重排规格组合
		specGroupRest() {
			// 备份一份规格明细，用来填充重排规格组之前的数据
			const cloneSpecGroup = this.$u.deepClone(this.specMultiple);
			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;
			});

			this.specMultiple = this.doExchange(skuArr);
			this.specMultiple.forEach(item => {
				const obj = cloneSpecGroup.find(itemC => itemC.groupSpecId === item.groupSpecId);
				if (obj) {
					item.barCode = obj.barCode;
					item.weight = obj.weight;
					item.specImage = obj.specImage;
				}
			});
		},
		// 规格组合
		doExchange(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++) {
					let item = doubleArrays[0][i];
					for (let j = 0; j < len2; j++) {
						let item_J = doubleArrays[1][j];
						temp[index] = {
							groupSpecId: item.groupSpecId + '_' + item_J.groupSpecId,
							groupSpecName: item.groupSpecName + '_' + item_J.groupSpecName,
							specValueId: item.specValueId + '_' + item_J.specValueId,
							specValueName: item.specValueName + '_' + item_J.specValueName
						};
						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 {
				if (!doubleArrays.length) {
					return [];
				}
				const obj = {};
				this.unit_data.forEach(item => {
					obj[item.unitId] = '';
				});
				return doubleArrays[0].map(item => {
					return {
						...item,
						specImage: '',
						barCode: this.$u.deepClone(obj),
						isDefault: this.$u.deepClone(obj),
						weight: this.$u.deepClone(obj)
					};
				});
			}
		},
		// 删除规格组
		deletSpecGroup(index) {
			this.spec_group.splice(index, 1);
			this.specGroupRest();
		},
		// 删除规格组
		deletSpecValue(index, iVal) {
			this.spec_group[index].params.splice(index, 1);
			this.specGroupRest();
		},
		// 同步
		synchro(key) {
			this.specMultiple.forEach(item => {
				item[key] = this[key];
			});
		},
		// 规格确定
		skuConfirm() {
			if (!this.specType) {
				const data = this.unit_data.map(item => {
					return {
						...item,
						isDefault: item.isDefault ? 5 : 4
					};
				});
				this._prePage().form.unitData = data;
			} else {
				const specMultiple = this.specMultiple.map(item => {
					let specGroup = [];
					if (item.groupSpecName.indexOf('_') > -1) {
						const specIdArr = item.groupSpecId.split('_');
						const specNameArr = item.groupSpecName.split('_');
						const specValueNameArr = item.specValueName.split('_');
						const specValueIdArr = item.specValueId.split('_');
						specGroup = specNameArr.map((im, index) => {
							return {
								specId: specIdArr[index],
								specName: specNameArr[index],
								specValueName: specValueNameArr[index],
								specValueId: specValueIdArr[index]
							};
						});
					} else {
						specGroup = [
							{
								specId: item.groupSpecId,
								specName: item.groupSpecName,
								specValueName: item.specValueName,
								specValueId: item.specValueId
							}
						];
					}
					return {
						specImage: item.specImage,
						barCode: item.barCode,
						isDefault: item.isDefault,
						weight: item.weight,
						specGroup: specGroup
					};
				});
				// console.log(specMultiple);
				this._prePage().form.specMultiple = specMultiple;
				this._prePage().form.specGroup = this.spec_group;
			}
			this._prePage().form.specType = this.specType ? 2 : 1;
			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;
			&::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;
			.sku-top-li {
				flex: 5;
				text-align: center;
				border-right: 1px solid #f5f5f5;
				.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;
			}
			.custom-icon-xuanze {
				color: #999999;
			}
			.custom-icon-weixuanze {
				color: #999999;
			}
			.custom-icon-xuanze1 {
				color: $uni-color-primary;
			}
			.custom-icon-radio {
				color: $uni-color-primary;
			}
		}
		.sku-on {
			color: #999999;
		}
	}
}
</style>