|
|
layui.define(['layer', 'carousel'], function (exports) {
|
|
|
// 引入 jQuery 模块
|
|
|
var $ = layui.jquery;
|
|
|
// 引入 layer 模块
|
|
|
var layer = layui.layer;
|
|
|
// 引入 carousel 模块
|
|
|
var carousel = layui.carousel;
|
|
|
|
|
|
// 添加步骤条dom节点
|
|
|
var renderDom = function (elem, stepItems, postion) {
|
|
|
// 初始化步骤条的 HTML 字符串
|
|
|
var stepDiv = '<div class="lay-step">';
|
|
|
// 遍历步骤项数组，生成每个步骤项的 HTML
|
|
|
for (var i = 0; i < stepItems.length; i++) {
|
|
|
// 为每个步骤项添加一个包含类名 "step-item" 的 div 标签
|
|
|
stepDiv += '<div class="step-item">';
|
|
|
// 线
|
|
|
// 检查当前索引是否小于步骤项数组的最后一个索引
|
|
|
if (i < (stepItems.length - 1)) {
|
|
|
// 如果当前索引小于目标位置
|
|
|
if (i < postion) {
|
|
|
// 添加已完成的步骤项尾部HTML代码
|
|
|
stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
|
|
|
} else {
|
|
|
// 添加未完成的步骤项尾部HTML代码
|
|
|
stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 数字
|
|
|
// 获取当前步骤的编号
|
|
|
var number = stepItems[i].number;
|
|
|
|
|
|
// 如果当前步骤没有编号，则使用默认编号（步骤索引加1）
|
|
|
if (!number) {
|
|
|
number = i + 1;
|
|
|
}
|
|
|
|
|
|
// 根据当前步骤的位置生成相应的HTML代码
|
|
|
if (i == postion) {
|
|
|
// 如果当前步骤是活动步骤，添加活动状态的样式
|
|
|
stepDiv += '<div class="step-item-head step-item-head-active"><i class="layui-icon">' + number + '</i></div>';
|
|
|
} else if (i < postion) {
|
|
|
// 如果当前步骤在活动步骤之前，添加已完成状态的样式
|
|
|
stepDiv += '<div class="step-item-head"><i class="layui-icon layui-icon-ok"></i></div>';
|
|
|
} else {
|
|
|
// 如果当前步骤在活动步骤之后，添加未完成状态的样式
|
|
|
stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
|
|
|
}
|
|
|
|
|
|
// 获取当前步骤的标题和描述
|
|
|
var title = stepItems[i].title;
|
|
|
var desc = stepItems[i].desc;
|
|
|
|
|
|
// 如果标题或描述存在，则创建包含标题和描述的HTML结构
|
|
|
if (title || desc) {
|
|
|
stepDiv += '<div class="step-item-main">';
|
|
|
|
|
|
// 如果标题存在，添加标题的HTML结构
|
|
|
if (title) {
|
|
|
stepDiv += '<div class="step-item-main-title">' + title + '</div>';
|
|
|
}
|
|
|
|
|
|
// 如果描述存在，添加描述的HTML结构
|
|
|
if (desc) {
|
|
|
stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
|
|
|
}
|
|
|
|
|
|
stepDiv += '</div>';
|
|
|
}
|
|
|
|
|
|
// 关闭当前步骤的div标签
|
|
|
stepDiv += '</div>';
|
|
|
}
|
|
|
|
|
|
// 关闭所有步骤的容器div标签
|
|
|
stepDiv += '</div>';
|
|
|
|
|
|
// 将生成的HTML插入到指定的元素中
|
|
|
$(elem).prepend(stepDiv);
|
|
|
|
|
|
// 计算每一个条目的宽度，使其平均分布
|
|
|
var bfb = 100 / stepItems.length;
|
|
|
$('.step-item').css('width', bfb + '%');
|
|
|
};
|
|
|
|
|
|
var step = {
|
|
|
// 渲染步骤条
|
|
|
render: function (param) {
|
|
|
param.indicator = 'none'; // 不显示指示器
|
|
|
param.arrow = 'always'; // 始终显示箭头
|
|
|
param.autoplay = false; // 关闭自动播放
|
|
|
if (!param.stepWidth) {
|
|
|
param.stepWidth = '400px'; // 如果未设置步骤条宽度，则默认为400px
|
|
|
}
|
|
|
|
|
|
// 渲染轮播图
|
|
|
carousel.render(param);
|
|
|
|
|
|
// 渲染步骤条
|
|
|
var stepItems = param.stepItems;
|
|
|
renderDom(param.elem, stepItems, 0); // 初始渲染步骤条DOM元素
|
|
|
$('.lay-step').css('width', param.stepWidth); // 设置步骤条的宽度
|
|
|
|
|
|
//监听轮播切换事件
|
|
|
carousel.on('change(' + param.filter + ')', function (obj) {
|
|
|
$(param.elem).find('.lay-step').remove(); // 移除旧的步骤条DOM元素
|
|
|
renderDom(param.elem, stepItems, obj.index); // 根据当前索引重新渲染步骤条DOM元素
|
|
|
$('.lay-step').css('width', param.stepWidth); // 设置步骤条的宽度
|
|
|
});
|
|
|
|
|
|
// 隐藏左右箭头按钮
|
|
|
$(param.elem).find('.layui-carousel-arrow').css('display', 'none');
|
|
|
|
|
|
// 去掉轮播图的背景颜色
|
|
|
$(param.elem).css('background-color', 'transparent');
|
|
|
},
|
|
|
// 下一步
|
|
|
next: function (elem) {
|
|
|
// 触发点击事件，使轮播图切换到下一张
|
|
|
$(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
|
|
|
},
|
|
|
// 上一步
|
|
|
pre: function (elem) {
|
|
|
// 触发点击事件，使轮播图切换到上一张
|
|
|
$(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 加载外部CSS文件
|
|
|
layui.link(layui.cache.base + 'step-lay/step.css');
|
|
|
|
|
|
// 导出模块
|
|
|
exports('step', step);
|
|
|
});
|
