OpenDoorManageMini/pages/replenish/replenishmentManagement.vue

<template>
	<view>
		<view class="container">
			<u-navbar titleStyle="fontSize:36rpx;" :autoBack="true" bgColor="#fff" :placeholder="true"
				title="补货管理"></u-navbar>
			<view style="background-color: #fff;">
				<view class="flex align-center  box">
					<!-- <view class="flex flex-direction align-center" @tap="startReplenishment()">
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/bh.png" mode="widthFix"></image>
						<view class="">开始补货</view>
					</view> -->
					<!-- <view class="flex flex-direction align-center"  @tap="commodityList()">
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/qd.png" mode="widthFix"></image>
						<view class="">商品清单</view>
					</view> -->
					<view class="flex justify-between align-center" @tap="replenishmentRecord()">
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/jl.png"
							mode="widthFix"></image>
						<!-- <image src="../../static/favicon.ico" mode=""></image> -->
						<view class="menu-name">补货记录</view>
					</view>
					<view class="flex justify-between align-center" @tap='inventoryManagement()'>
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/kc.png"
							mode="widthFix"></image>
						<!-- <image src="../../static/favicon.ico" mode=""></image> -->
						<view class="menu-name">库存管理</view>
					</view>
				</view>

				<!-- <view class="tips">
					补货说明补货说明补货说明
				</view> -->

				<!-- 设备列表 -->
				<view class="search">
					<u-search animation placeholder="请输入设备名称" bgColor="#F6F8FB" :clearabled="true" v-model="keyword"
						:showAction="false" @search="search"></u-search>
				</view>

				<!-- 	<view class="tab-list">
					<u-tabs :list="tabList" @click="tabChange" :current="current" :scrollable="false" bgColor="#fff"
						lineColor="#2C6FF3"></u-tabs>
				</view> -->

				<view class="tab-wrap">
					<view class="tab">
						<u-tabs :list="tabList" :activeStyle="{color: '#333',fontWeight: 'bold',fontSize:'36rpx'}"
							:inactiveStyle="{fontSize:'32rpx'}" :scrollable="false" :current="current"
							@click="tabChange" lineColor="#2C6FF3">
						</u-tabs>
					</view>
				</view>
			</view>

			<scroll-view class="scrollview" :scroll-with-animation="true" scroll-y lower-threshold="100"
				@scrolltolower="scrolltolower" :style="{height:fullHeight}">
				<view class="content">
					<view class="xy-card" v-for="(item,index) in list" :key="item.deviceId"
						@click="replenish(item.deviceId,item.deviceName)">
						<view class="title flex justify-between">
							<view class="flex">
								<view>
									<view class="device-name" v-if="item.deviceName">
										{{item.deviceName}}<text>({{item.deviceId}})</text>
									</view>
									<view class="device-name" v-else>
										{{item.deviceId}}
									</view>
								</view>
								<view style="margin-left: 22rpx; margin-top: 8rpx;" v-if="item.deviceTypeName">
									<view class="busy-state on">{{item.deviceTypeName}}</view>
								</view>
								<view style="margin-left: 22rpx; margin-top: 8rpx;">
									<view v-if="item.busyState==1" class="busy-state on">运营中</view>
									<view v-else class="busy-state off">已停运</view>
								</view>
							</view>

							<view class="flex status">
								<view style="margin-left: 24rpx;color: #FF0000;" v-if="item.goodsIdStockOutCount>0">
									缺货
								</view>
								<view style="margin-left: 24rpx;color: green;" v-else>
									正常
								</view>
							</view>
						</view>

						<view class="t-content flex flex-direction" v-if="current==0">
							<view class="c-item-t">
								<view class="c-item">
									<view>剩余库存：</view>
									<view>{{item.stockSum||0}}</view>
								</view>
								<view class="c-item">
									<view>补后库存：</view>
									<view>{{item.fillCountSum||0}}</view>
								</view>
							</view>
							<view class="c-item-t">
								<view class="c-item">
									<view>在售商品种类：</view>
									<view>{{item.goodsIdCount||0}}</view>
								</view>
								<view class="c-item" v-if="item.goodsIdStockOutCount>0">
									<view>缺货商品种类：</view>
									<view style="color: red;font-weight: bold;">{{item.goodsIdStockOutCount||0}}</view>
								</view>
							</view>
						</view>

						<view class="t-content flex flex-direction" v-else>
							<view class="c-item-t">
								<view class="c-item">
									<view>剩余库存：</view>
									<view>{{item.stockSum||0}}</view>
								</view>
								<view class="c-item">
									<view>补后库存：</view>
									<view>{{item.fillCountSum||0}}</view>
								</view>
							</view>
							<view class="c-item-t">
								<view class="c-item">
									<view>缺货商品种类：</view>
									<view style="color: red;font-weight: bold;">{{item.goodsIdStockOutCount||0}}</view>
								</view>
							</view>
						</view>
					</view>

					<u-loadmore :status="status" v-if="list.length>=1" />
				</view>
				<view class="empty" v-if="list.length==0">
					<u-empty text="没有设备!"></u-empty>
				</view>
			</scroll-view>

			<!-- <view class="scan" @click="startReplenishment">
				<view class="scan-icon-bot">
					<u-icon name="scan" color="#2C6FF3" size="60"></u-icon>
				</view>
				<view>扫码补货</view>
			</view> -->

			<view class="btn">
				<xbutton size="large" @click="startReplenishment">
					<view class="btn-wrap flex align-center">
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep-scan.png" mode=""></image>
						扫码补货
					</view>
				</xbutton>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deviceDetail,
		searchPage,
		isMerc
	} from '@/api/device/device.js'

	import {
		deviceStockList,
		deviceStockOutList
	} from '@/api/replenishment/replenishment.js'
	export default {
		data() {
			return {
				page: 1,
				size: 10,

				status: 'loadmore',

				current: 0,
				tabList: [{
						name: '全部',
						value: ''
					},
					{
						name: '缺货',
						value: 1
					}
				],

				list: [],

				keyword: '',
				
				fullHeight:0
			}
		},

		onPullDownRefresh() {
			this.reset()
			if (this.current == 0) {
				this.getList1().then(res => {
					uni.stopPullDownRefresh();
				})
			} else {
				this.getList2().then(res => {
					uni.stopPullDownRefresh();
				})
			}

		},

		onShow() {
			this.search()
		},
		
		onLoad() {
			let _this = this;
			const query = uni.createSelectorQuery().in(this);
			query.select(".scrollview").boundingClientRect((data) => {
				uni.getSystemInfo({
					success(res) {
						// 针对iPhone X等机型底部安全距离做适配
						const model = res.model;
						const modelInclude = [
							"iPhone X",
							'iPhone XR',
							"iPhone XS",
							"iPhone XS MAX",
							"iPhone 12/13 mini",
							"iPhone 12/13 (Pro)",
							"iPhone 12/13 Pro Max",
							"iPhone 14 Pro Max"
						];
						let safeDistance = modelInclude.includes(model)
						//动态设置商品区域高度
						console.log(res.windowHeight, data.top)
						if (safeDistance) {
							_this.fullHeight = res.windowHeight - data.top - 40 + 'px';
						} else {
							_this.fullHeight = res.windowHeight - data.top + 'px';
						}
					},
				});
			}).exec();
		},

		methods: {
			startReplenishment() {
				uni.scanCode({
					success: (res) => {
						let deviceId = res.result.split('=')[1];
						if (deviceId) {
							this.hasDevice(deviceId).then(res => {
								this.$tab.navigateTo(
									`/pages/replenish/replenishmentHomePage?id=${deviceId}`)
							}).catch(err => {
								if (err.indeOf('com.netflix') == -1) {
									this.$modal.msg('err')
								} else {
									this.$modal.msg('网络繁忙，请重试！')
								}
							})
						} else {
							this.$modal.msg('该二维码无效~')
						}
					}
				});
			},

			hasDevice(id) {
				return new Promise((resolve, reject) => {
					isMerc({
						deviceId: id
					}).then(res => {
						console.log(res)
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},

			commodityList() {
				this.$tab.navigateTo('../commodity/commoditylist')
			},
			replenishmentRecord() {
				this.$tab.navigateTo('replenishmentRecord')
			},
			inventoryManagement() {
				this.$tab.navigateTo('/pages/replenish/invSearch')
			},

			tabChange(e) {
				this.current = e.index
				this.reset()
				this.getList()
			},

			getList() {
				if (this.current == 0) {
					this.getList1()
				} else {
					this.getList2()
				}
			},

			reset() {
				this.status == 'loadmore'
				this.page = 1;
				this.list = [];
			},

			getList1() {
				return new Promise((resolve, reject) => {
					deviceStockList({
						page: {
							current: this.page,
							size: this.size
						},
						keyword: this.keyword,
					}).then(res => {
						let data = res.data.records;
						if (data.length < 10) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
						this.list = this.list.concat(data)
						resolve(data)
					}).catch(err => {
						reject(err)
					})
				})
			},

			getList2() {
				return new Promise((resolve, reject) => {
					deviceStockOutList({
						page: {
							current: this.page,
							size: this.size
						},
						keyword: this.keyword,
					}).then(res => {
						let data = res.data.records;
						if (data.length < 10) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
						this.list = this.list.concat(data)
						resolve(data)
					}).catch(err => {
						reject(err)
					})
				})
			},

			search() {
				this.reset()
				this.getList()
			},

			scanDevice() {
				uni.scanCode({
					success: (res) => {
						let deviceId = res.result.split('=')[1];
						if (deviceId) {
							this.keyword = deviceId;
							this.getList()
						} else {
							this.$modal.msg('该二维码无效~')
						}
					}
				});
			},

			replenish(id, name) {
				this.$tab.navigateTo(`/pages/replenish/replenishmentHomePage?id=${id}&&deviceName=${name}`)
			},

			//触底加载更多
			scrolltolower() {
				if (this.status == 'nomore') return
				this.page++
				this.getList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {

		// padding-top: 120rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}

		.box {
			padding: 38rpx 12rpx 14rpx;
			background: #fff;
			font-size: 28rpx;
			font-weight: 500;
			color: #777777;
			line-height: 62rpx;

			>view {
				background: #F7F7F7;
				border-radius: 10rpx;
				margin-right: 20rpx;
				padding: 0 12rpx;
			}

			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 15rpx;
			}
		}

		.tips {
			width: 724rpx;
			padding: 10rpx 24rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 500;
			color: #333333;
			background: #F0FFFC;
			border: 2rpx dashed #61D8BE;
			border-radius: 14rpx;
			margin-left: 13rpx;
		}

		.search {
			padding: 0rpx 13rpx 24rpx;
			background-color: #fff;
			position: relative;
			margin-top: 14rpx;

			.scan-icon {
				position: absolute;
				right: 36rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;
			}
		}

		.scan {
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			box-shadow: 0 2rpx 10rpx 0 rgba(0, 0, 0, 0.1);

			.scan-icon-bot {
				width: 60px;
			}

			>view:nth-child(2) {
				font-size: 24rpx;
				color: #999;
			}
		}

		.tab-wrap {
			background-color: #fff;

			.tab {
				width: 40%;
				margin-left: -12rpx;
			}
		}

		.content {
			margin: 0 13rpx;
			padding-bottom: 60rpx;
			overflow: hidden;

			.xy-card {
				margin-top: 20rpx;
				padding: 32rpx;
			}
		}

		.title {
			font-size: 28rpx;
			font-weight: bold;
			line-height: 50rpx;

			.device-name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				max-width: 180rpx;

				>text {
					font-size: 24rpx;
					color: #666;
					font-weight: normal;
				}
			}
		}

		.t-content {
			margin-top: 12rpx;

			.c-item-t {
				display: flex;
				justify-content: flex-start;
				margin-top: 12rpx;

				.c-item {
					width: 50%;
					display: flex;
					justify-content: flex-start;
					align-items: flex-end;
				}
			}
		}

		.busy-state {
			font-size: 24rpx;
			height: 38rpx;
			padding: 0 16rpx;
			line-height: 38rpx;
			background: #F4F8FF;
			border-radius: 8rpx;
			text-align: center;
			font-weight: normal;

			&.on {
				color: #2C6FF3;
			}

			&.off {
				color: #666;
			}
		}

		.status {
			font-weight: normal;
		}

		.empty {
			margin-top: 50rpx;
		}
		
		.btn{
			width:724rpx;
			position: fixed;
			left: 13rpx;
			bottom:calc(24rpx + env(safe-area-inset-bottom) / 2);
			border-radius: 88rpx;
			overflow: hidden;
			.btn-wrap{
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				>image{
					width:42rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>