生鲜销售网站项目-详情页

最新推荐文章于 2022-03-12 20:42:20 发布
最新推荐文章于 2022-03-12 20:42:20 发布
阅读量309 收藏 4
点赞数 1
分类专栏： JQuery
开心
本文链接：https://blog.csdn.net/weixin_45324044/article/details/106330543
版权

在这里插入图片描述

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>新鲜水果 | 小毛虫生鲜</title>
	<link rel="stylesheet" type="text/css" href="./css/goods_details.css">

	<link rel="stylesheet" type="text/css" href="./css/basic.css">
	<!-- <link rel="stylesheet" type="text/css" href="./css/main.css"> -->
</head>

<body>
	<!-- 顶部 -->

	<div class="outside header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到小毛虫生鲜!
				<a href="http://127.0.0.1:3001/adminlogin.html">[管理员登录]</a>
			</div>
			<div class="fr">
				<div class="login_btn fl">
					<a href="/login.html">登录</a>
					<span>|</span>
					<a href="/register.html">注册</a>
				</div>

				<div class="user_link fl">
					<span>|</span>
					<a href="index.html">首页</a>
					<span>|</span>
					<a href="user_info.html">用户中心</a>
					<span>|</span>
					<a href="mycart.html">我的购物车</a>
				</div>
			</div>
		</div>
	</div>
	<div class="outside">
		<div class="search_bar clearfix">
			<a href="/" class="logo fl"><img src="./images/base-img/logo.jpg"></a>
			<div class="search_con fl">
				<input type="text" class="input_text fl" name="q" placeholder="搜索商品">
				<input type="button" class="input_btn fr" name="" value="搜索">
			</div>
	
			<div class="guest_cart fr">
				<a href="mycart.html" class="cart_name fl">我的购物车</a>
				<div class="goods_count fl" id="show_count">0</div>
			</div>
		</div>
	
	</div>

	<!-- 中间样式 -->

	<div class="outside navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav">
					<li><a href="goods_list.html?lid=1" class="fruit">新鲜水果</a></li>
					<li><a href="goods_list.html?lid=2" class="seafood">海鲜水产</a></li>
					<li><a href="goods_list.html?lid=3" class="meet">猪牛羊肉</a></li>
					<li><a href="goods_list.html?lid=4" class="egg">禽类蛋品</a></li>
					<li><a href="goods_list.html?lid=5" class="vegetables">新鲜蔬菜</a></li>
					<li><a href="goods_list.html?lid=6" class="ice">速冻食品</a></li>
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">返回首页 &gt;&gt;</a></li>
			</ul>
		</div>
	</div>
	<!--二级页面面包屑导航-->
	<div class="outside">
		<div class="breadcrumb">
			全部分类 &gt; 商品详情
		</div>
	</div>


	<div class="outside">
		<div class="goods_detail_con clearfix">
			<!--动态数据存放处-->
		</div>
	
	</div>
	<div class="outside">
		<div class="main_wrap clearfix">
			<div class="r_wrap fr clearfix">
				<ul class="detail_tab clearfix">
					<li class="active">商品介绍</li>
					<!-- <li>评论</li> -->
				</ul>
	
				<div class="tab_content">
					<!-- <dl>
						<dt>商品详情：</dt>
						<dd><p>阿斯蒂芬阿三的说法</p></dd>
					</dl> -->
				</div>
	
			</div>
		</div>
	
	</div>
	<div class="add_jump"></div>
	<!-- 底部 -->
	<div class="footer no-mp">
		<div class="foot_link">
			<a href="https://github.com/weilanhanf/daily_fresh_demo">关于我们</a>
			<span>|</span>
			<a href="https://www.cnblogs.com/welan/">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2020 大佬说的都队 All Rights Reserved</p>
		<p>电话：17329410120 京ICP备123456789号</p>
	</div>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script src="./js/details.js"></script>
	<script src="./js/addcart.js"></script>
	<script src="./js/out_login.js"></script>
	<script src="./js/searchbar.js"></script>
	<script type="text/javascript">
	
		// 用户点击 + 时，商品总价格的改变
		function localAdd() {
			var num = parseFloat($('#num_show').val());
			var kucun = parseFloat($('.goods_kucun').text());
			// 如果商品数量<库存，则数量+1
			if (num <= kucun) {
				num += 1;
				// console.log(num);
				$('#num_show').val(num);
				// $.number();
				// 获取当前售价
				price = parseInt($('#gprice').text());
				// console.log(price);

				// 数量*当前售价
				total = num * price;
				$('#num_show').val(num);
				$('#gtotal').text(total.toFixed(2) + '元');
			} else {
				alter("不能购买数量大于库存");
			}
		}

		// 用户点击 - 时的总价格
		function localReduce() {
			var num = parseFloat($('#num_show').val());
			if (num > 1) {
				num -= 1;//数量减一
				// console.log(num);
				$('#num_show').val(num);
				// $.number();
				//原先的价格
				price = parseInt($('#gprice').text());

				//获取点击增加按钮时的价格
				price_now = parseInt($('#gtotal').text());

				total = price_now - price;
				$('#num_show').val(num);
				$('#gtotal').text(total.toFixed(2) + '元');
			}
			else {
				alert("购买数量不能少于1");
			}
		};
	

	// 用户点击立即购买按钮时,携带者当前商品的id和数量，跳转到结算页面
	function buy_account(lid){
		if($('.login_btn').text().indexOf('登录') >= 0){
        	alert('请登陆后购买');
        	// location.href = "/login.html";
        	location.href = '/login.html';
            return;
        }
		// 商品的数量
		var num =$('#num_show').val();
		// 跳转
		window.location.href=`buy_account.html?lid=${lid}&num=${num}`;
	}
	</script>
	
	
