huarun/pages/home/home.vue

<template>
	<bgImg />
	<view class="container">


		<view class="nav">
			<view class="slid">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="2000" duration="500">
					<swiper-item v-for="(item, index) in state.slidImg" :key="index">
						<image :src="item" mode="" style="width: 100%;height: 100%;"></image>
					</swiper-item>

				</swiper>

			</view>
		</view>
		<!-- 公告 -->
		<view class="notices">
			<view class="title">
				<image src="@/static/SVG/公告资讯.svg" style="width: 70rpx;height: 70rpx;" mode=""></image>
			</view>


			<view class="news">
				<view class="btn" v-for="(item, index) in state.noticeList" :key="index">最新</view>
			</view>
			<view class="box">
				<view class="bar" v-for="(item, index) in state.noticeList" :key="index">
					<up-notice-bar icon='' bgColor="white" color="black" :text="changeContent(item)"></up-notice-bar>
				</view>
			</view>
		</view>

		<uni-section title="决策支持" titleColor="#038CFF" type="line" :padding="false">
			<view class="board">
				<view class="box">
					<view class="text">管理驾驶舱</view>
					<image src="@/static/SVG/智能驾驶舱.svg" style="width: 100%;height: 100%;" mode=""></image>
				</view>

				<view class="box">
					<view class="text">全景图</view>
					<image src="@/static/SVG/数据看板.svg" style="width: 100%;height: 100%;" mode=""></image>
				</view>
			</view>
		</uni-section>

		<uni-section title="营销赋能" titleColor="#038CFF" type="line" :padding="false">
			<uni-grid :column="4" :showBorder="false" :highlight="true">
				<uni-grid-item>
					<view class="grid-item-box">
						<image src="@/static/SVG/进销存分析.svg" class="img" mode=""></image>
						<text class="text">进销存分析</text>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view class="grid-item-box">
						<image src="@/static/SVG/客户分析.svg" class="img" mode=""></image>
						<text class="text">客户分析</text>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view class="grid-item-box">
						<image src="@/static/SVG/订单分析.svg" class="img" mode=""></image>
						<text class="text">订单分析</text>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view class="grid-item-box">
						<image src="@/static/SVG/活动赋能.svg" class="img" mode=""></image>
						<text class="text">活动赋能</text>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view class="grid-item-box">
						<image src="@/static/SVG/终端概览.svg" class="img" mode=""></image>
						<text class="text">客户档案</text>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view class="grid-item-box">
						<image src="@/static/城市纯销.png" class="img" mode=""></image>
						<text class="text">城市纯销</text>
					</view>
				</uni-grid-item>


			</uni-grid>
		</uni-section>



		<uni-section title="智能预警" titleColor="#038CFF" type="line" :padding="false">
			<uni-grid :column="4" :showBorder="false" :highlight="true">
				<uni-grid-item>
					<view class="grid-item-box">
						<image src="@/static/SVG/客户库存预警.svg" class="img" mode=""></image>
						<text class="text">客户库存预警</text>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view class="grid-item-box">
						<image src="@/static/SVG/客户风险预警.svg" class="img" mode=""></image>
						<text class="text">渠道风险预警</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		<uni-section title="鱼跃龙门" titleColor="#038CFF" type="line" :padding="false">
			<uni-grid :column="4" :showBorder="false" :highlight="true">
				<uni-grid-item>
					<view class="grid-item-box" @click="goScan">
						<view class="img-box">
							<image src="@/static/scan.png" class="img" mode=""></image>
						</view>
						<text class="text">溯源扫码</text>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view class="grid-item-box" @click="goReport">
						<view class="img-box">
							<image src="@/static/report.png" class="img" mode=""></image>
						</view>
						<text class="text">溯源报表</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>

		<view style="height: 140rpx;"></view>
	</view>
</template>

<script setup>
import useCounterStore from '@/stores/counter.js';
import {
	ref,
	getCurrentInstance,
	reactive,
	onMounted
} from 'vue';
import {
	onReady,
	onShow,
	onLoad
} from '@dcloudio/uni-app'
import {
	Storage
} from '@/service/storage'
const storage = new Storage()
const {
	proxy
} = getCurrentInstance()
const counterStore = useCounterStore()
const menu = reactive({
	menu: uni.getStorageSync('menu').menu
})
const changeContent = (e) => {
	const isoDateString = e.msgDate;
	const date = new Date(isoDateString);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	const formattedDate = `${year}-${month}-${day}`;
	let data = formattedDate + '        ' + e.msgContent.replace(/\n/g, ' ')
	return data
}
const state = reactive({
	noticeList: [],
	slideId: [],
	slidImg: []
})


onMounted(() => {
	const baseUrl = import.meta.env.VITE_APP_API_BASEURL
	const accessToken = uni.getStorageSync('accessToken')
	uni.request({
		url: baseUrl + '/v1/api/basic/home/menu?type=3',
		method: 'GET',
		header: {
			accessToken
		},
		success: (res) => {
			console.log(res)
		},
		fail(res) {
			console.log(res)
		}
	})
	getUserInfo()
})



const getUserInfo = async () => {
	let res = await proxy.$api.login.getInfo()
	uni.setStorageSync('userInfo', res.data)
}

const skip = (url) => {
	let posn = uni.getStorageSync('userInfo').posn
	uni.navigateTo({
		url
	})
}

// 跳转溯源扫码
const goScan = () => {
	uni.navigateTo({
		url: '/packages/traceabilityCodeQuery/pages/index'
	})
}
// 跳转溯源报表
const goReport = () => {
	uni.navigateTo({
		url: "/packages/traceabilityReport/pages/index",
	});
}
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	width: 750rpx;
	top: 150rpx;
	z-index: -1;
}

.board {
	width: 95%;
	height: 170rpx;
	// background-color: red;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.box {
		width: 332rpx;
		height: 165rpx;
		// background-color: green;
		border-radius: 20rpx;
		position: relative;

		.text {
			position: absolute;
			top: 40rpx;
			left: 30rpx;
			color: #FFFFFF;
		}
	}
}

.nav {
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: 5rpx;
	background-color: transparent;

	.slid {
		width: 690rpx;
		height: 294rpx;
		margin: 30rpx auto;
		position: relative;
	}
}

.notices {
	width: 690rpx;
	height: 122rpx;
	margin: 0rpx auto;
	background-color: white;
	border-radius: 15rpx;
	box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-evenly;

	.news {
		width: 12%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.title {
		width: 18%;
		height: 100%;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-weight: bold;
	}


	.btn {
		background-color: #fef0ef;
		width: 100%;
		height: 50rpx;
		color: #ec204c;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5rpx;
	}

	.box {
		width: 70%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		position: relative;

		.bar {
			width: 100%;
			height: 45rpx;
			display: flex;
			align-items: center;
			overflow: hidden;

		}
	}
}


.grid-item-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;

	.img {
		width: 76rpx;
		height: 76rpx;
	}

	.text {
		font-size: 27rpx;
		margin-top: 5px;
	}

	.img-box {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background-color: #379AFF;
		display: flex;
		align-items: center;
		justify-content: center;

		.img {
			width: 40rpx;
			height: 40rpx;
		}
	}

}
</style>