eduepos_ui_store/pages/goods/goods.vue

<template>
    <view class="goods-page">
        <view class="goods-cont">
            <scroll-view scroll-y class="menus">
                <view class="item" v-for="item in goodsList" :key="item.goodsTypeId" @click="handMenuChange(item)"
                    :class="{ select: item.goodsTypeId == active }">
                    <view class="new" v-if="item.children != null && item.children.filter(i => i.isNew).length > 0">上新</view>
                    <view class="name">{{ item.goodsTypeName }}</view>
                </view>
            </scroll-view>
            <scroll-view scroll-with-animation scroll-y class="list-wrap"  @scroll="asideScroll" :scroll-top="tabScrollTop">
                <view class="class" v-for="item in goodsList" :key="item.goodsTypeId" :id="'goods' + item.goodsTypeId">
                    <view class="title">{{ item.goodsTypeName }}</view>
                    <view class="list">
                        <view class="goods" v-for="(goods,index) in item.children" :key="goods.goodsId">
                            <view class="cover">
                                <image class="img" :src="goods.pictureUrl"></image>
                            </view>
                            <view class="cont">
                                <view class="name">{{ goods.goodsName }}</view>
                                <view class="desc">
                                    月销 {{ goods.salesCount }} 库存 {{ goods.inventory }}
                                </view>
                                <view class="price-wrap">
                                    <view class="price" v-if="goods.salePrice < goods.costPrice">¥{{ moneyConverter(goods.salePrice) }}</view>
                                    <view class="costprice" v-if="goods.salePrice < goods.costPrice">¥{{ moneyConverter(goods.costPrice) }}</view>
									<view class="price"  v-if="goods.salePrice >= goods.costPrice">¥{{ moneyConverter(goods.costPrice) }}</view>
                                    <view class="old" v-if="goods.newGoodsFlg" @click="setNewGoods(goods)">取消新品</view>
                                    <view class="new" v-if="!goods.newGoodsFlg" @click="setNewGoods(goods)">设置新品</view>
                                </view>
                                <view class="tools">
                                    <view class="btn" @click="updateGoods(goods.goodsId)">编辑</view>
                                    <view class="btn bgbtn" v-if="goods.status == 0" @click="updateStatus(goods.status,goods.goodsId)">上架</view>
                                    <view class="btn" v-if="goods.status == 1" @click="updateStatus(goods.status,goods.goodsId)">下架</view>
                                    <view class="btn" v-if="index!=0" @click="moveUp(goods.goodsId)">前移</view>
									<view class="btn-red bgbtn-red" v-if="goods.status == 0" @click="deleteGoods(goods.goodsId)">删除</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- <view class="empty-block" :style="{ height: emptyBlockHeight + 'px' }"></view> -->
            </scroll-view>
        </view>
        <view class="footer-btns">
            <view class="btn" @click="handChangeClass">分类管理</view>
            <view class="btn" @click="updateGoods()">添加商品</view>
        </view>
		<!-- <u-picker :show="show" :columns="columns" keyName="label" @cancel="cancelNew" @confirm="confirmNewGoods"></u-picker> -->
		<popupPickerView :list="columns" itemKey="id" itemName="label" ref="popupPickerView" @callback="confirmNewGoods" />
    </view>
