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/dianpu6.png" mode=""></image>
					</view>
					<view class="center margin-left-10">
						<view @click="showShop">
							<text class="name">{{shopLable || '去完善商户资料'}}</text>
							<u-icon size="25" v-if="shopShow" name="arrow-up-fill" style="margin-left: 10rpx;"></u-icon>
							<u-icon size="25" v-else name="arrow-down-fill" style="margin-left: 10rpx;"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-list grid col-3 no-border top-menu" style="padding: 20rpx 10rpx;">
				<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: 62rpx;height: 62rpx;" :src="item.icon" />
					</view>
					<text style="color: #fff;font-size: 26rpx;font-weight: 500;">{{item.name}}</text>
				</view>
			</view>

			<view class="menu-list">
				<view @click="jump('/pages/my-bills/my-bills')" class="menu">
					<view class="menu-top">
						<image src="@/static/index/bills.png"></image>
						<view class="center padding-left-10">
							<text class="text-lg text-bold" style="color: #303030;">我的账单</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" @click="jump('/pages/member/member')">
					<view class="menu-top">
						<image src="@/static/index/huiyuan.png"></image>
						<view class="center padding-left-10">
							<text class="text-lg text-bold" style="color: #303030;">会员中心</text>
						</view>
					</view>
					<view class="menu-bottom" style="color: #FFFFFF;">
						<view class="">
							<text>新增会员</text>
							<text style="color: #3D72EA;">{{statistic.newMember || 0}}</text>
						</view>
						<view class="">
							<text>会员总数</text>
							<text style="color: #3D72EA;">{{statistic.allMembers || 0}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="market">
				<text class="title">商家工具</text>
				<view class="cu-list grid col-4 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: 80rpx;height: 80rpx;" :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="market">
				<text class="title">数字化系统</text>
				<view class="cu-list grid col-4 no-border margin-top-30">
					<view class="cu-item" @click="jump(item.path)" v-for="(item,index) in systemList" :key="index">
						<view class="grid-icon">
							<image style="width: 80rpx;height: 80rpx;" :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>

		<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-color="#EF9944" @confirm="shopConfirm" :default-value="defaultValue" v-model="shopShow"
			value-name="id" label-name="name" :list="shopList">
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//下拉选择商铺
				shopShow: false,
				//我的商铺列表
				shopList: [],
				defaultValue: [0],
				//选中的商铺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/index/faqi.png',
						name: '发起活动',
						path: '/pages/publish/publish',
						count: 0
					},
					{
						icon: '/static/index/qingdan.png',
						name: '活动清单',
						path: '/pages/activity/activity',
						count: 0
					},
					{
						icon: '/static/index/mendian-add.png',
						name: '添加门店',
						path: '/pages/shop-info/shop-info',
						count: 0
					},
					{
						icon: '/static/index/dingdan3.png',
						name: '订单中心',
						path: '/pages/order/order',
						count: 0
					},
				],
				systemList: [{
						icon: '/static/index/shangcheng.png',
						name: '线上商城',
						path: '/pagesGoods/pages/menu/menu'
					}, {
						icon: '/static/index/mendian.png',
						name: '门店管理',
						path: ''
					}, {
						icon: '/static/index/waimai.png',
						name: '外卖平台',
						path: ''
					},
					{
						icon: '/static/index/yuyue.png',
						name: '预约系统',
						path: ''
					},
					{
						icon: '/static/index/erp.png',
						name: 'ERP系统',
						path: ''
					},
					{
						icon: '/static/index/add.png',
						name: '添加服务',
						path: ''
					},
				],
				//是否开启会员中心
				isOpenMember: false,
				isOpenMemberShow: false,

				//流程节点信息
				taskDetail: {}
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			showShop() {
				if (this.$isEmpty(this.shopLable)) {
					uni.navigateTo({
						url: "/pages/shop-info/shop-info?phone=" + this.$cache.get('phone')
					})
				} else {
					this.shopShow = !this.shopShow
				}
			},
			async init() {
				let phone = this.$cache.get('phone')
				let params = {
					personTel: phone,
				}
				let res = await this.$api.shop.list(params)
				if (this.$isEmpty(res.data.records)) {
					this.$u.vuex('vuex_shopStatus', false)
					return
				}
				if (this.$cache.get('defaultValue')) {
					this.defaultValue = this.$cache.get('defaultValue')
				}
				this.shopList = res.data.records
				let item = this.shopList[this.defaultValue[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.getTaskDetail()
				if (!this.isFirst) {
					this.handelShopStatus()
				}
				this.isFirst = true

				//获取统计数据
				this.getStatistic()
			},
			getStatistic() {
				if (this.$isEmpty(this.vuex_merchantNo)) {
					return
				}
				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_shopStatus', item.auditStatus)
				this.$u.vuex('vuex_shopId', this.shopId)
				this.$u.vuex('vuex_merchantNo', item.merchantNo)
				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, index) => {
					if (this.shopId == item.id) {
						this.defaultValue = [index]
						this.$cache.put('defaultValue', this.defaultValue)
						return true
					}
				})
				this.labelIds = item.labelIds
				this.labelNames = item.labelNames
				this.cacheSelectedShop(item[0])
				this.getTaskDetail()
				this.handelShopStatus()
				//获取统计数据
				this.getStatistic()
			},
			jump(path) {
				let flag = this.handelShopStatus()
				if (this.$isNotEmpty(flag)) {
					this.$jump(path)
				}
			},
			operate(index) {
				if (index == 2) {
					this.$jump('/pages/card/card')
					return
				}
				let flag = this.handelShopStatus()
				if (this.$isEmpty(flag)) {
					return
				}
				//审核通过，校验是否开启会员中心
				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')
				}
			},
			handelShopStatus() {
				let _this = this
				//商户审核通过
				if (this.vuex_shopStatus == this.$global.SHOP_AUDIT.PASS) {
					return true
				}
				//未完善商户资料
				if (!this.vuex_shopStatus) {
					uni.showModal({
						cancelText: '暂不完善',
						confirmText: '去完善',
						confirmColor: '#FF9447',
						cancelColor: '#606266',
						showCancel: true,
						title: '提示',
						content: '商户资料未完善',
						success: (res) => {
							if (res.confirm) {
								this.$jump('/pages/shop-info/shop-info?phone' + this.$cache.get('phone'))
							}
						}
					})
					return
				}
				//审核失败
				if (this.vuex_shopStatus == this.$global.SHOP_AUDIT.FAIL) {
					this.$dialog.showModal('商户资料审核失败,请重新申请', true).then(res => {
						let params = {
							isFail: true,
							shopId: this.vuex_shopId
						}
						uni.navigateTo({
							url: "/pages/shop-info/shop-info" + this.$u.queryParams(params)
						})
					})
					return
				}
				//商户已停用
				if (this.vuex_shopStatus == this.$global.SHOP_AUDIT.STOP) {
					this.$dialog.showModal('该商户已停用', false)
					return
				}
				//待审核中
				if (this.vuex_shopStatus.includes('WAITING')) {
					if (this.vuex_shopStatus == this.$global.SHOP_AUDIT.WAITING_SIGN) {
						//待签约状态，去签约
						uni.showModal({
							title: '提示',
							content: '商户资料审核通过,请进行签约？',
							cancelText: '暂不签约',
							confirmColor: '#FF9447',
							confirmText: '去签约',
							success: function(res) {
								if (res.confirm) {
									_this.$jump('/pages/webView/webView?url=' + _this.taskDetail.variables
										.signUrl)
								}
							}
						});
						return
					}
					if (this.vuex_shopStatus == this.$global.SHOP_AUDIT.WAITING_AUTH) {
						//待商户认证状态
						uni.showModal({
							title: '提示',
							content: '商户资料审核通过,请进行认证？',
							cancelText: '暂不认证',
							confirmColor: '#FF9447',
							confirmText: '去认证',
							success: function(res) {
								if (res.confirm) {
									_this.$jump('/pages/webView/webView?url=' + _this.taskDetail.variables
										.qrcodeUrl)
								}
							}
						});
						return
					}
					//待商场审核，待平台审核，待易宝审核状态下，去审核流程详情页
					uni.showModal({
						title: '提示',
						content: '商户资料审核中,查看审核流程？',
						cancelText: '暂不查看',
						confirmColor: '#FF9447',
						confirmText: '查看',
						success: function(res) {
					  if (res.confirm) {
								_this.$jump('/pages/flow/flow')
							}
						}
					});
				}

			},
			/**
			 * 获取流程节点信息
			 */
			async getTaskDetail() {
				let audit = (await this.$api.audit.detail({
					entityId: this.vuex_shopId
				})).data
				if (this.$isEmpty(audit)) {
					return
				}
				let params = {
					assignee: '$INITIATOR',
					processInstanceId: audit.processInstanceId
				}
				this.$api.flow.getTaskId(params).then(res => {
					this.taskDetail = res.data.records[0]
				})
			},
		}
	}
</script>

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

	.cu-list.grid.no-border {
		padding: 10rpx;
	}

	.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 {
			background-color: #FFFFFF;
			width: 49%;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 16rpx;
			padding: 30rpx 15rpx;

			.menu-top {
				display: flex;

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

			.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: #303030;
						font-weight: 400;
					}

					text:last-child {
						margin-bottom: 10rpx;
						font-size: 28rpx;
						color: #FF8D32;
						font-weight: 500;
					}
				}
			}
		}
	}

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

		.title {
			font-size: 32rpx;
			font-weight: 800;
		}
	}

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

		.title {
			font-size: 32rpx;
			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>