yizhizan-h5/pages/my/recommendationOfficer/index.vue

<template>
	<view class="page-container">
		<nav-bar title="推荐官"></nav-bar>
		<view class="content">
			<image src="@/static/images/my/tuijianguan.png" class="people-img"></image>
			<view class="title flex align-center justify-center">
				<image src="@/static/images/my/agree.png" class="agree-icon"></image>
				<text>金牌推荐官</text>
			</view>
			<view class="sub-title">成为亿职赞金牌推荐官，享超值权益</view>
			
			<view class="section">
				<view class="section-title flex align-center justify-between">
					<text>推荐人群：</text>
					<view class="tag">跨境</view>
				</view>
				<view class="tip">跨境电商从业者</view>
				<view class="tip">从业时间≥半年</view>
				<view class="tip">平台运营或产品开发</view>
			</view>
			
			<view class="section">
				<view class="section-title flex align-center">
					<text>推荐达标标准：</text>
				</view>
				<view class="tip">被推荐人成功注册</view>
				<view class="tip">简历完善度＞80%</view>
			</view>
			
			<view class="section">
				<view class="section-title flex align-center">
					<text>超值权益：</text>
				</view>
				<view class="tip">成为推荐官，添加客服后即可获得10元奖励</view>
				<view class="tip">推得越多，单价越高! 奖金次日微信红包秒发!</view>
				<view class="tip">推1-10人：2元/人    (稳稳起步)</view>
				<view class="tip">推11-30人：5元/人    (加速前进)</view>
				<view class="tip">推31人以上：20元/人 (芜湖起飞!)</view>
			</view>
		</view>
		
		<view class="button-section fixed-section">
			<view class="submit-btn" @click="handleBecomeOfficer">成为推荐官</view>
		</view>
		
		<!-- 海报弹窗 -->
		<Poster
			:value="showPoster"
			:rank="rank"
			:posterBase64Url="posterBase64Url"
			:posterMime="posterMime"
			@close="handleClosePoster"
			@saved="handleSaved"
		></Poster>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar/index.vue';
	import Poster from '@/components/poster/poster.vue'
	
	export default {
		components: {
			navBar,
			Poster
		},
		data() {
			return {
				loading: false,
				showPoster: false,
				// 推荐官顺位
				rank: 0,
				posterBase64Url: ''
			}
		},
		methods: {
			// 成为推荐官
			handleBecomeOfficer() {
				this.loading = true
				this.$queue.showLoading('成为推荐官中...')	
				this.$Request.getT('/app/user/updateRecommender')
				.then(res => {
					if (res.code == 0) {
						this.getPosterData()
					} else {
						this.$queue.hideLoading()
					}
				})
				.catch(() => {
					this.$queue.hideLoading()
				})
				.finally(() => {
					this.loading = false
				})
			},

			// 获取海报数据
			getPosterData() {
				this.$queue.showLoading('获取海报数据中...')
				this.$Request.getT('/app/invite/getMyPoster')
				.then(res => {
					if (res.code == 0) {
						this.showPoster = true
						this.rank = res.data?.user?.recommenderRark ?? 0
						this.posterBase64Url = res.data?.image ?? ''
					}
				}).finally(() => {
					this.$queue.hideLoading()
				})
			},

			// 关闭海报弹窗
			handleClosePoster() {
				this.showPoster = false
				uni.redirectTo({
					url: '/pages/my/recommendationOfficer/list'
				})
			},

			handleSaved() {
				uni.redirectTo({
					url: '/pages/my/recommendationOfficer/list'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common.scss';
	
	.page-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		font-family: DM Sans;
		background-image: url('@/static/images/my/bg1.png');
		background-size: 100% 100%;
		
		.content {
			flex: 1;
		}
		
		.people-img {
			display: block;
			width: 336rpx;
			height: 336rpx;
			margin: 0 auto;
		}
		.title {
			margin: 18rpx 0 20rpx;
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			font-weight: 500;
			line-height: 46px;
			.agree-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
			}
		}
		.sub-title {
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 36rpx;
			text-align: center;
			margin-bottom: 28rpx;
		}
		.section {
			margin: 16rpx 20rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 16rpx 36rpx;
			.section-title {
				color: rgba(51, 51, 51, 1);
				font-weight: 500;
				line-height: 36rpx;
			}
			.tag {
				height: 32rpx;
				font-size: 20rpx;
				line-height: 1;
				color: #fff;
				border-radius: 8rpx;
				background: linear-gradient(90.00deg, rgba(13, 39, 247, 0.75) 0%,rgba(19, 193, 234, 0.75) 100%);
				padding: 6rpx 7rpx;
				margin-top: 6rpx;
				margin-left: 20rpx;
				box-sizing: border-box;
			}
			.tip {
				color: rgba(124, 125, 125, 1);
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				margin-top: 12rpx;
			}
		}
		.fixed-section {
			box-shadow: none;
			background: transparent;
		}
	}
</style>