商品多规格

最新推荐文章于 2024-06-09 20:17:27 发布
最新推荐文章于 2024-06-09 20:17:27 发布
阅读量94 收藏
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijiajun98/article/details/130901151
版权

页面效果

 

起始数据格式

attribute: [
				{
					name: '颜色',
					value: ['绿色', '黄色'],
					title: '',
					show: false
				},
				{
					name: '大小',
					value: ['大', '中'],
					title: '',
					show: false
				}
			],

要的数据格式

[
    {
        "createTime":"2023-05-27 14:39:31",
        "updateTime":"2023-05-27 14:39:31",
        "id":6339,
        "goodsId":211,
        "specificationName":"{\"颜色\":\"绿色\",\"大小\":\"大\"}",
        "specificationImages":"80",
        "scribePrice":100,
        "dealPrice":50,
        "stockNum":45,
        "specificationNumber":857,
        "position":"头部"
    },
    {
        "createTime":"2023-05-27 14:39:31",
        "updateTime":"2023-05-27 14:39:31",
        "id":6340,
        "goodsId":211,
        "specificationName":"{\"颜色\":\"绿色\",\"大小\":\"中\"}",
        "specificationImages":"80",
        "scribePrice":100,
        "dealPrice":50,
        "stockNum":45,
        "specificationNumber":857,
        "position":"头部"
    },
    {
        "createTime":"2023-05-27 14:39:31",
        "updateTime":"2023-05-27 14:39:31",
        "id":6341,
        "goodsId":211,
        "specificationName":"{\"颜色\":\"黄色\",\"大小\":\"大\"}",
        "specificationImages":"80",
        "scribePrice":100,
        "dealPrice":50,
        "stockNum":45,
        "specificationNumber":857,
        "position":"头部"
    },
    {
        "createTime":"2023-05-27 14:39:31",
        "updateTime":"2023-05-27 14:39:31",
        "id":6342,
        "goodsId":211,
        "specificationName":"{\"颜色\":\"黄色\",\"大小\":\"中\"}",
        "specificationImages":"80",
        "scribePrice":100,
        "dealPrice":50,
        "stockNum":45,
        "specificationNumber":857,
        "position":"头部"
    }
]

完整代码

<template>
	<view>
		<view class="title">
			<view class="title-left">产品规格设置</view>
			<view class="button" @tap="addAttribute()">添加规格项目</view>
		</view>
		<view class="guige" v-for="(item, index) in attribute">
			<view class="guige-name">
				<u--input placeholder="请输入规格名" border="surround" v-model="item.name"></u--input>
				<!-- <view class="btn" @tap="addName"><u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon></view> -->
			</view>
			<view class="guige-value">
				<view class="tagList">
					<u-tag v-for="tag in item.value" :text="tag" type="success" plain size="large" closable @close="close(tag, index)" :customStyle="{ width: '50rpx' }"></u-tag>
				</view>
				<view class="inputValue">
					<u--input placeholder="请输入规格值" border="surround" :customStyle="{ borderRight: 'none' }" v-model="item.title"></u--input>
					<view class="btn" @tap="addValue(index)"><u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon></view>
				</view>
			</view>
			<view class="del" @tap="delAttribute(index)"><u-icon name="trash" color="red" size="28"></u-icon></view>
		</view>
		<view class="box" v-for="item in tableData">
			<view class="box-name" style="">{{ item.specificationName }}</view>
			<view class="box-title" style="">
				<view class="btn">成交价:</view>
				<u--input placeholder="" border="surround" v-model="item.dealPrice" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">划线价:</view>
				<u--input placeholder="" border="surround" v-model="item.scribePrice" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">库存:</view>
				<u--input placeholder="" border="surround" v-model="item.stockNum" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">规格编号:</view>
				<u--input placeholder="" border="surround" v-model="item.specificationNumber" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">库存位置:</view>
				<u--input placeholder="" border="surround" v-model="item.position" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
			<view class="box-title" style="">
				<view class="btn">图片:</view>
				<u--input placeholder="" border="surround" v-model="item.specificationImages" :customStyle="{ borderLeft: 'none' }"></u--input>
			</view>
		</view>
		<view class="footer" v-if="tableData.length"><view class="footer-c" @tap="submit()">提交</view></view>
	</view>
</template>

