# Niushop开源商城模板说明
---
从niushop3.0版本开始，前台模板进行了大量的优化完善，保持原有功能不变。严格遵循编码规范进行开发，优化文件目录结构，移除废弃代码文件，减少体积。web端采用ZUI框架，wap端采用MZUI框架，都是开源免费框架，允许二次开发，文档说明齐全，方便学习，上手简单，轻量级高性能，具备高可扩展性。在完善模板的过程中，同时对API也进行了整理（包括安全、返回值类型、缓存、效率），所有模板统一调用API接口请求数据，减少对控制器的依赖，便于二开人员自由开发模板，灵活调用数据。
**目前模板已经达到了快速切换整体色调的功能（快速修改网站：颜色、边框、按钮、字体大小、表单、弹出框）。**
前端编码规范参考：
[http://alloyteam.github.io/CodeGuide](http://alloyteam.github.io/CodeGuide)、[https://codeguide.bootcss.com](https://codeguide.bootcss.com)
模板开发规范如下：
1. 文件名一律采用小写+下划线，命名要简洁明了，一个功能对应一个JS、CSS文件，个别功能除外（goods、order），如果某个功能img、js比较多，那就单独建立一个文件夹
2. 每个功能页面中不能有太多内联样式、javascript，HTML、CSS、JS要最大化分离
3. 必须实现base.html，里边要定义好整套模板的HTML结构、block结构、公共页面部分（头部、底部）、全局公共样式函数，每一块都要标明注释，所有模板都要继承base。
4. 初始化数据调用php的api\(\)函数，JS中的数据调用api\(\)函数，外部js调用语言包，调用lang\(\)函数
5. 控制器中的代码要尽可能都提取到页面上，减少对控制器的依赖
6. 模板中的php代码，api\(\)要尽可能的写到顶部最上边，方便管理
7. 必须实现common.css定义公共全局样式（表单、弹出框、字体大小、按钮），theme.css（**强烈建议使用less**）为主题样式，用于调整网站整体色调（里边必须指定样式名称，样式命名必须规范，例如：文字颜色、边框颜色、背景颜色、按钮颜色、使用频率高的颜色），common.js定义公共函数，例如api、lang、消息弹出框等
**注意事项：**
1. **模板中的所有数据请求来源都是通过调用接口形式的**
2. **在编写样式时，要参考theme.css中定义好的主色调、边框、背景、文字、按钮颜色等，不能擅自定义颜色，否则后期维护模板工作量很大**
3. **common.css样式文件中会定义公共通用样式，在开发模板之前建议先阅读这个文件，防止写重复代码**
我们已经把颜色都整理到了一个文件中，模板中所有的颜色来源都写在theme.css文件里。在这里我们使用了Less语法，Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
官方文档：[http://lesscss.cn](http://lesscss.cn)
建议二开模板时，颜色都要调用这里的，不要擅自定义颜色，白色、遮罩层除外
**theme.less部分代码如下：**
```less
@base: #03A9F4; //主色调
@color-black: #333;//黑色
@color-gray: #e5e5e5;//灰色
@color-add-cart: #ff9800; //商品详情-->>加入购物车
@color-member-index-level: #fbf511; //会员中心-->>会员等级
/*背景色*/
.ns-bg-color {
background-color: @base !important;
}
/*文字颜色*/
.ns-text-color {
color: @base !important;
}
/*灰色*/
.ns-text-color-gray {
color: shade(@color-gray, 40%) !important;
}
/*边框*/
.ns-border-color{
border-color: @base !important;
}
/*会员中心*/
.member-info .member-level {
color: @color-member-index-level !important;
border-color: @color-member-index-level !important;
}
```
代码解释：
1. 顶部定义要使用的颜色变量
2. 样式命名以ns（niushop）开头，
3. bg == background 背景颜色，text 文字颜色，border 边框颜色
4. 每个样式都必须加上 !important
API目录结构如下：
> application
>
> > api
> >
> > > controller
> > >
> > > > Address.php 地址接口
> > > >
> > > > Article.php 文章接口
> > > >
> > > > BaseApi.php base接口，定义加密、签名验证、公共变量
> > > >
> > > > Config.php 配置接口
> > > >
> > > > Distribution.php 分销接口
> > > >
> > > > Goods.php 商品接口
> > > >
> > > > Index.php 首页接口
> > > >
> > > > Login.php 登录接口
> > > >
> > > > Member.php 会员接口
> > > >
> > > > Order.php 订单接口
> > > >
> > > > Pay.php 支付接口
> > > >
> > > > Promotion.php 营销活动接口
> > > >
> > > > Send.php 短信接口
> > > >
> > > > Shop.php 店铺接口
> > > >
> > > > Upload.php 上传接口
> > > >
> > > > Wchat.php 微信接口
> > > >
> > > > WchatApplet.php 微信小程序接口
wap端控制器目录结构如下：
> application
>
> > wap
> >
> > > controller
> > >
> > > > Article.php 文章
> > > >
> > > > BaseWap.php base控制器
> > > >
> > > > CustomTemplate.php 自定义模板
> > > >
> > > > Distribution.php 分销
> > > >
> > > > DistributionShop.php 分销店铺
> > > >
> > > > Diy.php 自定义模板
> > > >
> > > > Error.php 错误控制器
> > > >
> > > > Game.php 营销游戏
> > > >
> > > > Goods.php 商品
> > > >
> > > > Help.php 帮助
> > > >
> > > > Index.php 首页
> > > >
> > > > Login.php 登录
> > > >
> > > > Member.php 会员
> > > >
> > > > Notice.php 公告
> > > >
> > > > Order.php 订单
> > > >
> > > > Pay.php 支付
> > > >
> > > > Pintuan.php 拼团
> > > >
> > > > Task.php 执行定时任务
> > > >
> > > > Verification.php 核销
> > > >
> > > > Wchat.php 微信
web端控制器目录结构如下：
> application
>
> > web
> >
> > > controller
> > >
> > > > Article.php 文章
> > > >
> > > > BaseWeb.php base控制器
> > > >
> > > > Error.php 错误控制器
> > > >
> > > > Goods.php 商品
> > > >
> > > > Help.php 帮助
> > > >
> > > > Index.php 首页
> > > >
> > > > Login.php 登录
> > > >
> > > > Index.php 首页
> > > >
> > > > Member.php 会员
> > > >
> > > > Notice.php 公告
> > > >
> > > > Order.php 订单
> > > >
> > > > Topic.php 专题
wap端模板目录结构
> template
>
> > wap
> >
> > > default 模板名称
> > >
> > > > article 文章
> > > >
> > > > > detail.html 文章详情
> > > > >
> > > > > lists.html 文章列表
> > > >
> > > > distribution 分销
> > > >
> > > > > account.html 会员佣金记录（明细）
> > > > >
> > > > > account\_detail.html 具体项的佣金明细
> > > > >
> > > > > apply\_partner.html 股东申请
> > > > >
> > > > > apply\_promoter.html 分销商申请
> > > > >
> > > > > apply\_region.html 区域代理申请
> > > > >
> > > > > commission\_recording.html 进行中佣金
> > > > >
> > > > > commission\_shop.html 会员对于当前店铺的佣金情况
> > > > >
> > > > > goods.html 分销商品设置
> > > > >
> > > > > goods\_user.html 我的分销商品
> > > > >
> > > > > index.html 推广中心
> > > > >
> > > > > partner.html 股东首页
> > > > >
> > > > > region.html 区域代理首页
> > > > >
> > > > > shop\_edit.html 修改分销商店铺
> > > > >
> > > > > team.html 我的团队
> > > > >
> > > > > to\_withdraw.html 申请提现
> > > >
> > > > distribution\_shop 分销店铺
> > > >
> > > > > qrcode\_shop.html 我的店铺
> > > > >
> > > > > usershopgoods.html 店铺分享
> > > >
> > > > game 营销游戏
> > > >
> > > > > scratch\_ticket.html 刮刮乐游戏
> > > > >
> > > > > smash\_eggs.html 砸金蛋游戏
> > > > >
> > > > > turntable.html 大转盘游戏
> > > >
> > > > goods 商品
> > > >
> > > > > bargain.html 砍价商品列表
> > > > >
> > > > > bargain\_launch.html 砍价商品发起页面
> > > > >
> > > > > brand.html 品牌专区
> > > > >
> > > > > cart.html 购物车
> > > > >
> > > > > category.html 商品分类
> > > > >
> > > > > combo.html 组合套餐
> > > > >
> > > > > coupon.html 优惠券
> > > > >
> > > > > coupon\_receive.html 领取优惠券
> > > > >
> > > > > detail.html 商品详情base
> > > > >
> > > > > detail\_bargain.html 砍价商品详情，继承detail.html
> > > > >
> > > > > detail\_discount.html 限时折扣商品详情，继承detail.html
> > > > >
> > > > > detail\_groupbuy.html 团购商品详情，继承detail.html
> > > > >
> > > > > detail\_pintuan.html 拼团商品详情，继承detail.html
> > > > >
> > > > > detail\_presell.html 预售商品详情，继承detail.html
> > > > >
> > > > > discount.html 限时折扣
> > > > >
> > > > > groupbuy.html 团购专区
> > > > >
> > > > > lists.html 商品列表
> > > > >
> > > > > pintuan.html 拼团专区
> > > > >
> > > > > point.html 积分中心
> > > > >
> > > > > topic\_detail.html 专题活动详情
> > > > >
> > > > > topics.html 专题活动列表页面
> > > >
> > > > help 帮助中心
> > > >
> > > > > index.html 首页
> > > >
> > > > index 首页
> > > >
> > > > > error.html 错误页面
> > > > >
> > > > > index.html 首页
> > > > >
> > > > > shop\_index.html 店铺首页
> > > >
> > > > login 登录
> > > >
> > > > > bind.html 绑定账号
> > > > >
> > > > > find.html 忘记密码
> > > > >
> > > > > lock.html 用户锁定界面
> > > > >
> > > > > login.html 登录
> > > > >
> > > > > qq\_callback.html QQ回调
> > > > >
> > > > > qrcode.html 获取微信推广二维码
> > > > >
> > > > > register.html 注册
> > > > >
> > > > > register\_ext.html 完善信息
> > > >
> > > > member 会员
> > > >
> > > > > account.html 账户列表
> > > > >
> > > > > account\_edit.html 编辑账户
> > > > >
> > > > > address.html 会员地址管理
> > > > >
> > > > > address\_edit.html 编辑地址
> > > > >
> > > > > apply\_withdrawal.html 申请提现
> > > > >
> > > > > balance.html 会员余额
> > > > >
> > > > > bargain.html 我的砍价
> > > > >
> > > > > collection.html 我的收藏
> > > > >
> > > > > coupon.html 我的优惠券
> > > > >
> > > > > exchange.html 积分兑换余额
> > > > >
> > > > > footprint.html 我的足迹
> > > > >
> > > > > index.html 会员中心
> > > > >
> > > > > info.html 个人资料
> > > > >
> > > > > level.html 会员等级
> > > > >
> > > > > modify\_face.html 修改头像
> > > > >
> > > > > point.html 店铺积分流水
> > > > >
> > > > > receive\_prize.html 领取奖品
> > > > >
> > > > > recharge.html 用户充值余额
> > > > >
> > > > > signin.html 会员签到
> > > > >
> > > > > winning.html 我的中奖记录
> > > > >
> > > > > withdrawal.html 余额提现记录
> > > >
> > > > notice 公告
> > > >
> > > > > detail.html 公告详情
> > > > >
> > > > > lists.html 公告列表
> > > >
> > > > order 订单
> > > >
> > > > > aftersale.html 售后
> > > > >
> > > > > detail.html 订单详情
> > > > >
> > > > > evaluate.html 评价
> > > > >
> > > > > lists.html 订单列表
> > > > >
> > > > > logistics.html 物流详情页
> > > > >
> > > > > payment.html 待付款订单
> > > > >
> > > > > pickup.html 买家提货
> > > > >
> > > > > pickup\_toexamine.html 自提订单门店审核
> > > > >
> > > > > refund\_detail.html 订单项退款详情
> > > >
> > > > pay 支付
> > > >
> > > > > callback\_pc.html pc端同步回调
> > > > >
> > > > > callback\_wap.html wp端同步回调
> > > > >
> > > > > info\_pc.html pc端支付详情
> > > > >
> > > > > info\_wap.html wap端支付详情
> > > > >
> > > > > pc\_pay.html pc端余额支付选择界面
> > > > >
> > > > > qrcode.html 微信二维码支付
> > > > >
> > > > > wap\_pay.html wap端余额支付选择界面
> > > >
> > > > pintuan 拼团
> > > >
> > > > > lists.html 我的拼单
> > > > >
> > > > > share.html 拼团分享界面
> > > >
> > > > public 资料文件
> > > >
> > > > > css 样式
> > > > >
> > > > > font 字体
> > > > >
> > > > > img 图片
> > > > >
> > > > > js JavaScript脚本
> > > > >
> > > > > plugin JavaScript 插件
> > > >
> > > > verification 核销
> > > >
> > > > > code.html 我的虚拟码列表
> > > > >
> > > > > detail.html 核销商品详情
> > > > >
> > > > > goods.html 核销商品审核
> > > > >
> > > > > index.html 核销台
> > > > >
> > > > > share.html 虚拟商品
> > > >
> > > > wechat 微信
> > > >
> > > > > message.html 图文消息
> > > >
> > > > base.html base页面，定义HTML结构、引用公共资源
> > > >
> > > > config.xml 模板配置信息
> > > >
> > > > thumbnail.png 模板缩略图
> > >
> > > wap\_close\_tpl.html wap端关闭模板
web端模板目录结构
> template
>
> > web
> >
> > > default 模板名称
> > >
> > > > article 文章
> > > >
> > > > > detail.html 文章详情
> > > > >
> > > > > lists.html 文章列表
> > > >
> > > > block 楼层板块
> > > >
> > > > > style\_1.css 板块一的样式
> > > > >
> > > > > style\_1.html 板块一
> > > > >
> > > > > style\_2.css 板块二的样式
> > > > >
> > > > > style\_2.html 板块二
> > > > >
> > > > > style\_3.css 板块三的样式
> > > > >
> > > > > style\_3.html 板块三
> > > >
> > > > goods 商品
> > > >
> > > > > brand.html 品牌专区
> > > > >
> > > > > cart.html 购物车
> > > > >
> > > > > category.html 商品分类
> > > > >
> > > > > combo.html 组合套餐
> > > > >
> > > > > coupon.html 优惠券
> > > > >
> > > > > consult.html 商品咨询
> > > > >
> > > > > detail.html 商品详情base
> > > > >
> > > > > detail\_discount.html 限时折扣商品详情，继承detail.html
> > > > >
> > > > > detail\_groupbuy.html 团购商品详情，继承detail.html
> > > > >
> > > > > detail\_presell.html 预售商品详情，继承detail.html
> > > > >
> > > > > discount.html 限时折扣
> > > > >
> > > > > groupbuy.html 团购专区
> > > > >
> > > > > lists.html 商品列表
> > > > >
> > > > > point.html 积分中心
> > > > >
> > > > > topic\_detail.html 专题活动详情
> > > > >
> > > > > topics.html 专题活动列表页面
> > > >
> > > > help 帮助中心
> > > >
> > > > > index.html 首页
> > > >
> > > > index 首页
> > > >
> > > > > error.html 错误页面
> > > > >
> > > > > index.html 首页
> > > >
> > > > login 登录
> > > >
> > > > > find.html 忘记密码
> > > > >
> > > > > login.html 登录
> > > > >
> > > > > register.html 注册
> > > > >
> > > > > register\_ext.html 完善信息
> > > >
> > > > member 会员
> > > >
> > > > > address.html 会员地址管理
> > > > >
> > > > > address\_edit.html 编辑地址
> > > > >
> > > > > aftersale.html 售后
> > > > >
> > > > > balance.html 会员余额
> > > > >
> > > > > balance\_withdrawal.html 余额提现
> > > > >
> > > > > collection.html 我的收藏
> > > > >
> > > > > coupon.html 我的优惠券
> > > > >
> > > > > evaluate.html 商品评价/晒单
> > > > >
> > > > > evaluate\_edit.html 商品评价
> > > > >
> > > > > exchange.html 积分兑换余额
> > > > >
> > > > > footprint.html 我的足迹
> > > > >
> > > > > goods.html 购买的商品列表\(虚拟商品\)
> > > > >
> > > > > index.html 会员中心
> > > > >
> > > > > info.html 个人资料
> > > > >
> > > > > logistics.html 查看物流
> > > > >
> > > > > member\_base.html 会员base
> > > > >
> > > > > order.html 订单列表
> > > > >
> > > > > order\_detail.html 订单详情
> > > > >
> > > > > payment.html 待付款订单
> > > > >
> > > > > point.html 店铺积分流水
> > > > >
> > > > > refund.html 退款/退货/维修订单列表
> > > > >
> > > > > refund\_detail.html 退款详情
> > > > >
> > > > > security.html 账户安全
> > > > >
> > > > > withdrawal.html 提现记录
> > > >
> > > > notice 公告
> > > >
> > > > > detail.html 公告详情
> > > > >
> > > > > lists.html 公告列表
> > > >
> > > > topic 专题
> > > >
> > > > > detail.html 专题详情
> > > >
> > > > public 资料文件
> > > >
> > > > > css 样式
> > > > >
> > > > > font 字体
> > > > >
> > > > > img 图片
> > > > >
> > > > > js JavaScript脚本
> > > > >
> > > > > plugin JavaScript 插件
> > > >
> > > > base.html base页面，定义HTML结构、引用公共资源
> > > >
> > > > config.xml 模板配置信息
> > > >
> > > > thumbnail.png 模板缩略图
> > >
> > > web\_close\_tpl.html web端关闭模板
