OpenDoorManageMini/pages/globalPages/components/account.vue

<template>
	<view class="container">
		<!-- 个人信息 -->
		<view class="user">
			<view class="nav-bar">
				<u-navbar bgColor="rgba(0,0,0,0)" :autoBack="false" :placeholder="true">
					<view slot="left" style="color:#fff;font-size: 36rpx;">
						我的
					</view>
				</u-navbar>
			</view>
			<view class="user-content flex align-center flex-start">
				<view class="head-img" @click="userDetail">
					<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/head-exam.png"
						mode="widthFix">
					</image>
				</view>
				<view class="user-name" @click="searchLog(2)">
					{{info.name}}
				</view>

				<view class="share" @share="share">
					<view class="share-image">
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/fx.png"
							mode="widthFix">
						</image>
					</view>
					<button open-type="share"></button>
				</view>

				<view class="login-out" @click="setting">
					设置
				</view>
			</view>
		</view>

		<!-- 用户信息 -->
		<view class="menu menu-userinfo">
			<!-- 			<view class="menu-title">
				用户信息
			</view> -->
			<view class="u-content">
				<view class="u-item flex align-center flex-direction" @click="searchLog(1)">
					<view class="u-name">
						{{info.mercName}}
					</view>
					<view class="u-val">
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/sh.png"
							mode="widthFix"></image>
						商户
					</view>
				</view>
				<view class="u-item">
					<view class="u-name">
						{{info.roleNames}}
					</view>
					<view class="u-val">
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/js.png"
							mode="widthFix"></image>
						角色
					</view>
				</view>
				<view class="u-item">
					<view class="u-name">
						{{info.tel}}
					</view>
					<view class="u-val">
						<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/dh.png"
							mode="widthFix"></image>
						电话
					</view>
				</view>
			</view>

			<!-- <xbutton class="edit" size="mini" @click="btnClick('编辑')">修改</xbutton> -->
		</view>

		<!-- <view class="menu">
			<view class="menu-title">
				系统参数设置
			</view>
			<view class="s-content">
				<view class="s-item">
					自动处理未上架订单：<text>是</text>
				</view>
				<view class="s-item">
					开启预定模式：<text>是</text>
				</view>
				<view class="s-item">
					是否强制盘点：<text>是</text>
				</view>
			</view>

			<xbutton class="edit" size="mini" @click="btnClick('编辑')">修改</xbutton>
		</view> -->

		<!--团队角色管理 -->
		<view class="menu convenient" v-if="roleManageMenu.length>0">
			<!--<view class="menu-title">
				团队角色管理
			</view> -->
			<view v-if="roleManageMenu.length>0" class="flex flex-wrap justify-start">
				<view class="menu-item" v-for="(item,index) in roleManageMenu" :key="item.id" @click="menuClick(item)">
					<view class="image">
						<u-image width="74rpx" height="74rpx" :src="iconList[item.name]" mode="widthFix"
							:lazy-load="true"></u-image>
					</view>
					<view>{{item.name}}</view>
				</view>
			</view>
			<view class="empty" v-else>
				<u-empty mode="permission"></u-empty>
			</view>
		</view>

		<!--应用管理 -->
		<view class="menu convenient" v-if="costManageMenu.length>0">
			<!-- 	<view class="menu-title">
				费用/提现管理
			</view> -->
			<view v-if="costManageMenu.length>0" class="flex flex-wrap justify-start">
				<view class="menu-item" v-for="(item,index) in costManageMenu" :key="item.id" @click="menuClick(item)">
					<view class="image">
						<u-image width="74rpx" height="74rpx" :src="iconList[item.name]" mode="widthFix"
							:lazy-load="true"></u-image>
					</view>
					<view>{{item.name}}</view>
				</view>
			</view>
			<view class="empty" v-else>
				<u-empty mode="permission"></u-empty>
			</view>
		</view>

		<!-- <view class="chang-password" @click="changePwd">
			修改密码
		</view> -->

		<xpopup :show="qrcodeShow" mode="center" @close="qrcodeClose" :showBtn="false">
			<view class="qrcode-content flex flex-direction align-center">
				<view class="qrcode-img">
					<u-image width="400rpx" height="400rpx"
						src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/miniQrcode.jpg"
						mode="widthFix" :lazy-load="true">
					</u-image>
				</view>
				<view class="save-qrcode" slot="botton">
					<xbutton @click="save">保存二维码</xbutton>
				</view>
			</view>
		</xpopup>

		<xpopup :show="pwdShow" @close="pwdClose" @confirm="pwdSubmit" :showBtn="true" title="修改密码">
			<view class="pwd-popup-content flex align-center">
				<view>新密码：</view>
				<view>
					<u--input placeholder="请输入新密码" type="password" border="surround" v-model="newpassword"></u--input>
				</view>
			</view>
		</xpopup>
	</view>
