fastadmin 商品多规格 复制即可使用 js html

最新推荐文章于 2023-09-28 12:05:55 发布
最新推荐文章于 2023-09-28 12:05:55 发布
阅读量1.9k 收藏 8
点赞数 4
分类专栏： thinkphp5 fastadmin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45010567/article/details/107607615
版权

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.values = [];
					var spacenamelist = $('#spacenamelist').val();
					if (spacenamelist == '') {
						//首次添加
						spacenamelist = new Array();
						spacenamelist.push(object);
						spacenamelist = JSON.stringify(spacenamelist);
					} else {
						spacenamelist = JSON.parse(spacenamelist);
						for (var i = 0; i < spacenamelist.length; i++) {
							if (spacenamelist[i].title == name) {
								layer.msg('此规格已存在');
								return false;
							}
						}
						spacenamelist.push(object);
						spacenamelist = JSON.stringify(spacenamelist);
					}
					$('#spacenamelist').val(spacenamelist);
					console.log($('#spacenamelist').val());
				}
				var space_list = '<div class="form-group skuMain">' +
					'<label class="control-label col-xs-12 col-sm-2">' + name + ':</label>' +
					' <div class="col-xs-4 col-sm-4"><input type="text" maxlength="22" placeholder="请输入子规格名称"  class="form-control"></div> ' +
					'<div class="col-xs-4 col-sm-4"><span class="btn btn-primary">添加</span> <span class="btn btn-danger" >移除</span></div> ' +
					'<div class="col-xs-8 col-sm-8 col-xs-offset-2 col-sm-offset-2 skuChildrenBox"></div>' +
					'</div>';
				$('#space').append(space_list);
				$('#space_name').val('');
				//删除skus_value skus_title
				$('#skus_value').html('');
				$('#skus_title').html('');
			});
			
			//移除规格
			$('#space').on('click', '.btn-danger', function (e) {
				//获取规格名称
				var text = $($(this).parent().parent().children()[0]).text();
				text = text.substring(0, text.length - 1)
				//删除规格值
				var spacenamelist = $('#spacenamelist').val();
				spacenamelist = JSON.parse(spacenamelist);
				for (var i = 0; i < spacenamelist.length; i++) {
					if (spacenamelist[i]['title'] == text) {
						spacenamelist.splice(i, 1);
					}
				}
				$('#spacenamelist').val(JSON.stringify(spacenamelist));
				$(this).parent().parent().remove();
				//删除skus_value skus_title
				$('#skus_value').html('');
				$('#skus_title').html('');
			});
			//添加规格值
			$('#space').on('click', '.btn-primary', function (e) {
				var value = $(this).parent().prev().children()[0].value;
				if (value == '') {
					layer.msg('规格值不能为做空');
					return false;
				}
				//获取规格名称
				var text = $($(this).parent().parent().children()[0]).text();
				text = text.substring(0, text.length - 1)
				//获取规格值
				var spacenamelist = $('#spacenamelist').val();
				spacenamelist = JSON.parse(spacenamelist);
				for (var i = 0; i < spacenamelist.length; i++) {
					if (spacenamelist[i]['title'] == text) {
						if ($.inArray(value, spacenamelist[i]['values']) >= 0) {
							layer.msg('此规格值已存在');
							return false;
						}
						spacenamelist[i]['values'].push(value);
					}
				}
				$('#spacenamelist').val(JSON.stringify(spacenamelist));
				console.log(spacenamelist)
				var space_valeu_lsit = '<div class="skuChildren"><span>' + value + '</span> <i class="fa fa-close skuChildren-close"></i></div>';
				$(this).parent().next().append(space_valeu_lsit);
				$($(this).parent().prev().children()[0]).val('');
				//删除skus_value skus_title
				$('#skus_value').html('');
				$('#skus_title').html('');
			});
			//移除规格值
			$('#space').on('click', '.fa-close', function (e) {
				//获取规格值
				var value = $(this).prev().text();
				//获取规格名称
				var text = $(this).parent().parent().prev().prev().prev().text();
				text = text.substring(0, text.length - 1)
				//获取规格值
				var spacenamelist = $('#spacenamelist').val();
				spacenamelist = JSON.parse(spacenamelist);
				//删除规格值
				for (var i = 0; i < spacenamelist.length; i++) {
					if (spacenamelist[i]['title'] == text) {
						console.log(spacenamelist[i]['values'])
						spacenamelist[i]['values'].splice($.inArray(value, spacenamelist[i]['values']), 1);
					}
				}
				$('#spacenamelist').val(JSON.stringify(spacenamelist));
				$(this).parent().remove();
				//删除skus_value skus_title
				$('#skus_value').html('');
				$('#skus_title').html('');
			});
			//生成商品规格
			$('#create_skus').on('click', function () {
				
				var spacenamelist = $('#spacenamelist').val();
				spacenamelist = JSON.parse(spacenamelist);
				if (spacenamelist == '') {
					layer.msg('请先生成规格');
					return false;
				}
				for (var i = 0; i < spacenamelist.length; i++) {
					if (spacenamelist[i].values.length == 0) {
						layer.msg(spacenamelist[i].title + '规格值为空');
						return false;
					}
				}
				//生成SKUS名称
				var item = '<tr>';
				for (var i = 0; i < spacenamelist.length; i++) {
					item += '<th>' + spacenamelist[i]['title'] + '</th>';
				}
				item += ' <th width="80"><span data-toggle="tooltip" data-placement="bottom" title="批量设置" class="tooltip-toggle">现价<i class="fa fa-indent i-color"></i></span></th>\n' +
					'                                                <th width="80"><span data-toggle="tooltip" data-placement="bottom" title="批量设置" class="tooltip-toggle">库存<i class="fa fa-indent i-color"></i></span></th>\n' +
					'                                                <th width="80"><span data-toggle="tooltip" data-placement="bottom" title="批量设置" class="tooltip-toggle">重量<i class="fa fa-indent i-color"></i></span></th>\n' +
					'                                                <th width="80"><span data-toggle="tooltip" data-placement="bottom" title="批量设置" class="tooltip-toggle">编码<i class="fa fa-indent i-color"></i></span></th>\n' +
					'                                                <th width="80">图片</th>\n' +
					'                                                <th width="80">当前状态</th></tr>';
				$('#skus_title').html(item);
				//生成规格值
				var temp = [];
				for (var i = 0; i < spacenamelist.length; i++) {
					var temp_p = [];
					for (var v = 0; v < spacenamelist[i].values.length; v++) {
						if (temp.length == 0) {
							temp_p.push(spacenamelist[i].values[v]);
						} else {
							for (var t = 0; t < temp.length; t++) {
								temp_p.push(temp[t] + ',' + spacenamelist[i].values[v]);
							}
						}
					}
					temp = temp_p;
				}
				console.log(temp);
				
				var string = '<tr>';
				temp.map(function (item) {
					var data = item.split(",");
					data.map(function (key) {
						string += '<td>' + key + '</td>'
					})
					string += '' +
						'<td width="80"><input type="number" class="input-sm form-control"></td>\n' +
						'                                                <td width="80"><input type="number" class="input-sm form-control"></td>\n' +
						'                                                <td width="80"><input type="number" class="input-sm form-control"></td>\n' +
						'                                                <td width="80"><input type="text" class="input-sm form-control"></td>\n' +
						'                                                <td width="80">上传图片</td>\n' +
						'                                                <td width="80"><span class="input-sm form-control status">上架</span></td>\n' +
						'                                            </tr>'
				})
				$('#skus_value').html(string);
				$('#skus_title').parent().parent().parent().addClass('show');
			});

