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

<template>
	<view class="">
		<u-navbar :is-back="false" title="联兑通商户版"></u-navbar>
		<u-notice-bar mode="horizontal" :show="noticeShow" :list="noticeList"></u-notice-bar>
		<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.todayIncome || 0}}</text>
						</view>
						<view class="">
							<text>总资产</text>
							<text>{{statistic.totalAccount || 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.todayMemberIn || 0}}</text>
						</view>
						<view class="">
							<text>会员总数</text>
							<text>{{statistic.memberCount || 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="$u.toast('即将推出')" v-for="(item,index) in systemList" :key="index">
						<view class="grid-icon">
							<image mode="heightFix" style="height: 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>
	import socket from "@/utils/socket.js"
	export default {
		data() {
			return {
				noticeShow:true,
				noticeList: [],
				
				//状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,

				//下拉选择商铺
				shopShow: false,
				//我的商铺列表
				shopList: [],
				//选中的商铺id
				shopId: '',
				//选中的商铺labe
				shopLable: '',
				labelIds: '',
				labelNames: '',
				//选中的商铺所属的商场
				mallId: '',

				//统计数据
				statistic: {},

				//webSocket
				webSocket:{},
				count: 0,

				//菜单
				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/system1.png',
						name: '外卖平台',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/system2.png',
						name: '预约系统',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/system3.png',
						name: 'ERP系统',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/system4.png',
						name: '线上商城',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/system5.png',
						name: '门店管理',
						path: '/pages/mine/card/card'
					},
					{
						icon: '/static/icon/add.png',
						name: '添加服务',
						path: '/pages/mine/card/card'
					},
				],
				//是否开启会员中心
				isOpenMember:false,
				isOpenMemberShow:false,
			}
		},
		onLoad() {
			this.init()
		},
		beforeDestroy() {
			this.handelClose()
		},
		onUnload() {
			this.handelClose()
		},
		onHide() {
			this.handelClose()
		},
		onShow() {
			if (this.canReset) {
				this.getStatistic()
				this.openSocket()
			}
			this.canReset = true
		},
		methods: {
			//开启socket begin
			openSocket() {
				let page = this.$util.getPageCtx()
				if (page.data.isOpenSocket) {
					this.onSocketOpen()
					page.data.isOpenSocket = false
				}
			},
			// 启动webSocket
			onSocketOpen() {
				this.webSocket=new socket({
					sid:this.vuex_shopId
				})
				this.webSocket.init(() => {
					console.log("启动成功");
					//启动成功，60s后关闭
					this.timeToClose()
				});
				this.webSocket.acceptMessage = (res) => {
					///用户已支付
					if (!this.$isEmpty(res.content) && res.content != '连接成功' && res.content != '心跳') {
						this.noticeShow=true
						this.noticeList.push(res.content)
					}
				}
			},
			//定时关闭连接
			timeToClose() {
				let _this = this
				this.timerSocket = setInterval(() => {
					_this.count++
					if (_this.count == 120) {
						_this.noticeShow=false
						_this.handelClose()
					}
				}, 1000)
			},
			handelClose() {
				this.count = 0
				clearTimeout(this.timerSocket)
				this.timerSocket = null
				if (!this.$isEmpty(this.webSocket)) {
					this.webSocket.closeSocket()
				}
			},
			//开启socket end
			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)
				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(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>