Initial Commit
This commit is contained in:
quantulr
317
pages/classify/classify.js
Normal file
317
pages/classify/classify.js
Normal file
@ -0,0 +1,317 @@
|
||||
// pages/class/class.js
|
||||
const app = getApp();
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
bgImg: app.globalData.bgImg,
|
||||
activeOne: 0,
|
||||
activeTwo: 0,
|
||||
scrolltop: 0,
|
||||
goodsList: [],
|
||||
typeParentList: [],
|
||||
goodsName: '',
|
||||
topImg: '',
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
//上级id
|
||||
if (options.pId) {
|
||||
wx.setStorage({
|
||||
data: options.pId,
|
||||
key: 'pId',
|
||||
})
|
||||
}
|
||||
wx.getSystemInfo({
|
||||
success: res => {
|
||||
console.log(res)
|
||||
this.setData({
|
||||
winHeight: (res.windowHeight - (res.windowWidth / 750) * 130) - 10,
|
||||
});
|
||||
this.setData({
|
||||
rightHeight: this.data.winHeight - (res.windowWidth / 750) * 310,
|
||||
});
|
||||
}
|
||||
});
|
||||
//头部图片 2
|
||||
this.topImg();
|
||||
|
||||
wx.showLoading({
|
||||
title: '加载中',
|
||||
})
|
||||
wx.request({
|
||||
url: app.globalData.ip + '/wisdommining/api/goods/getGoodsTypeList',
|
||||
method: 'GET',
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
data: {},
|
||||
success: res => {
|
||||
console.log(res)
|
||||
wx.hideLoading()
|
||||
if (res.data.code == 1) {
|
||||
var typeParentList = res.data.value;
|
||||
if (options.id) {
|
||||
console.log(options.id)
|
||||
console.log(options.pid)
|
||||
for (let i = 0; i < typeParentList.length; i++) {
|
||||
typeParentList[i].oneType = false;
|
||||
if (typeParentList[i].id == options.pid) {
|
||||
typeParentList[i].oneType = true;
|
||||
for (let j = 0; j < typeParentList[i].goodsTypeList.length; j++) {
|
||||
typeParentList[i].goodsTypeList[j].twoType = false
|
||||
if (typeParentList[i].goodsTypeList[j].id == options.id) {
|
||||
typeParentList[i].goodsTypeList[j].twoType = true
|
||||
this.setData({
|
||||
activeOne: i,
|
||||
activeTwo: j,
|
||||
goodsList: typeParentList[i].goodsTypeList[j].goodsTypeList,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
for (let i = 0; i < typeParentList.length; i++) {
|
||||
typeParentList[i].oneType = false;
|
||||
for (let j = 0; j < typeParentList[i].goodsTypeList.length; j++) {
|
||||
typeParentList[i].goodsTypeList[j].twoType = false
|
||||
}
|
||||
}
|
||||
typeParentList[0].oneType = true;
|
||||
typeParentList[0].goodsTypeList[0].twoType = true;
|
||||
|
||||
this.setData({
|
||||
goodsList: typeParentList[0].goodsTypeList[0].goodsTypeList,
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
typeParentList: typeParentList,
|
||||
})
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '获取数据失败!',
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//头部图片 2
|
||||
topImg(options) {
|
||||
console.log(options)
|
||||
wx.showLoading({
|
||||
title: '加载中',
|
||||
})
|
||||
wx.request({
|
||||
url: app.globalData.ip + '/wisdommining/api/banner/getBanner',
|
||||
method: 'GET',
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
data: {
|
||||
type: 2
|
||||
},
|
||||
success: res => {
|
||||
console.log(res)
|
||||
wx.hideLoading()
|
||||
if (res.data.code == 1) {
|
||||
let topImg = res.data.value;
|
||||
this.setData({
|
||||
topImg: topImg
|
||||
})
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '获取数据失败!',
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//左边栏选择 one
|
||||
getSelOne(e) {
|
||||
var typeParentList = this.data.typeParentList;
|
||||
var index = e.currentTarget.dataset.index;
|
||||
typeParentList[index].oneType = !typeParentList[index].oneType;
|
||||
this.setData({
|
||||
typeParentList:typeParentList
|
||||
})
|
||||
},
|
||||
//左边栏选择 two
|
||||
getSelTwo(e) {
|
||||
var typeParentList = this.data.typeParentList;
|
||||
var index = e.currentTarget.dataset.index;
|
||||
var dindex = e.currentTarget.dataset.dindex;
|
||||
for (let i = 0; i < typeParentList.length; i++) {
|
||||
for (let j = 0; j < typeParentList[i].goodsTypeList.length; j++) {
|
||||
typeParentList[i].goodsTypeList[j].twoType = false
|
||||
}
|
||||
}
|
||||
typeParentList[dindex].goodsTypeList[index].twoType = true;
|
||||
this.setData({
|
||||
scrolltop: 0,
|
||||
goodsList: typeParentList[dindex].goodsTypeList[index].goodsTypeList,
|
||||
typeParentList:typeParentList
|
||||
})
|
||||
},
|
||||
//数据
|
||||
dataList: function (e) {
|
||||
wx.showLoading({
|
||||
title: '加载中',
|
||||
})
|
||||
wx.request({
|
||||
url: app.globalData.ip + '/wisdommining/api/goods/getGoodsTypeList',
|
||||
method: 'GET',
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
data: {},
|
||||
success: res => {
|
||||
console.log(res)
|
||||
wx.hideLoading()
|
||||
if (res.data.code == 1) {
|
||||
var typeParentList = res.data.value;
|
||||
this.setData({
|
||||
typeParentList: typeParentList,
|
||||
goodsList: typeParentList[0].goodsTypeList[0].goodsTypeList,
|
||||
})
|
||||
console.log(this.data.typeParentList)
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '获取数据失败!',
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 三级分类搜商品
|
||||
toShopDetail(e) {
|
||||
let id = e.currentTarget.dataset.id;
|
||||
let name = e.currentTarget.dataset.name;
|
||||
console.log(id)
|
||||
wx.navigateTo({
|
||||
url: '/pages/search_details/search_details?threeTypeId=' + id + '&name=' + name,
|
||||
})
|
||||
},
|
||||
|
||||
//搜索
|
||||
search() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/search_details/search_details?search=true',
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
wx.getStorage({
|
||||
key: 'user',
|
||||
success: user => {
|
||||
app.globalData.userId = user.data.id;
|
||||
console.log(app.globalData.userId)
|
||||
wx.request({
|
||||
url: app.globalData.ip + '/wisdommining/api/goods/getCart',
|
||||
method: 'POST',
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
data: {
|
||||
userId: app.globalData.userId
|
||||
},
|
||||
success: res => {
|
||||
console.log(res)
|
||||
if (res.data.code == 1) {
|
||||
if (res.data.value.length == 0) {
|
||||
app.globalData.cartNum = '';
|
||||
wx.hideTabBarRedDot({
|
||||
index: 3
|
||||
})
|
||||
} else {
|
||||
app.globalData.cartNum = res.data.value.length.toString()
|
||||
//购物车数量显示
|
||||
wx.setTabBarBadge({
|
||||
index: 3,
|
||||
text: app.globalData.cartNum
|
||||
})
|
||||
}
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '提示!',
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}, fail: f => {
|
||||
app.globalData.cartNum = '';
|
||||
wx.hideTabBarRedDot({
|
||||
index: 3
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
app.share();
|
||||
return {
|
||||
path: '/pages/index/index?pId=' + app.globalData.userId,
|
||||
title: '三品慧采小程序等你来~'
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
4
pages/classify/classify.json
Normal file
4
pages/classify/classify.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "分类"
|
||||
}
|
||||
54
pages/classify/classify.wxml
Normal file
54
pages/classify/classify.wxml
Normal file
@ -0,0 +1,54 @@
|
||||
<view class="top_fi">
|
||||
<view class="top">
|
||||
<view class="search">
|
||||
<image src="/icon/search.png"></image>
|
||||
<input placeholder="搜索商品" bindfocus="search" placeholder-style="color:#aaa;"></input>
|
||||
</view>
|
||||
<view catchtap='search' class="sear">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="class_" style="height:{{winHeight}}px;">
|
||||
<scroll-view style="height:100%;" scroll-y="true" class="scroller class_scroller">
|
||||
<block wx:for="{{typeParentList}}" wx:key='index'>
|
||||
<view class="cla_box" catchtap="getSelOne" data-index="{{index}}">
|
||||
<view class="c-title dispaly_A_C dispaly_J_C">
|
||||
{{item.typeName}}
|
||||
<image class="c-title__r" src="/icon/{{item.oneType?'c-down':'c-up'}}.png"></image>
|
||||
<view class="c-title__l"></view>
|
||||
</view>
|
||||
<view wx:if='{{item.oneType}}'>
|
||||
<view
|
||||
class="c-two GStitleOne {{twoItem.twoType?'c-two__active':''}}"
|
||||
wx:for="{{item.goodsTypeList}}"
|
||||
wx:key='index'
|
||||
wx:for-index="twoIndex"
|
||||
wx:for-item="twoItem"
|
||||
catchtap="getSelTwo"
|
||||
data-dindex="{{index}}"
|
||||
data-index="{{twoIndex}}">{{twoItem.typeName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 主体 -->
|
||||
<view class="mid_" style="height:{{winHeight}}px;">
|
||||
<scroll-view scroll-y="true" style="height:100%;" bindscrolltolower='searchScrollLower' class="scroller mid_scroller" scroll-top="{{scrolltop}}">
|
||||
<view class="pic_tur">
|
||||
<view class="mid_topimg">
|
||||
<image src="{{topImg[0].bannerImage}}"></image>
|
||||
</view>
|
||||
<view class="mid_data" style='min-height:{{rightHeight}}px;'>
|
||||
<view class="empty" wx:if="{{goodsList.length==0}}">暂无分类信息~</view>
|
||||
<block wx:for="{{goodsList}}" wx:key='index'>
|
||||
<view class="pic_box" catchtap="toShopDetail" data-id="{{item.id}}" data-name="{{item.typeName}}">
|
||||
<image src="{{item.typePhoto}}"></image>
|
||||
<view class="pic_r GStitleOne">{{item.typeName}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
200
pages/classify/classify.wxss
Normal file
200
pages/classify/classify.wxss
Normal file
@ -0,0 +1,200 @@
|
||||
/* pages/class/class.wxss */
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.top_fi {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search {
|
||||
font-size: 24rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 40rpx;
|
||||
padding-left: 39rpx;
|
||||
}
|
||||
|
||||
.search image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.search input {
|
||||
width: 498rpx;
|
||||
}
|
||||
|
||||
.sear {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.cla_box {
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
color: #3f4967;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0px 10rpx 10rpx 0px;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
.c-title{
|
||||
font-size: 32rpx;
|
||||
letter-spacing: 2rpx;
|
||||
color: #666666;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.c-title image{
|
||||
width: 16rpx;
|
||||
height: 10rpx;
|
||||
position: relative;
|
||||
top: -4rpx;
|
||||
}
|
||||
.c-title__l{
|
||||
width: 122rpx;
|
||||
height: 16rpx;
|
||||
background-image: linear-gradient(90deg,
|
||||
#ff3019 0%,
|
||||
#999999 100%);
|
||||
border-radius: 8rpx;
|
||||
opacity: 0.1;
|
||||
position:absolute;
|
||||
top: 44rpx;
|
||||
left: 16rpx;
|
||||
}
|
||||
.c-two{
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 1rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.cla_box .c-two__active{
|
||||
background-color: #f5f5f5;
|
||||
color: #ee7b1e;
|
||||
}
|
||||
|
||||
.class_ {
|
||||
position: absolute;
|
||||
top: 130rpx;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: 180rpx;
|
||||
border-radius: 0rpx 10rpx 10rpx 0rpx;
|
||||
}
|
||||
.class_scroller{
|
||||
border-radius: 0rpx 10rpx 10rpx 0rpx;
|
||||
}
|
||||
|
||||
.mid_ {
|
||||
margin-left: 210rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-y: scroll;
|
||||
margin-top: 130rpx;
|
||||
width: 510rpx;
|
||||
}
|
||||
|
||||
.mid_topimg{
|
||||
width: 510rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.mid_topimg image{
|
||||
width: 510rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.mid_data{
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
width: 450rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.mid_data::after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.mid_top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120rpx;
|
||||
justify-content: center;
|
||||
margin-top: 110rpx;
|
||||
}
|
||||
|
||||
.mid_top .top_name {
|
||||
font-size: 28rpx;
|
||||
color: #7a7a7a;
|
||||
margin: 0 50rpx;
|
||||
}
|
||||
|
||||
.mid_t_line {
|
||||
width: 120rpx;
|
||||
height: 2rpx;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.pic_tur {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pic_box {
|
||||
width:120rpx;
|
||||
margin-bottom: 40rpx;
|
||||
float: left;
|
||||
margin-right: 45rpx;
|
||||
}
|
||||
.pic_box:nth-child(3n){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.pic_box image {
|
||||
width: 120rpx;
|
||||
height:120rpx;
|
||||
/* border-radius: 50%; */
|
||||
}
|
||||
.pic_r{
|
||||
width: 120rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.empty{
|
||||
text-align: center;
|
||||
margin-top: 200rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
Reference in New Issue
Block a user