html 部分

<div class="widget-body no-padding">
                            <div class="form-group">
                                <legend>规格价格<span class="legend-tip">(请完善主规格子规格，然后点击生成表单填写价格库存)</span></legend>
                            </div>
                            <div class="form-group">
                                <input type="text" name="skus" id ='spacenamelist' size="500">
                                <label class="control-label col-xs-12 col-sm-2">添加主规格:</label>
                                <div class="col-xs-4 col-sm-4"><input type="text" placeholder="请输入主规格名称" maxlength="5" class="form-control" id="space_name"></div>
                                <div class="col-xs-4 col-sm-4"><span class="btn btn-primary" id='addskus'>确认</span>&nbsp;<span class="btn btn-info" id='create_skus'>生成规格</span></div>
                            </div>
                            <div id='space'>
                            </div>
                            <div>
                                <div class="row" >
                                    <div class="col-md-12">
                                        <table class="table">
                                            <thead id="skus_title"></thead>
                                            <tbody id="skus_value"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
<style type="text/css">
    /*头部样式*/
    .legend-tip {
        color: #f00;
        font-size: 14px;
        margin-left: 5px;
    }

    /*规格样式*/
    .skuChildren {
        margin-right: 10px;
        margin-top: 10px;
        padding: 0 5px;
        height: 24px;
        line-height: 24px;
        color: rgba(80, 80, 80, 1);
        border-radius: 2px;
        font-size: 12px;
        text-align: center;
        border: 1px solid rgba(231, 231, 231, 1);
        position: relative;
    }

    /*规格值*/
    .skuChildrenBox {
        display: flex;
        padding: 0 15px;
        flex-wrap: wrap;
    }

    /*规格小叉号*/
    .skuChildren-close {
        position: absolute;
        background: rgba(212, 48, 48, 1);
        color: #fff;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        top: -6px;
        right: -6px;
        font-style: 12px;
        -webkit-transform: scale(0.8);
    }
