第一步：萤火小程序后台添加分类模板选择单选框
后台模板选择文件名称为：category.php，文件路径：/source/application/store/view/wxapp/page/category.php，这个文件中修改两处，打开文件后在第45行和第61行分别添加如下代码：
// 第45行添加分类模板单选： <label class="am-radio-inline"> <input type="radio" name="category[category_style]" value="21" data-am-ucheck <?= $model['category_style'] == 21 ? 'checked' : '' ?>> 二级分类 (商品) </label> // 第61行添加模板描述文字： <small class="<?= $model['category_style'] == 21 ? '' : 'hide' ?>" data-value="21">商品图片为正方形，采用第一张商品图。 </small> <em><strong><span style="font-size: 18px;">注意：</span></strong></em>
1、上述代码中共出现了四次21这个数字，21是您需要新增的模板ID，修改为自己模板的ID号即可。
2、把相应的模板样式图命名为21（和自己的模板ID号一致）的png格式图片到/assets/store/img/category_tpl/21.png，切换分类模板时就可看到相应的样式分类图了。
第二步：在小程序前端页面增加分类页面模板
前端分类页面模板为index.wxml，文件路径为/pages/category/index.wxml。打开文件后，在第68行添加如下代码：
<!-- 分类样式：二级分类 (商品) 21 -->
<view class="cate-content dis-flex" wx:elif="{{ templet.category_style == 21 && list.length > 0 }}">
<!-- 左侧 一级分类 -->
<scroll-view class="cate-left f-28" scroll-y="{{ true }}" style="height: {{ scrollHeight }}px; ">
<view data-index="{{index}}" wx:for="{{list}}" wx:key="category_id">
<text bindtap="selectNav" class="type-subnav {{curNav==item.category_id?'type-subnav-selected':''}}" data-id="{{ item.category_id }}">{{ item.name }}</text>
<view class="type-nav-child" wx:if="{{curNav == item.category_id}}" wx:key="cit">
<view hover-class="none" class="flex-box" data-list="{{index}}" wx:for="{{ item.child }}" wx:key="category_id">
<text bindtap="selectChildNav" class="type-nav {{curChildId==item.category_id?'selected':''}}" data-id="{{ item.category_id }}">{{item.name}}</text>
</view>
</view>
</view>
</scroll-view>
<!-- 商品列表 -->
<scroll-view bindscrolltolower="bindDownLoad" scroll-y style="height: {{scrollHeight}}px; width: 750rpx;" wx:if="{{goodlist.data.length > 0}}">
<view class="store_nav_cont dis-flex b-f b-b">
<view bindtap="switchSortType" data-type="all" class="dis-flex flex-x-center flex-box t-c p-r" data-index="0 " id="list-{{sortType==='all'?true:0}}">
<text>综合</text>
</view>
<view bindtap="switchSortType" data-type="sales" class="dis-flex flex-x-center flex-box t-c p-r" data-index="1" id="list-{{sortType==='sales'?true:0}}">
<text class="price__text">销量</text>
<view class="price__arrow dis-flex flex-dir-column flex-x-center flex-y-center">
<text class="iconfont icon-arrow-top {{sortPrice?'':'active'}}"></text>
<text class="iconfont icon-arrow-bottom {{sortPrice?'active':''}}"></text>
</view>
</view>
<view bindtap="switchSortType" data-type="price" class="dis-flex flex-x-center flex-box t-c p-r" data-index="2" id="list-{{sortType==='price'?true:0}}">
<text class="price__text">价格</text>
<view class="price__arrow dis-flex flex-dir-column flex-x-center flex-y-center">
<text class="iconfont icon-arrow-top {{sortPrice?'':'active'}}"></text>
<text class="iconfont icon-arrow-bottom {{sortPrice?'active':''}}"></text>
</view>
</view>
</view>
<view class="new">
<view class="category-list {{ showView ? 'arrange' : '' }}">
<navigatorTo class="list b-f" wx:for="{{goodlist.data}}" wx:key="list">
<view class="left">
<view class="img">
<image class="goodsImg" mode="scaleToFill" src="{{ item.goods_image }}"></image>
</view>
</view>
<view class="right">
<view class="cont">
<!-- 商品名称 -->
<text class="title f-29 twolist-hidden">{{item.goods_name}}</text>
<block wx:if="{{ showView }}">
<!-- 商品卖点 -->
<view class="selling_point onelist-hidden">
<text>{{ item.selling_point }}</text>
</view>
<!-- 商品销量 -->
<view class="goods_sales dis-flex">
<text class="onelist-hidden">已售{{ item.goods_sales }}件</text>
</view>
</block>
<!-- 商品价格 -->
<view class="detail-price onelist-hidden">
<text class="goods-price f-30 col-m">￥{{item.goods_sku.goods_price}}</text>
<text class="line-price col-9 f-24" wx:if="{{item.goods_sku.line_price>0}}">{{item.goods_sku.line_price}}</text>
</view>
<view class="select-number">
<form bindsubmit="onDecGoodsNumber" data-itemid="{{ item.goods_sku.goods_id }}" data-skuid="{{ item.goods_sku.goods_sku_id }}" report-submit="true">
<button formType="submit" class="btn-addcart {{ item.stock_num > 1 ? '' : 'disabled' }}" type="default">-</button>
</form>
<input bindinput="onInputGoodsNum" type="number" data-itemid="{{ item.goods_sku.goods_id }}" data-skuid="{{ item.goods_sku.goods_sku_id }}" value="1"></input>
<form bindsubmit="onIncGoodsNumber" data-itemid="{{ item.goods_sku.goods_id }}" data-skuid="{{ item.goods_sku.goods_sku_id }}" report-submit="true">
<button formType="submit" class="btn-addcart" type="default">+</button>
</form>
</view>
</view>
</view>
</navigatorTo>
</view>
</view>
<view wx:if="{{ no_more }}" class="no-more f-30">亲, 没有更多了</view>
</scroll-view>
</view>
注意：在上述代码中，开头有两处数字为21，改为您需要的模板ID，和后台的模板ID相一致即可。
第三步：在小程序前端页面增加分类页面模板样式
模板样式文件名称为index.wxss，文件路径为/pages/category/index.wxss。打开文件后，在文件末尾添加如下代码：
/* 二级分类（商品) */
.store_nav_cont {
padding: 27rpx 0;
font-size: 28rpx;
}
.store_nav_cont #list-true {
color: #ff495e;
}
.store_nav_cont #list-0 {
color: #333;
}
.store_nav_cont .price__arrow {
padding-left: 20rpx;
font-size: 18rpx;
color: #777;
line-height: 1;
}
.store_nav_cont #list-true .price__arrow text.active {
color: #ff495e;
}
.cate-left-21 {
flex-direction: column;
display: flex;
width: 240rpx;
color: #444;
height: 100%;
background: #f8f8f8;
}
.type-subnav{
position: relative;
height: 90rpx;
line-height: 90rpx;
text-align: center;
z-index: 10;
display: block;
font-size: 28rpx;
}
.type-subnav-selected{
font-size:28rpx;
color:#444;background-color:#fff;
}
.type-subnav-selected::after{
content:' ';
width:6rpx;height:40rpx;border-radius:10rpx;left:10rpx;top:20rpx;position: absolute;
background-color:#ff495e;
}
.type-nav-child{
position: relative;background:#fff;
padding-left:60rpx;
}
.type-nav::after{
content:' ';
color:#333;
width:1px;height:100%;background-color:#ccc;
left:-20rpx;top:0;position: absolute;
}
.category-list {
overflow: hidden;
}
.category-list .list {
box-sizing: border-box;
display:flex;
width: 100%;
position: relative;
padding-bottom: 5px;
border-bottom: 1rpx solid #eee;
margin: 10rpx 0rpx;
}
.category-list .list .left{
width: 160rpx;height: 160rpx;
}
.category-list .list .left .img image {
width: 140rpx;height: 140rpx;
display: block;
margin:10rpx;
}
.category-list .right {
width: 70.666%;
}
.category-list .right .cont {
padding: 10rpx 12rpx;
}
.category-list .right .cont .title {
height: 76rpx;
line-height: 1.3;
}
.category-list.arrange .list {
overflow: hidden;
padding: 15rpx;
border-bottom: 1rpx solid #f7f7f7;
width: 100%;
}
.category-list.arrange .list text {
line-height: 1.6;
}
.category-list.arrange .list .left {
width: 35%;
float: left;
}
.category-list.arrange .list .right {
width: 65%;
float: left;
}
.category-list.arrange .list .left .img image {
width: 220rpx;
height: 220rpx;
}
/* 商品卖点 */
.selling_point {
width: 100%;
font-size: 24rpx;
line-height: 1.4;
color: #ff495e;
}
.goods_sales {
color: #999;
font-size: 24rpx;
}
/* 商品价格 */
.detail-price {
bottom:20rpx;
left:160rpx;
position: absolute;
font-size: 30rpx;
}
.detail-price .goods-price {
margin-right: 8rpx;
}
.detail-price .line-price {
text-decoration: line-through;
}
.select-number {
width: 185rpx;
height: 65rpx;
flex-direction: row;
/* border: 1rpx solid rgb(231, 231, 231); */
right:0;bottom:10rpx;position: absolute;
}
.select-number .btn-addcart {
float: left;
width: 42rpx;
border-radius:10rpx;
height: 42rpx;
line-height: 33rpx;
padding: 0;
color: #fff;background: #52a41a;
font-size: 40rpx;
margin-top:8rpx;
}
.select-number .disabled {
color: #fff;background: #52a41a;
}
.select-number button:after {
content: none;
border: none;
}
.select-number input {
float: left;
width: 70rpx;
height: 50rpx;
line-height: 52rpx;
border: 1rpx solid #eee;
text-align: center;
font-size: 28rpx;
color: #444;
margin-left:10rpx;
margin-right:10rpx;
}
第四步：在小程序前端增加js代码
文件名称index.js，文件路径文件路径为/pages/category/index.js。打开文件后，按下面的说明，分别添加如下代码：
1、从文件第17行开始添加如下代码：
// 二级分类：指针
curChildId: 0,
// 排序类型
sortType: 'all',
sortTypeValue : false,
// 价格从低到高
sortPrice: false,
// 当前页面参数
option: {},
2、从文件第34行开始添加如下代码：
// 商品列表 goodlist: [], goodQty : [],
3、从文件第39行开始添加如下代码：
no_more: false, // 没有更多数据 isLoading: true, // 是否正在加载中 page: 1, // 当前页码
注意：添加时在第38行末尾添上英文逗号，然后从第39行开始添加上面的代码。
4、从第54行开始添加如下代码：
// 获取商品列表 _this.getGoodsList();
5、从第95行开始添加如下代码：
curChildId: e.target.dataset.id,
6、从第98行开始添加如下代码：
});
this.getGoodsList(false,1);
},
/**
* 一级分类：选中分类
*/
selectChildNav(e) {
let _this = this;
_this.setData({
goodlist : [],
curChildId: e.target.dataset.id,
curIndex: parseInt(e.target.dataset.index),
scrollTop: 0
});
this.getGoodsList(false,1);
},
/**
* 下拉到底加载数据
*/
bindDownLoad() {
// 已经是最后一页
console.log(this.data.goodlist.last_page);
if (this.data.page >= this.data.goodlist.last_page) {
this.setData({
no_more: true
});
return false;
}
// 加载下一页列表
this.getGoodsList(true, ++this.data.page);
},
/**
* 切换排序方式
*/
switchSortType(e) {
let _this = this,
newSortType = e.currentTarget.dataset.type,
newSortPrice = !this.data.sortPrice;
_this.setData({
isLoading: true,
page: 1,
sortType: newSortType,
sortPrice: newSortPrice
}, () => {
// 获取商品列表
_this.getGoodsList();
});
},
/**
* 获取商品列表
* @param {bool} isPage 是否分页
* @param {number} page 指定的页码
*/
getGoodsList(isPage, page) {
let _this = this;
App._get('goods/lists', {
page: page || 1,
sortType: this.data.sortType,
sortPrice: this.data.sortPrice ? 1 : 0,
category_id: _this.data.curChildId || 0,
search: this.data.option.search || '',
}, result => {
let resList = result.data.list,
dataList = _this.data.goodlist;
if (isPage == true) {
_this.setData({
'goodlist.data': dataList.data.concat(resList.data),
isLoading: false,
});
} else {
_this.setData({
goodlist: resList,
isLoading: false,
});
}
7、从第209行增加如下代码：
/**
* 增加商品数量
*/
onIncGoodsNumber(e) {
let _this = this;
App.saveFormId(e.detail.formId);
console.log(e);
_this.addCart(e.target.dataset.itemid,1,e.target.dataset.skuid);
},
/**
* 减少商品数量
*/
onDecGoodsNumber(e) {
let _this = this;
App.saveFormId(e.detail.formId);
console.log(e.target.dataset);
if (_this.data.goods_num > 1) {
_this.addCart(e.target.dataset.itemid,1,e.target.dataset.skuid);
}
},
/**
* 自定义输入商品数量
*/
onInputGoodsNum(e) {
let _this = this,
iptValue = e.detail.value;
if (!util.isPositiveInteger(iptValue) && iptValue !== '') {
iptValue = 1;
}
_this.addCart(e.target.dataset.itemid,iptValue,e.target.dataset.skuid);
},
addCart(goods_id,goods_num,goods_sku_id){
// 加入购物车
App._post_form('cart/add', {
goods_id: goods_id,
goods_num: goods_num,
goods_sku_id: goods_sku_id,
}, (result) => {
App.showSuccess(result.msg);
_this.setData(result.data);
});
}
后续问题持续更新
本站所有内容，如有版权、侵权等问题，请及时联系本站做删除。发布者：聚云网，转载请注明出处：https://www.juyun.top/5594.html
微信扫一扫 
