mobile_h5/card/pages/app/info/personalInfo.vue

<!-- 
个人信息收集清单
http://localhost:5173/card/#/pages/app/info/personalInfo
https://oss-mbh5.colormaprun.com/card/#/pages/app/info/personalInfo
 -->
<template>
	<view class="main">
		<view class="title">彩图奔跑个人信息收集清单</view>
		<uni-table ref="table" class="table" border emptyText="暂无更多数据">
			<uni-tr class="tbHeader">
				<uni-th class="th" width="80" align="center">信息名称</uni-th>
				<uni-th class="th" width="80" align="center">使用目的</uni-th>
				<uni-th class="th" width="80" align="center">使用场景</uni-th>
				<uni-th class="th" width="80" align="center">收集情况</uni-th>
				<uni-th class="th" width="80" align="center">信息内容</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td class="tbText" align="center">
					<view>{{item.name}}</view>
				</uni-td>
				<uni-td class="tbText" align="center">
					<view>{{item.purpose}}</view>
				</uni-td>
				<uni-td class="tbText" align="center">
					<view>{{item.scene}}</view>
				</uni-td>
				<uni-td class="tbText" align="center">
					<view>{{item.status}}</view>
				</uni-td>
				<uni-td class="tbText" align="center">
					<image v-if="item.contentType == 'img'" class="headimg" mode="aspectFit" :src="item.content"></image>
					<view v-else>{{item.content}}</view>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	import tools from '../../../common/tools';
	import {
		token,
		apiUserBasicInformationQuery,
		checkResCode
	} from '../../../common/api';

	export default {
		data() {
			return {
				queryObj: {},
				queryString: "",
				token: "",
				
				userInfo: {},
				// userInfo: {
				// 	"oId": 8,
				// 	"phone": "15168870729",
				// 	"nickName": "虚室生白",
				// 	"headUrl": "https://orienteering.beswell.com/orienteering_head_1713776302_8_%E8%99%9A%E5%AE%A4%E7%94%9F%E7%99%BD.jpeg",
				// 	"height": 1890,
				// 	"weight": 112500,
				// 	"sex": 1,
				// 	"staticHr": 60,
				// 	"age": 39
				// },
				tableData: [{
						name: "用户ID",
						purpose: "展示用户ID",
						scene: "用户注册账号、用户报名参赛、赛事成绩展示",
						status: "未收集",
						content: ""
					},
					{
						name: "昵称",
						purpose: "完善网络身份标识、展示昵称",
						scene: "注册账号、报名参赛、赛事成绩展示",
						status: "未收集",
						content: ""
					},
					{
						name: "头像",
						purpose: "完善网络身份标识、展示头像",
						scene: "报名参赛、赛事成绩展示",
						status: "未收集",
						content: "",
						contentType: "img"
					},
					{
						name: "手机号",
						purpose: "账号登录、赛事安全服务",
						scene: "身份验证、报名参赛凭据、用户赛事安全服务",
						status: "未收集",
						content: ""
					},
					{
						name: "身高",
						purpose: "计算卡路里",
						scene: "比赛过程中计算用户的卡路里消耗情况",
						status: "未收集",
						content: ""
					},
					{
						name: "体重",
						purpose: "计算卡路里",
						scene: "比赛过程中计算用户的卡路里消耗情况",
						status: "未收集",
						content: ""
					},
					{
						name: "年龄",
						purpose: "计算卡路里",
						scene: "比赛过程中计算用户的卡路里消耗情况",
						status: "未收集",
						content: ""
					},
					{
						name: "静息心率",
						purpose: "计算卡路里",
						scene: "比赛过程中计算用户的卡路里消耗情况",
						status: "未收集",
						content: ""
					},
					{
						name: "位置信息",
						purpose: "计算配速里程",
						scene: "比赛过程中计算用户的配速、里程信息",
						status: "未收集",
						content: ""
					},
					/* {
						name: "位置信息",
						purpose: "XXX",
						scene: "XXX",
						status: "未收集",
						content: ""
					}, */
				]
			}
		},
		onLoad(query) { // 类型非必填，可自动推导
			// console.log(query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(queryString);
			this.token = query["token"] ?? token;

			this.userBasicInformationQuery();
			// this.dealUserInfo();
		},
		methods: {
			// 用户基本信息查询
			userBasicInformationQuery() {
				uni.request({
					url: apiUserBasicInformationQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"Authorization": "Bearer " + this.token,
						// "token": this.token
					},
					method: "GET",
					data: {},
					success: (res) => {
						// console.log("userBasicInformationQuery", res);
						if (checkResCode(res)) {
							const userinfo = res.data.data.list;
							this.userInfo = userinfo;
							this.dealUserInfo();
						}
					},
					fail: (err) => {
						console.log("userBasicInformationQuery err", err)
					},
				});
			},
			dealUserInfo() {
				// console.log("dealUserInfo length", Object.keys(this.userInfo).length);
				if (Object.keys(this.userInfo).length > 0) {
					if (this.userInfo.oId > 0) {
						this.tableData[0].status = "已收集";
						this.tableData[0].content = this.userInfo.oId;
					}
					if (this.userInfo.nickName.length > 0) {
						this.tableData[1].status = "已收集";
						this.tableData[1].content = this.userInfo.nickName;
					}
					if (this.userInfo.headUrl.length > 0) {
						this.tableData[2].status = "已收集";
						this.tableData[2].content = this.userInfo.headUrl;
					}
					if (this.userInfo.phone.length > 0) {
						this.tableData[3].status = "已收集";
						this.tableData[3].content = this.userInfo.phone;
					}
					if (this.userInfo.height > 0) {
						this.tableData[4].status = "已收集";
						this.tableData[4].content = this.userInfo.height;
					}
					if (this.userInfo.weight > 0) {
						this.tableData[5].status = "已收集";
						this.tableData[5].content = this.userInfo.weight;
					}
					if (this.userInfo.age > 0) {
						this.tableData[6].status = "已收集";
						this.tableData[6].content = this.userInfo.age;
					}
					if (this.userInfo.staticHr > 0) {
						this.tableData[7].status = "已收集";
						this.tableData[7].content = this.userInfo.staticHr;
					}
					
					// this.tableData[8].content = this.userInfo.sex;
				}
			}
		}
	}
</script>

<style scoped>
	.main {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.title {
		padding-top: 40px;
		padding-bottom: 20px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}

	.table {}

	.tbHeader {
		background-color: #fcfcfc;
	}

	.th {
		color: #000;
		font-size: 14px;
	}

	.tbText {
		font-size: 14px;
	}
	
	.headimg {
		width: 60px;
		height: 60px;
	}
</style>