guosen-ldt-mall/pages/index/index.vue

<template>
	<view class="">
		<view style="position: relative;">
			<image src="../../static/icon/bg.png"  style="width: 100vw;height: 400rpx"></image>
			<view class="card-top" >
				<view class="top">
					<view @click="mallShow=true">
						<text class="name" >{{mallLable}}</text>
						<u-icon v-if="mallShow" name="arrow-up-fill" style="margin-left: 10rpx;"></u-icon>
						<u-icon v-else name="arrow-down-fill" style="margin-left: 10rpx;"></u-icon>
					</view>
					<view class="btn">
						<view class="image">
							<image src="@/static/icon/logout.png" mode=""></image>
						</view>
						<view @click="logout" class="center padding-left-10" >
							<text>退出</text>
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>
				
				<view class="menu-list">
					<view @click="$jump('/pages/stores/stores')" class="menu menu1">
						<view class="menu-top">
							<image src="../../static/icon/mendian.png"></image>
							<view class="center padding-left-20">
								<text class="text-lg">我的门店</text>
							</view>
						</view>
						<view class="padding-top-20 text-df">
							<text>门店数量</text>
							<text class="padding-left-20">{{statistic.shopCount}}</text>
						</view>
					</view>
					<view class="menu menu2" @click="$jump('/pages/member-center/member-center')">
						<view class="menu-top">
							<image src="../../static/icon/huiyuan.png"></image>
							<view class="center padding-left-20">
								<text class="text-lg">会员中心</text>
							</view>
						</view>
						<view class="padding-top-20 text-df">
							<text>会员总数</text>
							<text class="padding-left-20">{{statistic.memberCount}}</text>
						</view>
					</view>
				</view>
				
				<view class="cu-list grid col-3 no-border" style="border-radius:20rpx ;">
					<view class="cu-item" >
						<text style="color: #FF9447;font-size: 34rpx;font-weight: 800;">{{statistic.todayIncome}}</text>
						<text  style="color: #242424;font-size: 26rpx;" >今日营收</text>
					</view>
					<view class="cu-item" >
						<text style="color: #FF9447;font-size: 34rpx;font-weight: 800;">{{statistic.todayOrderCount}}</text>
						<text  style="color: #242424;font-size: 26rpx;" >交易笔数</text>
					</view>
					<view class="cu-item" >
						<text style="color: #FF9447;font-size: 34rpx;font-weight: 800;">{{statistic.todayMemberIn}}</text>
						<text  style="color: #242424;font-size: 26rpx;" >新增会员</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="market" >
			<text class="title">营销管理</text>
			
			<view class="cu-list grid col-2 no-border margin-top-30" >
				<view class="cu-item" @click="$jump(item.path)" v-for="(item,index) in marketList" :key="index">
					<view class="center">
						<view class="icon" :style="item.background">
							<image :src="item.icon" mode=""></image>
						</view>
					</view>
					<text  style="color: #222222;font-size: 26rpx;margin-top: 20rpx;" >{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="mall">
			<view class="flex justify-between">
				<text class="title">商场管理</text>
				<view class="" style="color: #A3A3A3;font-size: 24rpx;">
					<text >查看全部</text>
					<text class="cuIcon-right" style="margin-left: 4rpx;"></text>
				</view>
			</view>
			<view class="cu-list grid col-4 no-border" style="border-radius:20rpx;margin-top: 50rpx;">
				<view class="cu-item" @click="$jump(item.path)" v-for="(item,index) in mallMenuList" :key="index">
					<view class="grid-icon" >
						<image  style="width: 60rpx;height: 60rpx" :src="item.icon"/>
					</view>
					<text  style="color: #222222;font-size: 26rpx;" >{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="" style="height: 60rpx;" v-if="safeAreaBottom == 0"></view>
		
		<u-select @confirm="mallConfirm" v-model="mallShow" value-name="id" label-name="name" :list="mallList"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mallShow:false,
				mallList:[],
				mallId:'',
				mallLable:'',
				
				//统计数据
				statistic:{},
				
				marketList:[
					{
						icon:'/static/icon/publish.png',
						name:'发起活动',
						background:"background-image:linear-gradient(#FF9549,#FCB07B)",
						path:'/pages/publish/publish'
					},
					{
						icon:'/static/icon/list.png',
						name:'活动清单',
						background:"background-image:linear-gradient(#5892F7,#67BBF9)",
						path:'/pages/activity/activity'
					},
				],
				mallMenuList:[
					{
						icon:'/static/icon/password.png',
						name:'修改密码',
						path:'/pages/login/updatePassword'
					},
					{
						icon:'/static/icon/mall.png',
						name:'商家管理',
						path:'/pages/stores/stores'
					},
					{
						icon:'/static/icon/shanghu.png',
						name:'商户审核',
						path:'/pages/shopAudit/shopAudit'
					},
					{
						icon:'/static/icon/tag.png',
						name:'标签管理',
						path:'/pages/index/tag-manage'
					},
					{
						icon:'/static/icon/audit.png',
						name:'活动审核',
						path:'/pages/acitvityAudit/acitvityAudit'
					},
				]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			logout(){
				this.$dialog.showModal('确定退出？').then(res=>{
					uni.clearStorage()
					this.$jump('/pages/login/account-login')
				})
			},
			async init(){
				let phone=this.$cache.get('phone')
				let res=await this.$api.mall.getListByPhone({personTel:phone})
				this.mallList=res.data
				this.mallId=this.mallList[0].id
				this.mallLable=this.mallList[0].name
				this.cacheSelectedMall(this.mallList[0])
				//获取统计数据
				this.getStatistic()
			},
			getStatistic(){
				this.$api.mall.statistic(this.mallId).then(res=>{
					this.statistic=res.data
				})
			},
			mallConfirm(e){
				this.mallId=e[0].value
				this.mallLable=e[0].label
				let item = this.shopList.filter((item) => {
					if (this.mallId == item.id) {
						return true
					}
				})
				this.cacheSelectedMall(item[0])
				this.getStatistic()
			},
			
			
			cacheSelectedMall(item){
				let selectedMall={
					id:this.mallId,
					label:this.mallLable
				}
				this.$cache.put("selectedMall", Object.assign(item, selectedMall))
				this.$u.vuex('vuex_mallId',this.mallId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon{
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		padding: 20rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	
	.card-top{
		height: 400rpx;
		position: relative;
		margin: -236rpx 20rpx 0;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.top{
			padding: 40rpx 0 30rpx 60rpx;
			display:flex;
			justify-content: space-between;
			
			.name{
				font-weight: 800;
				font-size: 32rpx;
			}
			
			.btn{
				display: flex;
				
				.image{
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					background-color: #FFFFFF;
					padding: 8rpx;
					image{
						width: 20rpx;
						height: 20rpx;
					}
				}
				
				color: #FFFFFF;
				border-radius: 50rpx 0 0 50rpx;
				padding:8rpx 10rpx 8rpx 35rpx;
				background-image: linear-gradient(to right,#FFD67B,#F99200);
			}
		}
		
		.menu-list{
			display: flex;
			justify-content: space-around;
			padding: 20rpx;
			
			.menu{
				width: 48%;
				color: #FFFFFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 14rpx;
				padding:30rpx 20rpx;
				
				.menu-top{
					display: flex;
					image{
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
			
			.menu1{
				background-color: #5C6186;
			}
			.menu2{
				background-color: #E19D5B;
			}
		}
	}
	
	.market{
		border-radius: 20rpx;
		margin:140rpx 20rpx 0;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx 20rpx;
		.title{
			font-weight: 800;
		}
	}
	
	.mall{
		border-radius: 20rpx;
		margin:30rpx 20rpx 0;
		background-color: #FFFFFF;
		padding: 30rpx 10rpx 20rpx 50rpx;
		.title{
			font-weight: 800;
		}
	}
</style>