【波猫商城专业版模板】——打造独一无二的电商博客！

于 2024-05-06 11:31:57 发布
阅读量425 收藏 4
点赞数 5
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ldonty/article/details/138488876
版权

 前言

想要拥有一个专业、独特的电商博客？波猫商城专业版模板是你的绝佳选择！无论你是想要开设一个个人电商博客，还是打造一个在线商城，这个模板都能满足你的需求。

让我们来看看波猫商城专业版模板的特点：

  1. 强大的功能：这个模板集成了丰富的电商功能，包括商品展示、购物车、订单管理、支付接口等，让你的博客具备完整的电商功能。
  2. 精美的界面设计：波猫商城专业版模板采用现代化的设计风格，界面简洁美观，让你的博客与众不同。
  3. 自定义性强：你可以根据自己的需求自由定制博客的样式、布局、颜色等，打造属于自己的独特风格。
  4. 响应式设计：模板支持响应式设计，适应各种终端设备，无论是电脑、平板还是手机，都能够完美展示。
  5. SEO优化：模板内置了SEO优化功能，帮助你提升博客在搜索引擎中的排名，吸引更多的流量和用户。
  6. 多种支付接口：集成了多种支付接口，包括微信支付、支付宝支付等，方便用户完成购买并提升用户体验。
  7. 客户管理：模板提供了客户管理功能，方便你管理和跟踪客户信息，提供更好的售后服务。
  8. 丰富的插件和扩展：模板支持丰富的插件和扩展，可以根据需要添加更多的功能和特性。

无论你是想要开设一个个人电商博客，还是打造一个专业的在线商城，波猫商城专业版模板都能帮助你实现目标。赶快获取模板，展示你的产品，吸引更多的用户，实现商业成功！

内容

主页：

登录：

注册：

忘记密码：

订单查询：

功能

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>商店首页 - 网络乞丐</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="Keywords" content="空谷传声">
<meta name="description" content="空谷传声">
<link href="static/picture/1fd70064325848d5af55bf229fe54909.png" rel="icon">
<link rel="stylesheet" href="static/css/layui.css">
<link rel="stylesheet" href="static/css/main.css">
<link rel="stylesheet" href="static/css/iconfont.css">
<link rel="stylesheet" href="static/css/footer.css">
<script src="static/js/iconfont.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
    .icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/swiper-bundle.min.css">
    <style>
        .no-content {
            padding: 60px 0 55px;
            text-align: center;
            color: #999;
            border-radius: 5px;
        }

        .no-content .no-content-img {
            width: 150px;
            margin: 0 auto 20px;
            display: block;
        }

        .no-content .user-no-contents {
            margin-bottom: 0;
            padding-bottom: 15px;
            text-align: center;
            font-size: 18px;
            color: #c8c8c8;
        }
    </style>
</head>
<body class="page-no-scroll">

