LocalLivingServicesUniapp/pages/index/index.vue

<template>
	<view class="index">
		<view class="head">
		  <!-- 顶部状态栏占位 -->
		  <view class="top"></view>
		  <!-- 头部内容 -->
		  <view class="header" @click="shopDetails">
		    <view class="logo">
		      <image :src="logo?logo:'/static/index/address.png'" mode=""></image>
		    </view>
		    {{ name }}
		    <image src="/static/index/down.png" mode=""></image>
		  </view>
		  <view class="data_box">
		    <view class="title" @click="scanRecordaa">
		      今日概况
		    </view>
		    <view class="data">
		      <view class="item">
		        <span>{{ numberOrders }}</span>订单数
		      </view>
		      <view class="item">
		        <span>{{ income }}</span>收益（元）
		      </view>
		      <view class="item" @click="goUser">
		        <span>{{ newCustomer || 0 }}</span>新客
		      </view>
		    </view>
		  </view>
		  <!-- 背景图 改为绝对定位 + 父级相对定位 -->
		  <view class="head-back">
		    <image src="/static/index/top-back.png" mode="widthFix"></image>
		  </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" >
						<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 />
			</view>
		</view>
		<!-- 完善信息弹窗，storeStatus == 3 (店铺已经审核通过 ) -->
		<checkPopup :status="storeStatus" :describe="describe" :referenceId="referenceId" @cutPopup="isPopup = false"
			v-if="isPopup" />
		<!-- <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";
	import checkPopup from "@/components/check-popup.vue";
	export default {
		components: {
			indexNav,
			checkPopup,
		},
		data() {
			return {
				numberOrders: "", //订单
				newCustomer: "", //新客
				income: "", //收益
				name: "",
				num: 222,
				msg: [],
				merchantId: "",
				storeStatus: 0, //商户店铺设置状态
				userId: "", //用户id
				describe: "", //描述
				isPopup: false, //弹窗是否出现
				referenceId: "", //邀请码
				logo: ''
			};
		},
		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",
				});
			},
			//跳转至门店详情页
			shopDetails() {
				uni.navigateTo({
					url: "/pages/index/shop",
				});
			},
			scanRecord() {
				uni.navigateTo({
					url: "/pages/scan/record",
				});
			},
			scanRecordaa() {
				// uni.navigateTo({
				// 	url: '/pages/login/login'
				// })
			},
			gettodayData() {
				this.$http
					.get("/merchant/app/home/todayData?merchantId=" + this.merchantId, {})
					.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=" + this.merchantId, {})
					.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
						}
					});
			},
			getNum() {
				let data = {};
				this.$http.post("/newCustomer/count", data).then((res) => {
					this.newCustomer = res.data.result.newCustomerCount;
				});
			},
			//获取商户是否完善店铺信息
			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;
								// this.referenceId = res.data.result.referenceId
								res.data.result == 3 ?
									(this.isPopup = false) :
									(this.isPopup = true);
								uni.hideTabBar();
							}
						}
					});
			},
		},
		mounted() {
			// let info =
			let that = this;
		},
		onShow() {
			let that = this;
			uni.getStorage({
				key: "login_user_info",
				success: function(res) {
					console.log(res);
					that.name = res.data.merchantName;
					that.merchantId = res.data.merchantId;
					that.userId = res.data.id;
					that.logo = res.data.merchantHeadPhoto;
					that.gettodayData();
					that.getMessage();
					that.getNum();
					that.getStroeStatus();

				},
			});
		},
	};
</script>

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

		.head {
		  width: 100%;
		  height: auto; 
		  position: relative; 
		  overflow: hidden;
		  
		  .top {
		    width: 100%;
		    height: var(--status-bar-height);
		    background-color: transparent;
		  }
		  
		  .head-back {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    z-index: 1;
		    
		    image {
		      width: 100%;
		      height: 100%;
		      // object-fit: cover; 
		    }
		  }
		
		  .header {
		    width: 100%;
		    height: 56rpx;
		    display: flex;
		    align-items: center;
		    padding: 0px 32rpx;
		    font-size: 32rpx;
		    font-weight: 600;
		    position: relative;
		    z-index: 10;
		    margin-top: 44rpx;
		
		    .logo {
		      width: 56rpx;
		      height: 56rpx;
		      border-radius: 50%;
		      overflow: hidden;
		      margin-right: 10rpx;
		
		      image {
		        width: 56rpx;
		        height: 56rpx;
		        margin: 0;
		      }
		    }
		
		    image {
		      width: 25rpx;
		      height: 25rpx;
		      margin-left: 10rpx;
		    }
		  }
		
		  .data_box {
		    width: 686rpx;
		    height: 180rpx;
		    margin: 36rpx auto;
		    background: #ffffff;
		    box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
		    border-radius: 16rpx;
		    position: relative;
		    z-index: 19;
		    margin-bottom: 42rpx;
		
		    .title {
		      display: flex;
		      align-items: center;
		      width: 100%;
		      height: 53rpx;
		      font-size: 26rpx;
		      color: #86909C;
		      padding: 18rpx;
		
		      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: #86909C;
		
		        span {
		          height: 62rpx;
		          color: #333;
		          font-size: 48rpx;
		          font-weight: 600;
		          line-height: 56rpx;
		        }
		      }
		    }
		  }
		}



		.service {
			width: 686rpx;
			// height: 468rpx;
			box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
			border-radius: 16rpx;
			padding: 24rpx 18rpx;
			margin: 0 auto;

			.main {
				height: auto;
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
				align-items: stretch;

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

					.scan {
						font-size: 20rpx;
						font-weight: 600;
						width: 100%;
						height: 160rpx;
						padding: 12rpx 12rpx 12rpx 28rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
						z-index: 2;

						.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: 338rpx;
					color: #624FE3;
					font-size: 20rpx;
					padding: 28rpx;
					background: #F6F4FF;
					position: relative;
					z-index: 2;

					.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;
					}
				}
			}
		}

		.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%;
					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>