jingrunTechnology-ui/pages/home/index.vue

<template>
	<view>
		<view class="head" />
		<view class="carousel">
			<u-swiper :list="list" mode="rect" bg-color="#ffffff"></u-swiper>
		</view>
		<view class="lantern">
			<u-icon color="#348CF5" size="36" name="volume-fill" label="公告"
				style="float: left;margin-top: 15rpx;padding-left: 20rpx;"></u-icon>
			<view style="width: 100%;margin-top: 20rpx;">
				<u-notice-bar :volume-icon="false" type="primary" bg-color="#fff" volume-size="50" mode="vertical"
					:list="liSt">
				</u-notice-bar>
			</view>
		</view>
		<view class="order">
			<view class="box">
				<view @click="myorder">
					<text class="numer">{{meter.count}}</text>
					<view class="grid-text">新订单</view>
				</view>
				<view>
					<text class="numer">{{meter.countOrders}}</text>
					<view class="grid-text">本月订单</view>
				</view>
				<view>
					<text class="numer">{{meter.miles}}<text>km</text></text>
					<view class="grid-text">本月里程</view>
				</view>
				<view>
					<text class="numer">{{meter.freightAmtDr}}<text>元</text></text>
					<view class="grid-text">本月运费</view>
				</view>
			</view>
		</view>
		<view class="service">
			<view @click="myorder">
				<img style="width: 80rpx;height: 80rpx;" src="./../../static/我的订单.png" alt="">
				<view>我的订单</view>
			</view>
			<view @click="exceptionEntry">
				<img style="width: 80rpx;height: 80rpx;" src="./../../static/我的绩效.png" alt="">
				<view>我的绩效</view>
			</view>
			<view @click="exceptionEntry">
				<img style="width: 80rpx;height: 80rpx;" src="./../../static/异常录入.png" alt="">
				<view>异常录入</view>
			</view>
			<view @click="expenseEntry">
				<img style="width: 80rpx;height: 80rpx;" src="./../../static/费用录入.png" alt="">
				<view>费用录入</view>
			</view>
		</view>
		<u-toast ref="repeat" position="bottom" />
	</view>
</template>

<script>
	import {
		request
	} from '@/common/request/request'
	export default {
		data() {
			return {
				list: [{
						image: 'https://www.dmu.com.cn/images/banner/banner41.jpg?v=2',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://www.dmu.com.cn/images/banner/banner1.jpg?v=1',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://www.dmu.com.cn/images/banner/banner2.jpg?v=1',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				liSt: [
					// '庆祝靖润物流小程序上线',
					// '测试啊测试~'
				],
				meter: {
					count: 0, //新订单
					miles: 0, //里程
					freightAmtDr: 0, //运费
					countOrders: 0
				}
			}
		},
		created() {
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
			// #ifdef MP-WEIXIN  
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			// #endif
			this.getNotice()
		},
		onShow() {
			this.statistics()
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.statistics()
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			myorder() {
				uni.navigateTo({
					url: 'myorder/index'
				});
			},
			statistics() {
				request({
					url: '/fleet/ftmsorderbillscars/selectDriverPerformance',
					method: 'get',
					params: {
						phonenumber: uni.getStorageSync('cell_phone')
					}
				}).then(res => {
					console.log(res)
					if (res.data.code == 500) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							position: "bottom"
						})
					} else if (res.data.code == 200) {
						this.meter = res.data.data
						console.log(this.meter)
						if (!this.meter.count) {
							this.meter.count = 0
						}
						if (!this.meter.miles) {
							this.meter.miles = 0
						}
						if (!this.meter.freightAmtDr) {
							this.meter.freightAmtDr = 0
						}
						if (!this.meter.countOrders) {
							this.meter.countOrders = 0
						}
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '网络繁忙请稍后再试',
						position: "bottom"
					})
				})
			},
			exceptionEntry() {
				this.$refs.repeat.show({
					title: '功能完善中~',
					type: 'default',
					position: 'bottom'
				})
			},
			expenseEntry() {
				this.$refs.repeat.show({
					title: '功能完善中~',
					type: 'default',
					position: 'bottom'
				})
			},
			// 获得公告功能
			getNotice() {
				request({
					url: '/system/notice/list?pageNum=1&status=0',
					method: 'get',
				}).then(res => {
					console.log(res)
					res.data.rows.forEach(item => {
						this.liSt.push(item.noticeTitle)
					})
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '网络繁忙请稍后再试',
						position: "bottom"
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.service {
		width: 84%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-top: 30rpx;

		view {
			width: 300rpx;
			border-radius: 30rpx;
			text-align: center;
		}
	}

	.service>view {
		background-color: #ffffff;
		margin-bottom: 25rpx;
		padding-top: 45rpx;
		padding-bottom: 45rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
	}

	.numer {
		color: #348CF5;
		font-size: 38rpx;
		font-weight: bold;

		text {
			font-size: 24rpx;
			color: #909399;
		}
	}

	.head {
		width: 100%;
		height: 300rpx;
		background-color: #3A63CF;
		border-bottom-left-radius: 100%;
		border-bottom-right-radius: 100%;
		margin-top: -100rpx;
	}

	.order {
		width: 98%;
		height: 118rpx;
		margin: 0 auto;
		background: #fff;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		border-radius: 20rpx;
		margin-top: 10rpx;
		text-align: center;
		padding-top: 20rpx;
	}

	.box {
		width: 92%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}

	.carousel {
		width: 98%;
		margin: 0 auto;
		margin-top: -190rpx;
		box-shadow: 12rpx 9rpx 12rpx 1rpx rgba(79, 119, 225, 0.23);
	}

	.wrap {
		padding: 40rpx;
	}

	.lantern {
		width: 100%;
		height: 70rpx;
	}

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