1. 云期刊首页
  2. 开发教程

萤火小程序新增分类页模板的教程,让分类页左侧显示分类右侧显示商品,可以直接加入购物车

第一步:萤火小程序后台添加分类模板选择单选框

后台模板选择文件名称为: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.yunqikan.cn/5594.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

问答社区 在线客服
联系我们

QQ 技术:109033286

QQ 运维:3423710838

email 邮箱:drhxxkj@163.com

Qqun QQ交流群:808026766

分享本页
返回顶部