LocalLivingServicesUniapp/pages/index/index.vue

<template>
	<view class="index">
		<view class="head-back">
			<image src="/static/newIndex/index-bg.png" mode="widthFix"></image>
		</view>

		<view class="head">
			<!-- 顶部状态栏占位 -->
			<view class="top"></view>
			<!-- 头部内容 -->
			<view class="header">
				<view class="shop-info" @click="shopDetails">
					<view class="logo">
						<image :src="logo ? logo : '/static/index/address.png'" mode="aspectFill"></image>
					</view>
					<view class="shop-meta">
						<view class="shop-name">
							<text class="name-text">{{ name }}</text>
							<image class="down-icon" src="/static/index/down.png" mode=""></image>
						</view>
						<view class="phone">手机号 {{ phone || '--' }}</view>
					</view>
				</view>
				<view class="logout-btn" @click.stop="loginOut">退出账号</view>
			</view>
			<view class="data_box">
				<view class="data">
					<view class="item">
						<span>{{ numberOrders || 0 }}</span>订单数
					</view>
					<view class="item">
						<span>{{ turnover || 0 }}</span>营业总额(元)
					</view>
					<view class="item" @click="goUser">
						<span>{{ newCustomer || 0 }}</span>新客
					</view>
				</view>
			</view>
		</view>

		<view class="service">
			<view class="main">
				<view class="left">
					<view class="scan blue" @click="scanRecord">
						<view class="">
							<span>核销记录</span><br />
							查看历史核销记录<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="back">
							<image src="/static/index/recores-back.png" mode=""></image>
						</view>
						<image src="/static/index/scan.png" mode=""></image>
					</view>
					<view class="scan green" @click="goOrder">
						<view class="">
							<span>售卖订单</span><br />
							查看历史售卖记录<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="back">
							<image src="/static/index/order-back.png" mode=""></image>
						</view>
						<image src="/static/index/order.png" mode=""></image>
					</view>
				</view>
				<view class="right" @click="scan">
					<span>核销扫码</span><br />
					扫一扫快速核销<u-icon name="arrow-right" style="margin-left: 10rpx;"></u-icon>
					<view class="back">
						<image src="/static/index/scan-back.png" mode=""></image>
					</view>
					<image src="/static/index/records.png" mode=""></image>
				</view>
			</view>
			<view class="other">
				<indexNav :showTopUp="showTopUp" :showGroupMeal="showGroupMeal" />
			</view>
		</view>

		<!-- 消息通知 -->
		<view class="message">
			<view class="msg-head">
				<text class="title">消息通知</text>
				<view class="more" @click="goMessage">
					查看更多
					<u-icon name="arrow-right" color="#999" size="24"></u-icon>
				</view>
			</view>
			<view class="msg" v-if="msg.length">
				<view class="item" v-for="(item, index) in msg" :key="item.id || index" @click="toNotification(item)">
					<view class="type">
						<view class="img">
							<image :src="msgIcon(item.category)" mode=""></image>
							<span>{{ item.categoryName }}</span>
						</view>
					</view>
					<view class="details">{{ item.content }}</view>
					<view class="time">{{ item.createTimeDisplay }}</view>
				</view>
			</view>
			<view class="msg-empty" v-else>暂无消息</view>
		</view>

		<!-- 完善信息弹窗，storeStatus == 3 (店铺已经审核通过 ) -->
		<checkPopup :status="storeStatus" :describe="describe" :referenceId="referenceId" @cutPopup="isPopup = false"
			v-if="isPopup" />
	</view>
</template>

