商城详情页HTML+CSS + js

66-41

已于 2023-07-03 19:28:12 修改

阅读量3.6k

点赞数 4

文章标签： html css 前端

于 2023-07-03 19:23:42 首次发布

本文链接：https://blog.csdn.net/W256999/article/details/131522114

版权

该代码段展示了一个使用HTML、CSS和JavaScript实现的商品详情页面，包括图片、价格、商品信息和加入购物车按钮。当用户点击加入购物车按钮时，会调用JavaScript函数将商品ID添加到购物车，并提供了返回上一页和查看购物车的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html+css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        width: 100%;
        height: 70px;
        background-color: #ffe2e2;
        margin-bottom: 40px;
        line-height: 50px;
        /* text-align: center; */
      }
      .back {
        font-size: 30px;
        color: #848484;
        cursor: pointer;
      }
      .shop {
        font-size: 30px;
        line-height: 50px;
        color: #848484;
      }
      .all {
        width: 100%;

        padding-bottom: 50px;
        margin-top: -80px;
        margin-bottom: 1px;
      }
      .all .content {
        margin-top: 0px;
        float: left;
      }

      #content {
        /* 	border: 1px solid red; */
        width: 1200px;
        margin-top: -80px;
        margin: auto;
        display: flex;
      }
      #content .a1 {
        float: left;
        margin-left: 10px;
      }
      #content .a1 .big {
        /* float: left; */
        width: 450px;
        height: 400px;
      }
      #content .a11 ul li {
        list-style: none;
        float: left;
        margin: 20px 15px;
      }

      .a2 {
        float: left;
        margin-left: 90px;
      }
      .a21 .color {
        color: #758188;
      }
      .a21 .a211 {
        background-color: #f2f5f8;
        color: #758188;
      }
      .a21 .a211 .prices,
      .shic {
        margin-left: 40px;
      }
      .a21 .a211 .prices {
        color: #ff4f0d;
        font-size: 35px;
        font-weight: bold;
      }
      .a21 .a211 .prices2 {
        text-decoration: line-through;
      }
      .a21 .a211 .yis {
        margin-left: 230px;
      }
      .a22 {
        background-color: #f6f9fb;
      }
      .a22 span {
        margin-top: 10px;
      }
      .a22 .neir {
        margin-left: 50px;
      }

      .a24 {
        margin-top: 10px;
      }
      .a24 .bang {
        display: inline-block;
        border: 3px #edf0f5 solid;
        width: 50px;
        line-height: 40px;
        margin-left: 30px;
        text-align: center;
      }
      .a24 .bang:hover {
        border: 3px #ff4f0d solid;
      }
      .a25 {
        margin-top: 30px;
      }
      .a25 button {
        display: inline-block;
        width: 200px;
        height: 60px;
        border-radius: 30px;
        margin-left: 30px;
      }

      .a25 .a25color1 {
        background-color: #ff4f0d;
        color: white;
        font-size: 20px;
        font-weight: bolder;
        border: 1px #ff4f0d solid;
        cursor: pointer;
      }
      .a25 .a25color1:active {
        background-color: #ffeee8;
        color: #ff4f0d;
        font-size: 20px;
        font-weight: bolder;
        border: 1px #ff4f0d solid;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <span class="back"><</span>
      <span class="shop">商品详情</span>
    </div>
    <div id="all"></div>
    <script src="./js/details.js" type="module"></script>
  </body>
</html>

js

import { itemlist, addshop } from "./api.js";
//获取url 后面的搜索字段

let id = window.location.search;
const query = new URLSearchParams(id);
let all = document.querySelector("#all");
let back = document.querySelector(".nav .back");
let p = query.get("id");

itemlist(p).then((r) => {
  console.log(r.data.info);
  let res = ` 
   <div id="content">
  <div class="a1">
    <img
      class="big"
      src="${r.data.info.img_big_logo}"
    />
  </div>
  <div class="a2">
    <h2>${r.data.info.category}</h2>
    <div class="a21">
      <div class="a211">
        <span class="color">售价</span>
        <span class="prices">￥${r.data.info.current_price}</span>
      </div>
      <div class="a22">

        <span class="color">详情</span>
        <span class="neir"
          >${r.data.info.title}</span
        >
  
      </div>
      <div class="a24">
        <span class="color">选择</span>
      </div>
      <div class="a25">
        <a href="#"><button class="a25color1" onclick="addshop(${r.data.info.goods_id})">加入购物车</button></a>
        <a href="#"><button class="" onclick="shopcar(${r.data.info.goods_id})">查看购物车</button></a>
       
      </div>
    </div>
  </div>
</div> 
    `;
  all.innerHTML = res;
});

//点击返回页面
back.onclick = function () {
  console.log(11);
  history.back();
};

window.addshop = function (id) {
  console.log(id);
  let uid = localStorage.getItem("uid");
  console.log(uid - 0);
  addshop(uid, id).then((r) => {
    console.log(r);
  });
};

window.shopcar = function () {
  location.href = "./购物车.html";
};