</body>

</html>

js代码：（out_login.js \ searchbar.js两个js代码在首页博客里面有）
details.js(商品详情的js代码)

 // 获取从首页获得的商品id
    //http://127.0.0.1:3000/goods_tails.html?lid=  id

    var lid=location.search.split("=")[1];
    console.log(lid);
    $.ajax({
        url:"http://127.0.0.1:3000/details",
        type:"get",
        data:{lid},
        dataType:"json" 
    })
    .then(function(result){
        console.log(result[0]);
        // 商品详情
        var html=`<div class="goods_detail_pic fl">
        <img src="${result[0].img_url}">
        </div>

        <div class="goods_detail_list fr">
        <h3 class="title">${result[0].title}</h3>
        <p class="chandi">产地：<a href="${result[0].herf}" class="herf">内蒙古</a></p>
        <div class="prize_bar">
            <span class="show_pirze">¥<em id="gprice">${result[0].price.toFixed(2)} </em></span>
            <span class="show_unit" id="unit">单  位:${result[0].unit}</span>
            <span class="show_unit">库  存：<span class="goods_kucun">${result[0].num}</span></span>
        </div>
        <div class="goods_num clearfix">
            <div class="num_name fl">数 量：</div>
            <div class="num_add fl">
                <input type="text" id="num_show" class=" fl" value="1">
                <a href="javascript:localAdd();" class="add fr">+</a>
                <a href="javascript:localReduce();" class="reduce fr">-</a>
            </div>
        </div>
        <div class="total">总价：<em id="gtotal">${result[0].price.toFixed(2)}元</em></div>
        <div class="operate_btn">
                 <a href="javascript:buy_account(lid);" class="buy_btn">立即购买</a>       
                <a href="javascript:add_cart(lid);" class="add_cart" id="add_cart">加入购物车</a>
        </div>`;
        var div1=$(".goods_detail_con");
        // console.log(div1);
        div1.html(html);

        // 商品介绍
        var html1=`
                <dl>
					<dt>商品详情：</dt>
					<dd><p>${result[0].intro}</p></dd>
                </dl>`;
           var div2=$(".tab_content");
           div2.html(html1);  
         
    })
    
// })

