tqApp-webView/pages/user/user.vue

<template>
	<view class="page-container">
		
		<view class="head">
			
			<view class="name-container">
				<view class="name">
					<view class="nickName">{{$store.state.user.nickName}}</view>
					<view class="account">账号：{{$store.state.user.name}}</view>
				</view>
				
				<image :src="$getImages(`${$store.state.user.avatar?$store.state.user.avatar: '/assetsMobile/images/setting/new240902/touxiang.png'}`)" class="avatar" />
			</view>
			
		</view>
		<view class="buy" v-if="hasHostPlat(['dingH5'])">
			<image class="buy-bg" :src="$getImages('/assetsMobile/images/setting/new240902/buy-back.png')"></image>
			<image 
				class="buy-btn" 
				:src="$getImages('/assetsMobile/images/setting/new240902/buy.png')" 
				@click="handleGetH5SkuUrl"
			></image>
			
		</view>
		<view class="body">
			
				<view class="munes">
					<template v-for="(item,index) in munesList">
						<view class="munes-item" 
							@click="handleFun(item)"
							v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)"
						>
							<image class="icon" :src="item.icon"></image>
							<view class="label">{{item.label}}</view>
							<view class="arror">
								<u-icon name="arrow-right" color="#999999"></u-icon>
							</view>
						</view>
					</template>
				</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import * as dd from 'dingtalk-jsapi'; // 此方式为整体加载，也可按需进行加载
	import Sidebar from '@/components/sidebar'
	import Vue from 'vue'
	import {getH5SkuUrl} from '@/api/common/system.js'
	import { openAuth } from 'dingtalk-design-libs/biz/openAuth';
	
	export default {
		components: {
			Sidebar,
		},
		data() {
			let that = this;
			return {
				munesList: [ // 监控中心
				    {
				        permission: '*', // 权限
				        label: '个人资料', // 标题
				        icon: this.$getImages('/assetsMobile/images/setting/new240902/profile_icon.png'), // 图片
				        url: '/pagesBase/userData/userData', // 路径
				    },
					{
					    permission: '*', // 权限
					    label: '密码设置', // 标题
					    icon: this.$getImages('/assetsMobile/images/setting/new240902/pwd_icon.png'), // 图片
					    url: '/pagesBase/changePassword/changePassword', // 路径
						isShow: !Vue.prototype.hasHostPlat(["dingH5"])
					},
					{
					    permission: 'mobile:setting:ziliao', // 权限
					    label: '培训资料', // 标题
					    icon: this.$getImages('/assetsMobile/images/setting/new240902/tranin.png'), // 图片
					    url: '/peixun/ziliao/ziliao', // 路径
					},
				
					{
					    permission: '*', // 权限
					    label: '退出登录', // 标题
					    icon: this.$getImages('/assetsMobile/images/setting/new240902/logout_icon.png'), // 图片
					    event: 'handleLogout', // 事件
						isShow: !Vue.prototype.hasHostPlat(["dingH5"])
					},	
				]
			};
		},
		mounted() {
		},
		
		methods: {
			
			handleFun(item) {
						
				if(item.event) {
					this[item.event]()
				} else if (item.url) {
					uni.navigateTo({
						url: item.url,
					})
				}else {
					uni.showToast({
						title: '功能正在开发',
						icon: 'none'
					})
				}
			},
			handleLogout() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定退出登录？',
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.$store.dispatch('LogOut').then(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							})
						}
					}
				})
				
			},
			//钉钉内购
			handleGetH5SkuUrl() {
				
				openAuth({
				  clientId: 'suitemikul1sbf3gohcnt', // 应用ID(唯一标识)
				  corpId: uni.getStorageSync('corpId'), // 当前组织的corpId
				  rpcScope:'qyapi_appstore_internal', 
				  // fieldScope:'Contact.User.mobile',
				  type: 1  // 0 标识授权个人信息；1 标识授权组织信息
				}).then((res)=>{
						const {status,result} = res
						// console.log(res,'resresres')
						if(status == 'ok') {
							getH5SkuUrl({
								corpId: uni.getStorageSync('corpId')
							}).then((res) => {
								dd.openLink({
									  url:res.data,//要打开链接的地址
									  onSuccess : function(result) {
										  /**/
									  },
									  onFail : function(err) {}
								})
							})
						}
						
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-container {
	    font-family: PingFangSC, PingFang SC;
		background-color: #F6F6F6;
		
		.head {
			margin-bottom: 16rpx;
			height: 222rpx;
			background: #FFFFFF;
			
			display: flex;
			align-items: center;
			padding: 0 48rpx;
			.name-container {
				flex: 1;
				display: flex;
				justify-content: flex-start;
				
				.name {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 10rpx 0;
					.nickName {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 44rpx;
						color: #232323;
						text-align: left;
						font-style: normal;
					}
					.account {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #888888;
						text-align: left;
						font-style: normal;
					}
				}
				
				.avatar {
					flex-basis: 140rpx;
					flex-shrink: 0;
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					background: #d2d2d2;
				}
			}
			
			
		}
		.buy {
			margin-bottom: 16rpx;
			background: #FFFFFF;
			position: relative;
			height: 116rpx;	
			
			.buy-bg {
				width: 100%;
				height: 116rpx;	
				
			}
			
			.buy-btn {
				position: absolute;
				right: 50rpx;
				top: calc(50% - 25rpx);
				
				width: 152rpx;
				height: 50rpx;
			}
			
		}
		.body {
			margin-bottom: 16rpx;
			background: #FFFFFF;
			
			.munes {
				
				display: flex;
				flex-direction: column;
				.munes-item{
					height: 96rpx;
					
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 0 30rpx;
					gap: 0 22rpx;
					.icon {
						flex-basis: 48rpx;
						flex-shrink: 0;
						width: 48rpx;
						height: 48rpx;
					}
					.label {
						flex: 1;
						
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #000000;
						text-align: left;
						font-style: normal;
						
					}
					.arrow {
						flex-basis: 40rpx;
						flex-shrink: 0;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	   
	   
}
</style>