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="showShop">
							<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/my-bills/my-bills')" 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" :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/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,

				//流程节点信息
				taskDetail: {}
			}
		},
		watch:{
			defaultValue(){
				console.log("123");
			}
		},
		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
				}
			},

			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,
				}
				let res = await this.$api.shop.list(params)
				if (this.$isEmpty(res.data.records)) {
					this.$u.vuex('vuex_shopStatus', false)
					return
				}
				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() {
				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) {
						console.log([index]);
						this.defaultValue=[index]
						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) {
				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')
				} else if (index == 2) {
					this.$jump('/pages/card/card')
				}
			},
			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
				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;
	}

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