jigangSCM2/jnpf-app/pages/index/portal.vue

<template>
	<view class="u-page u-page-home">
		<view class="sty-statistics-top-b">
			<u-row gutter="16">
				<u-col span="12" text-align="center">
					<view class="sty-statistics-top-item">
						<view><span>济钢城市矿产再生资源智慧管家平台</span></view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="sty-statistics-top">
			<u-row gutter="16">
				<u-col span="12" text-align="center" class="line-right">
					<view class="sty-statistics-top-item">
					<view><span class="fsizeA">{{homeInfo.avgPurchasePrice}}</span></view>
						<view><span class="fsizeA">磅单采购数</span></view>
					</view>
				</u-col>
				
			</u-row>
		</view>
		
		<view class="sty-statistics-top">
			<u-row gutter="16">
				<u-col span="12" text-align="center" class="line-right">
					<view class="sty-statistics-top-item">
						<view><span class="fsizeA">{{homeInfo.todayPurchasePrice}}</span></view>
						<view><span class="fsizeA">今日采购量</span></view>
					</view>
				</u-col>
				
			</u-row>
		</view>
		
		<view class="sty-statistics-top">
			<u-row gutter="16">
				
				
				<u-col span="12" text-align="center">
					<view class="sty-statistics-top-item">
					<view><span class="fsizeA">{{homeInfo.salesVolumeToday}}</span></view>
						<view><span class="fsizeA">今日销售量</span></view>
					</view>
				</u-col>
			</u-row>
		</view>
		
		
		
		<!-- <view class="sty-msg">
			<u-notice-bar :duration="5000" mode="horizontal" :is-circular="false" @click="goMsg" :list="list">
			</u-notice-bar>
		</view> -->
		<view class="sty-statistics">
			<u-row gutter="22" justify="space-between">
				<u-col span="12" gutter="0">
					<u-row gutter="22" justify="space-between">
						
						<u-col span="6">
							<view class="sty-item sty-item-b">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="car" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											今日付款:{{homeInfo.todayPay}}元
										</view>
										
									</u-col>
								</u-row>
							</view>
						</u-col>
						
						<u-col span="6">
							<view class="sty-item sty-item-d">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="home" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											今日回款:{{homeInfo.todayPayment}}元
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
						
						
					
					
					</u-row>
				</u-col>
			</u-row>
			<u-row gutter="22" justify="space-between">
				<u-col span="12" gutter="0">
					<u-row gutter="22" justify="space-between">
						
						<u-col span="6">
							<view class="sty-item sty-item-a">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="red-packet" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
												待支付:{{homeInfo.unpaid}}元
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
						
						<u-col span="6">
							<view class="sty-item sty-item-c">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="rmb" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											待回款:{{homeInfo.moneyCollected}}元
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
						
					
					
					</u-row>
				</u-col>
			</u-row>
		</view>
			
		<view class="menhu-v">
			<!-- #ifndef MP -->
			<template>
				<template v-if="userInfo.appPortalId">
					<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOption"  @up="upCallback"
						:up="upOption" :bottombar="false" style="min-height: 100%" @init="mescrollInit">
						<!-- 常规门户 -->
						<view class="portal-v" v-if="authConfig.type==0">
							<template v-if="formData.length">
								<view class="portal-box" v-for="(item,index) in formData" :key="index">
									<portalItem :item='item' ref="portalItem" :key="key" :protalData="formData"
										v-if="item.show" />
								</view>
							</template>
							<!-- <u-row>
								<u-col span="6">
									<view class="sty-item sty-item-c">
										<u-row>
											<u-col span="12" text-align="center">
												<view>
													<u-icon name="rmb" color="#ffffff" size="80"></u-icon>
												</view>
											</u-col>
										</u-row>
										<u-row>
											<u-col span="12" text-align="center">
												<view>
													采购收货凭证
												</view>
											</u-col>
										</u-row>
									</view>
								</u-col>
								
							
							
							</u-row> -->
							
						</view>
					</mescroll-body>
				</template>
			
			</template>
			<!-- #endif -->
		
			
		</view>
		
		
		<view class="sty-statistics" @click="openPage('/pages/scm/form/purchaseReceiptVoucher/index')">
			<u-row gutter="22" justify="space-between">
				<u-col span="12" gutter="0">
					<u-row gutter="22" justify="space-between">
						
						<u-col span="6">
							<view class="sty-item sty-item-b">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="car" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											采购收货凭证
										</view>
										
									</u-col>
								</u-row>
							</view>
						</u-col>
						
						<u-col span="6">
						</u-col>
					</u-row>
				</u-col>
			</u-row>
		</view>
	</view>

