TuBaoSoft-Ui-Zd/pages/home/home.vue

<template>
	<view>
		<!-- background: url(../../static/homeBG.png)no-repeat; -->
		<view style="
			background-size:100%;
			box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);height:100%">
			<!-- <u-navbar :is-back="false" :is-fixed="false" :border-bottom="false" :background="background">
				<view style="width: 96%;margin: 0 auto;">
					<u-search placeholder="请输入您要搜索的内容" bg-color="#FFFFFF" :action-style="actionStyle"></u-search>
				</view>
			</u-navbar> -->
			<view class="content" style="
				background: linear-gradient(-36deg, #004FFF 0%, #0089CB 100%);
				border-radius: 10rpx;
				padding: 20rpx;
				margin-top: 40rpx;" :style="{'marginTop':height+'px'}">
				<view style="height: 290rpx;">
					<view style="width: 100%;height: 200rpx;">
						<view style="width: 75%;color: #FFFFFF;font-size: 38rpx;float: left;">
							<view style="width: 100%;text-overflow:ellipsis;overflow:hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">{{exhibition.customerName}}</view>
							<view style="margin-top: 30rpx;font-size: 28rpx;" v-if="exhibition.customerName">库存:<text
									style="font-size: 40rpx;font-weight:bold">{{exhibition.stockTotal}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}</view>
						</view>
						<view style="float: right;display: flex;justify-content: space-around;width: 150rpx;">
							<u-button shape="circle" size="mini" ripple style="margin-top: 5rpx;border-top-right-radius: 0;border-bottom-right-radius: 0;"
								:style="{backgroundColor:type==true?'#3788fc':'#fff',color:type==true?'#fff':'#2979FF'}"
								type="primary" @click="type=true">周</u-button>
							<u-button shape="circle" size="mini" ripple style="margin-top: 5rpx;border-top-left-radius: 0;border-bottom-left-radius: 0;"
								:style="{backgroundColor:type==true?'#fff':'#3788fc',color:type==true?'#2979FF':'#fff'}"
								type="primary" @click="type=false">月</u-button>
						</view>
						<view style="float: right;display: flex;justify-content: space-around;width: 370rpx;margin-top: -55rpx;" v-if="exhibition.customerName">
							<u-button shape="circle" size="mini" ripple style="margin-top: 5rpx;border-radius: 10rpx;"
								:style="{backgroundColor:mode==1?'#3788fc':'#fff',color:mode==1?'#fff':'#2979FF'}"
								type="primary" @click="stockStatistics(mode = 1)">件数</u-button>
							<u-button shape="circle" size="mini" ripple style="margin-top: 5rpx;border-radius: 10rpx;"
								:style="{backgroundColor:mode==2?'#3788fc':'#fff',color:mode==2?'#fff':'#2979FF'}"
								type="primary" @click="stockStatistics(mode = 2)">重量</u-button>
							<u-button shape="circle" size="mini" ripple style="margin-top: 5rpx;border-radius: 10rpx;"
								:style="{backgroundColor:mode==3?'#3788fc':'#fff',color:mode==3?'#fff':'#2979FF'}"
								type="primary" @click="stockStatistics(mode = 3)">尺码</u-button>
							<u-button shape="circle" size="mini" ripple style="margin-top: 5rpx;border-radius: 10rpx;"
								:style="{backgroundColor:mode==4?'#3788fc':'#fff',color:mode==4?'#fff':'#2979FF'}"
								type="primary" @click="stockStatistics(mode = 4)">箱量</u-button>
						</view>
					</view>
					<view v-if="type"
						style="width: 100%;display: flex;justify-content: space-between;text-align: center;color: #FFFFFF;margin-top: 0rpx;font-size: 24rpx;">
						<view>
							<view>本周入库</view>
							<view style="font-size: 24rpx;">
								<text
									style="font-size: 32rpx;font-weight: bold;">{{exhibition.inStockTotalWeek}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}
							</view>
						</view>
						<view>
							<view>本周出库</view>
							<view style="font-size: 24rpx;">
								<text
									style="font-size: 32rpx;font-weight: bold;">{{exhibition.outStockTotalWeek}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}
							</view>
						</view>
						<view>
							<view>上周入库</view>
							<view style="font-size: 24rpx;">
								<text
									style="font-size: 32rpx;font-weight: bold;">{{exhibition.inStockTotalLastWeek}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}
							</view>
						</view>
						<view>
							<view>上周出库</view>
							<view style="font-size: 24rpx;">
								<text
									style="font-size: 32rpx;font-weight: bold;">{{exhibition.outStockTotalLastWeek}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}
							</view>
						</view>
					</view>
					<view v-else
						style="width: 100%;display: flex;justify-content: space-between;text-align: center;color: #FFFFFF;margin-top: 0rpx;font-size: 24rpx;">
						<view>
							<view>本日入库</view>
							<view style="font-size: 24rpx;"><text
									style="font-size: 32rpx;font-weight: bold;">{{exhibition.inStockTotalToday}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}
							</view>
						</view>
						<view>
							<view>本日出库</view>
							<view style="font-size: 24rpx;"><text
									style="font-size: 32rpx;font-weight: bold;">{{exhibition.outStockTotalToday}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}
							</view>
						</view>
						<view>
							<view>本月入库</view>
							<view style="font-size: 24rpx;">
								<text
									style="font-size: 32rpx;font-weight: bold;">{{exhibition.inStockTotalMonth}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}
							</view>
						</view>
						<view>
							<view>本月出库</view>
							<view style="font-size: 24rpx;">
								<text
									style="font-size: 32rpx;font-weight: bold;">{{exhibition.outStockTotalMonth}}</text>{{mode==1?'':mode==2?'吨':mode==3?'CMB':'TEU'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 快捷功能 -->
			<!-- <view style="height: 150rpx;margin-top: -20rpx;" v-if="deptName != '外部用户'">
				<u-grid :col="3" :border="false">
					<u-grid-item bg-color="#ffffff00" style="background-color: rgba(0,0,0,0);">
						<u-icon name="order" color="#fff" size="60"></u-icon>
						<view class="grid-text" style="color: #FFFFFF;margin-top: 10px;">我的数据</view>
					</u-grid-item>
					<u-grid-item @click="myReview" bg-color="#ffffff00" style="background-color: rgba(0,0,0,0);">
						<u-badge type="error" :count="totalTwo" style="margin-right: 30rpx;" />
						<u-icon name="edit-pen" color="#fff" size="60"></u-icon>
						<view class="grid-text" style="color: #FFFFFF;margin-top: 10px;">我的审核</view>
					</u-grid-item>
					<u-grid-item @click="scanCode" bg-color="#ffffff00" style="background-color: rgba(0,0,0,0);">
						<u-icon name="scan" color="#fff" size="60"></u-icon>
						<view class="grid-text" style="color: #FFFFFF;margin-top: 10px;">扫一扫</view>
					</u-grid-item>
				</u-grid>
			</view> -->
			<!-- 正文内容 -->
			<view class="content">
				<u-grid :col="deptName=='外部用户'?3:4" :border="false">
					<u-grid-item @click="jumpPath(1)">
						<u-image width="58rpx" height="58rpx" src="../../static/image/warehousing.png"></u-image>
						<view class="grid-text">我的入库</view>
					</u-grid-item>
					<u-grid-item @click="jumpPath(2)">
						<u-image width="58rpx" height="58rpx" src="../../static/image/outOfStock.png"></u-image>
						<view class="grid-text">我的出库</view>
					</u-grid-item>
					<!-- <u-grid-item @click="jumpPath(3)">
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">我的调拨</view>
					</u-grid-item>
					<u-grid-item @click="jumpPath(4)">
						<u-icon name="photo" :size="46"></u-icon>
						<view class="grid-text">我的货转</view>
					</u-grid-item> -->
					<u-grid-item @click="jumpPath(5)">
						<u-image width="58rpx" height="58rpx" src="../../static/image/stock.png"></u-image>
						<view class="grid-text">我的库存</view>
					</u-grid-item>
					<u-grid-item @click="myReview()" v-if="deptName != '外部用户'">
						<u-image width="58rpx" height="58rpx" src="../../static/image/toExamine.png"></u-image>
						<view class="grid-text">我的审核</view>
					</u-grid-item>
					<!-- <u-grid-item @click="jumpPath(6)">
						<u-icon name="order" :size="46"></u-icon>
						<view class="grid-text">运费计算</view>
					</u-grid-item> -->
					<!-- <u-grid-item @click="jumpPath(7)">
						<u-icon name="camera" :size="46"></u-icon>
						<view class="grid-text">我的巡检</view>
					</u-grid-item> -->
					<!-- <u-grid-item @click="jumpPath(12)">
						<u-icon name="eye" :size="46"></u-icon>
						<view class="grid-text">我的视频</view>
					</u-grid-item> -->
					<!-- <u-grid-item @click="jumpPath(8)">
						<u-badge type="error" :count="total" />
						<u-icon name="checkmark-circle" :size="46"></u-icon>
						<view class="grid-text">我的采购</view>
					</u-grid-item> -->
					<!-- <u-grid-item @click="jumpPath('null')">
						<u-icon name="grid" :size="46"></u-icon>
						<view class="grid-text">其他</view>
					</u-grid-item> -->
				</u-grid>
			</view>
			<view style="
				width: 100%;
				margin: 0 auto;
				margin-top: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 10rpx;">
				<view style="width: 42%;height: 440rpx;float: left;" @click="jumpPath(7)">
					<image src="../../static/patrolInspection.png" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view style="width: 58%;height: 440rpx;float: right;">
					<view style="width: 100%;height: 220rpx;" @click="jumpPath(12)">
						<image src="../../static/monitor.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view style="width: 100%;height: 220rpx;margin-top: 0rpx;" @click="jumpPath(13)">
						<image src="../../static/stockAgeStatistics.png" mode="" style="width: 100%;height: 100%;">
						</image>
					</view>
				</view>
			</view>
			<view style="width: 96%;margin: 0 auto;">
				<image src="../../static/activityDiagram.png" style="margin-top: 20rpx;width: 100%;height: 220rpx;">
				</image>
			</view>
		</view>
		<view class="ordertop" v-for="(item, index) in lisi" :key="index">
			<view>
				<view class="iconblue"></view>
				<text class="license">提单号：{{item.fMblno}}</text>
				<view class="various">{{item.fBillstatus}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>{{item.fBilltype}}日期</view>
				<view>{{item.fBsdate}}</view>
			</view>
			<view class="basic">
				<view>计划件数</view>
				<view>{{item.fPlanqty}}</view>
			</view>
			<view class="basic">
				<view>品名\属性详情</view>
				<view>{{item.goodsName}}\{{item.fMarks}}</view>
			</view>
		</view>
		<u-loadmore v-if="lisi.length > 0" :status="status" :icon-type="iconType" :load-text="loadText" />
		<!-- 更新组件 force 是否强制更新    tabbar：页面是否有原生tabbar组件-->
		<app-update ref="app_update" :force="false" :tabbar="true"></app-update>
	</view>
</template>

<script>
	import appUpdate from "@/components/yzhua006-update/app-update.vue"
	export default {
		components: {
			appUpdate
		},
		data() {
			return {
				background: {
					backgroundImage: 'none',
					backgroundColor: 'none'
				},
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				lisi: [],
				actionStyle: {
					color: '#fff'
				},
				mode:'1',
				deptName: '',
				form: {
					pageNum: 1,
					pageSize: 3,
				},
				exhibition: {},
				total: 0,
				totalTwo: '',
				height: 0,
				type: true,
			}
		},
		created() {
			let this_ = this
			uni.getSystemInfo({
				success: function(res) {
					this_.height = res.statusBarHeight
				}
			});
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.lisi.length < this.total) {
				this.form.pageNum++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		onShow() {
			this.$nextTick(function() {
				this.testUpgrade()
			})
			this.lisi=[]
			this.form = {
				pageNum: 1,
				pageSize: 3,
			}
			this.deptName = uni.getStorageSync('deptName')
			this.stockStatistics()
		},
		methods: {
			//获取主页顶部数据
			stockStatistics(){
				this.$u.get('/warehouseBusiness/summary/stockStatistics',{mode:this.mode}).then(res => {
					console.log(res)
					this.exhibition = res.data
					//成功后再查询
					this.query()
				})
			},
			testUpgrade() {
				this.$refs.app_update.update(); //调用子组件 检查更新
			},
			query() {
				this.$u.get('/warehouseBusiness/summary/inAndOutStockList', this.form).then(res => {
					this.lisi = this.lisi.concat(res.rows)
					this.total = res.total
				})
			},
			scanCode() {
				uni.scanCode({
					success: res => {
						console.log(res.result)
					}
				});
			},
			jumpPath(res) {
				switch (res) {
					case 1:
						this.$u.route('/pages/home/myorder/index');
						break;
					case 2:
						this.$u.route('/pages/home/delivery/index');
						break;
						// case 3:
						// 	this.$u.route('/pages/home/allocation/index');
						// 	break;
						// case 4:
						// 	this.$u.route('/pages/home/goodsTransfer/index');
						// 	break;
					case 5:
						this.$u.route('/pages/home/inventoryQuery/index');
						break;
					case 6:
						this.$u.route('/pages/home/freightCalculation/shipSchedule');
						break;
					case 7:
						this.$u.route('/pages/home/patrolInspection/index');
						break;
					case 8:
						this.$u.route('/pages/home/procurementApplicationApproval/index');
						break;
					case 12:
						this.$u.route('/pages/home/cameraList/index');
						break;
					case 13:
						this.$u.route('/pages/home/ageStatistics/index');
						break;
					default:
						uni.showToast({
							icon: 'none',
							title: '该功能暂未开发~',
							position: "bottom"
						})
						break;
				}
			},
			myReview() {
				this.$u.route('/pages/home/myReview/index');
			},
			myData() {
				uni.showToast({
					icon: 'none',
					title: '该功能暂未开发~',
					position: "bottom"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 96%;
		margin: 0 auto;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 10rpx;
	}

	.shadow {
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.basic>view {
		margin-bottom: 10rpx;
	}

	.basic>view:nth-child(1) {
		color: #797979;
	}

	.view {
		width: 96%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between
	}

	.line {
		width: 92%;
		margin: 0 auto;
	}

	.oddnumber {
		width: 96%;
		margin: 20rpx auto;
		margin-bottom: 20rpx;
	}

	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}

	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}

	.search {
		width: 96%;
		margin: 10rpx auto;
	}

	.iconblue {
		width: 10rpx;
		height: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.license {
		float: left;
		font-size: 32rpx;
	}

	.various {
		float: right;
		width: 150rpx;
		border: 2rpx solid #3a63cf;
		text-align: center;
		border-radius: 100rpx;
		color: #1669e6;
	}

	.condition {
		background-color: #1669e6;
		height: 60rpx;
	}

	.conditionone {
		width: 92%;
		height: 44rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		color: #fff;
	}

	.conditionone>view {
		color: #e6e8e8;
	}
</style>