TuBaoSoft-AP/pages/home/home.vue

<template>
	<view>
		<view style="
			background: url(../../static/homeBG.png)no-repeat;
			height: 340rpx;
			background-size:100%;
			box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);">
			<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 style="display: flex;justify-content: space-around;">
				<view style="width: 120rpx;text-align: center;" @click="myData">
					<u-icon name="order" color="#fff" size="60"></u-icon>
					<view style="margin-top: 10rpx;color: #FFFFFF;">我的数据</view>
				</view>
				<view style="width: 120rpx;text-align: center;" @click="myData">
					<u-icon name="edit-pen" color="#fff" size="60"></u-icon>
					<view style="margin-top: 10rpx;color: #FFFFFF;">我的审核</view>
				</view>
				<view style="width: 120rpx;text-align: center;" @click="scanCode">
					<u-icon name="scan" color="#fff" size="60"></u-icon>
					<view style="margin-top: 10rpx;color: #FFFFFF;">扫一扫</view>
				</view>
			</view>
			<!-- 正文内容 -->
			<view class="content">
				<u-grid :col="4" :border="false">
					<u-grid-item @click="jumpPath(1)">
						<u-icon name="arrow-downward" :size="46"></u-icon>
						<view class="grid-text">我的入库</view>
					</u-grid-item>
					<u-grid-item @click="jumpPath(2)">
						<u-icon name="arrow-upward" :size="46"></u-icon>
						<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-icon name="lock" :size="46"></u-icon>
						<view class="grid-text">我的库存</view>
					</u-grid-item>
					<u-grid-item @click="jumpPath(6)">
						<u-icon name="lock" :size="46"></u-icon>
						<view class="grid-text">海运费计算</view>
					</u-grid-item>
					<u-grid-item @click="jumpPath(7)">
						<u-icon name="grid" :size="46"></u-icon>
						<view class="grid-text">其他</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view style="width: 96%;margin: 0 auto;">
				<u-image width="100%" height="170rpx" src="../../static/activityDiagram.png"></u-image>
			</view>
			<view style="width: 96%;">
				<!-- <h1>全新功能正在开发中</h1> -->
			</view>
		</view>
		<!-- 更新组件 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'
				},
				actionStyle: {
					color: '#fff'
				}
			}
		},
		onShow() {
			this.$nextTick(function() {
				this.testUpgrade()
			})
		},
		methods: {
			testUpgrade() {
				this.$refs.app_update.update(); //调用子组件 检查更新
			},
			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 6:
						this.$u.route('/pages/home/freightCalculation/shipSchedule');
						// this.$u.route('/pages/home/freightCalculation/freightCalculation');
						break;
					default:
						uni.showToast({
							icon: 'none',
							title: '该功能暂未开发~',
							position: "bottom"
						})
						break;
				}
			},
			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;
	}

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