<script>
	import indexNav from "@/components/index_nav.vue";
	import checkPopup from "@/components/check-popup.vue";
	import prepaidApi from "@/api/memberPrepaid.js";
	import api from "@/api/api";
	import { updateMsgTabBadge, setMsgTabBadge, isUnreadNotice } from "@/common/util/msgBadge.js";
	export default {
		components: {
			indexNav,
			checkPopup,
		},
		data() {
			return {
				numberOrders: "", //订单
				newCustomer: "", //新客
				turnover: "", //营业总额
				name: "",
				phone: "",
				msg: [],
				categoryIcons: {
					"1": "/static/index/deal.png",
					"2": "/static/index/verify.png",
					"3": "/static/index/system.png",
				},
				merchantId: "",
				storeStatus: 0, //商户店铺设置状态
				userId: "", //用户id
				describe: "", //描述
				isPopup: false, //弹窗是否出现
				referenceId: "", //邀请码
				logo: "",
				showTopUp: false, // 行业是否为美食
				showGroupMeal: false, // 团餐报名是否审核通过
			};
		},
		onLoad: function() {
			this.PageCur = "home";
			++this.commponent1Key;
			++this.commponent2Key;
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur;
			},
			//新客
			goUser() {
				uni.navigateTo({
					url: "/pages/index/userControl",
				});
			},
			//扫码核销
			scan() {
				uni.navigateTo({
					url: "/pages/scan/manual",
				});
			},
			goOrder() {
				uni.switchTab({
					url: "/pages/order/index",
				});
			},
			goMessage() {
				uni.switchTab({
					url: "/pages/message/message",
				});
			},
			msgIcon(category) {
				return this.categoryIcons[category] || "/static/index/system.png";
			},
			toNotification(item) {
				const str = this.$u.queryParams(item);
				uni.navigateTo({
					url: `/pages/message/details?${str}`,
				});
			},
			//跳转至门店详情页
			shopDetails() {
				uni.navigateTo({
					url: "/pages/index/shop",
				});
			},
			scanRecord() {
				uni.navigateTo({
					url: "/pages/scan/record",
				});
			},
			loginOut() {
				uni.showModal({
					title: "提示",
					content: "是否确认退出当前账号？",
					success: (res) => {
						if (res.confirm) {
							api.logout().then(() => {
								setMsgTabBadge(0);
								uni.clearStorageSync();
								uni.navigateTo({
									url: `/pages/login/login`,
								});
							});
						}
					},
				});
			},
			gettodayData() {
				this.$http
					.get("/merchant/account/todayOverview", {})
					.then((res) => {
						if (res.data.code == 200) {
							this.turnover = res.data.result.turnover;
							this.numberOrders = res.data.result.numberOrders;
							this.newCustomer = res.data.result.newCustomer;
						}
					});
			},
			getMessage() {
				this.$http
					.get("/localUserNotice/localUserNotice/getListNew", {
						params: {
							userType: 1,
						},
					})
					.then((res) => {
						const list = res.data.result || [];
						// 首页只展示未读，已读不展示
						this.msg = list.filter(isUnreadNotice).slice(0, 5);
					})
					.catch(() => {
						this.msg = [];
					});
				updateMsgTabBadge();
			},
			// getNum 已合并到 gettodayData，新客由 /merchant/account/todayOverview 返回
			getNum() {},
			//获取商户是否完善店铺信息
			getStroeStatus() {
				this.$http
					.get("/merchant/app/checkMerchantInfo?userId=" + this.userId)
					.then((res) => {
						if (res.data.code == 200) {
							//message == 3（审核已通过）
							if (res.data.result != 3) {
								this.storeStatus = res.data.result;
								this.describe = res.data.message;
								res.data.result == 3 ?
									(this.isPopup = false) :
									(this.isPopup = true);
								uni.hideTabBar();
							}
						}
					});
			},
			/** 查询行业是否支持储值，控制首页储值管理入口 */
			checkTopUpEligibility() {
				if (!this.merchantId) {
					this.showTopUp = false;
					return;
				}
				prepaidApi
					.checkIndustryEligibility(this.merchantId)
					.then((res) => {
						this.showTopUp = res.data.code === 200 && !!res.data.result;
					})
					.catch(() => {
						this.showTopUp = false;
					});
			},
			/** 查询团餐报名状态，审核通过才展示团餐设置/团餐订单 */
			checkGroupMealApply() {
				this.$http
					.post("/groupmeal/gmMerchantApplicationRecord/isApply", {})
					.then((res) => {
						this.showGroupMeal =
							res.data.code === 200 &&
							!!res.data.result &&
							res.data.result.status == 1;
					})
					.catch(() => {
						this.showGroupMeal = false;
					});
			},
		},
		mounted() {
			let that = this;
		},
		onShow() {
			let that = this;
			uni.getStorage({
				key: "login_user_info",
				success: function(res) {
					that.name = res.data.merchantName;
					that.merchantId = res.data.merchantId;
					that.userId = res.data.id;
					that.logo = res.data.merchantHeadPhoto;
					that.phone = res.data.phone || "";
					that.gettodayData();
					that.getMessage();
					that.getNum();
					that.getStroeStatus();
					that.checkTopUpEligibility();
					that.checkGroupMealApply();
				},
			});
		},
	};
</script>

