LocalLivingServicesUniapp/pages/index/index.vue

<template>
	<view class="index">
		<view class="head">
			<view class="header" @click="shopDetails">
				<image src="/static/index/address.png" mode=""></image>
				{{name}}
				<image src="/static/index/down.png" mode=""></image>
			</view>

		</view>
		<view class="data_box">
			<view class="title">
				今日概况
				<image src="/static/index/today.png" mode=""></image>
			</view>
			<view class="data">
				<view class="item">
					<span>{{numberOrders}}</span>订单
				</view>
				<view class="item">
					<span>{{income}}</span>收益
				</view>
				<view class="item">
					<span>{{newCustomer}}</span>新客
				</view>
			</view>
		</view>
		<view class="service">
			<view class="main">
				<view class="scan" @click="scan">
					<image src="/static/index/scan.png" mode=""></image>扫码核销
				</view>
				<view class="scan" @click="scanRecord">
					<image src="/static/index/record.png" mode=""></image>核销记录
				</view>
				<view class="scan">
					<image src="/static/index/order.png" mode=""></image>售卖订单
				</view>
			</view>
			<view class="other">
				<indexNav />
			</view>
		</view>
		<view class="message">
			<view class="title">
				实时消息
			</view>
			<view class="msg">
				<view class="item" v-for="(item,index) in msg" :key="index">
					<view class="type">
						<view class="img">
							<image src="/static/index/deal.png" mode="" v-if="item.msgType=='1'"></image>
							<image src="/static/index/verify.png" mode="" v-if="item.msgType=='2'"></image>
							<image src="/static/index/client.png" mode="" v-if="item.msgType=='3'"></image>
							<image src="/static/index/system.png" mode="" v-if="item.msgType=='4'"></image>
							<span v-if="item.msgType=='1'">交易信息</span>
							<span v-if="item.msgType=='2'">产品核销</span>
							<span v-if="item.msgType=='3'">客户评价</span>
							<span v-if="item.msgType=='4'">系统消息</span>
						</view>
						<view class="time">
							{{item.msgDate}}
						</view>
					</view>
					<view class="details">
						{{item.msgContent}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import indexNav from '@/components/index_nav.vue'
	export default {
		components: {
			indexNav
		},
		data() {
			return {
				numberOrders: '', //订单
				newCustomer: '', //新客
				income: '', //收益
				name: '滨海广场店',
				num: 222,
				msg: []
			}
		},
		onLoad: function() {
			this.PageCur = 'home'
				++this.commponent1Key
				++this.commponent2Key
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			//扫码核销
			scan() {
				uni.navigateTo({
					url: '/pages/scan/scan'
				})
			},
			//跳转至门店详情页
			shopDetails(){
				uni.navigateTo({
					url: '/pages/index/shop'
				})
			},
			scanRecord() {
				uni.navigateTo({
					url: '/pages/scan/record'
				})
			},
			gettodayData() {
				this.$http.get("/merchant/app/home/todayData?merchantId=" + '111', {}).then(res => {
					if (res.data.code == 200) {
						this.income = res.data.result.income
						this.newCustomer = res.data.result.newCustomer
						this.numberOrders = res.data.result.numberOrders
					}
				})
			},
			getMessage(){
				this.$http.get("/merchant/app/home/realMessage?merchantId=" + '111', {}).then(res => {
					if (res.data.code == 200) {
						this.msg = res.data.result.records
					// 	this.income = res.data.result.income
					// 	this.newCustomer = res.data.result.newCustomer
					// 	this.numberOrders = res.data.result.numberOrders
					}
				})
			}
		},
		mounted() {
			this.gettodayData()
			this.getMessage()
			// let info = 
			let that = this
			uni.getStorage({
				key: 'login_user_info',
				success: function (res) {
					that.name = res.data.merchantName
				}
			});
		}
	}
</script>

<style scoped lang="scss">
	.index {
		width: 100vw;
		height: 94vh;
		background: #F7F8FC;

		.head {
			width: 100%;
			height: 272rpx;
			background: linear-gradient(90deg, #E6FFFF 0%, #CEF7FF 40%, #A3CEFE 73%, #BCD6FF 100%), linear-gradient(to bottom , #F7F8FC 0%, rgba(247,248,252,0) 100%);
			padding: 20rpx;
			.header {
				width: 100%;
				height: 112rpx;
				display: flex;
				align-items: center;
				padding: 0px 24rpx;
				font-size: 32rpx;
				font-weight: 600;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}

				image:nth-child(2) {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

		.data_box {
			width: 676rpx;
			height: 196rpx;
			margin: 20rpx auto;
			margin-top: -141rpx;
			background: linear-gradient(0, #FFFFFF 0%, #FFF4EA 100%);
			box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.title {
				display: flex;
				align-items: center;
				width: 100%;
				height: 53rpx;
				font-size: 28rpx;
				font-weight: 600;
				border-bottom: 1px solid #eeeeee;
				padding: 12rpx 16rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
				}
			}

			.data {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx 0px;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					font-size: 24rpx;
					line-height: 28rpx;
					color: #999999;

					span {
						color: #333;
						font-size: 48rpx;
						font-weight: 600;
						line-height: 56rpx;
					}
				}
			}
		}

		.service {
			width: 676rpx;
			// height: 468rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
			box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
			border-radius: 16rpx;
			padding: 24rpx 18rpx;
			margin: 0 auto;

			.main {
				display: flex;
				justify-content: space-around;
				margin-bottom: 40rpx;

				.scan {
					display: flex;
					flex-direction: column;
					font-size: 26rpx;
					font-weight: 600;

					image {
						width: 106rpx;
						height: 106rpx;
						margin-bottom: 4rpx;
					}
				}
			}
		}

		.message {
			width: 676rpx;
			padding: 20rpx 16rpx;
			margin: 20rpx auto 0px;
			background: linear-gradient(0, #FFFFFF 0%, #E2EFFF 100%);
			border-radius: 16rpx;

			.title {
				width: 100%;
				height: 53rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
			}

			.msg {
				width: 100%;

				.item {
					width: 100%;
					// height: 126rpx;
					// margin: 20rpx auto;
					border-bottom: 1px solid #dddddd;
					margin-bottom: 20rpx;

					.type {
						width: 100%;
						height: 38rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 8rpx;

						.img {
							font-size: 26rpx;
							font-weight: 600;
							display: flex;
							align-items: center;

							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 8rpx;
							}
						}

						.time {
							font-size: 22rpx;
							color: #999999;
						}
					}
					.details{
						font-size: 22rpx;
						color: #999999;
						margin-bottom: 16rpx;
					}
				}
			}
		}

	}
</style>