yanzong_qianduan/pages/invite/upgrade.vue

<template>
	<view class="park" :style="{backgroundImage:`url(${upgradeBackgroundImage})`}">
		<view class="park-navbar">
			<u-navbar title="升级服务商" :border-bottom="false" :background="background"></u-navbar>
		</view>
		<view class="park-box">
			<image :src="$picUrl+'/static/shangjia/upgrade_top.png'" mode="" class="comma"></image>
			<view class="name">
				加入我们
			</view>
			<view class="tips">
				独享最强代理权
			</view>
			<view class="content">
				<image :src="$picUrl+'/static/shangjia/upgrade_tips.png'" mode="" class="setup"></image>
				<image :src="$picUrl+'/static/shangjia/upgrade_bottom.png'" mode="" class="comma2"></image>
			</view>
			<view class="dreams">
				<view class="dreams-box">
					<view class="title">
						用指尖创造奇迹<br>
						用人脉缔造传奇
					</view>
					<view class="describe">
						在人生的大海中，<br> 我们虽然不能把握风的大小，<br> 却可以调整帆的方向。
					</view>
					<view class="describe-line"></view>
					<view class="describe" style="padding-bottom: 8rpx;">
						梦想服务商
					</view>
					<view class="title" style="padding-top: 0;">
						人生薪机遇<br>
						寻找强者能人
					</view>
					<view class="authentication">
						<text>当前已通过认证：</text>
						<text style="color: #222;font-weight: 700;">{{adoption_num}}</text>
					</view>
				</view>
			</view>
			<view class="upgrade-button" @click="sunmitUpgrade">
				升级服务商
			</view>
		</view>
		<view class="selfMask" v-if="popShow">
			<view class="self_popup">
				<image :src="$picUrl + '/static/news1/pop.png'" class="popimg" mode="widthFix"></image>
				<view class="popcontent">
					<view class="poptitle">
						您的升级提交成功
					</view>
					<view class="poptext">
						恭喜你，已经荣升为服务商，加油哦！
					</view>
					<view class="knowBtn" @click="popShow = false">
						我知道了
					</view>
				</view>
			</view>
		</view>
		<addShuiyin />
	</view>
</template>

<script>
	import * as Api from '@/api/help'
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				background: {
					background: 'none'
				},
				upgradeBackgroundImage: 'https://www.amiami.com.cn/static/shangjia/upgrade_bg.png?t=1',
				adoption_num: 0,
				popShow: false
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			sunmitUpgrade() {
				const app = this;
				uni.showLoading({
					title: "升级中"
				})
				Api.upgradeWholesaler()
					.then(result => {
						uni.hideLoading();
						if (result.status == 200) {
							this.popShow = true
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none'
							})
						}
					})
					.finally(() => app.isLoading = false)
			},
			async getList() {
				const {
					status,
					data
				} = await newFunApi.inviteWholesalerList({
					status: 20
				});
				if (status == 200) {
					this.adoption_num = data.adoption_num;
				}
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.park {
		padding: 0 0 60rpx;
		overflow: hidden;
		width: 100%;
		background-size: 100% auto;
		min-height: 100vh;
		background-size: cover;

		.park-box {
			width: 100%;
			padding-top: 90rpx;
			overflow: hidden;

			.comma {
				width: 112rpx;
				height: 112rpx;
				margin-left: 48rpx;
			}

			.name {
				overflow: hidden;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 89rpx;
				color: #222222;
				font-style: normal;
				text-transform: none;
				margin: 16rpx 0 16rpx 160rpx;
			}

			.tips {
				overflow: hidden;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 60rpx;
				color: #222222;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin: 0 0 16rpx 160rpx;
			}

			.content {
				overflow: hidden;
				padding: 0 48rpx 40rpx 160rpx;
				display: flex;
				justify-content: space-between;

				.setup {
					width: 222rpx;
					height: 36rpx;
					margin-top: 24rpx;
				}

				.comma2 {
					width: 112rpx;
					height: 112rpx;
				}
			}

			.dreams {
				overflow: hidden;
				margin: 0 160rpx;
				background: rgba(255, 255, 255, 0.65);

				.title {
					overflow: hidden;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #222222;
					line-height: 64rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					padding: 40rpx;
				}

				.describe {
					overflow: hidden;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					padding: 0 26rpx 40rpx 40rpx;
				}

				.describe-line {
					overflow: hidden;
					height: 1rpx;
					background: #222222;
					margin: 0 40rpx 40rpx 40rpx;
				}

				.authentication {
					margin: 0 16rpx 16rpx 16rpx;
					padding: 0 24rpx;
					height: 88rpx;
					line-height: 88rpx;
					border-radius: 0rpx;
					background: rgba(255, 255, 255, 0.5);
					display: flex;
					justify-content: space-between;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					font-style: normal;
					text-transform: none;
				}
			}

			.upgrade-button {
				width: 334rpx;
				height: 88rpx;
				background: linear-gradient(225deg, #FFD9F7 0%, #DAE8FF 100%);
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin: 24rpx auto;
			}
		}

	}

	.popcontent {
		width: 520upx;
		height:400upx;
		background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
		border-radius: 6px;
		opacity: 1;

		display: flex;
		flex-direction: column;
		padding: 0 40upx;
		align-items: center;

		.poptitle {
			font-size: 32upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			margin-top: 118upx;
			color: #000000;

		}

		.poptext {
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #727272;
			margin-top: 32upx;
			line-height: 36upx;

		}

		.knowBtn {
			width: 400upx;
			height: 72upx;
			line-height: 72upx;
			text-align: center;
			background: #F55349;
			border-radius: 72upx;
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 58upx;
		}

	}

	.selfMask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(60, 60, 60, 0.52);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.self_popup {
		position: relative;
		padding-top: 56rpx;
	}

	.popimg {
		position: absolute;
		width: 112upx;
		left: 50%;
		height: 128upx;
		margin-left: -56upx;
		top: 0;
		z-index: 2;
	}

	::v-deep .u-mode-center-box {
		background: transparent;
	}
</style>