</template>
<script>
import {mapState} from 'vuex';
import popupPickerView from '../components/popup-picker-view.vue';
export default {
	components: {
		popupPickerView
	},
    data () {
        return {
			getGoodsListUrl: '/storeGoodsManageApi/getStoreGoodsList',
			moveUpUrl: '/storeGoodsManageApi/goodsMoveUp',
			changeStatusUrl: '/storeGoodsManageApi/changeStatus',
			setNewFlagUrl: '/storeGoodsManageApi/setNewFlag',
			deleteUrl: '/storeGoodsManageApi/deleteGoods',
            active: '0',
            goodsList: [],
			columns: [
				[{
					label: '7天',
					id: 7
				}, {
					label: '15天',
					id: 15
				}, {
					label: '30天',
					id: 30
				}]
			],
			show: false,
			goodsId: '',
            emptyBlockHeight: 0,
            tabScrollTop: 0,
            sizeCalcState: false,
            changeState: true,
			windowHeight: '',
			tabbar: true,
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		handCheckGoodsType () {
			this.$refs.popupPickerView.show()
		},
		loadData() {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.getGoodsListUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						let obj = res.data.obj;
						this.goodsList = res.data.list;
						// uni.setNavigationBarTitle({
						//     title: this.info.storeName
						// });
						setTimeout(()=>{
							this.calcSize();
						}, 300)
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.stopPullDownRefresh()
					uni.hideLoading();
				}
			})
		},
		cancelNew() {
			// 取消操作
			this.goodsId = '';
			this.show = false
		},
		updateStatus (status,goodsId) {
			if (status == 0){
				status = 1;
			} else {
				status = 0
			}
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.changeStatusUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					status: status,
					goodsId: goodsId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.loadData();
						// uni.setNavigationBarTitle({
						//     title: this.info.storeName
						// });
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
		moveUp (goodsId) {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.moveUpUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					goodsId: goodsId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.loadData();
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
		deleteGoods(goodsId) {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.deleteUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					goodsId: goodsId,
					storeUserId: this.storeInfo.storeUserId,
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.loadData();
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
		confirmNewGoods(e) {
			let dayCount = e.id;
			
			this.handDelete(dayCount);
			
		},
		handDelete(dayCount) {
			//设置新品
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.setNewFlagUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					goodsId: this.goodsId,
					dayCount: dayCount || ''
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.loadData();
					}
					this.show = false
					
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
			
		},
		setNewGoods (goods) {
			this.goodsId = goods.goodsId;
			if (goods.newGoodsFlg != undefined && goods.newGoodsFlg == 1) {
				this.handDelete();
			} else {
				this.$refs.popupPickerView.show()
			}
		},
        handMenuChange (item) {
            if (!this.sizeCalcState) {
            	this.calcSize();
            }
            this.active = item.goodsTypeId;
            let index = this.goodsList.findIndex(sitem => sitem.goodsTypeId === item.goodsTypeId);
            this.tabScrollTop = this.goodsList[index].top;
            this.changeState = false;
        },
        handChangeClass () {
            uni.navigateTo({
                url: '/pages/goods/goods-type'
            });
        },
        updateGoods (id) {
			if (id != null && id != undefined) {
				uni.navigateTo({
				    url: '/pages/goods/goods-edit?goodsId=' + id
				});
			} else {
				uni.navigateTo({
					url: '/pages/goods/goods-edit'
				});
			}
        },
        //右侧栏滚动
        asideScroll(e) {
        	if (!this.sizeCalcState) {
        		this.calcSize();
        	}
        	let scrollTop = e.detail.scrollTop;
        	let tabs = this.goodsList.filter(item => item.top <= scrollTop).reverse();
        	if (this.changeState && tabs.length > 0) {
        		this.active = tabs[0].goodsTypeId;
        	}
        	this.changeState = true;
        },
        //计算右侧栏每个tab的高度等信息
        calcSize() {
            // 获取视口高度
            const wrap = uni.createSelectorQuery().in(this);
            let wH = 0
            wrap.select('.list-wrap').boundingClientRect(data => {
                wH = data.height
            }).exec();

        	let h = 0;
        	if(this.goodsList != '' || this.goodsList != null){
        		this.goodsList.forEach((item, idx) => {
        			let view = uni.createSelectorQuery().select("#goods" + item.goodsTypeId);
        			view.fields({
        				size: true
        			}, data => {
        				item.top = h;
        				h += data.height;
        				item.bottom = h;
                        // 当遍历到最后一个分类商品时获取对应商品元素的top值 减去 视口高度 赋值给 商品列表底部高度补位元素
                        // if (idx == this.goodsList.length - 1) {
                        //     this.emptyBlockHeight = item.top - wH - 2
                        // }
        			}).exec();
        		})
        		this.sizeCalcState = true;
        	} else {
        		return
        	}
        },
    },
	onReady(){
		setTimeout(()=>{
		this.calcSize();
			}, 300)
	},
    onShow () {
		this.loadData()
        // uni.$once('goods', goods => {
        //     console.log('goods', goods);
        // })
		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight;
			}
		});
		uni.onWindowResize((res) => {
			if (res.size.windowHeight < this.windowHeight) {
				this.tabbar = false
			} else {
				this.tabbar = true
			}
		});
		
    },
    onLoad () {
		
	}
}
</script>
<style lang="scss" scoped>
.goods-page {
    background-color: #f5f5f5;
    width: 100vw;
    height: 100vh;
}
.footer-btns {
    width: 100vw;
    background-color: #fff;
    @include between;
    margin-bottom: env(safe-area-inset-bottom);
    margin-bottom: constant(safe-area-inset-bottom);
    .btn {
        width: 49.5vw;
        height: 80rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
    }
}
.goods-cont, .menus, .list-wrap {
    height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 80rpx - constant(safe-area-inset-bottom));
}
.goods-cont {
    width: 100vw;
    @include flexStart;
    border-top: 2rpx solid #f5f5f5;
    font-size: $font-base;
}
.menus {
    width: 190rpx;
    .item {
        height: 140rpx;
        position: relative;
        padding: 0 20rpx;
        box-sizing: border-box;
        @include flexStart;
        .new {
            position: absolute;
            right: 0;
            top: 0;
            width: 80rpx;
            font-size: $font-sm;
            color: #fff;
            background-color: #ff5000;
            @include flexCenter;
            border-radius: 20rpx 0 20rpx 0;
        }
    }
    .item.select {
        background-color: #fff;
    }
}
.list-wrap {
    background-color: #fff;
    width: calc(100vw - 190rpx);
    padding: 20rpx;
    box-sizing: border-box;
    .title {
        text-align: center;
        font-weight: bold;
        color: $title-color;
        margin-bottom: 20rpx;
    }
    .list {
        border-bottom: 2rpx solid #ececec;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;
    }
    .cover, .img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
    }
    .cover {
        margin-right: 20rpx;
    }
    .goods {
        @include flexStart(flex-start);
        margin-bottom: 20rpx;
    }
    .cont {
        width: calc(100% - 180rpx);
    }
    .name {
        width: 100%;
        height: 80rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: $text-color;
        margin-bottom: 6rpx;
    }
    .desc {
        color: $desc-color;
        font-size: $font-sm;
        margin-bottom: 6rpx;
    }
    .price-wrap {
        @include flexStart;
    }
    .price {
        margin-right: 20rpx;
        color: #ff5000;
    }
	.costprice {
		text-decoration: line-through;
		margin-right: 20rpx;
		color: $desc-color;
	}
    .new {
        padding: 0 10rpx;
		background-color: $desc-color;
        color: #fff;
        @include flexCenter;
        border-radius: 10rpx;
        font-size: $font-sm;
    }
	.old {
        padding: 0 10rpx;
        background-color: #ff5000;
        color: #fff;
        @include flexCenter;
        border-radius: 10rpx;
        font-size: $font-sm;
    }
    .tools {
        @include flexStart;
        margin-top: 16rpx;
        .btn {
            margin-right: 16rpx;
            padding: 2rpx 10rpx;
            border: 2rpx solid $theme-color;
            color: $theme-color;
            font-size: $font-sm;
        }
        .btn:last-child {
            margin-right: 0;
        }
        .bgbtn {
            background-color: $theme-color;
            color: #fff;
        }
		.btn-red {
		    margin-right: 16rpx;
		    padding: 2rpx 10rpx;
		    border: 2rpx solid red;
		    color: $theme-color;
		    font-size: $font-sm;
			margin-right: 0;
		}
		.bgbtn-red {
			background-color: red;
			color: #fff;
		}
    }
}
</style>