</template>

<script>
	import {
		removeToken
	} from '@/utils/auth'
	// import Xypopup from '@/components/xy-popup'
	import {
		userInfo,
		updateUserInfo
	} from "@/api/system/user.js"

	export default {
		// components: {
		// 	Xypopup
		// },
		data() {
			return {
				tabArr: [{
						name: '今日',
						id: 0
					},
					{
						name: '本月',
						id: 1
					}
				],
				current: 0,

				//菜单对应图片路径
				iconList: {
					'退款审核': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/refund.png',
					'风险订单': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/risk.png',
					'客诉处理': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/cc.png',
					'补货管理': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/replenishment.png',
					'增加设备': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/menu-icon (9).png',
					'增加点位': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/menu-icon (8).png',
					'团队管理': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/tdgl.png',
					'加盟商': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/jms.png',
					'流量卡管理': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/menu-icon (5).png',
					'会员管理': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/hygl.png',
					'运营仓': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/menu-icon (7).png',
					'黑名单': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/hmd.png',
					'营销管理': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/menu-icon (6).png',
					'费用账单': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/home/menu-icon (10).png',
					'小程序二维码': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/xcxewm.png',
					'通知': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/tz.png',
					'客服': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/kf.png',
					'入驻协议': 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/rzxy.png',
				},

				info: {
					mercName: "",
					name: "sunny",
					roleNames: "",
					tel: ""
				},
				timer: null,
				logNum: 0,

				qrcodeShow: false,

				newpassword: '',
				pwdShow: false,
			}
		},

		computed: {
			//团队角色管理
			roleManageMenu() {
				return this.getMenu('我的', '团队角色管理')
			},
			//应用管理
			costManageMenu() {
				return this.getMenu('我的', '应用管理')
			},

			//用户名
			name() {
				return this.$store.state.user.name
			},
		},

		onShareAppMessage() {
			return {
				title: '喵星人商家助手',
				path: '/pages/login',
				imageUrl: 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/merc_qrcode.jpg',
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {

					}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
			}
		},

		created() {
			this.getUserInfo()
		},

		methods: {
			searchLog(type) {
				this.logNum++
				if (this.timer) {
					if (this.logNum > 6) {
						this.logNum = 0
						clearTimeout(this.timer)
						this.timer = null
						let url=type==1?'/pages/globalPages/logs':'/pages/globalPages/test'
						this.$tab.navigateTo(url)
					}
				} else {
					this.timer = setTimeout(() => {
						this.logNum = 0
						clearTimeout(this.timer)
						this.timer = null
					}, 2000)
				}

			},

			getUserInfo() {
				userInfo().then(res => {
					if (res.code == 200) {
						this.info = res.data
					} else {
						this.info = null
					}
				})
			},

			getMenu(menu1, menu2) {
				let menu = []
				if (this.$store.state.permission.permissions_menu && this.$store.state.permission.permissions_menu !=
					'[]') {
					let allMenu = JSON.parse(this.$store.state.permission.permissions_menu);
					if (allMenu.find(i => i.name == menu1) && allMenu.find(i => i.name == menu1).children) {
						let homeMenu = allMenu.find(i => i.name == menu1).children;
						if (homeMenu.find(i => i.name == menu2)) {
							if (homeMenu.find(i => i.name == menu2).children) {
								menu = homeMenu.find(i => i.name == menu2).children
							}
						}
					}
				}
				return menu
			},

			btnClick(e) {

			},

			menuClick(e) {
				if (e.name == '团队管理') {
					this.$tab.navigateTo('/pages/system/employee')
					return
				}
				if (e.name == '小程序二维码') {
					this.qrcodeShow = true;
					return
				}
				if (e.name == '通知') {
					this.$tab.navigateTo('/pages/globalPages/notice')
					return
				}
				if (e.name == '客服') {
					this.phone('88888888')
					return
				}
				if (e.name == '入驻协议') {
					this.$tab.navigateTo('/pages/globalPages/agreement')
					return
				}

				this.$modal.msg('功能开发中，尽请期待~')
			},

			loginOut() {
				this.$store.dispatch('LogOut').then(res => {
					this.$tab.reLaunch('/pages/login')
				})
			},

			qrcodeClose() {
				this.qrcodeShow = false;
			},

			save() {
				let imgUrl = 'https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/miniQrcode.jpg'
				wx.getSetting({
					success: function(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) { //判断是否开启相册权限
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: function(res) {
									uni.downloadFile({
										url: imgUrl,
										success: function(res) {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function(res) {
													wx.showToast({
														title: '保存成功',
													})
												}
											})
										}
									})
								},
								fail(res) {
									uni.showModal({
										title: '提示',
										content: '您未开启保存图片到相册的权限，请点击确定去开启权限！',
										success(res) {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							})
						} else {
							uni.downloadFile({
								url: imgUrl,
								success: function(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function(res) {
											wx.showToast({
												title: '保存成功',
											})
										}
									})
								}
							})

						}
					},
					fail(res) {}
				})
			},

			//拨打电话
			phone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			
			setting(){
				this.$tab.navigateTo('/pages/globalPages/setting')
			},

			changePwd() {
				this.pwdShow = true
			},

			pwdSubmit() {
				if (this.newpassword) {
					updateUserInfo({
						password: this.newpassword
					}).then(res => {
						this.$modal.showToast('修改成功~')
					})
					this.pwdClose()
				} else {
					this.$modal.msg('请输入新密码！')
				}
			},

			pwdClose() {
				this.pwdShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 100rpx;

		// 个人信息
		.user {
			background: #2C6FF3 url('https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/user-bg.png') no-repeat left top;
			background-size: 100%;
			padding-bottom: 145rpx;
			position: relative;
			width: 100%;

			.user-content {
				margin-top: 34rpx;
				width: 100%;

				.head-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
					margin-left: 26rpx;
				}

				.user-name {
					font-size: 28rpx;
					color: #fff;
					margin-left: 33rpx;
				}

				.share {
					width: 30rpx;
					height: 30rpx;
					position: relative;
					margin-left: 20rpx;

					.share-image {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						left: 0;
						top: 0;

						>image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					button {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						left: 0;
						top: 0;
						opacity: 0;
					}
				}

				.login-out {
					width: 140rpx;
					line-height: 52rpx;
					height: 52rpx;
					text-align: center;
					font-size: 24rpx;
					color: #2C6FF3;
					background-color: #fff;
					position: absolute;
					right: 0;
					top: 185rpx;
					z-index: 99;
					border-top-left-radius: 52rpx;
					border-bottom-left-radius: 52rpx;
				}
			}
		}


		// 常用菜单
		.menu {
			width: 724rpx;
			margin-left: 14rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 0px rgba(174, 201, 255, 0.2);
			border-radius: 14rpx;
			margin-top: 24rpx;
			position: relative;
			padding: 20rpx 36rpx 42rpx;

			&.menu-userinfo {
				padding: 36rpx;
				margin-top: -102rpx;
			}

			.menu-title {
				font-size: 30rpx;
				font-weight: 800;
				color: #000000;
				position: absolute;
				left: 28rpx;
				top: 28rpx;
			}

			.u-content {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-around;
				text-align: center;

				.u-item {
					line-height: 50rpx;

					.u-name {
						font-weight: bold;
						font-size: 30rpx;
					}

					.u-val {
						font-size: 28rpx;
						color: #666;
						position: relative;
						padding-left: 30rpx;
						display: inline-block;

						>image {
							width: 21rpx;
							height: 21rpx;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

			.cu-btn {
				padding: 0 12rpx;
				font-size: 22rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: #2C6FF3;
				color: #fff;

			}

			.edit {
				position: absolute;
				right: 28rpx;
				top: 28rpx;
			}

			.s-content {
				.s-item {
					line-height: 50rpx;

					>text {
						color: red;
					}
				}
			}

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;

				>.image {
					width: 74rpx;
					height: 74rpx;
				}

				>view {
					color: #333333;
					font-size: 26rpx;
					line-height: 26rpx;
					margin-top: 16rpx;
				}
			}
		}

		.qrcode-content {
			padding: 24rpx;

			.qrcode-img {
				width: 400rpx;
				height: 400rpx;
			}

			.save-qrcode {
				margin-top: 24rpx;
			}
		}

		.chang-password {
			text-align: center;
			line-height: 60rpx;
			color: #2C6FF3;
			text-decoration: underline;
		}

		.pwd-popup-content {
			padding: 24rpx;

			>view:nth-child(1) {
				width: 160rpx;
			}

			>view:nth-child(2) {
				width: 100%;
			}
		}
	}
</style>