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 => {
						if (result.data) {
							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>