youngee_b_api/page_mycenter/myinformation/myaccount.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></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.nick_name}}</span>
					<image :src="suc_flag===0 ? auth_exp_img : auth_suc_img" mode=""
						style="height: 25rpx;padding-left: 25rpx;"></image>
				</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">
			<!-- 未绑定的  list_all含未绑定平台的id和name-->
			<view class="card" style="margin-top: 2%;" v-for="item in list_all">
				<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 {
				navH: getApp().globalData.navHeight,
				loading: false,
				togoimg: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task16.png',
				list_all: [],
				account: [],
				suc_flag: 0, //0表示已过期，1表示未过期
				auth_suc_img: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/auth_suc.png',
				auth_exp_img: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/auth-exp.png',
				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.getlist_all()
			await this.getlist_bind()
			//检查token是否有效,发送获取销量接口，得到code值
			await this.checkToken()
			uni.hideLoading();
			this.loading = false;
		},
		onLoad() {},
		methods: {
			tomylocation() {
				uni.navigateTo({
					url: './mylocation'
				});
			},
			topersoninfo() {
				uni.navigateTo({
					url: './personinfo'
				});
			},
			tomybank() {
				uni.navigateTo({
					url: './mybank'
				});
			},
			// 信息表
			// 此前已获取所有平台的信息
			getlist_bind() {
				//查询快手平台绑定表
				return this.$https.get('/youngee/c/t/g/get-talent-account-kuaishou')
					.then(res => {
						console.log("get list_bind----", res)
						//  !== -3表示绑定了平台
						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 = this.account[i].fan
								for (var j = 0; j < this.list_all.length; j++) {
									if (this.list_all[j].id == this.account[i].platform_id) {
										this.account[i].platform_icon = this.list_all[j].platform_icon
										//表示从索引 j 开始删除1个元素。list_all中，剩下的都是未绑定的平台
										this.list_all.splice(j, 1)
									}
								}
							}
						}
					})
			},
			// getlist() {
			// 	//查询快手平台绑定表
			// 	return this.$https.get('/youngee/c/t/g/get-talent-account')
			// 		.then(res => {
			// 			console.log("get list----", res)
			// 			//  !== -3表示绑定了平台
			// 			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.list_all.length; j++) {
			// 						if (this.list_all[j].id == this.account[i].platform_id) {
			// 							this.account[i].platform_icon = this.list_all[j].platform_icon
			// 							//表示从索引 j 开始删除1个元素。list_all中，剩下的都是未绑定的平台
			// 							this.list_all.splice(j, 1)
			// 						}
			// 					}
			// 				}
			// 			}
			// 		})
			// },
			// 获取所有平台的id、icon和name
			getlist_all() {
				return this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						this.list_all = res.data.data.ThirdPlatform
						console.log("this.list_all", this.list_all)
					})
			},
			checkToken() {
				//进入页面就发送一个请求，看是否过期
				return this.$https.get('/youngee/c/t/g/check-token-exp')
					.then(res => {
						console.log("checkToken___", res)
						if (res.data.code == -2) {
							this.suc_flag = 0
						} else {
							this.suc_flag = 1
						}
					})
			},
			// 前往绑定账号
			// bindaccount(item) {
			// 	console.log("11", item)
			// 	uni.navigateTo({
			// 		url: '/page_mycenter/myinformation/bindaccount?platform_id=' + item.id
			// 	});
			// },
			//前往绑定抖音页面
			// 前往绑定账号
			bindaccount(item) {
				//绑定抖音平台
				if (item.id == 4) {
					uni.navigateTo({
						url: '/page_mycenter/bindaccounts/kuaishoubind'
					});
				} else {
					uni.navigateTo({
						url: '/page_mycenter/myinformation/bindaccount?platform_id=' + item.id
					});
				}

			},
			// 前往账号详情
			accountdetail(item) {
				
				uni.navigateTo({
					url: '/page_mycenter/bindaccounts/kuaishoubind?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;
		font-size: 30rpx;
	}

	.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: 30rpx;
		color: #333333;
		font-weight: 550;
	}

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