parts_shop_ui_LT/pages/tabBar/home.vue

<template>
	<view>
		<view class="status_bar">
			<view style="display: flex;justify-content: space-between;color: #fff;">
				<view style="width: 27%;height: 80rpx;margin: 0 2% 0 1%;">
					<image style="width: 100%;height: 100%;" src="../../static/images/logo/logo_white.png" mode="">
					</image>
				</view>
				<view style="width: 5rpx;background-color: #fff;border-radius: 10rpx;"></view>
				<view
					style="width: 68%;margin-left: 2%;text-align: left;line-height: 80rpx;font-weight: bold;font-size: 32rpx;">
					{{form.tenantName}}
				</view>
			</view>
			<view class="quick">
				<!-- <view class="census">
					<view>营业收入：1232131元</view>
					<view>付款金额：31231231元</view>
				</view> -->
				<view class="ability">
					<u-grid :border="false">
						<u-grid-item @click="pageJump('salesSlip')">
							<image style="width: 80rpx;height: 80rpx;" src="../../static/images/view/home/sale.png">
							</image>
							<text class="grid_text">销售开单</text>
						</u-grid-item>
						<u-grid-item @click="pageJump('stock')">
							<image style="width: 80rpx;height: 80rpx;" src="../../static/images/view/home/stock.png">
							</image>
							<text class="grid_text">库存查询</text>
						</u-grid-item>
						<u-grid-item @click="pageJump('operatingReceipts')">
							<image style="width: 80rpx;height: 80rpx;" src="../../static/images/view/home/collect.png">
							</image>
							<text class="grid_text">经营收款</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="swiper">
			<u-swiper :list="list" radius="36rpx" keyName="image" height="90" :autoplay="false" circular></u-swiper>
		</view>
		<view class="quick_desktop">
			<u-cell-group :border="false">
				<u-cell icon="integral-fill" :border="false" title="工作桌面">
					<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd5003;"></view>
					<view slot="right-icon">
						<u-icon name="grid" size="28"></u-icon>
					</view>
				</u-cell>
			</u-cell-group>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item,index) in dataList" :key="index" @click="pageJump(item.value)"
					style="margin: 20rpx 0;">
					<image style="width: 60rpx;height: 60rpx;" :src="item.url" mode=""></image>
					<text class="grid_text">{{item.text}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		
		<u-toast ref="uToast" />
		<!-- 更新组件 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"
	import {revenueExpenditure} from "@/api/home/index.js"
	export default {
		components: {
			appUpdate
		},
		data() {
			return {
				list: [{
					image: "../../static/images/view/home/swiper.png"
				}],
				form:{},
				dataList: [{
					url: "../../static/images/view/home/desktop/customer.png",
					text: "客户信息",
					value: "customer"
				}, {
					url: "../../static/images/view/home/desktop/visit.png",
					text: "拜访记录"
				}, {
					url: "../../static/images/view/home/desktop/product.png",
					text: "产品信息",
					value: "product"
				}, {
					url: "../../static/images/view/home/desktop/achievements.png",
					text: "绩效考核"
				}, {
					url: "../../static/images/view/home/desktop/order.png",
					text: "销售订单",
					value: "toBeCollectedlist"
				}, {
					url: "../../static/images/view/home/desktop/delivery.png",
					text: "送货管理"
				}, {
					url: "../../static/images/view/home/desktop/collection.png",
					text: "收款管理",
					value: "collectionManagement"
				}, {
					url: "../../static/images/view/home/desktop/returnGoods.png",
					text: "退货管理"
				}, {
					url: "../../static/images/view/home/desktop/shoppingMall.png",
					text: "商城信息"
				}, {
					url: "../../static/images/view/home/desktop/goOnline.png",
					text: "产品上架"
				}, {
					url: "../../static/images/view/home/desktop/purchase.png",
					text: "采购管理",
					value: "purchase"
				}, {
					url: "../../static/images/view/home/desktop/cost.png",
					text: "费用管理"
				}],
			}
		},
		mounted() {
			this.$refs.app_update.update();
			revenueExpenditure({
				tenantId:uni.getStorageSync('userInfo').tenant_id
			}).then(res=>{
				this.form = res.data
			})
		},
		methods: {
			pageJump(value) {
				switch (value) {
					case "salesSlip":
						uni.$u.route('/pages/views/salesSlip/index');
						break;
					case "stock":
						uni.$u.route('/pages/views/stock/index');
						break;
					case "product":
						uni.$u.route('/pages/views/product/index');
						break;
					case "customer":
						uni.$u.route('/pages/views/customer/index');
						break;
					case "purchase":
						uni.$u.route('/pages/views/purchase/index');
						break;
					case "toBeCollectedlist":
						uni.$u.route('/pages/views/salesSlip/toBeCollectedlist');
						break;
					case "operatingReceipts":
						uni.$u.route('/pages/views/salesSlip/toBeCollectedlistBatch');
						break;
					case "collectionManagement":
						uni.$u.route('/pages/views/salesSlip/collectionManagement');
						break;
					default:
						this.$refs.uToast.success("该功能暂未开发~")
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.quick_desktop {
		width: 96%;
		padding-bottom: 20rpx;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.swiper {
		width: 96%;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 100rpx;
		box-shadow: 0px 14rpx 38rpx 4rpx rgba(52, 52, 52, 0.03);
	}

	.status_bar {
		width: 100%;
		background: url("../../static/images/view/home/head_bg.png") no-repeat;
		background-size: 100% 100%;
		padding-top: var(--status-bar-height);
	}

	.quick {
		margin-top: 60rpx;
		box-shadow: 0px 14rpx 38rpx 4rpx rgba(52, 52, 52, 0.03);
		.census {
			width: 96%;
			margin: 0 auto;
			color: #fff;
			display: flex;
			justify-content: space-around;
			font-size: 32rpx;
			// view:nth-child(1){
			// 	width: 50%;
			// }
			// view:nth-child(2){
			// 	width: 50%;
			// }
		}

		.ability {
			background-color: #fff;
			width: 96%;
			padding: 40rpx 0;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}

	.grid_text {
		font-size: 28rpx;
		color: #333333;
		// font-weight: bold;
		padding-top: 5rpx;
	}
</style>