addcart.js(添加购物车的js代码)

    // 用户点击 加入购物车 按钮时

    function add_cart(lid) {
    //  console.log(lid);
        if($('.login_btn').text().indexOf('登录') >= 0){
        	alert('请登陆后购买');
        	// location.href = "/login.html";
        	location.href = '/login.html';
            return;
        }

        // 购物车按钮的位置
        // var $add_x = $('#add_cart').offset().top;
        // console.log($add_x);
        // var $add_y = $('#add_cart').offset().left;
        // console.log($add_y);
        // var $to_x = $('#show_count').offset().top;
        // console.log($to_x);
        // var $to_y = $('#show_count').offset().left;
        // console.log($to_y);

        count = $('#num_show').val();
        $('#show_count').text(count);

            //一次添加购物车的数量
            count = parseInt($('#num_show').val());
            // console.log(num);

            //商品id
            // id=sessionStorage.getItem("details_id");
            // id=$('#buy_btn').prop("href").split("=")[1];
            // console.log(id);

            //商品图片地址
            img_url=$('.goods_detail_pic>img').prop("src");
            // console.log(img_url);

            title=$('.title').text();
            // console.log(title);

            num=$('.goods_kucun').text();
            // console.log(num);

            unit=$('#unit').text().split(":")[1];
            // console.log(unit);

            //截取字符串http://127.0.0.1: 3000/goods_tails.html?lid=7
            herf=$('.herf').prop("href").split(":")[2].substr(5,23);
            // console.log($('.herf').prop("href"));
            // console.log(herf);

            price=$('#gprice').text();
            sessionStorage.setItem("price",price);
            userid=sessionStorage.getItem("userID");
            console.log(userid);
            $.ajax({
                url:"http://127.0.0.1:3000/addcart",
                type:"post",
                data:{
                    lid:lid,
                    userid:userid,
                    img_url:($('.goods_detail_pic>img').prop("src")),
                    title:$('.title').text(),
                    num:$('.goods_kucun').text(),
                    unit:$('#unit').text().split(":")[1],
                    price:$('#gprice').text(),
                    herf:$('.herf').prop("href").split(":")[2].substr(5,23),
                    count:parseInt($('#num_show').val())
                },
                dataType:"json"
            })
            .then(function(result){
                // if(result.code==1)
                // console.log(result);
                $('#show_count').text(result.code);
                alert(result.msg);
            })
    }

css代码：（goods_details.css商品详情页样式）

/* 商品详情样式 */
.goods_detail_con{
	width:80%;
	height:75%;
	border:1px solid #ededed;
	margin:0 auto 20px;
}

.goods_detail_pic{
    width:30%;
    height:350px;
    margin:24px 0 0 24px;
}
.goods_detail_pic img{
    width: 80%;
    height: 40%;
}
.goods_detail_list{
    width:45%px;
    height:350px;
    margin:24px 24px 0 0;
}
.goods_detail_list h3{
    font-size:18px;
    line-height:24px;
    color:#666;
    font-weight:normal;
}
.goods_detail_list p{
    color:#666;
    font-size: 10px;
    line-height:40px;
}
.goods_detail_list .prize_bar{
    height:65px;
    background-color:#fff5f5;
    line-height:65px;
}
.goods_detail_list .prize_bar .show_pirze{
    font-size:20px;
    color:#ff3e3e;
    padding-left:20px;
}
.goods_detail_list .prize_bar .show_pirze em{
    font-style:normal;
    font-size:24px;
    padding-left:10px;
}
.goods_detail_list .prize_bar .show_unit{
    padding:0 70px 0 70px;
    font-size: 10px;
}

.goods_num{
    height:52px;
    margin-top:19px;
}
.goods_num .num_name{
    width:70px;
    height:52px;
    font-size: 10px;
    line-height:52px;
}
.goods_num .num_add{
    width:75px;
    height:50px;
    border:1px solid #dddddd
}
.goods_num .num_add input{
    width:49px;
    height:50px;
    text-align:center;
    line-height:50px;
    border:0px;
    outline:none;
    font-size:14px;
    color:#666
}
.goods_num .num_add .add,.goods_num .num_add .reduce{
    width:25px;
    line-height:25px;
    text-align:center;
    border-left:1px solid #ddd;
    border-bottom:1px solid #ddd;
    color:#666;
    font-size:14px
}
.goods_num .num_add .reduce{
    border-bottom:0px
}

.total{
    height:35px;
    line-height:35px;
    margin-top:25px;
    font-size: 10px;
}
.total em{
    font-style:normal;
    color:#ff3e3e;
    font-size:18px
}
.operate_btn{
    height:40px;
    margin-top:35px;
    font-size:0;
    position:relative;
}
.operate_btn .buy_btn,.operate_btn .add_cart{
    display:inline-block;
    width:25%;
    height:75%;
    border:1px solid #c40000;
    font-size:11px;
    color:#c40000;
    line-height:28px;
    text-align:center;
    background-color:#ffeded;
}
.operate_btn .add_cart{
    background-color:#c40000;
    color:#fff;
    margin-left:10px;
    position:relative;
    z-index:10;
}

