count-pass-app/pages/info/info.vue

<template>
	<view class="center">
		<view
			:style="'position: relative;border:0;background:url('+img.infoBg+');background-size:100% 100%;background-color: #fff;padding:80rpx 56rpx;margin:32rpx;border-style: none;'">
			<view class="top-setting" @click="doSomething(setting)">
				<view class="main">
					<image src="../../static/czzn-img/info/info-setting.png" class="setting-icon" />
				</view>
			</view>
			<view class="versionInfo">
				{{versionCode}}-{{version}} {{(mpVersion?' mp:'+mpVersion:mpVersion)}}
			</view>
			<view class="userInfo" @click.capture="toUserInfo">
				<!-- <u-avatar :src="userInfo.avatar" size="120rpx"></u-avatar> -->
				<view class="logo-title">
					<view class="user-name" v-if="hasLogin">
						<span>{{userInfo.displayName||userInfo.username}}</span>
						<span class="role-tag" v-if="isDriverUser">{{$t('mine.driver')}}</span>
						<span class="role-tag" v-if="isDealerUser">{{$t('mine.dealer')}}</span>
						<span class="role-tag" v-if="isAuditUser">{{$t('mine.auditUser')}}</span>
					</view>
					<text class="user-name" v-else>{{$t('mine.notLogged')}}</text>
					<text class="user-phone">{{userInfo.phone}}</text>
				</view>
			</view>
		</view>
		<template v-if="isDealerUser || isDriverUser">
			<view class="menu-wrap">
				<u-cell :isLink="true" arrow-direction="right" @click="doSomething(allOrder)" :border="false"
					:customStyle="{'background':'#fff','font-weight':'bold','padding':'10rpx 10rpx','borderBottom':'2rpx solid #f5f7fa'}"
					:title="$t('mine.order')"></u-cell>
				<uni-grid class="grid" :column="5" :showBorder="false" :square="true">
					<uni-grid-item class="item" v-for="(item,index) in gridList" @click.native="toOrdering(item)"
						:key="index">
						<image :src="item.icon" class="grid-icon" />
						<text class="grid-text">{{item.title}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="menu-wrap">
				<u-cell :border="false"
					:customStyle="{'background':'#f5f7fa','font-weight':'bold','padding':'10rpx 10rpx'}"
					:title="$t('mine.service')"></u-cell>
				<template v-if="isDealerUser">
					<u-cell-group class="cell-wrap" :border="false">
						<u-cell :isLink="true" arrow-direction="right" :border="false" class="cell-item"
							v-for="(item,index) in dealerMenuList" @click.native="doSomething(item)" :key="index"
							:title="item.title">
							<!-- <image slot="icon" :src="item.icon" class="cell-icon" /> -->
							<u-icon slot="icon" :name="item.icon" color="#2979ff" size="24" class="cell-icon"></u-icon>
						</u-cell>
					</u-cell-group>
				</template>
				<template v-if="isDriverUser">
					<u-cell-group class="cell-wrap" :border="false">
						<u-cell :isLink="true" arrow-direction="right" :border="false" class="cell-item"
							v-for="(item,index) in driverMenuList" @click.native="doSomething(item)" :key="index"
							:title="item.title">
							<u-icon slot="icon" :name="item.icon" color="#2979ff" size="24" class="cell-icon"></u-icon>
						</u-cell>
					</u-cell-group>
				</template>
			</view>
		</template>
		<template v-else>
			<view class="message-wrap" style="padding:32rpx">
				<view class="message-title" @click="toPage('/subpages/approval/messageList')">
					<span class="label">消息通知</span>
					<span class="message">
						3条未读信息
						<u-icon name="arrow-right" color="#222222"></u-icon>
					</span>
				</view>

				<!-- 单消息 -->
				<view class="message-item">
					<view class="title">
						<span style="color:#222">价格申请</span>
						<span>23分钟前</span>
					</view>
					<view class="info">
						<view class="cell-icon">
							<uni-icons custom-prefix="elicon" type="el-icon-s-promotion" size="16"
								color="#4680F9"></uni-icons>
						</view>
						<span class="info-text">善良的咖啡机提交了关于什么什么价格申请,阿姆斯特朗登月</span>
					</view>
				</view>
			</view>
		</template>
		<Bars></Bars>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	import {
		getTenantCacheList
	} from '../../utils/util.js'
	import Bars from '../../components/tabBar/tabBar.vue';
	import imgUtil from '../../utils/imgUtil'
	export default {
		components: {
			Bars
		},
		// #ifdef APP
		onBackPress({
			from
		}) {
			if (from == "backbutton") {
				this.$nextTick(function() {
					uniShare.hide();
				});
				return uniShare.isShow;
			}
		},
		// #endif
		data() {
			return {
				img:imgUtil,
				setting: {
					title: this.$t("mine.settings"),
					to: "/subpages/ucenter/settings/settings",
					icon: "gear",
					show: true,
				},
				allOrder: {
					title: this.$t("mine.all"),
					icon: "file-text",
					to: '/subpages/order/dealerList?index=0'
				},
				gridList: [{
						title: this.$t("mine.reviewed"),
						icon: "../../static/czzn-img/info/info-order.png",
						dealerTo: '/subpages/order/dealerList?orderType=0&orderStatus=0',
						driverTo: '/subpages/order/driverList?orderType=0&orderStatus=0'
					},
					{
						title: this.$t("mine.unpaid"),
						icon: "../../static/czzn-img/info/info-jc.png",
						dealerTo: '/subpages/order/dealerList?orderType=0&orderStatus=1',
						driverTo: '/subpages/order/driverList?orderType=0&orderStatus=1'
					},
					{
						title: this.$t("mine.weigh"),
						icon: "../../static/czzn-img/info/info-gb.png",
						dealerTo: '/subpages/order/dealerList?orderType=0&orderStatus=3',
						driverTo: '/subpages/order/driverList?orderType=0&orderStatus=3'
					},
					{
						title: this.$t("mine.ongoing"),
						icon: "../../static/czzn-img/info/info-cc.png",
						dealerTo: '/subpages/order/dealerList?orderType=0&orderStatus=2',
						driverTo: '/subpages/order/driverList?orderType=0&orderStatus=2'
					},
					{
						title: this.$t("mine.invalid"),
						icon: "../../static/czzn-img/info/info-zf.png",
						dealerTo: '/subpages/order/dealerList?orderType=0&orderStatus=4',
						driverTo: '/subpages/order/driverList?orderType=0&orderStatus=4'
					},

				],
				driverMenuList: [{
						title: this.$t("mine.vehicle"),
						icon: "../../static/czzn-img/info/info-cl.png",
						to: '/subpages/driver/driverList',
						count: 0,
					},
					{
						title: this.$t("mine.feedback"),
						icon: imgUtil.feedbackIcon,
						to: '/substaticpages/info/feedback',
						count: 0,
					},
					// {
					// 	title: this.$t("mine.mp"),
					// 	icon: "../../static/czzn-img/info/info-msg.png",
					// 	to: '/subpages/mp/index',
					// 	count: 0,
					// },
				],
				dealerMenuList: [{
						title: this.$t("mine.enterprise"),
						icon: imgUtil.enterpriseIcon,
						to: '/subpages/tenant/list',
						count: 0,
					},
					{
						title: this.$t("mine.driver"),
						icon: imgUtil.driverIcon,
						to: '/subpages/driver/dealerList',
						count: 0,
					},
					{
						title: this.$t("mine.feedback"),
						icon: imgUtil.feedbackIcon,
						to: '/substaticpages/info/feedback',
						count: 0,
					},
					// {
					// 	title: this.$t("mine.mp"),
					// 	icon: "../../static/czzn-img/info/info-msg.png",
					// 	to: '/subpages/mp/index',
					// 	count: 0,
					// },
				],

				role: [],
				userType: "0",
				tenantCount: 0,
				version: "",
				versionCode: "",
				mpVersion: "",
				isAuditUser: false,
				isDealerUser: false,
				isDriverUser: false,
				isAcceptUser: false,
				isDeliverUser: false,
			};
		},
		onLoad() {
			this.isAuditUser = uni.getStorageSync('isAuditUser')
			this.isDealerUser = uni.getStorageSync('isDealerUser')
			this.isDriverUser = uni.getStorageSync('isDriverUser')
			this.isAcceptUser = uni.getStorageSync('isAcceptUser')
			this.isDeliverUser = uni.getStorageSync('isDeliverUser')
			// const routers = getCurrentPages();
			// console.log(routers);
			if(this.isDealerUser){
				this.allOrder.to = '/subpages/order/dealerList?index=0'
			}else if(this.isDriverUser){
				this.allOrder.to = '/subpages/order/driverList'
			}
			console.log("开始加载");
			uni.hideTabBar()
			this.userType = uni.getStorageSync('userType')
			this.bindUserInfo()
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log("系统信息、", res)
					console.log("系统版本号、", res.appVersionCode, res.appVersion)
					that.version = res.appVersion;
					that.versionCode = res.appVersionCode;
					console.log("系统版本号、", that.version, that.versionCode)
				}
			});
			// #ifdef MP-WEIXIN
			const accountInfo = wx.getAccountInfoSync();
			this.mpVersion = accountInfo.miniProgram.version // 小程序 版本号
			// #endif
		},
		computed: {
			...mapGetters({
				userInfo: "user/info",
				hasLogin: "user/hasLogin",
			}),
			// #ifdef APP-PLUS
			appVersion() {
				return getApp().appVersion;
			},
			// #endif
			appConfig() {
				return getApp().globalData.config;
			},
		},
		methods: {
			bindUserInfo() {
				var tenantList = getTenantCacheList();
				console.log("当前租户信息、", tenantList);
			},
			//宫格点击事件
			doSomething(item) {
				if (item.to) {
					uni.navigateTo({
						url: item.to,
					});
				}
				if (item.event) {
					this[item.event]
				}
			},
			toOrdering(item) {

				if (this.isDealerUser == true) {
					uni.navigateTo({
						url: item.dealerTo,
					});
				} else {
					uni.navigateTo({
						url: item.driverTo,
					});
				}
			},
			...mapMutations({
				setUserInfo: "user/login",
			}),
			toUserInfo() {
				if(this.hasLogin){
					uni.navigateTo({
						url: "/substaticpages/info/userInfo",
					});
				}else{
					uni.reLaunch({
						url: "/pages/login/login"
					})
				}					
			},
			toPage(url) {
				uni.navigateTo({
					url: url,
				});
			},
			tapGrid(item) {
				// uni.showToast({
				// 	// title: '你点击了，第' + (index + 1) + '个',
				// 	title: this.$t('mine.clicked') + " " + (index + 1) ,
				// 	icon: 'none'
				// });
			},
		},
	};
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	page {
		background-color: #f5f7fa;
	}

	/* #endif */

	.center {
		flex: 1;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f7fa;

		.sevice {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			padding: 24rpx 0;
			overflow: hidden;
			background-color: #fff;

			.sevice-item {
				display: flex;
				width: 25%;
				text-align: center;

				.count {
					line-height: 48rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.title {
					line-height: 48rpx;
					font-size: 24rpx;
					color: #333;
				}
			}
		}

		.menu-wrap {
			// padding: 32rpx 0;
			// border-radius: 20rpx;
			overflow: hidden;
			background-color: #fff;

			.title {
				padding: 44rpx 44rpx 12rpx;
				display: flex;
				font-size: 32rpx;
				flex-direction: row;
				justify-content: space-between;

				.all {
					font-size: 28rpx;
					color: #999;
					display: flex;
					flex-direction: row;
					align-items: center;
				}
			}

			.version {
				padding: 8rpx 8rpx 8rpx;
				display: flex;
				font-size: 32rpx;
				flex-direction: row;
				justify-content: space-between;
			}

			.cell-icon {
				width: 65rpx;
				height: 65rpx;
			}

			.cell-wrap {
				padding-bottom: 40rpx;

				.cell-item {
					border-bottom: 1rpx solid #f5f7fa;
				}
			}

			.grid-icon {
				width: 60rpx;
				height: 60rpx;
			}

			.grid-text {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
			}
		}

		.top-set-user {
			background-size: 750rpx auto;
			background-color: #fff;
			padding: 40rpx 40rpx 56rpx;
		}

		.top-setting {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 2001;

			.main {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				height: 100rpx;

				.setting-version {
					text-align: left;
					width: 50%;
					font-size: 24rpx;
					color: #999;
				}

				.setting-icon {
					width: 38rpx;
					height: 35rpx;
				}
			}

		}

		.message-wrap {
			margin: 40rpx 32rpx;
			background-color: #fff;
			padding: 40rpx;
			border-radius: 10rpx;

			.message-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				line-height: 32rpx;

				.label {
					color: #222;
					font-size: 28rpx;
					font-weight: bold;
				}

				.message {
					display: flex;
					flex-direction: row;
					color: #999;
					font-size: 24rpx;
				}
			}

			.message-item {
				margin-top: 32rpx;
				background-color: #f9f9f9;
				border-radius: 10rpx;
				padding: 28rpx 32rpx;

				.title {
					justify-content: space-between;
					display: flex;
					flex-direction: row;
					// width: 176rpx;
					color: #999;
					font-size: 24rpx;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 32rpx;
				}

				.info {
					flex-direction: row;

					.cell-icon {
						width: 50rpx;
						height: 50rpx;
						background-color: #E1EBFF;
						border-radius: 10rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						margin-right: 32rpx;
					}

					.info-text {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 22rpx;
						color: #666;
					}
				}
			}
		}
	}

	.versionInfo {
		position: absolute;
		bottom: 0px;
		right: 10rpx;
		size: 10pt;
		color: #fff;
		font-size: 13px;
		height: 28px;
		line-height: 28px;
	}

	.userInfo {
		// position: relative;
		flex-direction: row;
		align-items: center;
		// margin-bottom: 24rpx;

	}

	.logo-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
	}

	.logo-title {
		flex: 1;
		margin-left: 32rpx;
		// align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}

	.user-name {
		height: 48rpx;
		line-height: 48rpx;
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-weight: bold;
		color: #fff;

		.role-tag {
			font-size: 20rpx;
			padding: 0 18rpx;
			border-radius: 8rpx;
			margin-left: 24rpx;
			background-color: #6695F9;
			box-shadow: 0px 0px 24px 0px rgba(46, 56, 181, 0.44);
			color: #fff;
			font-weight: normal;
		}
	}

	.user-phone {
		color: #fff;
		font-size: 26rpx;
		height: 56rpx;
		line-height: 56rpx;
	}

	.grid {
		background-color: #fff;
		// padding: 32rpx;
	}

	.uni-grid .text {
		font-size: 16px;
		height: 25px;
		line-height: 25px;
		color: #817f82;
	}

	.uni-grid .item ::v-deep .uni-grid-item__box {
		justify-content: center;
		align-items: center;
	}

	/deep/ .u-grid-item {
		padding: 20rpx 0;
	}
</style>