<script>
import { insertPlugsGoodsAttributeKey, insertPlugsGoodsAttributeValue, insertPlugsGoodsSpecification, searchPlugsGoodsSpecificationByGoodsId } from '../../../../utils/api.js';
export default {
	data() {
		return {
			close3: true,
			attribute: [
				// {
				// 	name: '颜色',
				// 	value: ['绿色', '黄色'],
				// 	title: '',
				// 	show: false
				// },
				// {
				// 	name: '大小',
				// 	value: ['大', '中'],
				// 	title: '',
				// 	show: false
				// }
			],
			tableData: [],
			goodsId: ''
		};
	},
	onLoad(option) {
		console.log(option, 444);
		this.goodsId = option.id;
	},
	onShow() {
		this.getguige();
	},

	methods: {
		getguige() {
			let data = {
				goodsId: this.goodsId
			};
			searchPlugsGoodsSpecificationByGoodsId(data).then(res => {
				if (res.code == 200) {
					let a = Object.keys(res.body.specificationInfo);
					let arr = [];
					for (let item of res.body.specificationInfo) {
						let obj1 = {
							name: Object.keys(item)[0],
							value: [],
							title: '',
							show: false,
							children: Object.values(item)[0]
						};
						console.log(item, 456);
						arr.push(obj1);
					}
					arr.forEach(item=>{
						console.log(item.children,7777);
						item.children.forEach(ress=>{
							console.log(ress.attributeValue);
							item.value.push(ress.attributeValue)
						})
					})
					console.log(arr,789);
					this.attribute=arr
					this.tableData=res.body.plugsGoodsSpecificationList
				}
			});
		},

		addAttribute() {
			let obj = {
				name: '',
				value: [],
				title: '',
				show: false
			};
			this.attribute.push(obj);
		},
		addValue(index) {
			if (this.attribute[index].name == '') {
				console.log(444);
				uni.showToast({
					icon: 'none',
					title: '规格名不能为空'
				});
				return;
			}
			if (this.attribute[index].title == '') {
				console.log(444);
				uni.showToast({
					icon: 'none',
					title: '规格值不能为空'
				});
				return;
			}
			this.attribute[index].value.push(this.attribute[index].title);
			this.attribute[index].title = '';
			console.log(this.attribute[index].title);
			console.log(this.attribute[index]);

			this.getTbable();
		},
		delAttribute(index) {
			this.attribute.splice(index, 1);
			this.getTbable();
		},
		getTbable() {
			let obj = {};
			for (let sum = 0; sum < this.attribute.length; sum++) {
				obj[this.attribute[sum].name] = this.attribute[sum].value;
			}
			this.tableData = this.permutation(obj);
			let arr = [];
			this.tableData.forEach((item, index) => {
				console.log(JSON.stringify(item));
				let name = {
					specificationName: ''
				};
				name.specificationName = JSON.stringify(item);
				arr.push(name);
			});

			arr.forEach((item, index) => {
				item.scribePrice = 100;
				item.dealPrice = 50;
				item.stockNum = 45;
				item.specificationNumber = '857';
				item.specificationImages = 80;
				item.position = '头部';
				item.goodsId = this.goodsId;
			});
			this.tableData = arr;
		},
		close(tag, index) {
			console.log(tag, index);
			this.attribute[index].value.splice(this.attribute[index].value.indexOf(tag), 1);
			this.getTbable();
		},

		// 数据组合方法
		permutation(source) {
			const result = [];
			const _result = {};
			const convert = (arr, index) => {
				for (let i = 0; i < source[arr[index]].length; i++) {
					if (source[arr[index]][i]) {
						_result[arr[index]] = source[arr[index]][i];
						if (index === arr.length - 1) {
							result.push(JSON.parse(JSON.stringify(_result)));
						} else {
							convert(arr, index + 1);
						}
					}
				}
			};
			convert(Object.keys(source), 0);

			return result;
		},

		submit() {
			// console.log(this.attribute);
			// console.log(this.tableData);
			this.attribute.forEach(item => {
				let data = {
					attributeName: item.name,
					goodsId: this.goodsId
				};
				insertPlugsGoodsAttributeKey(data).then(res => {
					if (res.code == 200) {
						if (item.name === res.body.attributeName) {
							item.id = res.body.id;
						}
						item.value.forEach((ress, indexx) => {
							console.log(ress);
							let data = {
								attributeValue: ress,
								attributeKeyId: item.id
							};
							insertPlugsGoodsAttributeValue(data).then(res => {
								if (res.code == 200) {
								}
							});
						});
					}
				});
			});
			setTimeout(() => {
				insertPlugsGoodsSpecification(this.tableData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});

						setTimeout(() => {
							uni.navigateBack({ delta: 1 });
						}, 500);
					}
				}, 1000);
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding: 20rpx;
	box-sizing: border-box;
}
.title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
	font-size: 26rpx;
	.title-left {
		font-weight: 700;
	}
	.button {
		width: 250rpx;
		color: #fff;
		background-color: #016eff;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 20rpx;
	}
}
.guige {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	position: relative;
	.guige-name {
		display: flex;
		align-items: center;
		width: 500rpx;
		.btn {
			width: 100rpx;
			color: #fff;
			height: 70rpx;
			font-size: 26rpx;
			background-color: #efefef;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.guige-value {
		margin-top: 20rpx;
		.tagList {
			display: flex;
			align-items: center;
		}
		.inputValue {
			display: flex;
			align-items: center;
			width: 650rpx;
			margin-top: 20rpx;
			.btn {
				width: 100rpx;
				color: #fff;
				height: 70rpx;
				font-size: 26rpx;
				background-color: #efefef;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.del {
		position: absolute;
		top: 30rpx;
		right: 25rpx;
	}
}
.box {
	.box-name {
		padding: 20rpx;
		text-align: center;
	}
	.box-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.btn {
			width: 150rpx;
			height: 70rpx;
			font-size: 26rpx;
			background-color: #efefef;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	.footer-c {
		width: 500rpx;
		background-color: #016eff;
		color: #fff;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
李佳俊414
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
sku电商商品多规格
12-25
一个强大的组件，一个简洁的组件，一个通用的组件
fastadmin 商品多规格 复制即可使用 js html
老王子的博客
01-23 1981
js 文件 部分 //添加规格 $('#addskus').on('click', function () { var name = $('#space_name').val(); if (name == '') { layer.msg('规格名称不能为做空'); return false; } else { var object = new Object(); object.title = name; object.value
fastadmin插件-多规格商城-自写的插件，安装即可用
宋拾壹的博客
08-14 2708
fastadmin插件-多规格商城
layui+商品多规格.zip
03-04
基于layui sku 商品多规格功能，封装了三种方式，个人推荐使用layui+vue,里面有read文档，三中sku插件的截图说明
商城，原始版本，有商品多规格，自用
05-22
商城，原始版本，有商品多规格，自用
多规格商城插件.zip
08-14
自写的多规格插件，有点小瑕疵，自行改一下就可以，fastadmin多规格商城插件，针对多规格的场景使用
jQuery仿淘宝商品多规格SKU，自动生成表格表单
06-25
jQuery仿淘宝商品多规格SKU，自动生成表格表单，jQuery仿淘宝SKU选择商品属性代码
vue 实现商品多规格的sku
w_minx的博客
10-20 3418
template <div class="wrap wrap-sku"> <div class="product-box"> <div class="product-content"> <div class="product-delcom" v-for="(ProductItem,n) in simulatedDATA.specifications"> <p>{{ProductItem.n
基于element组件商品sku多规格
qq_34761385的博客
10-25 2739
商品的sku涉及到很多动态表单，因为分为单规格和多规格。而每次一到写动态表单就让人头疼。所以特此记录一下，方便自己下次再用也帮助他人减少麻烦。闲话少叙，先看效果图。这是单个的vue文件，在使用之前，先确保你项目是否使用了element Ui组件。使用时直接复制到页面就行。：这里我使用了Uploadimg图片上传组件。主要是上传图片到阿里云oss。上面的部分输入表单可以无视了，主要还是动态商品规格sku的添加。其他的就是逻辑代码了。主要是拉取商品分类列表数据。
uniapp 遮罩层/弹窗阻止冒泡
颜浩的博客
05-06 2594
遮罩层 <view class="window"> <view class="mask" @touchmove.stop.prevent="stopPrevent"></view> <view class="popup" @click.stop="stopPrevent"> 遮罩层内容 </view> </view> js stopPrevent(){ }
day09-商品规格管理
hu_zhi_chao的博客
06-24 410
商品规格管理0.学习目标1.商品规格数据结构1.1.SPU和SKU1.2.数据库设计分析1.2.1.思考并发现问题1.2.2.分析规格参数1.2.3.SKU的特有属性1.2.4.搜索属性1.3.规格参数表1.3.1.表结构1.3.2.规格组1.3.2.规格参数2.商品规格参数管理2.1.页面布局2.1.1.整体布局2.1.2.右侧规格2.2.规格组的查询2.2.1.树节点的点击事件2.2.2.页面查询规格组2.2.3.后端代码2.3.规格参数查询2.3.1.表格切换2.3.2.页面查询规格参数2.3.3.后
前端商品多规格选择问题 SKU 算法实现优化2.0
weixin_44589540的博客
01-06 4457
在阅读本文之前，请先阅读笔者上一篇文章：前端商品多规格选择SKU算法实现 找bug 上一篇文章最后提到实现的算法存在bug，是哪个地方出现问题了呢？ 当数据源如下所示时： export const properties = [ { id: "1", name: "容量", attributes: [ { value: "1L", isActive: false, isDisabled: false }, { value: "4L", isActive: f
类似淘宝商品的规格选择源码
Yanfengting的博客
04-03 1164
原文：http://chijianfeng.com/web/Vue/163.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=devic
php 商品多规格的实现,sku实现
热门推荐
nextvary的博客
08-20 1万+
1,规格名称表 CREATE TABLE `fa_item_attr_key` ( `attr_key_id` int(10) unsigned NOT NULL AUTO_INCREMENT, `item_id` int(10) unsigned DEFAULT '0', `attr_name` varchar(50) NOT NULL, PRIMARY KEY (`att...
Fastadmin里面类别多选效果实现
安迪夫的博客
09-09 7194
selectcategory: function(form){ if ($(".selects3", form).size() &gt; 0) { $(".selects3").bind('click',function(){ var s1 = '';var p = ''; ...
商品多规格实现
百尺竿头
05-31 511
测试地址： http://8.135.119.210/用户名：test 密码:123456
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 353
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue动态添加商品多规格
10-18
1. 在数据中定义一个数组，用于存储商品规格信息，例如： ``` data() { return { specs: [ { name: '颜色', values: ['红色', '蓝色', '绿色'] }, { name: '尺码', values: ['S', 'M', 'L'] } ] } } ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值