.add_jump{
    width:20px;
    height:20px;
    background-color:#c40000;
    position:absolute;
    left:268px;
    top:10px;
    border-radius:50%;
    z-index:9;
    display:none;
}

.detail_tab{
	height:35px;
	border-bottom:1px solid #37ab40
}

.detail_tab li{
    height:34px;
    line-height:34px;
    padding:0 30px;
    font-size:12px;
    color:#333333;
    float:left;
    border:1px solid #e8e8e8;
    border-bottom:0px;
    cursor:pointer;
    background-color:#faf8f8
}

.detail_tab li.active{
    border-top:2px solid #37ab40;
    position:relative;
    background-color:#fff;
    border-left:1px solid #37ab40;
    border-right:1px solid #37ab40;
    top:-1px;
    height:35px;
}

.tab_content dt{
    margin:10px 0 0 5px;
    font-size:12px;
    color:#044d39
}
.tab_content dd{
    line-height:24px;
    /* font-size: 12px; */
    margin-top:5px;
    text-indent: 30px;
}
可可爱爱的你吖
关注
专栏目录
【愚公系列】《AIGC辅助软件开发》017-AI辅助后端编程：用ChatGPT写简单的生鲜小超市项目
时光隧道
07-28 1万+
在快速发展的信息技术时代，人工智能（AI）正在深刻改变各个行业的工作方式。特别是在软件开发领域，AI工具的引入使得开发者的工作变得更加高效与便捷。本文将探讨如何利用AI辅助后端编程，特别是通过ChatGPT来实现一个简单的生鲜小超市项目。随着生鲜电商的蓬勃发展，构建一个高效、易用的后端系统成为了开发者面临的重要挑战。传统的编程方式往往需要耗费大量时间进行调试和优化，而借助于ChatGPT等AI工具，我们可以加快代码编写的速度，提高开发效率。
生鲜电商项目PPT介绍
10-19
含PPT设计模版，全面介绍生鲜电商项目内容，关注的请下载，全面了解生鲜电商
生鲜销售网站项目-介绍
可可爱爱的你吖的博客
05-25 361
声明：小毛虫生鲜销售是借鉴于网上发布的天天生鲜网站，页面借鉴，其中的功能是自加的，如有侵权请及时联系我。 项目介绍： 前端的逻辑功能什么是用原生的JQ写的，包括商品列表，购买按钮，添加购物车，数量加减，商品结算等。 后台的管理写的比较简单，服务端用的是Node.js写的，数据库用的是MySql。因为不是UI出身，所以页面的审美不咋好，功能也是按照最简单的来写的。 整个项目从用户登录页面到后面都会有响应的成形效果和代码。请前往博客目录中查看。 ...
html-css练习题（天天生鲜静态网页制作）文末有完整版代码地址链接
热门推荐
采菊东篱下，Python满乾坤！
09-03 5万+
素材地址： 链接: https://pan.baidu.com/s/17aHx1VQpI5yjc67TFoq1yQ 提取码: bk1s 先来看一下效果图： 主要要求： 注：最下面有素材链接地址可以自己练习使用 /* 1.login最外侧盒子设定高29 背景颜色#f7f7f7 下边框1 */ /* 1.1login内容部分设置 高20 宽1200 居中*...
一个简单的jsp购物网站
06-22
一个购物网站，可以实现用户登录注册，后台管理功能也有，点击商品可以进入详情页
商品详情页与购物车实现
06-01
Android实现商品详情页面和购物车页面及逻辑判断，相信能帮到你！
Django电商（生鲜）项目搭建--DjangoShop.zip
11-01
在本项目"Django电商（生鲜）项目搭建--DjangoShop"中，我们将探索如何使用Python的Web框架Django来创建一个电商网站，特别是专注于生鲜商品的在线销售平台。这个项目涵盖了多个关键知识点，包括但不限于： 1. **...
电商生鲜商城项目（B2C）-DailyFresh.zip
最新发布
11-04
【电商生鲜商城项目（B2C）-DailyFresh】是一个典型的电子商务平台，专注于生鲜食品的在线销售。在本文中，我们将深入探讨这个项目的核心组成部分、技术栈、设计原则以及实施过程中可能涉及的关键知识点。 首先，...
一个用ASP.NET写的生鲜O2O电子商务网站
04-10
总结，"一个用ASP.NET写的生鲜O2O电子商务网站"涵盖了ASP.NET框架的使用、C#编程、电商系统设计、数据库管理、前端开发以及安全性与性能优化等多个方面的知识，是一个综合性的Web开发项目。开发者需要具备扎实的编程...
基于Django开发的B2C电商平台----天天生鲜.zip
09-29
2. B2C电子商务模式：B2C（Business-to-Consumer）是企业与消费者之间的电子商务，类似于在线零售商，平台直接向消费者销售产品。在“天天生鲜”中，商家可以上传商品信息，消费者则通过平台进行浏览、选择、购买并...
java web 经典的购物网站的案例
11-22
一个购物网站 包括前端的登陆注册 商品的展示 以及 后台的增删改查 以及支付 等全套功能的实现 是一个在java web完成后巩固的经典案例
简易购物网站，代码界面简单
12-29
进入“主界面”，显示商品分类，以及欢迎界面；在分类数据表(Categories)中任选一种数据类型，同步打开“产品”网页，用GridView控件分类显示Products数据表中相应的商品；单击想要购买的商品，将该商品的数据取出来，放到动态数据表中，然后再将数据表放入“购货车”中，这里的购货车用Session["ShoppingCart"]表示；打开“购货车”网页，控件GridView以Session["ShoppingCart"]作为数据源显示数据，并在新网页中确定购买的数量，并输入“客户标志”；与此同时生成新的内存数据表，并将新数据表存入新的Session["ShoppingCart2"]中；打开“结账”网页，以新Session对象作为数据源在GridView控件中显示数据，同时通过Session["khbj"]将客户标志传入到网页中；在“结账”网页中完成计算总价的工作，最后存入订单；在“订单”网页中以客户标志作为查询条件显示订单，以便只显示客户本人的订单部分。 在上述各个阶段中，都允许客户对数据进行选择和修改。除开始阶段和最后阶段需要直接存取数据库以外，其他部分均采用内存动态数据表来组织数据，这样做可以提高系统的运行效率。
电子商务之电商商品详情页制作（完整代码直接可用）.zip
05-27
我是一名学生，在期末课程设计中做了一个商品的详情页，供大家参考，哪里有不合适的地方还请指出，反正我又不改哈哈哈，开个小玩笑，如有好的想法可一起分享。
购物网站全部代码
11-14
简单购物网站的源代码，有基本的功能，学习网站开发可以下载参考
购物网站（包括需求分析，代码，演示）
09-14
简单实现了一下购物功能，不过也算是历经千辛万苦吧，呵呵
购物详情页面显示
m0_46527751的博客
03-12 1222
购物详情页面显示 首先顶部是一个TabBar，三个页面分别写入三个类中 主页面代码如下： class ProductContentPage extends StatefulWidget { final Map arguments; const ProductContentPage({Key? key, required this.arguments}) : super(key: key); @override State<ProductContentPage>
天天生鲜商品详情页HTML+css
helloworld00754的博客
02-24 2万+
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天天生鲜-商品详情页</title> <link rel="stylesheet" href="./css/main.css"> <link...
购物网站实现商品页面向详情页提交数据
AsuraThor的博客
03-04 1091
先来一个商品页面的JS <script> function recommand(res){ console.log(res) var pre = document.querySelector('.pre'); var next = document.querySelector('.next'); let content = docume...
商品详情页代码html,商品详情页food.vue
weixin_34211615的博客
06-04 4277
主体结构html代码用ref绑定food的DOM元素,为了被bscroll做滚动处理用transition包裹了整个food,为了实现这个页面的进入和退出动画js代码import BScroll from 'better-scroll';export default {props: {food: {type: Object}},data(){return {showFlag: false}},me...
Django+Python生鲜商城源码-分布式毕设项目详解
资源摘要信息:"基于Django+python开发的B2C分布式生鲜商城源码是一个毕业设计项目，该项目涉及的技术栈非常广泛，包括Python3.6.8、Django框架、MySql、Redis、Celery、FastDFS、Django-haystack与Whoosh搜索引擎、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值