<style scoped lang="scss">
	.index {
		width: 100vw;
		min-height: 100vh;
		background: #f2f3f5;
		padding-bottom: 40rpx;
		position: relative;
		z-index: 1;

		.head-back {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1;
			pointer-events: none;

			image {
				width: 100%;
				display: block;
			}
		}

		.head {
			width: 100%;
			height: auto;
			position: relative;
			overflow: hidden;
			z-index: 2;

			.top {
				width: 100%;
				height: var(--status-bar-height);
				background-color: transparent;
			}

			.header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 0rpx 0rpx 32rpx;
				position: relative;
				z-index: 10;

				.shop-info {
					flex: 1;
					display: flex;
					align-items: center;
					min-width: 0;
					margin-right: 20rpx;
				}

				.logo {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 16rpx;
					flex-shrink: 0;

					image {
						width: 72rpx;
						height: 72rpx;
						margin: 0;
					}
				}

				.shop-meta {
					flex: 1;
					min-width: 0;
				}

				.shop-name {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 600;
					color: #1d2129;
					line-height: 44rpx;

					.name-text {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 360rpx;
					}

					.down-icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
						flex-shrink: 0;
					}
				}

				.phone {
					margin-top: 4rpx;
					font-size: 24rpx;
					color: #86909c;
					line-height: 34rpx;
				}

				.logout-btn {
					flex-shrink: 0;
					padding: 10rpx 24rpx;
					font-size: 24rpx;
					color: #4e5969;
					background: rgba(255, 255, 255, 0.72);
					border-radius: 28rpx 0rpx 0rpx 28rpx;
					line-height: 34rpx;
				}
			}

			.data_box {
				width: 686rpx;
				margin: 28rpx auto 16rpx;
				background: #ffffff;
				box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
				border-radius: 16rpx;
				position: relative;
				z-index: 19;

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

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

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

		.service {
			width: 686rpx;
			box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
			border-radius: 16rpx;
			margin: 0 auto;
			position: relative;
			z-index: 2;

			.main {
				height: auto;
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
				align-items: stretch;
				background: #ffffff;
				padding: 20rpx;
				border-radius: 20rpx;

				.left {
					flex: 1;
					margin-right: 22rpx;
					height: 340rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.scan {
						font-size: 20rpx;
						font-weight: 600;
						width: 352rpx;
						height: 160rpx;
						padding: 10rpx 12rpx 16rpx 28rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
						z-index: 2;
						border-radius: 8rpx;
						overflow: hidden;

						.back {
							width: 100%;
							height: 100%;
							position: absolute;
							bottom: 0;
							right: 0;
							z-index: -1;

							image {
								width: 100%;
								height: 100%;
							}
						}

						span {
							font-size: 32rpx;
						}

						image {
							width: 138rpx;
							height: 134rpx;
						}
					}

					.scan.blue {
						color: #197ffd;
						margin-bottom: 22rpx;
					}

					.scan.green {
						color: #14c584;
						background: #e7fff7;
					}
				}

				.right {
					width: 272rpx;
					height: 340rpx;
					color: #624fe3;
					font-size: 20rpx;
					padding: 28rpx;
					background: #f6f4ff;
					position: relative;
					z-index: 2;
					border-radius: 8rpx;
					overflow: hidden;

					.back {
						width: 100%;
						height: 100%;
						position: absolute;
						bottom: 0;
						right: 0;
						z-index: -1;

						image {
							width: 100%;
							height: 100%;
						}
					}

					span {
						font-weight: 600;
						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					image {
						width: 182rpx;
						height: 214rpx;
						margin: 8rpx auto 0;
					}
				}
			}

			.other {
				width: 100%;
				padding: 32rpx;
				background: #ffffff;
				border-radius: 16rpx;
			}
		}

		.message {
			width: 686rpx;
			padding: 28rpx 24rpx 8rpx;
			margin: 16rpx auto 0;
			background: #ffffff;
			border-radius: 16rpx;
			position: relative;
			z-index: 2;

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

				.title {
					font-size: 30rpx;
					font-weight: 600;
					color: #1d2129;
				}

				.more {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #86909c;
				}
			}

			.msg {
				width: 100%;

				.item {
					width: 100%;
					padding: 24rpx 0;
					border-bottom: 1px solid #f2f3f5;

					&:last-child {
						border-bottom: none;
					}

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

						.img {
							font-size: 28rpx;
							font-weight: 600;
							color: #1d2129;
							display: flex;
							align-items: center;

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

					.details {
						font-size: 24rpx;
						color: #86909c;
						line-height: 36rpx;
						margin-bottom: 8rpx;
					}

					.time {
						font-size: 22rpx;
						color: #c9cdd4;
					}
				}
			}

			.msg-empty {
				padding: 40rpx 0 48rpx;
				text-align: center;
				font-size: 24rpx;
				color: #c9cdd4;
			}
		}
	}
</style>