zx_flk_app/pages/userManagement/userManagement.vue

<template>
	<view class="">
		<navBar name="共享用户" />
		<view class="user-card">
			<view class="flex-row align-center user-card-heard">
				<img style="width: 48rpx;height: 48rpx;" src="https://qiniu.bms16.com/FieeNq75ybyjIzQO6fmNcdTlRsp5" alt="">
				<text style="margin-left: 16rpx;">共享用户</text>
			</view>
			<view class="user-card-text">家人、朋友长期共用车辆，授权账户可以使用感应解锁，寻车定位，查看设置等功能；</view>
			<!-- <view v-for="(item,index) in userList" :key="index"> -->
			<view @click="srcFn(`/pages/powerSetting/powerSetting?id=${item.target_user_id}`)" v-for="(item,index) of list" :key="index" class="user-list flex-row align-center">
				<image class="user-heard-img" :src="item.headimg" mode="aspectFill"></image>
				<view class="user-name-view">
					<view class="user-name">{{item.nickname}}</view>
					<view class="user-email">{{item.email}}</view>
				</view>
				<img class="user-nav-img" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
			</view>
			<view @click="addUser" class="flex-row user-card-btn align-center">
				<img style="width: 20rpx;height: 20rpx;" src="https://qiniu.bms16.com/FvP_5VTgawzExIHW3kJahXAvE04z" alt="">
				<text style="margin-left: 6rpx;">添加成员</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	var config = require('../../common/config_gyq.js');
	var http = require('../../common/request.js');
	export default {
		data() {
			return {
				list:[],
				car_info:{}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			// this.listFn()
			this.car_info = uni.getStorageSync('car_info') || {};
		},
		onShow() {
			this.listFn()
		},
		methods: {
			srcFn(url){
				uni.navigateTo({
					url
				})
			},
			addUser(){
				if(this.car_info.car_sn){
					uni.navigateTo({
						url:`/pages/addUser/addUser`
					})
					return
				}
				this.$msg('您还未绑定车辆!')
				
			},
			async listFn(){
				
				let {data} = await http.postApi(config.API_FLK_CAR_SHARE_LIST,{
					car_sn:this.car_info.car_sn
				})
				if(data.code == 200){
					this.list = data.data.list || []
				}
			}
		}
	};
</script>
<style>
.user-card{
	background: #FFFFFF;
	border-radius: 40rpx;
	border: 4rpx solid #FFFFFF;
	margin: 24rpx;
	padding: 32rpx 32rpx 48rpx ;
}
.align-center{
	align-items: center;
}
.user-card-heard{
	font-weight: 600;
	font-size: 40rpx;
	color: #060809;
	margin-bottom: 16rpx;
}
.user-card-text{
	font-weight: 400;
	font-size: 28rpx;
	color: #060809;
	margin-bottom: 40rpx;
	opacity: 0.4;
}
.user-card-btn{
	justify-content: center;
	font-weight: 600;
	font-size: 32rpx;
	color: #060809;
}
.user-heard-img{
	width: 112rpx;
	height: 112rpx;
	border-radius: 50%;
}
.user-name-view{
	margin-bottom: 48rpx;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-left: 24rpx;
	padding: 0 18rpx;
}
.user-name{
	font-weight: 600;
	font-size: 32rpx;
	color: #060809;
	padding-bottom:20rpx ;
}
.user-email{
	font-weight: 500;
	font-size: 24rpx;
	color: #060809;
	opacity: 0.6;
}
.user-nav-img{
	width: 28rpx;
	height: 28rpx;
}
</style>