//存放右侧分类的高度累加数组
import { centToYuan, yuanToCent } from '../../unit/priceUtil'
import { productsWithMultiplePrices } from '../../http/goodsApi'
const app = getApp()
// 假分页
// https://blog.csdn.net/qq_36025814/article/details/126121781
// https://www.bookstack.cn/read/vant-3.4.7-zh/8bd11acebe45f23c.md
Page({
/**
* 页面的初始数据
*/
data: {
goodsList: [],
ProductList: [],
HasSelectedList: [],
curIndex: 0,
pageData: 1,
hasLoadData: true,
itemCateData: {},
mainActiveIndex: 0,
basicInfo: {},
SeledGoods: [],
GoodsNum: "",
showPopup: false,
heightArr: [],
distance: 0,
active: 0,
selectId: "item0",
pageTotal:0,
pageSize:10,
pageIndex:1,
TotalDataList:[]
},
// 选择左侧标签锚点定位
activeNav(e) {
var index = e.currentTarget.dataset.index
this.setData({
active: index,
selectId: "item" + index
})
},
//计算右侧每个锚点的高度
selectHeight() {
var list = []
var height = 0;
const query = wx.createSelectorQuery();
query.selectAll('.subtitle').boundingClientRect()
query.exec((res) => {
res[0].forEach((item) => {
height += item.height;
list.push(height)
})
console.log(list)
this.data.heightArr = list
})
},
//监听scroll-view的滚动事件
watchScroll(e) {
let scrollTop = e.detail.scrollTop; //获取距离顶部的距离
let active = this.data.active;
if (scrollTop >= this.data.distance) {
if (active + 1 < this.data.heightArr.length && scrollTop >= this.data.heightArr[active]) {
this.setData({
active: active + 1
})
}
} else {
if (active - 1 >= 0 && scrollTop < this.data.heightArr[active - 1]) {
this.setData({
active: active - 1
})
}
}
this.data.distance = scrollTop;
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("add带过来的数据")
console.log(options)
if (JSON.stringify(options) == "{}") {
} else {
let optionData = JSON.parse(decodeURIComponent(options.detInfo));
console.log(optionData)
this.setData({
basicInfo: optionData.basicInfo,
// HasSelectedList:optionData.SeledGoods,
})
}
this.getGoodsData()
// this.getProListHeight();
wx.setNavigationBarTitle({
title: '选择商品',
})
this.selectHeight();
},
TotalAllSelecteFun() {
this.setData({
GoodsNum: this.data.HasSelectedList.length
})
},
onCancelCategory() {
this.setData({
showPopup: false
})
},
onClickIcon() {
this.setData({
showPopup: !this.data.showPopup
})
},
SubmitFun() {
if (this.data.HasSelectedList.length == 0) {
wx.showToast({
icon: 'none',
title: "请选择商品",
})
return
}
var pages = getCurrentPages(); // 获取页面栈
var prevPage = pages[pages.length - 2]; // 上一个页面
console.log(prevPage.__route__)
if (prevPage.__route__ == 'pages/addOrder/addOrder') {
prevPage.haveSeledGoods(this.data.HasSelectedList);
wx.navigateBack({
delta: 1
})
}
},
searchClick() {
const newData = JSON.stringify(
{
hasIncludedData: this.data.HasSelectedList
}
);
wx.navigateTo({ url: `/pages/GoodsSearch/GoodsSearch?detInfo=` + encodeURIComponent(newData) });
},
getGoodsData() {
productsWithMultiplePrices().then((res) => {
let that = this;
console.log(res)
let resultData = res.data.list;
let changeGoods = []
resultData.forEach((item, index) => {
let has = changeGoods.findIndex(o => o.productTypeId === item.productTypeId)
if (has == -1) {
changeGoods.push({
productTypeId: item.productTypeId,
productTypeName: item.productTypeName,
children: [item]
})
} else {
changeGoods[has].children.push(item)
}
})
let newGoods = changeGoods.map((item) => {
let childFloor = item.children.map((each) => {
return {
...each,
agreementUnitPrice: centToYuan(each.agreementUnitPrice),
customerUnitPrice: centToYuan(each.customerUnitPrice),
latestSaleUnitPrice: centToYuan(each.latestSaleUnitPrice),
showAddOrSub: false,
SelNum: 0,
}
})
return {
...item,
children: childFloor,
};
});
// aaaa
console.log(newGoods)
console.log("选中的返回")
console.log(that.data.HasSelectedList)
function FindItem(itemID, moreList) {
let findData = moreList.find(x => x.piId == itemID.piId);
return findData
}
var oneChild = newGoods[0].children.map((each) => {
if (FindItem(each, that.data.HasSelectedList)) {
return {
...each,
SelNum: FindItem(each, that.data.HasSelectedList).SelNum,
showAddOrSub: true
}
} else {
return {
...each
}
}
})
this.setData({
pageTotal: Math.ceil(oneChild.length / 10) //根据后台返回的总数量，判断有多少页
})
console.log(oneChild.length)
console.log(this.data.pageTotal)
let list = oneChild
let qielist = list.slice(that.pageIndex-1,that.data.pageSize)
this.setData({
TotalDataList:list,
goodsList: newGoods,
ProductList: qielist,
})
this.TotalAllSelecteFun()
})
},
switchCategory(e) {
var that = this;
var index = e.currentTarget.dataset.index;
var childData = e.currentTarget.dataset.bean.children;
console.log(this.data.HasSelectedList)
function FindItem(itemID, moreList) {
let findData = moreList.find(x => x.piId == itemID.piId);
return findData
}
var changeGoods = childData.map((each) => {
if (FindItem(each, that.data.HasSelectedList)) {
return {
...each,
SelNum: FindItem(each, that.data.HasSelectedList).SelNum,
showAddOrSub: true
}
} else {
return {
...each
}
}
})
this.setData({
ProductList:[],
pageTotal:0,
pageSize:10,
pageIndex:1,
})
let list = changeGoods
let qielist = list.slice(that.pageIndex-1,that.data.pageSize)
this.setData({
TotalDataList:list,
ProductList: qielist,
curIndex: e.currentTarget.dataset.index ? e.currentTarget.dataset.index : 0,
toView: 'order' + e.currentTarget.dataset.bean.productTypeId,
active: index,
selectId: "item" + index,
})
},
Reachbottom() {
console.log("是个啥")
// wx.showLoading({
// title: '加载中',
// })
let shu = this.data.pageIndex
this.setData({
pageIndex:shu+1
})
let num = (this.data.pageIndex-1)*this.data.pageSize
let num2 = num+this.data.pageSize
let arr = this.data.TotalDataList
let qielist = arr.slice(num,num2)
let slist = this.data.ProductList
let newarr = slist.concat(qielist)
this.setData({
ProductList:newarr
})
setTimeout(function () {
wx.hideLoading()
}, 300)
},
// qqq
ChangeSelectedItemNum(event) {
let that = this;
setTimeout(function () {
that.changedSelected(event)
}, 100);
},
changedSelected(event) {
let that = this;
let childIndex = event.currentTarget.dataset.itemIndex;
console.log(childIndex)
this.data.HasSelectedList[childIndex].SelNum = event.detail;
this.data.ProductList = this.data.ProductList.map((item, index) => {
if (item.piId == this.data.HasSelectedList[childIndex].piId) {
if (event.detail == 0) {
return {
...item,
showAddOrSub: false,
SelNum: 0
}
} else {
return {
...item,
SelNum: this.data.HasSelectedList[childIndex].SelNum
}
}
} else {
return {
...item,
}
}
});
if (event.detail == 0) {
this.data.HasSelectedList.splice(childIndex, 1);
console.log("删除")
//需要注意
that.setData({
HasSelectedList: this.data.HasSelectedList,
});
}
// 需要注意
that.setData({
// HasSelectedList:this.data.HasSelectedList,
ProductList: this.data.ProductList
});
this.TotalAllSelecteFun()
},
ChangeItemNum(event) {
var that = this;
setTimeout(function () {
let childIndex = event.currentTarget.dataset.itemIndex;
that.data.ProductList[childIndex].SelNum = event.detail;
if (event.detail == 0) {
that.data.ProductList[childIndex].showAddOrSub = false;
}
that.DynamicCacheArray(that.data.ProductList[childIndex])
}, 100);
},
addCart(event) {
let childIndex = event.currentTarget.dataset.itemIndex;
this.data.ProductList[childIndex].showAddOrSub = true;
this.data.ProductList[childIndex].SelNum = 1;
this.setData({
ProductList: this.data.ProductList
});
this.DynamicCacheArray(this.data.ProductList[childIndex])
},
DynamicCacheArray(itemData) {
console.log("我已经点击")
console.log(itemData.SelNum)
console.log(itemData)
let that = this;
var findData = this.data.HasSelectedList.find(x => x.piId == itemData.piId);
if (findData) {
this.data.HasSelectedList = this.data.HasSelectedList.map((item) => {
if (item.piId == itemData.piId) {
return {
...item,
SelNum: itemData.SelNum
}
} else {
return {
...item,
}
}
});
} else {
this.data.HasSelectedList.push(itemData)
}
if (itemData.SelNum == 0) {
var indexNum = this.data.HasSelectedList.findIndex((tableData) => tableData.piId == itemData.piId);
this.data.HasSelectedList.splice(indexNum, 1);
that.setData({
ProductList: that.data.ProductList,
});
console.log("删除")
}
console.log("最后")
console.log(this.data.HasSelectedList)
that.setData({
HasSelectedList: that.data.HasSelectedList,
});
this.TotalAllSelecteFun()
},
// sss
haveSearchGoods(usefulData) {
var that = this;
console.log(usefulData)
console.log(this.data.HasSelectedList)
var selData = []
this.data.HasSelectedList.map((item) => {
if (item.SelNum > 0) {
selData.push(item)
}
});
let OldGoods = selData;
let NewGoods = usefulData;
NewGoods.forEach((item) => {
let index = OldGoods.findIndex(e =>
e.piId == item.piId
)
if (index > -1) {
OldGoods[index] = item
} else {
OldGoods.push(item)
}
})
console.log(OldGoods)
this.setData({
// SeledGoods:OldGoods,
HasSelectedList: OldGoods
});
setTimeout(function () {
that.getGoodsData()
}, 10);
return
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("123")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<view class="search-top">
<van-search disabled bind:click-input="searchClick" placeholder="请输入搜索关键词" />
</view>
<view class="main-cate">
<!-- 左侧 -->
<scroll-view class="menu-left" scroll-y scroll-with-animation="{{true}}">
<view class="menu-main">
<view
class="cate-list"
wx:for="{{goodsList}}"
wx:for-item="item"
wx:for-index="index"
wx:key="index"
data-bean="{{item}}"
data-index="{{index}}"
bindtap="switchCategory"
>
<text class="cate-text {{curIndex==index?'on':''}}">{{item.productTypeName}}</text>
</view>
</view>
</scroll-view>
<!-- 右侧 -->
<view class="menu-right" >
<scroll-view style=" height:100vh;box-sizing: border-box;padding-bottom: 130px;" scroll-y="true" scroll-with-animation="true" bindscroll="watchScroll" scroll-into-view="{{toView}}" bindscrolltolower="Reachbottom">
<block class="cate-product">
<view class="product-list" wx:for="{{ProductList}}" wx:for-item="each" data-each="{{each}}" wx:key="key">
<van-image width="70" height="70" lazy-load src="{{each.piImageUrl}}"/>
<view class="product-left">
<view class="product-name">{{each.piProductName}}</view>
<view class="product-desc">{{each.description}}</view>
<view class="add-cart" wx:if="{{each.showAddOrSub==false}}">
<van-icon
name="shopping-cart"
color="#fa550f"
size="50rpx"
data-item-index="{{index}}"
data-parentIndex="{{parentIndex}}"
bindtap="addCart"/>
</view>
<view class="count-part" wx:if="{{each.showAddOrSub==true}}">
<van-stepper
data-item-index="{{index}}"
data-parentIndex="{{parentIndex}}"
min=""
value="{{ each.SelNum }}"
bind:change="ChangeItemNum"
input-class="stepinput"
plus-class="stepplus"
minus-class="stepplus"
input-width="60px"
button-size="25px"
/>
</view>
</view>
</view>
<view class="none-text" wx:if="{{ProductList.length==0}}">
<image src="https://pic-shop.magcloud.net/miniapp_static/empty_order_icons.png" />
<view >空空如也...</view>
</view>
</block>
</scroll-view>
</view>
</view>
<view class="pop-button" >
<van-goods-action >
<van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" info="{{GoodsNum}}" />
<van-goods-action-button text="提交" bind:click="SubmitFun" />
</van-goods-action>
</view>
<van-popup custom-style="height: 50%;" position="bottom" z-index="{{100}}" show="{{ showPopup }}" bind:close="onCancelCategory">
<view class="eject-product">
<!-- <view class="eject-list"
wx:for="{{goodsList}}"
wx:for-item="item"
wx:for-index="parentIndex" wx:key="key"
> -->
<view class="ejectselected-list" wx:for="{{HasSelectedList}}" wx:for-item="each" data-each="{{each}}" wx:key="key" wx:if="{{ each.SelNum>0}}" >
<van-image width="70" height="70" lazy-load src="{{each.piImageUrl}}"/>
<view class="ejectselected-left">
<view class="ejectselected-name">{{each.piProductName}}</view>
<view class="product-desc">{{each.description}}</view>
<view class="ejectselected-part" wx:if="{{each.showAddOrSub==true}}">
<van-stepper
data-item-index="{{index}}"
data-parentIndex="{{parentIndex}}"
min=""
value="{{ each.SelNum }}"
bind:change="ChangeSelectedItemNum"
input-class="stepinput"
plus-class="stepplus"
minus-class="stepplus"
input-width="60px"
button-size="25px"
/>
</view>
</view>
</view>
<!-- </view> -->
</view>
</van-popup>
/* pages/category/category.wxss */
/* page,.main-cate {
height: 100vh;
} */
page, .main-cate {
position: fixed;
display: flex;
width: 100%;
}
.menu-left {
width: 164rpx;
height: 100%;
box-sizing: border-box;
overflow: hidden;
padding-bottom: 80px;
background: #f5f5f5;
position: fixed;
left: 0px;
top: 60px;
height: 100vh;
}
.menu-right {
background: white;
width: calc(100% - 165rpx);
position: fixed;
/* padding-bottom: 200px; */
right: 0px;
top: 60px;
height: 100vh;
}
.search-top {
position: relative;
width: 100%;
height: 60px;
box-sizing: border-box;
border-bottom: 1px solid #f6f6f6;
}
.menu-left .cate-list {
line-height: 40rpx;
text-align: center;
padding: 25rpx 0;
font-size: .8rem;
}
.menu-left .cate-list .on {
border-left: 3px solid #fa550f;
color: #fa550f;
font-size: 28rpx;
background: white;
padding: 25rpx 0rpx!important;
}
.cate-text{
display: block;
padding: 10rpx 0;
font-size: 28rpx;
}
.add-cart{
margin-top: 13rpx;
display: flex;
justify-content: flex-end;
}
.count-part{
margin-top: 13rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.stepinput{
background: white!important;
margin: 0rpx 10rpx!important;
}
.stepplus{
background: #fa550f!important;
color: white!important;
font-weight: bolder!important;
border-radius: 30rpx!important;
}
.none-text{
width: 100%;
text-align: center;
font-size: 32rpx;
padding-top: 100px;
color: #bbbbbb;
}
.select{
color: red!important;
}
.cate-product{
box-sizing: border-box;
padding-bottom: 82px;
padding-left: 20rpx;
padding-right: 20rpx;
width: 100%;
}
.right-list{
box-sizing: border-box;
padding: 30rpx 0rpx;
border-bottom: 1px solid #ebedf0;
}
.product-left{
box-sizing: border-box;
padding-left: 10rpx;
width: 100%;
}
.product-list{
box-sizing: border-box;
padding: 0rpx 18rpx;
display: flex;
}
.subtitle{
box-sizing: border-box;
padding: 0rpx 18rpx;
margin-bottom: 20rpx;
}
.product-name{
font-size: 30rpx;
}
.product-desc{
font-size: 24rpx;
color: #bbbbbb;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.product-price{
display: flex;
color: #fa4126;
align-items: flex-end;
}
.real-icon{
font-size: 24rpx;
}
.real-num{
font-size: 32rpx;
font-weight: bolder;
}
.product-list image {
flex-shrink: 0;
width: 70px;
height: 70px;
border-radius: 16rpx;
margin-bottom: 10rpx;
}
.none-text image{
display: block;
margin-left: auto;
margin-right: auto;
width: 88px;
height: 97px;
}
.none-text{
padding-top: 260rpx;
}
.none-text view{
margin-top: 30rpx;
font-size: 30rpx;
color: #a5a5a5;
text-align: center;
}
.sub-button{
position: fixed;
width: 100%;
bottom: 8rpx;
background: salmon;
z-index: 999;
height: 200rpx;
padding: 10rpx 0rpx;
}
.sub-flex{
position: relative;
margin: auto;
height: 50px;
width: 100%;
background: white;
}
.end-sub{
width: 80%;
position: relative;
margin: auto;
background: red;
display: flex;
justify-content: space-around;
height: 50px;
line-height: 50px;
border-radius: 45px;
}
/* 弹出的部分 */
.eject-product{
margin-top: 20rpx;
width: 100%;
padding-bottom: 100rpx;
}
.ejectselected-list{
display: flex;
box-sizing: border-box;
padding: 20rpx;
border-bottom:1px solid #f1f4f8;
}
.ejectselected-list image{
display: block;
width: 60px;
height: 60px;
border-radius: 4px;
flex-shrink: 0;
}
.ejectselected-left{
box-sizing: border-box;
padding-left: 20rpx;
width: 100%;
}
.ejectselected-name{
font-size: 30rpx;
}
.ejectselected-part{
margin-top: 13rpx;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.pop-button{
z-index: 999;
width: 100%;
height: 20px;
position: absolute;
}
.count-part input {
background-color: rgba(236,109,81,0.3)!important;
color: #fa550f!important;
}
网友评论