image.png
//存放右侧分类的高度累加数组
const app = getApp()
import { requestYgstSales, requestYgstGoods, BatchAddProducts } from '../../http/ygstGoodsApi'
import { requestKindesList } from '../../http/KindsApi'
import Dialog from '@vant/weapp/dialog/dialog';
// https://www.bookstack.cn/read/vant-3.4.7-zh/8bd11acebe45f23c.md
Page({
/**
* 页面的初始数据
*/
data: {
goodsList: [],
HasSelectedList: [],
curIndex: 0,
pageData: 1,
hasLoadData: true,
itemCateData: {},
mainActiveIndex: 0,
toView: 0,
scrollTop: 0,
publicObj: {},
productList: [],
heightArr: [],
active: 0,
categoryList: [],
LoadingMore: true,
noDataMore: false,
CheckedAllArr: [],
TargetVal: "",
TargetObj: {},
statusBarHeight: 0,
navInfo: {},
showPopup: false,
showDataList: [],
TargetPopup: false,
TargetList: [],
showDialog: false,
beforeClose: {},
unitVal:"斤"
},
backFun() {
wx.navigateBack({ delta: 1 });
},
addTarget() {
wx.navigateTo({
url: '/pages/editKind/editKind',
});
},
onClickIcon() {
this.setData({
TargetPopup: true
});
requestKindesList().then((res) => {
this.setData({
TargetList: res.data,
})
})
},
onChangeUnit(event) {
this.setData({
unitVal: event.detail,
});
},
onConfirmTarget(event) {
const { picker, value, index } = event.detail;
this.setData({
TargetPopup: false,
TargetVal: value.ptItemName,
TargetObj: value,
showDialog: true
});
return
},
onCancelTarget() {
this.setData({
TargetPopup: false,
})
},
// 选择左侧标签锚点定位
onClickCart() {
this.setData({
showPopup: !this.data.showPopup,
})
},
PopupClose() {
this.setData({
showPopup: false,
})
},
handleChecked: function (event) {
var that = this;
var array = event.detail;
that.setData({
CheckedAllArr: array,
})
this.CalculateProduct(array)
},
haveSearchEditGoods(SearchGoods) {
var that = this;
that.setData({
CheckedAllArr: SearchGoods,
})
this.CalculateProduct(SearchGoods)
},
CalculateProduct(selectedData) {
let resultData = selectedData.map((each) => {
let eachData = JSON.parse(each)
return {
...eachData,
SpecificationDes: eachData.subItemUnit + '、' + eachData.subItemNetContent + eachData.subItemNetContentUnit + "/" + eachData.subItemUnit,
}
})
this.setData({
showDataList: resultData,
})
},
changeDefaultAddress(itenData) {
let that = this;
that.setData({
TargetPopup: false,
showDialog: true,
TargetVal: itenData.ptItemName,
TargetObj: itenData,
})
that.getKindsData()
},
navToSearchPage() {
const newData = JSON.stringify(
{
hasIncludedData: this.data.CheckedAllArr,
}
);
wx.navigateTo({
url: '/pages/CloudSearch/CloudSearch?detInfo=' + encodeURIComponent(newData),
});
},
onBeforeClose: function (action) {
let that = this;
console.log(action)
if (action == 'confirm') {
that.SubmitDataFun()
} else {
this.setData({
showDialog: false
});
}
},
// tttttt
SubmitDataFun() {
let that = this;
let resultData = this.data.CheckedAllArr.map((each) => {
let itemData = JSON.parse(each)
return {
piImageUrl: itemData.subItemImgAddress,
piNetContent: that.data.unitVal=="斤"? 500:1,
piNetContentUnit: that.data.unitVal=="斤"? "克":"千克",
// piSpec: itemData.subItemUnit,
piSpec: that.data.unitVal,
piProductName: itemData.subItemName,
piItemCode: that.data.TargetObj.ptItemCode,
productTypeId: that.data.TargetObj.ptId,
productTypeName: that.data.TargetObj.ptItemName,
syemtProductRel: {
salesItemCode: itemData.itemCode,
salesItemName: itemData.itemName,
salesSubItemCode: itemData.subItemCode,
salesSubItemName: itemData.subItemName,
}
}
})
BatchAddProducts(resultData).then((res) => {
if (res.code == 200) {
wx.showToast({
icon: '',
title: "新增成功",
})
setTimeout(function () {
wx.switchTab({
url: '../home/home',
})
}, 500);
}
})
},
submitFun() {
let that = this;
if (that.data.CheckedAllArr.length == 0) {
wx.showToast({
icon: 'none',
title: "请选择商品",
})
return
}
that.setData({
TargetPopup: true
})
that.getKindsData()
},
getKindsData() {
requestKindesList().then((res) => {
this.setData({
TargetList: res.data,
})
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.loadCategory()
this.getNavigationInfo()
var that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
statusBarHeight: res.statusBarHeight,
beforeClose: (action) => that.onBeforeClose(action),
})
},
})
},
getNavigationInfo() {
var that = this;
wx.getSystemInfo({
success(res) {
const menuButton = wx.getMenuButtonBoundingClientRect();
that.setData({
navInfo: {
top: menuButton.top,
right: res.windowWidth - menuButton.right,
width: menuButton.width + 18,
height: menuButton.height,
bottom: menuButton.top - res.statusBarHeight
}
})
}
})
},
loadCategory() {
let postData = {
page: 1,
size: 9999
}
requestYgstSales(postData).then((res) => {
this.setData({
categoryList: res.data,
publicObj: res.data[0],
})
this.loadgoodsData(res.data[0])
})
},
Reachbottom: function (a) {
var that = this;
if (that.data.noDataMore == false) {
this.setData({
pageData: that.data.pageData + 1
})
this.loadgoodsData(this.data.publicObj)
}
},
// xxxxxx
loadgoodsData(itemCategoryData) {
let that = this;
let paramsData = {
pageIndex: this.data.pageData,
pageSize: 15,
salesSubItemName: "",
itemCode: itemCategoryData.itemCode,
}
requestYgstGoods(paramsData).then((res) => {
let resultData = res.data.list.map((each) => {
return {
...each,
SingleString: JSON.stringify(each),
// pictureUrl:"https://ygst.etmobile.net/image/"+each.pictureUrl,
SpecificationDes: each.subItemUnit + '、' + each.subItemNetContent + each.subItemNetContentUnit + "/" + each.subItemUnit,
}
})
setTimeout(() => {
if (resultData.length < 15) {
that.setData({
LoadingMore: false,
noDataMore: true,
})
}
that.data.productList = that.data.productList.concat(resultData)
that.setData({
productList: that.data.productList
});
}, 100);
})
that.goTop()
},
switchCategory(e) {
this.goTop()
let itemData = e.currentTarget.dataset.bean;
let index = e.currentTarget.dataset.index
this.setData({
pageData: 1,
curIndex: e.currentTarget.dataset.index ? e.currentTarget.dataset.index : 0,
active: index,
publicObj: itemData,
noDataMore: false,
productList: [],
})
this.loadgoodsData(itemData)
console.log(this.data.pageData)
},
goTop() {
this.setData({
scrollTop: 0
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<!-- 自定义的导航栏开始 -->
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
<view class="title-left">
<view class="back" bind:tap="backFun">
<van-icon name="arrow-left" size="25px" />
</view>
<view class="avatar-title">云端商品</view>
</view>
<view class="search-icon" bind:tap="navToSearchPage" style="margin-right:{{navInfo.width}}px">
<van-icon
class="icon-forn"
slot="left-icon"
prefix="wr"
name="search"
size="50rpx"
color="#333333"
/>
</view>
</view>
<!-- <view class="empty_custom" style="padding-top:{{statusBarHeight}}px" /> -->
<view class="main-cate">
<scroll-view class="menu-left" style=" height:100vh;box-sizing: border-box;padding-bottom: 220px;" scroll-y scroll-with-animation="{{true}}">
<view class="menu-main">
<view
class="cate-list"
wx:for="{{categoryList}}"
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.itemName}}</text>
</view>
</view>
</scroll-view>
<view class="menu-right" >
<scroll-view class="scroll-right" model:scroll-top="{{myScrollTop}}" style=" height:100vh;box-sizing: border-box;padding-bottom: 110px;" scrollY="true" bindscrolltolower="Reachbottom">
<block class="cate-product">
<view class="right-list">
<van-checkbox-group value="{{CheckedAllArr}}" bind:change="handleChecked">
<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.subItemImgAddress}}"/>
<view class="product-left">
<view class="product-name">{{each.subItemName}}</view>
<view class="product-desc">{{each.SpecificationDes}}</view>
<view class="list-item-check">
<van-checkbox icon-size="30px" name="{{each.SingleString}}" data-data="{{each}}" ></van-checkbox>
</view>
</view>
</view>
</van-checkbox-group>
</view>
</block>
<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>
</scroll-view>
</view>
<view class="content-box">
<view class="">
<van-goods-action>
<van-goods-action-icon icon="cart-o" text="待导入" bind:click="onClickCart"info="{{CheckedAllArr.length}}" />
<van-goods-action-button text="提交" bind:click="submitFun" />
</van-goods-action>
</view>
</view>
</view>
<van-popup round custom-style="height: 60%;" position="bottom" show="{{ showPopup }}" bind:close="PopupClose">
<view class="pup-list" >
<view class="product-list" wx:for="{{ showDataList }}" wx:for-item="each" data-each="{{each}}" wx:key="key">
<van-image width="70" height="70" lazy-load src="{{each.subItemImgAddress}}"/>
<view class="product-left">
<view class="product-name">{{each.subItemName}}</view>
<view class="product-desc">{{each.SpecificationDes}}</view>
</view>
</view>
</view>
</van-popup>
<!-- 弹出目标分类 -->
<van-popup round custom-style="height: 60%;" position="bottom" show="{{ TargetPopup }}" bind:close="onCancelTarget">
<view >
<van-picker
title="选择目标分类"
show-toolbar
bind:cancel="onCancelTarget"
bind:confirm="onConfirmTarget"
columns="{{ TargetList }}"
value-key = "ptItemName"
/>
<view class="add-target" bindtap="addTarget">新增品类</view>
</view>
</van-popup>
<!-- 弹出询问层 -->
<van-dialog
use-slot
title="提示"
show="{{ showDialog }}"
show-cancel-button
before-close="{{beforeClose}}"
>
<view >
<view class="add-goods">
你将导入<text class="spec-text">{{showDataList.length}}</text>件商品到<text class="spec-text" >{{TargetVal}}</text>类目下
</view>
<view class="unit-box" >
<view class="unit-name" >选择单位：</view>
<van-radio-group bind:change="onChangeUnit" value="{{ unitVal }}" direction="horizontal">
<van-radio name="斤">斤</van-radio>
<van-radio name="公斤">公斤</van-radio>
</van-radio-group>
</view>
</view>
</van-dialog>
/* pages/category/category.wxss */
.menu-left {
width: 164rpx;
height: 100%;
box-sizing: border-box;
overflow: hidden;
padding-bottom: 80px;
background: #f5f5f5;
position: fixed;
left: 0px;
top: 84px;
height: 100vh;
}
.scroll-right{
padding-top: 100px;
}
.menu-right {
/* height: 100vh; */
/* flex-grow: 1; */
background: white;
width: calc(100% - 165rpx);
position: absolute;
/* padding-bottom: 100px; */
right: 0px;
top: 0px;
/* height: 100%; */
}
.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;
}
.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;
}
.product-left{
box-sizing: border-box;
padding-left: 10rpx;
width: 100%;
}
.product-list{
box-sizing: border-box;
padding: 0rpx 18rpx;
display: flex;
margin-bottom: 30rpx;
}
.subtitle{
box-sizing: border-box;
padding: 0rpx 18rpx;
margin-bottom: 20rpx;
}
.product-name{
font-size: 30rpx;
}
.list-item-check{
display: flex;
justify-content: flex-end;
}
.product-desc{
font-size: 24rpx;
color: #bbbbbb;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.product-list image {
flex-shrink: 0;
width: 70px!important;
height: 70px!important;
border-radius: 10rpx;
margin-bottom: 10rpx;
}
.product-button{
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 16rpx;
}
/* .product-button button{
margin: 0px 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;
}
.content-box{
width: 100%;
height: 120px;
background: white;
position: absolute;
bottom: 0px;
box-sizing: border-box;
padding: 10rpx;
}
.spec-text{
color: red;
}
.custom{
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 45px;
/* background: #c00; */
z-index: 999;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.title-left{
margin-left: 18rpx;
display: flex;
align-items: center;
}
.avatar-title{
margin-left: 20rpx;
}
.pup-list{
width: 100%;
padding-bottom: 95px;
padding-left: 20rpx;
padding-top: 20rpx;
padding-right: 20rpx;
box-sizing: border-box;
}
.add-target{
text-align: center;
padding: 10px;
font-size: 30rpx;
color: rgb(65, 135, 241)!important;
background-color: rgb(218, 227, 242)!important;
border: 1px solid rgb(218, 227, 242)!important;
width: 80px;
margin: auto;
}
.add-goods{
box-sizing: border-box;
padding: 30rpx 20rpx;
color: #646566;
text-align: center;
}
.unit-box{
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 10rpx 20rpx;
justify-content: center;
}
.unit-name{
color: #646566;
}
网友评论