<!-- header -->
<style>
    .login-btn {
        border-radius: 5px !important;
        color: #fff !important;
        height: initial !important;
        line-height: 38px !important;
        font-size: 14px !important;
        padding: 0 18px !important;
        -webkit-box-shadow: 0 5px 6px 0 rgb(73 105 230 / 22%) !important;
        background: linear-gradient(0deg,#409EFF,#8987ff) !important;
    }
</style>
<div class="ew-header">
    <div class="layui-container">
        <a class="layui-logo" href="" style="letter-spacing: 1.5px;position: relative;">
            <img src="static/picture/logo.png" class="img-item" style="width: 32px;height: 32px;position: absolute;left: 0;">
            <span>网络乞丐</span>
        </a>
        <div class="ew-nav-group-mobile">
            <a id="btn-show">
                <svg class="icon" style="width: 30px; height: 30px;" aria-hidden="true">
                    <use xlink:href="#icon-tixing1"></use>
                </svg>
            </a>
        </div>
        <div class="ew-nav-group">
            <div class="nav-toggle"><i class="layui-icon layui-icon-shrink-right"></i></div>
            <ul class="layui-nav">
                <li class="layui-nav-item layui-this">
                    <a href="">商店首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="article.html">文章教程</a>
                </li>
                <li class="layui-nav-item">
                    <a href="search.html">
                        查询订单
                    </a>
                </li>
                <li class="layui-nav-item back-item" style="padding: 0 0 0 20px;">
                        <a href="login.html" class="layui-btn login-btn">登入/注册</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- goods-card -->
<div class="layui-container body-card" style="margin-bottom: 15px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
            <div class="layui-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
                <!-- Swiper -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="login.html" style="height: 100%; background-image: url(static/image/37f17253973c6e92beb2ee2edf57c71b.png);">
                                    <div class="swiper-text">
                                        <h2></h2>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="https://www.yuque.com/haoxiangshidacuigege/orqb6e/kopvfug8lovlkc5t" style="height: 100%; background-image: url(static/image/c222a5366551082cbd53b34529e575c6.png);">
                                    <div class="swiper-text">
                                        <h2></h2>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="login.html" style="height: 100%; background-image: url(static/image/e989203b4be87122fb0ba50e97cf7682.png);">
                                    <div class="swiper-text">
                                        <h2></h2>
                                    </div>
                                </a>
                            </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4 zlian-is-user-widget">
            <div class="user-widget-content">
                <div>
                    <div class="user-w-logon">
                        <div style="text-align: center; padding: 15px;">
                            <div style="background: rgb(223 223 223 / 30%); width: 51px; height: 51px; padding: 4px; border-radius: 50%; margin: 0 auto; cursor: pointer; position: relative;">
                                <img style="height: 51px; width: 51px; background-color: #f5f5f5; border-radius: 50%" src="static/picture/author.svg">
                            </div>
                            <h3 style="margin-top: 10px; font-size: 20px; font-weight: 500;">
                                
                                未登录
                            </h3>
                            <h4 style="margin-top: 6px">
                                
                                注册登录可享受会员专属福利
                            </h4>
                        </div>
                        <div class="bd" style="padding: 0;">
                            <dl style="position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;">
                                <dd style="padding: 0 5px 15px 15px">
                                        <a class="layui-btn layui-btn-normal zlian-sidebar-login-btn" href="login.html">登录</a>
                                </dd>
                            </dl>
                            <span class="zlian-sidebar-span">?</span>
                            <dl style="position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;">
                                <dd style="padding: 0 15px 15px 5px">
                                        <a class="layui-btn layui-btn-normal zlian-sidebar-reg-btn" href="register.html">注册</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="widget-mission-footer">
                    <a href="search.html" style="padding: 11px 10px;">订单查询 <i class="layui-icon" style="transform: rotate(-0deg);">&#xe602;</i></a>
                </div>
            </div>
        </div>
    </div>
    </div>


<!-- classify-card -->
<div class="layui-container body-card" style="margin-bottom: 15px;">
    <div class="layui-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
        <div class="layui-card-header">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gengduo1"></use>
            </svg>
            选择分类
            <div class="pull-right" style="position: relative;">
                <i class="layui-icon layui-icon-search layui-icon-screen-show"></i>
                <input id="screen-product" placeholder="请输入商品名称" class="layui-input screen-input" lay-verify="required" required="">
            </div>
        </div>
        <div class="layui-card-body" style="padding: 15px 15px;">
            <div class="layui-row layui-col-space15 classify-type" id="classifyList">
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15" id="goodsList">
    </div>
</div>
<!-- footer -->
<div class="ew-footer" style="max-width: 100vw; overflow: hidden;" nav-id="footer" xmlns:th="http://www.w3.org/1999/xhtml">
    <div class="layui-container">
        <div class="link-box">
            <div class="container grid other-link">
                <div class="cop" style="line-height: 30px;">
                    <img src="static/picture/ads.jpg" style="width: 100%;">
                </div>
            </div>
            <div class="container beian">
                <span>Jinx</span>
            </div>
        </div>
    </div>
    <div class="to-top" id="back-top">
        <div class="intercom-box" id="item-phone">
            <div class="to-intercom">
                <div>
                    <span class="iconfont icon-xiangshang" style="font-size: 65px; color: #3f9eff;"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="site-footer-nav">
    <div class="wrapper">
        <div class="footer-bottom">
            <div class="footer-bottom-left">
                <div class="beian">
                    <a rel="nofollow" target="__blank" href="#">网络乞丐</a>
                </div>
                <div class="copyright">网络乞丐</div>
            </div>
        </div>
    </div>
</div>
<!-- footer-home -->
<div id="mobile-footer-menu" class="mobile-footer-menu mobile-show footer-fixed">
    <div class="mobile-footer-left">
        <a href="">
            <div class="active" style="margin: 5px; padding: 5px;">
                <span>
                    <svg t="1644845231601" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5833" width="200" height="200"><path d="M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8l377.6-310.4c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zM816 928H608c-19.2 0-32-12.8-32-32v-150.4c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2C163.2 928 128 892.8 128 848V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384v-118.4c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304C896 896 864 928 816 928z" fill="#c8c8c8" p-id="5834"></path></svg>
                </span>
                <b>全部商品</b>
            </div>
        </a>
        <a href="article.html" class="zlian-heart-box">
            <div style="margin: 5px; padding: 5px;">
                <span>
                    <svg t="1644846440213" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6761" width="200" height="200"><path d="M886.624 297.376l-191.968-191.968c-2.944-2.944-6.432-5.312-10.336-6.912C680.48 96.864 676.288 96 672 96L224 96C171.072 96 128 139.072 128 192l0 640c0 52.928 43.072 96 96 96l576 0c52.928 0 96-43.072 96-96L896 320C896 311.52 892.64 303.36 886.624 297.376zM704 205.248 818.752 320 704 320 704 205.248zM800 864 224 864c-17.632 0-32-14.336-32-32L192 192c0-17.632 14.368-32 32-32l416 0 0 192c0 17.664 14.304 32 32 32l160 0 0 448C832 849.664 817.664 864 800 864z" p-id="6762" fill="#c8c8c8"></path><path d="M288 352l192 0c17.664 0 32-14.336 32-32s-14.336-32-32-32L288 288c-17.664 0-32 14.336-32 32S270.336 352 288 352z" p-id="6763" fill="#c8c8c8"></path><path d="M608 480 288 480c-17.664 0-32 14.336-32 32s14.336 32 32 32l320 0c17.696 0 32-14.336 32-32S625.696 480 608 480z" p-id="6764" fill="#c8c8c8"></path><path d="M608 672 288 672c-17.664 0-32 14.304-32 32s14.336 32 32 32l320 0c17.696 0 32-14.304 32-32S625.696 672 608 672z" p-id="6765" fill="#c8c8c8"></path></svg>
                </span>
                <b>文章教程</b>
            </div>
        </a>
        <a href="search.html" class="zlian-heart-box">
            <div style="margin: 5px; padding: 5px;">
                <span>
                    <svg t="1645131599582" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5833" width="200" height="200"><path d="M953.504 908.256l-152.608-163.296c61.856-74.496 95.872-167.36 95.872-265.12 0-229.344-186.624-415.968-416.032-415.968-229.344 0-415.968 186.592-415.968 415.968s186.624 415.968 416 415.968c60.096-0.032 118.048-12.576 172.224-37.248 16.096-7.328 23.2-26.304 15.872-42.368-7.328-16.128-26.4-23.264-42.368-15.872-45.856 20.864-94.88 31.456-145.76 31.488-194.08 0-351.968-157.888-351.968-351.968 0-194.048 157.888-351.968 351.968-351.968 194.112 0 352.032 157.888 352.032 351.968 0 91.36-34.848 177.92-98.08 243.744-12.256 12.736-11.84 32.992 0.864 45.248 0.96 0.928 2.208 1.28 3.296 2.08 0.864 1.28 1.312 2.752 2.4 3.904l165.504 177.088c6.272 6.752 14.816 10.144 23.36 10.144 7.84 0 15.68-2.848 21.856-8.64C964.864 941.408 965.568 921.152 953.504 908.256z" p-id="5834" fill="#c8c8c8"></path></svg>
                </span>
                <b>订单查询</b>
            </div>
        </a>
        <a href="login.html" class="zlian-heart-box">
            <div style="margin: 5px; padding: 5px;">
                <span>
                    <svg t="1644845421559" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="200" height="200"><path d="M800 384c0-160-128-288-288-288s-288 128-288 288c0 108.8 57.6 201.6 147.2 249.6-121.6 48-214.4 153.6-240 288-3.2 16 6.4 35.2 25.6 38.4h6.4c16 0 28.8-9.6 32-25.6 28.8-150.4 160-259.2 313.6-262.4h6.4c156.8 0 284.8-128 284.8-288zM288 384c0-124.8 99.2-224 224-224s224 99.2 224 224c0 121.6-99.2 220.8-220.8 224H505.6C384 604.8 288 505.6 288 384zM723.2 675.2c-16-9.6-35.2-6.4-44.8 9.6-9.6 16-6.4 35.2 9.6 44.8 73.6 51.2 124.8 121.6 140.8 204.8 3.2 16 16 25.6 32 25.6h6.4c16-3.2 28.8-19.2 25.6-38.4-19.2-99.2-80-185.6-169.6-246.4z" fill="#c8c8c8" p-id="6242"></path></svg>
                </span>
                <b>个人中心</b>
            </div>
        </a>
    </div>
</div>
<!-- 项目模板 -->
<script type="text/html" id="classifyItem">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
        <div class="project-list-item {{#  if(d.andIncrement === 0){ }}active{{#  } }} " data-id="{{d.id}}"
             lay-filter="classifySubmit" lay-submit>
            <div class="project-list-item-body">
                <div class="item-title"
                     style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; font-weight: 600; margin-bottom: 5px;">
                    {{d.name}}
                </div>
                <div class="project-list-item-text">
                    商品数量： {{d.productsMember}}
                </div>
            </div>
        </div>
    </div>
</script>

<!-- 项目模板 -->
<script type="text/html" id="productItem">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
        <div class="item-in box b2-radius">
            <div class="post-module-thumb" style="padding-top: 100%;">
                <a href="/product/{{d.link}}" rel="nofollow" class="thumb-link">
                    <picture class="picture">
                        <img src="{{# if(d.imageLogo == null || d.imageLogo == ''){ }}../theme/dark/images/commodity.svg{{# } }}  {{# if(d.imageLogo != null){ }} {{d.imageLogo}} {{# } }}" class="post-thumb lazy">
                    </picture>
                </a>
            </div>
            <div class="post-info">
                <h2>
                    <a href="/product/{{d.link}}">{{d.name}}</a>
                </h2>
                <div class="post-list-meta-box">
                    <div class="post-list-cat b2-radius">
                        <span style="color: #F56C6C; font-size: 15px">¥ {{d.price}}</span>
                    </div>
                </div>
                <div class="list-footer">
                    <a href="/product/{{d.link}}" class="post-list-meta-avatar">
                        <span>库存: {{d.cardMember}}</span>
                    </a>
                    <span>
                    {{# if(d.isCoupon >= 1){ }}<span style="color: #67C23A">券</span>{{# } }}
                    {{# if(d.restricts >= 1){ }}<span style="color: #F56C6C">限购</span>{{# } }}
                    {{# if(d.isWholesale === 1){ }}<span style="color: #E6A23C">折扣</span>{{# } }}
                    </span>
                </div>
            </div>
        </div>
        <div class="product-tag">
            {{# if(d.shipType == 0){ }}<span class="el-tag el-tag&#45;&#45;light">自动发货</span>{{# } }}
            {{# if(d.shipType == 1){ }}<span class="el-tag el-tag&#45;&#45;success el-tag&#45;&#45;danger">手动发货</span>{{# } }}
        </div>
        {{# if(d.cardMember == 0){ }}
            <div class="ribbon-two ribbon-two-danger"><span>售罄</span></div>
        {{# } }}
    </div>
</script>

<!-- js部分 -->
<!-- js部分 -->
<script type="text/javascript" src="static/js/layui.js"></script>
<script type="text/javascript" src="static/js/common.js"></script><script type="text/javascript" src="static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="static/js/jquery.cookie.js"></script>
<!-- Swiper JS -->
<script type="text/javascript" src="static/js/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
        pagination: {
            el: ".swiper-pagination",
        },
        autoplay:true
    });
</script>

<script>
    layui.use(['layer', 'form', 'notice', 'dataGrid'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var notice = layui.notice;
        var dataGrid = layui.dataGrid;
        var classifysListJson = JSON.parse('[{"andIncrement":0,"createdAt":1706978939000,"id":3,"imageLogo":"","name":"程序","productsMember":12,"sort":1,"status":1,"updatedAt":1706978939000},{"andIncrement":1,"createdAt":1706978946000,"id":4,"imageLogo":"","name":"国风系列壁纸","productsMember":10,"sort":2,"status":1,"updatedAt":1706978946000},{"andIncrement":2,"createdAt":1706980481000,"id":5,"imageLogo":"","name":"二次元系列壁纸","productsMember":12,"sort":3,"status":1,"updatedAt":1706980481000},{"andIncrement":3,"createdAt":1706980490000,"id":6,"imageLogo":"","name":"游戏系列壁纸","productsMember":23,"sort":4,"status":1,"updatedAt":1706980490000},{"andIncrement":4,"createdAt":1706980497000,"id":7,"imageLogo":"","name":"萌宠系列壁纸","productsMember":4,"sort":5,"status":1,"updatedAt":1706980497000},{"andIncrement":5,"createdAt":1706980510000,"id":8,"imageLogo":"","name":"星座机甲系列壁纸","productsMember":12,"sort":6,"status":1,"updatedAt":1706980510000},{"andIncrement":6,"createdAt":1706980519000,"id":9,"imageLogo":"","name":"节日系列壁纸","productsMember":2,"sort":7,"status":1,"updatedAt":1706980519000},{"andIncrement":7,"createdAt":1706980534000,"id":10,"imageLogo":"","name":"梵高风景系列壁纸","productsMember":8,"sort":8,"status":1,"updatedAt":1706980534000},{"andIncrement":8,"createdAt":1706980547000,"id":11,"imageLogo":"","name":"发财猫系列壁纸","productsMember":2,"sort":9,"status":1,"updatedAt":1706980547000},{"andIncrement":9,"createdAt":1706980564000,"id":12,"imageLogo":"","name":"情侣四季系列壁纸","productsMember":4,"sort":10,"status":1,"updatedAt":1706980564000}]');
        var classifyId;
        var shopSettingsJson = JSON.parse(JSON.stringify({"id":1,"isWindow":0,"windowText":"<p>1</p>"}));

        if (shopSettingsJson.isWindow == 1) {
            var isWindow = $.cookie('isWindow');
            if ($.cookie("isWindow") != 'yes') {
                //示范一个公告层
                layer.open({
                    type: 1,
                    title: '站点公告',
                    closeBtn: false,
                    area: '300px;',
                    shade: 0.4,
                    id: 'LAY_layuipro',
                    btn: ['我知道啦'],
                    btnAlign: 'c',
                    moveType: 1,
                    content: '<div style="padding: 20px; font-size: 16px; font-family: Content-font, Roboto, sans-serif; font-weight: 400;">' + shopSettingsJson.windowText + '</div>',
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.click(function () {
                            /*var date = new Date();
                            date.setTime(date.getTime() + (5 * 1000));*/
                            $.cookie('isWindow', 'yes', {expires: 1});
                        })
                    }
                });
            }
        }

        // 分类点击事件
        $('.pay-type-group>div').click(function () {
            $('.pay-type-group>div').removeClass('active');
            $(this).addClass('active');
        });

        var list = classifysListJson;

        var classifyHtml = '';
        if (list.length != 0) {
            classifyId = list[0].id;
            dataGrid.render({
                elem: '#classifyList',
                templet: '#classifyItem',
                data: list
            });
        } else {
            classifyHtml = '' +
                '<div style="text-align: center; padding: 30px;">' +
                '   <div style="letter-spacing: 1.5px; position: relative; height: 40px; line-height: 50px; display: inline-block; font-size: 18px; color: #888; padding-left: 36px; background-size: 32px; background-position: 0 19px; background-repeat: no-repeat;">' +
                '       <img src="/theme/dark/images/no.svg" style="top: 11px; width: 50px; margin-right: 10px; left: 0;">' +
                '       <span>暂无分类</span>' +
                '   </div>' +
                '</div>';
            $("#classifyList").html(classifyHtml);
        }

        // 点击事件
        $('.classify-type>div .project-list-item').click(function () {
            $('.classify-type>div .project-list-item').removeClass('active');
            $(this).addClass('active');
        });

        dataGrid.render({
            elem: '#goodsList',
            templet: '#productItem',
            url: '/getProductList',
            where: {classifyId: classifyId},
            loadMore: {limit: 12, class: 'datagrid-page-goodsList'}  // 开启加载更多
        });

        /* 表单提交 */
        form.on('submit(classifySubmit)', function () {
            classifyId = $('.classify-type>div .project-list-item.active').data('id');
            dataGrid.render({
                elem: '#goodsList',
                templet: '#productItem',
                url: '/getProductList',
                where: {classifyId: classifyId},
                loadMore: {limit: 12, class: 'datagrid-page-goodsList'}  // 开启加载更多
            });
        });

        $(document).ready(function (e) {
            $("#screen-product").keyup(function (e) {
                var content = $(this).val(); // 获取到搜索框输入的内容
                console.log(content)
                dataGrid.render({
                    elem: '#goodsList',
                    templet: '#productItem',
                    url: '/getProductList',
                    where: {classifyId: classifyId, name: content},
                    loadMore: {limit: 12, class: 'datagrid-page-goodsList'}  // 开启加载更多
                });
            });
        });
    });
</script>
</body>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
<title>用户登录 - 网络乞丐</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="Keywords" content="空谷传声">
<meta name="description" content="空谷传声">
<link href="static/picture/1fd70064325848d5af55bf229fe54909.png" rel="icon">
<link rel="stylesheet" href="static/css/layui.css">
<link rel="stylesheet" href="static/css/main.css">
<link rel="stylesheet" href="static/css/iconfont.css">
<link rel="stylesheet" href="static/css/footer.css">
<script src="static/js/iconfont.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
    .icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>
    <link rel="stylesheet" href="static/css/member-login.css">
</head>
<body>

<!-- header -->
<style>
    .login-btn {
        border-radius: 5px !important;
        color: #fff !important;
        height: initial !important;
        line-height: 38px !important;
        font-size: 14px !important;
        padding: 0 18px !important;
        -webkit-box-shadow: 0 5px 6px 0 rgb(73 105 230 / 22%) !important;
        background: linear-gradient(0deg,#409EFF,#8987ff) !important;
    }
</style>
<div class="ew-header">
    <div class="layui-container">
        <a class="layui-logo" href="index.html" style="letter-spacing: 1.5px;position: relative;">
            <img src="static/picture/logo.png" class="img-item" style="width: 32px;height: 32px;position: absolute;left: 0;">
            <span>网络乞丐</span>
        </a>
        <div class="ew-nav-group-mobile">
            <a id="btn-show">
                <svg class="icon" style="width: 30px; height: 30px;" aria-hidden="true">
                    <use xlink:href="#icon-tixing1"></use>
                </svg>
            </a>
        </div>
        <div class="ew-nav-group">
            <div class="nav-toggle"><i class="layui-icon layui-icon-shrink-right"></i></div>
            <ul class="layui-nav">
                <li class="layui-nav-item layui-this">
                    <a href="index.html">商店首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="article.html">文章教程</a>
                </li>
                <li class="layui-nav-item">
                    <a href="search.html">
                        查询订单
                    </a>
                </li>
                <li class="layui-nav-item back-item" style="padding: 0 0 0 20px;">
                        <a href="" class="layui-btn login-btn">登入/注册</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- banner -->
<div class="ew-banner">
    <div class="layui-container" style="text-align: center;padding-bottom: 80px; padding-top: 30px;">
        <h2 style="font-size: 25px; color: #fff;margin-bottom: 10px;">用户登录</h2>
        <h2 style="font-size: 20px; color: #fff;">专业运维24小时处理、您的帐户安全将得到充分的保障。</h2>
    </div>
</div>

<div class="login-wrapper" style="padding-left: 15px; padding-right: 15px; margin-top: 15px">
    <div class="ew-show" style="margin-top: -70px;">
        <div class="layui-card-header">
            <span class="zlian-card-title">登录到网络乞丐</span>
        </div>
        <form class="layui-form">
            <div class="layui-form-item layui-input-icon-group">
                <i class="layui-icon layui-icon-username"></i>
                <input class="layui-input" name="username" placeholder="请输入登录账号" autocomplete="off" lay-vertype="tips" lay-verify="required" required="">
            </div>
            <div class="layui-form-item layui-input-icon-group">
                <i class="layui-icon layui-icon-password"></i>
                <input class="layui-input" name="password" placeholder="请输入登录密码" type="password" lay-vertype="tips" lay-verify="required" required="">
            </div>
            <div class="layui-form-item layui-input-icon-group login-captcha-group">
                <i class="layui-icon layui-icon-auz"></i>
                <input class="layui-input" name="code" placeholder="请输入验证码" autocomplete="off" lay-vertype="tips" lay-verify="required" required="">
                <img class="login-captcha" src="static/picture/captcha.gif" alt="">
            </div>
            <div class="layui-form-item">
                <input type="checkbox" name="remember" value="true" title="记住密码" lay-skin="primary">
                <a href="forget.html" class="layui-link pull-right">忘记密码</a>
            </div>
            <div class="layui-form-item" style="margin-bottom: 15px;">
                <button class="layui-btn layui-btn-fluid" style="font-size: 17px; background-image: linear-gradient(to right, #4282ff, #716ffe);" lay-filter="loginSubmit" lay-submit="">登录
                </button>
            </div>
            <div class="layui-form-item" style="margin-bottom: 15px;">
                <a style="margin-top:10px;" href="register.html" class="layui-link pull-right">立即注册</a>
            </div>
        </form>
    </div>
</div>

<!-- footer -->
<div class="ew-footer" style="max-width: 100vw; overflow: hidden;" nav-id="footer" xmlns:th="http://www.w3.org/1999/xhtml">
    <div class="layui-container">
        <div class="link-box">
            <div class="container grid other-link">
                <div class="cop" style="line-height: 30px;">
                    <img src="static/picture/ads.jpg" style="width: 100%;">
                </div>
            </div>
            <div class="container beian">
                <span>Jinx</span>
            </div>
        </div>
    </div>
    <div class="to-top" id="back-top">
        <div class="intercom-box" id="item-phone">
            <div class="to-intercom">
                <div>
                    <span class="iconfont icon-xiangshang" style="font-size: 65px; color: #3f9eff;"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="site-footer-nav">
    <div class="wrapper">
        <div class="footer-bottom">
            <div class="footer-bottom-left">
                <div class="beian">
                    <a rel="nofollow" target="__blank" href="#">网络乞丐</a>
                </div>
                <div class="copyright">网络乞丐</div>
            </div>
        </div>
    </div>
</div>
<!-- footer-home -->
<div id="mobile-footer-menu" class="mobile-footer-menu mobile-show footer-fixed">
    <div class="mobile-footer-left">
        <a href="index.html">
            <div style="margin: 5px; padding: 5px;">
                <span>
                    <svg t="1644845231601" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5833" width="200" height="200"><path d="M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8l377.6-310.4c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zM816 928H608c-19.2 0-32-12.8-32-32v-150.4c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2C163.2 928 128 892.8 128 848V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384v-118.4c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304C896 896 864 928 816 928z" fill="#c8c8c8" p-id="5834"></path></svg>
                </span>
                <b>全部商品</b>
            </div>
        </a>
        <a href="article.html" class="zlian-heart-box">
            <div style="margin: 5px; padding: 5px;">
                <span>
                    <svg t="1644846440213" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6761" width="200" height="200"><path d="M886.624 297.376l-191.968-191.968c-2.944-2.944-6.432-5.312-10.336-6.912C680.48 96.864 676.288 96 672 96L224 96C171.072 96 128 139.072 128 192l0 640c0 52.928 43.072 96 96 96l576 0c52.928 0 96-43.072 96-96L896 320C896 311.52 892.64 303.36 886.624 297.376zM704 205.248 818.752 320 704 320 704 205.248zM800 864 224 864c-17.632 0-32-14.336-32-32L192 192c0-17.632 14.368-32 32-32l416 0 0 192c0 17.664 14.304 32 32 32l160 0 0 448C832 849.664 817.664 864 800 864z" p-id="6762" fill="#c8c8c8"></path><path d="M288 352l192 0c17.664 0 32-14.336 32-32s-14.336-32-32-32L288 288c-17.664 0-32 14.336-32 32S270.336 352 288 352z" p-id="6763" fill="#c8c8c8"></path><path d="M608 480 288 480c-17.664 0-32 14.336-32 32s14.336 32 32 32l320 0c17.696 0 32-14.336 32-32S625.696 480 608 480z" p-id="6764" fill="#c8c8c8"></path><path d="M608 672 288 672c-17.664 0-32 14.304-32 32s14.336 32 32 32l320 0c17.696 0 32-14.304 32-32S625.696 672 608 672z" p-id="6765" fill="#c8c8c8"></path></svg>
                </span>
                <b>文章教程</b>
            </div>
        </a>
        <a href="search.html" class="zlian-heart-box">
            <div style="margin: 5px; padding: 5px;">
                <span>
                    <svg t="1645131599582" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5833" width="200" height="200"><path d="M953.504 908.256l-152.608-163.296c61.856-74.496 95.872-167.36 95.872-265.12 0-229.344-186.624-415.968-416.032-415.968-229.344 0-415.968 186.592-415.968 415.968s186.624 415.968 416 415.968c60.096-0.032 118.048-12.576 172.224-37.248 16.096-7.328 23.2-26.304 15.872-42.368-7.328-16.128-26.4-23.264-42.368-15.872-45.856 20.864-94.88 31.456-145.76 31.488-194.08 0-351.968-157.888-351.968-351.968 0-194.048 157.888-351.968 351.968-351.968 194.112 0 352.032 157.888 352.032 351.968 0 91.36-34.848 177.92-98.08 243.744-12.256 12.736-11.84 32.992 0.864 45.248 0.96 0.928 2.208 1.28 3.296 2.08 0.864 1.28 1.312 2.752 2.4 3.904l165.504 177.088c6.272 6.752 14.816 10.144 23.36 10.144 7.84 0 15.68-2.848 21.856-8.64C964.864 941.408 965.568 921.152 953.504 908.256z" p-id="5834" fill="#c8c8c8"></path></svg>
                </span>
                <b>订单查询</b>
            </div>
        </a>
        <a href="" class="zlian-heart-box">
            <div class="active" style="margin: 5px; padding: 5px;">
                <span>
                    <svg t="1644845421559" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="200" height="200"><path d="M800 384c0-160-128-288-288-288s-288 128-288 288c0 108.8 57.6 201.6 147.2 249.6-121.6 48-214.4 153.6-240 288-3.2 16 6.4 35.2 25.6 38.4h6.4c16 0 28.8-9.6 32-25.6 28.8-150.4 160-259.2 313.6-262.4h6.4c156.8 0 284.8-128 284.8-288zM288 384c0-124.8 99.2-224 224-224s224 99.2 224 224c0 121.6-99.2 220.8-220.8 224H505.6C384 604.8 288 505.6 288 384zM723.2 675.2c-16-9.6-35.2-6.4-44.8 9.6-9.6 16-6.4 35.2 9.6 44.8 73.6 51.2 124.8 121.6 140.8 204.8 3.2 16 16 25.6 32 25.6h6.4c16-3.2 28.8-19.2 25.6-38.4-19.2-99.2-80-185.6-169.6-246.4z" fill="#c8c8c8" p-id="6242"></path></svg>
                </span>
                <b>个人中心</b>
            </div>
        </a>
    </div>
</div><!-- js部分 -->
<script type="text/javascript" src="static/js/layui1.js"></script>
<script type="text/javascript" src="static/js/common1.js"></script>
<script>
    layui.use(['index', 'layer', 'form'], function () {
        var $ = layui.jquery;
        var index = layui.index;
        var layer = layui.layer;
        var form = layui.form;

        /* 表单提交 */
        form.on('submit(loginSubmit)', function (data) {
            var loadIndex = layer.msg('登录中...', {icon: 16, shade: 0.01, time: false});
            $.post('/member/api/login', data.field, function (res) {
                layer.close(loadIndex);
                if (0 === res.code) {
                    layer.msg('登录成功', {icon: 1, time: 1000}, function () {
                        index.clearTabCache();
                        location.replace('/member/userinfo');
                    });
                } else {
                    /* 刷新图形验证码 */
                    $('img.login-captcha').click(function () {
                        this.src = this.src + '?t=' + (new Date).getTime();
                    }).trigger('click');
                    layer.msg(res.msg || '登录失败', {icon: 2, anim: 6});
                }
            });
            return false;
        });

        /* 图形验证码 */
        $('img.login-captcha').click(function () {
            this.src = this.src + '?t=' + (new Date).getTime();
        }).trigger('click');

    });
</script>
</body>
</html>

我是网络乞丐，一个不务正业的程序员，广交天下好友。

祝大家发财，需要源码到公众号领取。

Ldonty
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值