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

<template>
	<view class="">
		<u-navbar :is-back="false" title="联兑通商户版"></u-navbar>
		<view class="margin-30">
			<view class="flex justify-between">
				<view class="title ">
					<view class="icon">
						<image src="@/static/icon/dianpu.png" mode=""></image>
					</view>
					<view class="center margin-left-10">
						<view @click="shopShow=true">
							<text class="name">{{shopLable}}</text>
							<u-icon v-if="shopShow" 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>
				</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="cu-list grid col-3 no-border top-menu">
				<view class="cu-item" @click="operate(index)" v-for="(item,index) in menuList" :key="index">
					<view class="grid-icon margin-top-20">
						<image style="width: 66rpx;height: 66rpx;" :src="item.icon" />
					</view>
					<text style="color: #fff;font-size: 26rpx;">{{item.name}}</text>
				</view>
			</view>

			<view class="menu-list">
				<view @click="$jump('/pages/bill/bill')" class="menu menu1">
					<view class="menu-top">
						<image src="@/static/icon/bill.png"></image>
						<view class="center padding-left-20">
							<text class="text-lg">我的账单</text>
						</view>
					</view>
					<view class="menu-bottom">
						<view class="">
							<text>今日营收</text>
							<text>{{statistic.todayCharge || 0}}</text>
						</view>
						<view class="">
							<text>总资产</text>
							<text>{{statistic.totalValue || 0}}</text>
						</view>
					</view>
				</view>
				<view class="menu menu2" @click="$jump('/pages/member/member')">
					<view class="menu-top">
						<image src="@/static/icon/center.png"></image>
						<view class="center padding-left-20">
							<text class="text-lg">会员中心</text>
						</view>
					</view>
					<view class="menu-bottom" style="color: #FFFFFF;">
						<view class="">
							<text>新增会员</text>
							<text>{{statistic.newMember || 0}}</text>
						</view>
						<view class="">
							<text>会员总数</text>
							<text>{{statistic.allMembers || 0}}</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="grid-icon">
							<image style="width: 120rpx;height: 120rpx;" :src="item.icon" />
						</view>
						<text style="color: #222222;font-size: 26rpx;margin-top: 20rpx;">{{item.name}}</text>
						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
					</view>
				</view>
			</view>

			<view class="system">
				<text class="title">数字化系统</text>
				<view class="cu-list grid col-4 no-border margin-top-30" style="border-radius:20rpx ;">
					<view class="cu-item" @click="$jump(item.path)" v-for="(item,index) in systemList" :key="index">
						<view class="grid-icon">
							<image  style="height: 56rpx;width: 56rpx;" :src="item.icon" />
						</view>
						<text style="color: #222222;font-size: 26rpx;">{{item.name}}</text>
						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-modal @confirm="$jump('/pages/member/member')" :show-cancel-button="true"  confirm-color="#ff9447" confirm-text="立即开启" cancel-text="暂不开启" v-model="isOpenMemberShow" content="请先创建会员中心"></u-modal>
		<u-select @confirm="shopConfirm" v-model="shopShow" value-name="id" label-name="name" :list="shopList">
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//下拉选择商铺
				shopShow: false,
				//我的商铺列表
				shopList: [],
				//选中的商铺id
				shopId: '',
				//选中的商铺labe
				shopLable: '',
				labelIds: '',
				labelNames: '',
				//选中的商铺所属的商场
				mallId: '',

				//统计数据
				statistic: {},



				//菜单
				menuList: [{
						icon: '/static/icon/scan.png',
						name: '扫一扫',
					},
					{
						icon: '/static/icon/pay.png',
						name: '收款码',
					},
					{
						icon: '/static/icon/card.png',
						name: '卡包',
					}
				],
				marketList: [{
						icon: '/static/icon/faqi.png',
						name: '发起活动',
						background: "background-image:linear-gradient(#FF9549,#FCB07B)",
						path: '/pages/publish/publish',
						count: 0
					},
					{
						icon: '/static/icon/qingdan.png',
						name: '活动清单',
						background: "background-image:linear-gradient(#5892F7,#67BBF9)",
						path: '/pages/activity/activity',
						count: 0
					},
				],
				systemList: [
					{
						icon: '/static/icon/system5.png',
						name: '添加门店',
						path: '/pages/shop-info/shop-info?phone='+this.$cache.get('phone')
					},{
						icon: '/static/icon/system1.png',
						name: '外卖平台',
						path: ''
					},
					{
						icon: '/static/icon/system2.png',
						name: '预约系统',
						path: ''
					},
					{
						icon: '/static/icon/system3.png',
						name: 'ERP系统',
						path: ''
					},
					{
						icon: '/static/icon/system4.png',
						name: '线上商城',
						path: ''
					},
					
					{
						icon: '/static/icon/add.png',
						name: '添加服务',
						path: ''
					},
				],
				//是否开启会员中心
				isOpenMember:false,
				isOpenMemberShow:false,
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			logout() {
				this.$dialog.showModal('确定要退出吗？').then(res => {
					uni.clearStorage()
					uni.reLaunch({
						url: "../login/account-login"
					})
				})
			},
			async init() {
				let phone = this.$cache.get('phone')
				let params = {
					personTel: phone,
					auditStatus: this.$global.SHOP_AUDIT.PASS //审核通过
				}
				let res = await this.$api.shop.list(params)
				if (this.$isEmpty(res.data.records)) {
					this.$dialog.showModal('找不到商户信息',false).then(()=>{
						this.$cache.clear()
						uni.reLaunch({
							url:"/pages/login/account-login"
						})
					})
				}
				this.shopList = res.data.records
				let item = this.shopList[0]
				this.shopId = item.id
				this.shopLable = item.name
				this.labelIds = item.labelIds
				this.labelNames = item.labelNames
				this.mallId = item.mallId
				this.cacheSelectedShop(item)
				//获取统计数据
				this.getStatistic()
			},
			getStatistic() {
				this.$api.shop.statistic({shopId:this.shopId}).then(res => {
					this.statistic = res.data
				})
			},
			cacheSelectedShop(item) {
				let selectedShop = {
					id: this.shopId,
					label: this.shopLable,
					labelIds: this.labelIds,
					labelNames: this.labelNames
				}
				this.$cache.put("selectedShop", Object.assign(item, selectedShop))
				this.$u.vuex('vuex_shopId', this.shopId)
				this.$u.vuex('vuex_mallId', this.mallId)
				this.$u.vuex('vuex_isOpenMember',item.isOpenMember==1?true:false)
			},
			shopConfirm(e) {
				this.shopId = e[0].value
				this.shopLable = e[0].label
				let item = this.shopList.filter((item) => {
					if (this.shopId == item.id) {
						return true
					}
				})
				this.labelIds = item.labelIds
				this.labelNames = item.labelNames
				this.cacheSelectedShop(item[0])
				//获取统计数据
				this.getStatistic()
			},
			operate(index) {
				if (!this.vuex_isOpenMember && (index== 0 || index==1)) {
					this.isOpenMemberShow=true
					return
				}
				if (index == 0) {
					this.$jump('/pages/pay/pay')
				} else if (index == 1) {
					this.$jump('/pages/checkstand/pay-qrcode')
				} else if (index == 2) {
					this.$jump('/pages/card/card')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cu-list.grid>.cu-item .cu-tag {
		right: auto;
		left: 54%;
		margin-left: 20rpx;
	}

	.title {
		display: flex;

		.icon {
			background-color: #FFFFFF;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50rpx;
			height: 50rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		text {
			font-weight: 800;
			font-size: 32rpx;
			color: #303030;
		}
	}

	.top-menu {
		border-radius: 20rpx;
		margin-top: 20rpx;
		background-image: linear-gradient(to right, #FBA33D, #FF8D32);
	}

	.menu-list {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;

		.menu {
			width: 48.8%;
			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;
				}
			}

			.menu-bottom {
				padding-top: 20rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-around;
				width: 100%;

				view {
					display: flex;
					flex-direction: column;
					text-align: center;

					text:first-child {
						margin-bottom: 10rpx;
						font-size: 26rpx;
						color: #E0E2F6;
					}
				}
			}
		}

		.menu1 {
			background-color: #5C6186;
		}

		.menu2 {
			background-color: #E19D5B;
		}
	}

	.market {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx 20rpx;

		.title {
			font-weight: 800;
		}
	}

	.system {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx 20rpx;

		.title {
			font-weight: 800;
		}
	}


	.btn {
		margin-right: -30rpx;
		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);
	}

	.money {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
</style>