yanzong_qianduan/pages/news3/JoinDistribution.vue

<template>
	<view>
		<view style="width:100%;position: fixed;top:var(--status-bar-height);z-index:99">
			 <view class="navBarContent">
					<u-icon name="arrow-left" @click="goToPreviousPage" style="position: absolute;top:50%;left:40rpx;transform: translateY(-50%);" color="#000" size="24"></u-icon>
					<text>加入分销</text>
			 </view>
			
		</view>
		<image :src="$picUrl+'/static/news3/walletBg.png'" mode="widthFix" class="bgImg"></image>
		<view class="userInfo">
			<image :src="$picUrl+'/static/news3/join.png'" mode="widthFix"></image>
			<view class="userContent">
				<view v-if="user">
					<image :src="$picUrl+'/static/default-logo.png'" v-if="!user.avatar_url" class="avatar" ></image>
					<image :src="user.avatar_url" v-else mode="aspectFill" class="avatar"></image>
				</view>
				
				<!-- <image :src="$picUrl+'/static/default-logo.png'" v-if="!isLogin || !userInfo.avatar_url" class="image_2"
					@click="goLogin()"></image>
				<image :src="userInfo.avatar_url" v-else class="image_2"></image> -->
				<!-- <image src="/static/news/avater.png" mode="aspectFill" class="avatar"></image> -->
				<view class="user">
					<view class="userTop">
						<text class="name">{{ user.nick_name }}</text>
						<view class="flag">
							分销商
						</view>
					</view>
					<view class="userBottom">
						<text>加入时间{{dealer.update_time}}</text>
						<view class="tixian" @click="$navTo('pages/dealer/withdraw/apply')">
							提现
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="yongjinContent">
			<view class="item">
				<text class="num">
					{{ dealer.money }}
				</text>
				<text class="text">已提现佣金</text>
			</view>
			<view class="item">
				<text class="num">
					{{ dealer.freeze_money }}
				</text>
				<text class="text">未结算佣金</text>
			</view>
		</view>
		<view class="gridContent">
			<view class="gridItem" @click="$navTo('pages/dealer/commission')">
				<image :src="$picUrl+'/static/news3/fx1.png'" mode="widthFix"></image>
				<text>分销佣金</text>
			</view>
			<view class="gridItem" @click="$navTo('pages/dealer/order')">
				<image :src="$picUrl+'/static/news3/fx2.png'" mode="widthFix"></image>
				<text>分销订单</text>
			</view>
			<view class="gridItem" @click="$navTo('pages/dealer/withdraw/list')">
				<image :src="$picUrl+'/static/news3/fx3.png'" mode="widthFix"></image>
				<text>提现明细</text>
			</view>
			<view class="gridItem" @click="$navTo('pages/dealer/team')">
				<image :src="$picUrl+'/static/news3/fx4.png'" mode="widthFix"></image>
				<text>我的团队</text>
			</view>
			<view class="gridItem" @click="$navTo('pages/dealer/poster')">
				<image :src="$picUrl+'/static/news3/fx5.png'" mode="widthFix"></image>
				<text>推广二维码</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import AvatarImage from '@/components/avatar-image'
	import * as Api from '@/api/dealer'
	export default {
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 当前用户信息
				user: {},
				// 当前是否为分销商
				isDealer: false,
				// 当前分销商信息
				dealer: {},
				// 推荐人昵称
				refereeName: undefined,
				// 分销设置
				setting: {
				  background: undefined,
				  words: undefined
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
		  this.getCenter()
		},
		methods:{
			goToPreviousPage() {
			    uni.navigateBack({
			        delta: 1 // 返回的页面数，这里设置为1表示返回上一页
			    });
			},
			// 获取分销商中心数据
			getCenter() {
			  const app = this
			  app.isLoading = true
			  Api.center()
			    .then(result => {
			      // api数据赋值
			      const data = result.data
			      app.isDealer = data.isDealer
			      app.user = data.user
			      app.dealer = data.dealer
			      app.refereeName = data.refereeName
			      app.setting = data.setting
			      // 设置当前页面标题
			      app.setPageTitle()
			      app.isLoading = false
			    })
			},
			
			// 设置当前页面标题
			setPageTitle() {
			  uni.setNavigationBarTitle({
			    title: this.setting.words.index.title.value
			  })
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #F7F8FA;
	min-height: 100%;
	padding-bottom: 140upx;
	padding-top:200upx;
}
.bgImg{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

.navBarContent{
	height:88upx;
	line-height: 88upx;
	text-align: center;
	position: relative;
	text{
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #000;
	}
	
}
.userInfo{
	position: relative;
	z-index:3;
	margin:180rpx 30upx 0;
	image{
		width:100%;
		height:auto;
	}
	.userContent{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		padding:52upx 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.avatar{
			width:114upx;
			height:114upx;
		}
		.user{
			margin-left:30upx;
			flex:1;
			.userTop{
				display: flex;
				align-items: center;
				.name{
					
					font-size: 36upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #785B45;
					margin-right:20upx;
				
				}
				.flag{
					height: 42upx;
					background: rgba(255,255,255,0.71);
					border-radius: 31px 31px 31px 31px;
					opacity: 1;
				
					font-size: 24upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #785B45;
					line-height: 42upx;
					text-align: center;
					padding:0 20upx;
				}
			}
			.userBottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top:26upx;
				text{
					font-size: 24upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #785B45;
				}
				.tixian{
					padding:12upx 36upx;
					background: linear-gradient(180deg, #AF8D72 0%, #7D5C45 100%);
					border-radius: 29px 29px 29px 29px;
					opacity: 1;
					font-size: 24upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					
				}
			}
		}
		
	}
}
.yongjinContent{
	background: #FFFFFF;
	border-radius: 6px 6px 6px 6px;
	opacity: 1;
	padding:42upx 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin:20upx 30upx;
	.item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.num{
			
			font-size: 40upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #414141;
			
		}
		.text{
		
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #616161;
			margin-top:10upx;
			
		}
	}
}
.gridContent{
	display: flex;
	background-color: #fff;
	flex-wrap: wrap;
	margin:0upx 30upx;
	padding:20upx 0;
	.gridItem{
		width:33%;
		margin:30upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			height:auto;
			width:50upx;
		}
		text{
			
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #616161;
			margin-top:16upx;
		}
	}
}
</style>