youngee_b_api/pages/mycenter/myinformation/myaccount.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="margin-top: 160rpx;"></view>
		<view v-if="!loading">
			<!-- 已经绑定的账号-->
			<view class="card" style="margin-top: 2%;" v-for="item in account" @click="accountdetail(item)">
				<view class="Tasktext">
					<image :src="item.platform_icon" mode=""></image>
					<span>{{item.platform_nickname}}</span>
				</view>
				<view class="dou">
					<p style="padding-right: 20rpx;color:#A8A8A8;">粉丝数</p>
					<p>{{item.show_fans_count}}</p>
				</view>
				<view class="clickkk">
					<image :src="togoimg" mode="" style="width: 16rpx;height: 30rpx;"></image>
				</view>
			</view>
		</view>
		<view v-if="!loading">
			<!-- 未绑定的 -->
			<view class="card" style="margin-top: 2%;" v-for="item in list1">
				<view class="Tasktext" @click="bindaccount(item)">
					<image :src="item.platform_icon" mode=""></image>
					<span>绑定{{item.platform_name}}账号</span>
				</view>
				<view class="dou"></view>
				<view class="clickkk" @click="bindaccount(item)">
					<image :src="togoimg" mode="" style="width: 16rpx;height: 30rpx;"></image>
				</view>
			</view>

		</view>

		<view class="" style="width: 100%;height: 200rpx;">

		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		fansview
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				loading: false,
				togoimg: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task16.png',
				list1: [],
				account: [],
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "社媒账号绑定",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		async onShow() {
			this.loading = true;
			uni.showLoading({
				title: '加载中'
			});
			await this.getlist1()
			await this.getlist()
			uni.hideLoading();
			this.loading = false;
		},
		onLoad() {},
		methods: {
			tomylocation() {
				uni.navigateTo({
					url: './mylocation'
				});
			},
			topersoninfo() {
				uni.navigateTo({
					url: './personinfo'
				});
			},
			tomybank() {
				uni.navigateTo({
					url: './mybank'
				});
			},
			// 信息表
			getlist() {
				return this.$https.get('/youngee/c/t/g/get-talent-account')
					.then(res => {
						console.log(res)
						if (res.data.code !== -3) {
							this.account = res.data.data
							for (var i = 0; i < this.account.length; i++) {
								this.account[i].show_fans_count = fansview(this.account[i].fans_count)

								for (var j = 0; j < this.list1.length; j++) {
									if (this.list1[j].id == this.account[i].platform_id) {
										this.account[i].platform_icon = this.list1[j].platform_icon
										this.list1.splice(j, 1)
									}
								}
							}
						}
					})
			},
			// 默认信息表
			getlist1() {
				return this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						console.log(res)
						this.list1 = res.data.data.ThirdPlatform
					})
			},
			// 前往绑定账号
			bindaccount(item) {
				console.log("11", item)
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/bindaccount?platform_id=' + item.id
				});
			},
			// 前往账号详情
			accountdetail(item) {
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/bindaccount?platform_id=' + item.platform_id +
						'&account_id=' + item
						.account_id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: 14px;
		line-height: inherit;
	}

	.menu {
		position: fixed;
		top: 180rpx;
		border-bottom: #FCCF41;
		background-color: #FFFFFF;
		justify-content: space-around;
		height: 5%;
		width: 100%;
		display: flex;
		z-index: 10;
	}

	.menu-item p {
		font-weight: 600;

		&.lor {
			border-bottom: 5rpx solid #F0D232;
			color: #F0D232;
			padding-bottom: 15rpx;
		}
	}

	.card {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		width: 88%;
		padding: 24rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		margin: 0 auto;
		box-shadow: 0px 0px 10rpx 2rpx #F4F4F4;
	}

	.Tasktext {
		display: inline-block;
		padding: 0 0 0 1%;
		width: 400rpx;
	}

	.Tasktext span {
		color: #333333;
		font-weight: 550;
		text-indent: 2em;
	}

	.Tasktext image {
		vertical-align: middle;
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		padding-right: 14rpx;
	}

	.dou {
		display: flex;
		width: 250rpx;
	}

	.dou p {
		display: inline-block;
		font-size: 26rpx;
		color: #333333;
		font-weight: 550;
	}

	.dou span {
		font-size: 24rpx;
		color: #666666;
	}
</style>