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

<!-- 
第三方信息共享清单
http://localhost:5173/card/#/pages/app/info/thirdPartyInfo
https://oss-mbh5.colormaprun.com/card/#/pages/app/info/thirdPartyInfo
 -->
<template>
	<view class="main">
		<view class="title">彩图奔跑第三方信息共享清单</view>
		<view v-if="tableData.length > 0">
			<uni-table ref="table" class="table" border>
				<uni-tr class="tbHeader">
					<uni-th class="th" width="50" align="center">SDK服务</uni-th>
					<uni-th class="th" width="50" align="center">公司名称</uni-th>
					<uni-th class="th" width="50" align="center">使用场景</uni-th>
					<uni-th class="th" width="50" align="center">客户端</uni-th>
					<uni-th class="th" width="50" align="center">频次</uni-th>
					<uni-th class="th" width="50" align="center">处理方式</uni-th>
					<uni-th class="th" width="50" align="center">获取的权限/信息</uni-th>
					<uni-th class="th" width="20" align="center">隐私权政策</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td class="tbText" align="center">
						<view>{{item.sdk}}</view>
					</uni-td>
					<uni-td class="tbText" align="center">
						<view>{{item.comp}}</view>
					</uni-td>
					<uni-td class="tbText" align="center">
						<view>{{item.scene}}</view>
					</uni-td>
					<uni-td class="tbText" align="center">
						<view>{{item.client}}</view>
					</uni-td>
					<uni-td class="tbText" align="center">
						<view>{{item.frequency}}</view>
					</uni-td>
					<uni-td class="tbText" align="center">
						<view>{{item.deal}}</view>
					</uni-td>
					<uni-td class="tbText" align="center">
						<view>{{item.info}}</view>
					</uni-td>
					<uni-td class="tbText" align="center">
						<uni-link :href="item.privacy" fontSize="12" text="点击查看第三方隐私政策"></uni-link>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view v-else class="noinfo">
			本APP暂未对第三方进行信息共享
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					userid: 0,
				},
				tableData: [{
						sdk: "七牛云SDK",
						comp: "上海七牛信息技术有限公司",
						scene: "上传用户头像",
						client: "安卓端 / iOS端",
						frequency: "用户主动触发，在用户每次使用“修改头像”功能时",
						deal: "通过去标识化、加密传输和处理的安全处理方式",
						info: "个人信息：用户头像",
						privacy: "https://www.qiniu.com/agreements/privacy-right"
					},
					{
						sdk: "阿里云存储服务SDK",
						comp: "阿里云计算有限公司",
						scene: "下载比赛地图",
						client: "安卓端 / iOS端",
						frequency: "用户主动触发，在用户每次开始比赛时",
						deal: "通过去标识化、加密传输和处理的安全处理方式",
						info: "个人信息：用户ID",
						privacy: "https://terms.aliyun.com/legal-agreement/terms/suit_bu1_ali_cloud/suit_bu1_ali_cloud201802111644_32057.html?spm=a2c4g.11186623.0.0.7a0973fajRdNKX"
					},
					{
						sdk: "微信分享SDK",
						comp: "深圳市腾讯计算机系统有限公司",
						scene: "分享",
						client: "安卓端 / iOS端",
						frequency: "用户主动触发，在用户每次使用“分享至微信”功能时",
						deal: "通过去标识化、加密传输和处理的安全处理方式",
						info: "个人信息：用户openid、彩图奔跑APP的Token",
						privacy: "https://weixin.qq.com/cgi-bin/readtemplate?lang=zh_CN&t=weixin_agreement&s=privacy#1"
					},
					/* {
						sdk: "XXX",
						comp: "XXX",
						scene: "XXX",
						client: "安卓端 / iOS端",
						frequency: "XXX",
						deal: "XXX",
						info: "XXX",
						privacy: "XXX"
					}, */
				]
			}
		},
		methods: {

		}
	}
</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: 12px;
	}

	.tbText {
		font-size: 12px;
		line-height: 16px;
	}

	.noinfo {
		padding: 50px 10px;
		text-align: center;
		font-size: 14px;
	}
</style>