</style>
大强写代码
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
day09-商品规格管理
hu_zhi_chao的博客
06-24 390
商品规格管理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详情接口
ocean_hhn的博客
08-31 277
api接口
多规格商城插件.zip
08-14
自写的多规格插件，有点小瑕疵，自行改一下就可以，fastadmin多规格商城插件，针对多规格的场景使用
fastadmin插件-多规格商城-自写的插件，安装即可用
宋拾壹的博客
08-14 2675
fastadmin插件-多规格商城
Shopro商城 高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
u011092458的博客
11-24 4141
基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城，拥有强大的店铺装修、小程序直播、自定义模板、路由同步、多端支付（微信，支付宝）、多规格商品、运费模板、多地区邮费、库存管理、全端分享等功能。主要功能：登录、注册、签到、富文本、分类、购物车、筛选、地址、商品评论、积分商城、拼团、秒杀、多规格、全端分享、路由拦截、分享海报、多支付方式、订单管理、用户信息等等。◆限时秒杀、预售、优惠券、vip会员…栏目可在后台自定义。
vue 实现商品多规格的sku
w_minx的博客
10-20 3393
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
fastadmin 后端部分使用vue，同JQ不冲突，页面按需引入（如，是使用vue做多规格，替换fastadmin的动态列表）
weixin_39921970的博客
10-21 2622
第一步： 下载vue https://cn.vuejs.org/v2/guide/ 下载的vue.js文件放置目录 fastadmin项目/public/js/ 第二步： 配置vue，是vue生效 ①配置backend-init.js 路径：fastadmin项目/public/js/backend-init.js define(['backend'], function (Backend) { require.config({ paths: { 'vue'
基于element组件商品sku多规格
qq_34761385的博客
10-25 2683
商品的sku涉及到很多动态表单，因为分为单规格和多规格。而每次一到写动态表单就让人头疼。所以特此记录一下，方便自己下次再用也帮助他人减少麻烦。闲话少叙，先看效果图。这是单个的vue文件，在使用之前，先确保你项目是否使用了element Ui组件。使用时直接复制到页面就行。：这里我使用了Uploadimg图片上传组件。主要是上传图片到阿里云oss。上面的部分输入表单可以无视了，主要还是动态商品规格sku的添加。其他的就是逻辑代码了。主要是拉取商品分类列表数据。
商品多规格
lijiajun98的博客
05-27 91
【代码】商品多规格。
fastadmin带商城开发框架安装
guoruijun_2012_4的专栏
09-28 258
2、按照安装文档配置环境，linux 配置宝塔面板，linux命令行安装。5、hbuilderx使用上官网查看，最好注册账号方便开发发布。对初学者来说有些生疏，所以用宝塔面板，可视话安装操作比较容易。10、伪静态配置 nginx 配置 php环境配置练习熟悉。4、商城 shopro 前后端分离，前端还需独立发布。3、基础框架安装完成后，安装商城插件 shopro。11、阿里云域名服务、端口放行、虚拟机管理练习熟悉。8、宝塔面板安装步骤参考官网，练习熟悉。7、前端打包后，上传服务器指定网站。
fastadmin中调用js的方法
10-17
主要介绍了fastadmin中调用js的方法，在文中给大家补充介绍了Fastadmin里面的js运行原理,需要的朋友可以参考下
fastadmin版多商户不限坐席php插件
最新发布
01-21
php版fastadmin多商户插件
软件工程试题库及模拟题
04-14
软件工程试题及答案以及模拟题 包含选择题、填空题、简答题、应用题和分析题
fastadmin事务管理系统
05-27
fastadmin事务管理系统
商品规格选择js
weixin_41970780的博客
12-14 1285
商品规格选择js <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" c
FastAdmin插件开发辅助增强插件
weixin_37045384的博客
12-23 1502
不改变官方的开发习惯，但更丝滑，尽最大的努力生成你想要的代码
使用Html+Css+JS实现商品的展示，价格计算等功能
weixin_45866961的博客
05-29 7516
源码在后面 效果展示图片 功能 调用外部数据，动态建立路径导航 调用外部数据，动态建立图片展示页面，为并未主图绑定鼠标移入、移动、移出事件，实现放大镜详情展示 3.并为其绑定左右按钮事件，进行切换 4. 为小图绑定切换事件，由小图切换主图， ...
css、html、js 代码规范，某公司标准
PrimaryColor
12-02 146
为了提升代码阅读效率，自己做产品的公司一般都会制定一套代码规范标准，方便二次开发和维护。 一、命名统一。 样式命名统一： 类.save_btn，id#save_btn（下划线，不要出现驼峰如：saveBtn）。 变量命名统一： var save_btn_obj=1;（下划线，不要出现驼峰如：saveBtnObj）。 函数命名： function saveBtnFunc()（驼峰命名）。 二、样式不要有空格,不要有换行。 例如：比如“flex : 1;”改成“flex:1;”。
HTML中的JavaScript
每天都要努力学习哦~~
01-09 3499
要包含外部JavaScript文件，必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。所有元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下，包含在元素中的代码必须严格按次序解释。对不推迟执行的脚本，浏览器必须解释完位于元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把元素放到页面末尾，介于主内容之后及标签之前。
fastadmin怎么实现商品多规格
04-28
FastAdmin是一款支持商品多规格的开源PHP框架，实现商品多规格可以通过以下步骤来完成。 1.在商品表中新增“规格”字段。 2.在规格表中新增规格名称和规格值，例如“颜色”规格下有“红色”、“蓝色”等规格值。 3.在商品规格表中新增商品ID、规格ID、规格值ID和价格等字段，用于记录商品的各个规格和对应的价格。 4.前端页面上，在商品详情页或商品列表页上添加“选择规格”的模块，以供用户选择商品规格。通过AJAX请求获取对应商品规格的价格等信息。 5.当用户选择完规格后，将选择的规格信息以及标识商品的ID提交到后台，查询是否存在对应的价格。如果有，则返回价格信息，并在页面上显示。 6.当用户点击购买按钮后，将用户选择的规格信息以及商品ID和价格等关键信息提交给后台进行下单。 通过以上步骤，就能实现商品多规格的功能。拥有多规格的商品相比单规格的商品，能够更符合消费者的需求，提升购买决策的准确度和体验，从而提高销售额。而FastAdmin提供了快捷方便的实现方法，可以节省开发者的时间成本。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值