</template>

<script>
	var wv; //计划创建的webview
	import {
		PortalList,
		SetPortal
	} from '@/api/portal/portal.js'
	// #ifndef MP
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import IndexMixin from './mixin.js'
	import chat from '@/libs/chat.js'
	import portalItem from '@/components/visualPortal/components/index.vue'
	import defaultPortal from '@/components/visualPortal/components/defaultPortal.vue'
	import request from '@/utils/request'
	import {
		getFlowTodoCount
	} from "@/api/workFlow/flowEngine";
	import {
		auth
	} from '@/api/portal/portal.js'
	// #endif
	import resources from '@/libs/resources.js'
	export default {
		// #ifndef MP
		mixins: [MescrollMixin, IndexMixin],
		// #endif
		components: {
			// #ifndef MP
			portalItem,
			defaultPortal
			// #endif
		},
		data() {
			return {
				flowTodoData: {},
				homeInfo: {},
				showWebView: true,
				emptyImg: require(`@/static/image/defProtal.png`),
				emptyImg1: resources.message.nodata,
				rightIcon: '',
				key: +new Date(),
				formData: [],
				portalTitle: '门户',
				statusBarHeight: '',
				showSelect: false,
				selectData: {
					name: '',
					id: ''
				},
				portalList: [],
				id: '',
				userInfo: {},
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					page: {
						num: 0,
						size: 50,
						time: null
					},
					empty: {
						use: false,
					},
					textNoMore: '没有更多数据',
				},
				authConfig: {},
				token: '',
				mpPortalUrl: ''
			};
		},
		onShow() {
			const query = {
				flowCirculateType: this.flowCirculateType,
				flowDoneType: this.flowDone,
				toBeReviewedType: this.toBeReviewed,
			}
			getFlowTodoCount(query).then(res => {
				this.flowTodoData = res.data
				this.getHomeInfo()
				this.userInfo = uni.getStorageSync('userInfo') || {}
				this.mescrollInitByRef();
				this.mescroll.resetUpScroll()
			})
			// this.getHomeInfo()
			// this.$forceUpdate()
			// this.token = uni.getStorageSync('token')
			// if (!this.$store.state.chat.socket) chat.initSocket()
			// this.mpPortalUrl = this.define.baseURL + '/pages/mpPortal/index?token=' + this.token
			// this.userInfo = uni.getStorageSync('userInfo') || {}
			// this.mescrollInitByRef();
			// this.mescroll.resetUpScroll()
			// this.$refs.mescrollRef.mescroll.resetUpScroll()
			// if (!this.userInfo.appPortalId) return
			// // #ifndef MP
			// this.getPortalList()
			// this.$nextTick(() => {
			// 	// this.mescroll.resetUpScroll();
			// 	this.portalList = []
				
			// })
			// // #endif
			// // #ifdef APP-PLUS
			// this.rightIcon = 'scan'
			// // #endif
		},
		onReady() {
			// #ifdef APP-PLUS
			this.setWebview()
			// #endif
		},
		onLoad(e) {
			// #ifndef MP
			uni.$on('refresh', () => {
				this.formData = [];
				// this.mescroll.resetUpScroll();
			})
			// #endif
		},
		methods: {
			openPage(path) {
				if (!path) return;
				uni.navigateTo({
					url: path,
				});
			},
			getHomeInfo() {
				request({
					url: '/api/scm/BusinessEnterpriseRelational/getHomePage',
					method: 'get'
				}).then(res => {
					let _info = res.data[0];
					this.homeInfo = _info;
				}).catch(() => {})
			},
			
			setWebview() {
				if (this.authConfig.linkType == 1) {
					var currentWebview = this.$scope
						.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
					let height = 0;
					uni.getSystemInfo({
						//成功获取的回调函数，返回值为系统信息
						success: (sysinfo) => {
							height = sysinfo.windowHeight - 50; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
						},
						complete: () => {}
					});
					this.$nextTick(() => {
						setTimeout(() => {
							wv = currentWebview.children()[0]
							wv.setStyle({
								top: 80,
								height,
								scalable: true
							})
						}, 500); //如果是页面初始化调用时，需要延时一下
					})
				}
			},
			upCallback(keyword) {
				auth(this.userInfo.appPortalId).then(res => {
					this.authConfig = res.data || {}
					let data = JSON.parse(res.data.formData) || {};
					this.formData = []
					this.formData = data.layout ? JSON.parse(JSON.stringify(data.layout)) : [];
					this.handelFormData(data)
					if (data.refresh.autoRefresh) {
						setInterval(() => {
							uni.$emit('proRefresh')
						}, data.refresh.autoRefreshTime * 60000)
					}
					this.mescroll.endSuccess(this.formData.length);
					this.key = +new Date()
					// #ifdef APP-PLUS
					this.setWebview()
					// #endif
				}).catch(() => {
					this.mescroll.endSuccess(0);
					this.mescroll.endErr();
					this.key = +new Date()
				})
			},
			handelFormData(data) {
				const loop = (list) => {
					list.forEach(o => {
						o.allRefresh = data.refresh
						o.option.defaultValue.forEach(p => {
							
							if(p.fullName == '待办事宜'){
								p.num = this.flowTodoData.toBeReviewed
							}
							if(p.fullName == '抄送事宜'){
								p.num = 0
								p.num = this.flowTodoData.flowCirculate
							}
						})
						o.show = false
						if (o.visibility && o.visibility.length && o.visibility.includes('app')) o.show =
							true
						if (o.children && o.children.length) loop(o.children)
					})
					this.key = +new Date()
				}
				loop(this.formData)
				this.dataList = this.formData.filter(o => o.show)
				if (this.dataList.length < 1) {
					this.formData = this.dataList
					this.mescroll.endSuccess(this.dataList.length);
				}
			},
			isJSON(str) {
				try {
					var obj = JSON.parse(str);
					if (typeof obj == 'object' && obj) {
						return true;
					} else {
						return false;
					}
				} catch (e) {
					return false;
				}
			},
			scan() {
				uni.scanCode({
					success: res => {
						if (this.isJSON(res.result.trim())) {
							const result = JSON.parse(res.result.trim())
							if (result.t === 'ADP') {
								let config = {
									isPreview: 1,
									id: result.id,
									previewType: result.previewType
								}
								uni.navigateTo({
									url: '/pages/apply/dynamicModel/index?config=' + this.base64
										.encode(JSON.stringify(config), "UTF-8"),
									fail: (err) => {
										this.$u.toast("暂无此页面")
									}
								})
							}
							if (result.t === 'DFD') {
								let config = JSON.stringify(result)
								uni.navigateTo({
									url: '/pages/apply/dynamicModel/scanForm?config=' + config,
									fail: (err) => {
										this.$u.toast("暂无此页面")
									}
								})
							}
							if (result.t === 'WFP') {
								uni.navigateTo({
									url: '/pages/workFlow/scanForm/index?config=' + JSON.stringify(
										result),
									fail: (err) => {
										this.$u.toast("暂无")
									}
								})
							}
							if (result.t === 'report') {
								let url =
									`${this.report}/preview.html?id=${result.id}&token=${this.token}&page=1&from=menu&fullName=${result.fullName}`
								uni.navigateTo({
									url: '/pages/apply/externalLink/index?url=' + encodeURIComponent(
										url) + '&fullName= ' + result.fullName,
									fail: (err) => {
										this.$u.toast("暂无")
									}
								})
							}
							if (result.t === 'portal') {
								uni.navigateTo({
									url: '/pages/index/scanProtal?id=' + result.id,
									fail: (err) => {
										this.$u.toast("暂无")
									}
								})
							}
						} else {
							uni.navigateTo({
								url: '/pages/my/scanResult/index?result=' + res.result,
								fail: (err) => {
									this.$u.toast("暂无此页面")
								}
							})
						}
					}
				});
			},

			getPortalList() {
				PortalList().then(res => {
					let list = res.data.list || [];
					list.map(o => {
						this.portalList.push(...o.children)
						this.portalList.forEach(o => {
							if (o.id === this.userInfo.appPortalId) {
								this.portalTitle = o.fullName
							}
						})
					})
				})
			},
			closePopup() {
				// #ifdef APP-PLUS
				this.setWebview()
				uni.$emit('showVideo', true)
				this.showWebView = true
				// #endif
			},
			showSelectBox() {
				if (Array.isArray(this.portalList) && this.portalList.length) this.showSelect = !this.showSelect
				// #ifdef APP-PLUS
				uni.$emit('showVideo', false)
				this.showWebView = false
				this.setWebview()
				// #endif
			},
			getStatusBarHeight() {
				let that = this;
				wx.getSystemInfo({
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
					},
				});
			},
			// selectItem(item, index) {
			// 	SetPortal(item.id).then(res => {
			// 		this.portalTitle = this.portalList[index].fullName
			// 		this.userInfo.appPortalId = item.id
			// 		// #ifndef MP
			// 		this.mescroll.resetUpScroll();
			// 		// #endif
			// 		this.showSelectBox()
			// 		uni.setStorageSync('userInfo', this.userInfo)
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.menhu-v {
		.nav {
			z-index: 99999;

			/deep/.uni-navbar__content {
				z-index: 99999;
			}

			/deep/.uni-navbar__header-container {
				justify-content: center;
			}

			.nav-left {
				max-width: 100%;
				display: flex;
				align-items: center;

				.nav-left-text {
					font-weight: 700;
					font-size: 32rpx;
					flex: 1;
					min-width: 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.right-icons {
					font-weight: 700;
					margin-top: 2px;
					margin-left: 4px;
					transition-duration: 0.3s;
				}

				.select-right-icons {
					transform: rotate(-180deg);
				}
			}
		}

		.select-box {
			overflow-y: scroll;

			.currentItem {
				color: #2979FF;
			}

			.select-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				font-size: 30rpx;
				color: #303133;
				text-align: left;
				position: relative;

				&::after {
					content: " ";
					position: absolute;
					left: 2%;
					top: 0;
					box-sizing: border-box;
					width: 96%;
					height: 1px;
					transform: scale(1, .3);
					border: 0 solid #e4e7ed;
					z-index: 2;
					border-bottom-width: 1px;
				}

				.sysName {
					flex: 1;
					overflow: auto;
					min-width: 0;
				}
			}
		}
	}

	/deep/.portal-nodata {
		position: absolute;
		top: 450rpx;
		width: 100%;
		text-align: center;
		z-index: 100;
		background-color: #f0f2f6;
	}
	
	@import "@/static/iconfont.css";
	.u-page {
		.fsizeA {
			font-size: 18px;
		}
	
		a {
			text-decoration: none
		}
	}
	
	.page-home {}
	
	.sty-statistics-top {
		// background-color: #2DA9FA;
		background-color: #66B3FF;
		// padding: 0px;
			padding: 8px 0px;
		color: #ffffff;
	border-radius: 10px;
	
	padding: 8px 0px;
	color: #ffffff;
	margin-top: 8px;
	margin-left: 10px;
	margin-right: 10px;
		.sty-statistics-top-item {
			padding: 5px 0px;
		}
		.line-right {
			border-right: solid 1px #ffffff;
		}
	}
	
	
	
	.sty-statistics-top-b {
		background-color: #97CBFF;
		margin-left: 10px;
		margin-right: 10px;
		padding: 0px;
		border-radius: 4px;
		//padding: 5px 0px 15px 0px;
		color: #ffffff;
	
		.sty-statistics-top-item {
			padding: 5px 0px;
		}
	
		.line-right {
			border-right: solid 1px #ffffff;
		}
	}
	
	.sty-statistics {
		.sty-item {
			margin-top: 11px;
			padding: 8px 0px;
			color: #ffffff;
			border-radius: 10px;
		}
	
		.sty-item-a {
			background-color: #81CBFC;
		}
	
		.sty-item-b {
			background-color: #1EC695;
		}
	
		.sty-item-c {
			background-color: #FF9800;
		}
	
		.sty-item-d {
			background-color: #2DA9FA;
		}
	}
	
	.sty-sch-box {
		margin-top: 11px;
	}
	
	.sty-nav-list {
		background-color: #f0f2f6;
	
		.sty-navg-item {
			background-color: #ffffff;
			border-bottom: solid 3px #f0f2f6;
			padding: 11px 0px 0px 0px;
	
			.title {
				font-size: 16px;
				line-height: 16px;
				font-weight: bold;
			}
	
			.item-list {
				font-size: 12px;
				display: flex;
				align-content: flex-start;
				flex-wrap: wrap;
				margin-top: 11px;
	
				.item {
					width: 25%;
					margin-bottom: 12px;
				}
			}
		}
	}
	
	.item-icon {
		width: 80px;
		height: 80px;
		line-height: 48px;
		text-align: center;
		border-radius: 5px;
		padding: 5px;
		color: #fff;
		font-size: 30px;
	
		&.more {
			background: #ECECEC;
			color: #666666;
			font-size: 30px;
		}
	}
</style>