模块

功能说明

导航栏

实现响应式菜单，支持不同用户角色（管理员、店主、顾客）的不同菜单项。

权限控制

根据 Session 中的角色信息动态渲染菜单内容。

搜索功能

使用 AJAX 实现无刷新搜索，提升用户体验。

内容展示区

支持子页面内容动态加载，保持统一风格。

脚本管理

集中式引入常用脚本库，允许子页面添加自定义脚本。

function addToCart(flowerId) {

    // 获取按钮和倒计时元素

    var button = document.querySelector('.btn-gradient');

    var countdown = document.getElementById('countdown');

    // 禁用按钮并改变按钮文本为加载状态

    button.disabled = true;

    button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 处理中...';

    // 显示倒计时框并应用动画效果

    countdown.style.display = 'inline-block';

    countdown.classList.add('countdown-show');

    let seconds = 3; // 设置倒计时秒数

    const numberElement = countdown.querySelector('.countdown-number'); // 获取倒计时数字元素

    numberElement.textContent = seconds; // 初始化倒计时数字

    // 开始定时器，每秒更新一次

    const timer = setInterval(() => {

        seconds--; // 每次循环减少一秒

        numberElement.textContent = seconds; // 更新倒计时数字

        numberElement.classList.add('countdown-pulse'); // 添加跳动动画类

        // 动态修改背景颜色以增加视觉效果

        countdown.style.background = `linear-gradient(145deg,

            hsl(${seconds * 40}, 70%, 60%),

            #a363d9)`;

        // 在每次添加跳动动画类之后短暂延迟移除它，创建脉冲效果

        setTimeout(() => {

            numberElement.classList.remove('countdown-pulse');

        }, 200);

        // 如果倒计时结束

        if (seconds <= 0) {

            clearInterval(timer); // 清除定时器

            countdown.classList.remove('countdown-show'); // 移除动画效果

            setTimeout(() => {

                countdown.style.display = 'none'; // 隐藏倒计时框

                button.disabled = false; // 启用按钮

                button.innerHTML = '立即购买'; // 恢复按钮文本

                window.location.href = '@Url.Action("InsertCart","Cart",new { flowerID=Model.FlowerId})'; // 跳转至购物车页面

            }, 500);

        }

    }, 1000); // 每隔一秒钟调用一次回调函数

}

@model IEnumerable<FlowerShop.Models.Flowers>

<select id="flowerTypeSelect" name="flowertype" onchange="this.form.submit();">

    <option value="" disabled selected>选择花卉类型</option>

    @foreach (var flowertype in ViewBag.flowerType as List<FlowerShop.Models.FlowerTypes>)

    {

        <option value="@flowertype.FlowerTypeId">@flowertype.FlowerTypeName</option>

    }

</select>

@using (Ajax.BeginForm("SearchFlowerList", "Flowers", new AjaxOptions { ... }))