fangliaoxiaochengxv/subPages/authenticationDetails/index.vue

<template>
	<view class="app-page">
		<view class="card-box">
			<text class="left-title">{{mData.platform}}</text>
			<view class="h-view">
				<text
					style="margin-right: 20rpx;">{{mData.status == '2' ? '已认证' : mData.status == '1' ? '审核中' : '未认证'}}</text>
			</view>
		</view>
		<view class="card-box">
			<text class="left-title">链接地址</text>
			<view class="h-view">
				<u-input v-model="url" placeholder="请输入" type="text" border="none" :auto-height="true" clearable
					customStyle="margin:0 20rpx;text-align: right;" />
			</view>
		</view>

		<view class="tips-card">
			<view class="tips-box">
				<u--image width='22rpx' height='22rpx' mode="heightFix" :src="`${$getImgBaseUrl()}ic-tips.png`"
					:fade="true" duration="450" customStyle="margin-left: 0rpx" />
				<text>温馨提醒：</text>
			</view>
			<text>认证后再修改，会变为非认证状态，等后台审核确认后方可变为已认证状态。</text>
		</view>


		<view class="bottom-view">

		</view>
		<view class="bottom-menu-box">
			<button class="primary-btn" @click="saveAuthentication">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		saveAuthentication
	} from "@/common/api/user.js";
	export default {
		data() {
			return {
				url: undefined,
				mData: {}
			}
		},
		computed: {
			formData() {
				return {
					code: this.mData.code,
					platform: this.mData.platform,
					url: this.url
				}
			}
		},
		onLoad(options) {
			uni.hideShareMenu({

			})
			const mData = uni.getStorageSync('selectAuthentication') || undefined
			console.log(uni.getStorageSync('selectAuthentication'));
			if (mData) {
				this.mData = JSON.parse(mData)
				console.log(this.mData);
				this.url = JSON.parse(JSON.stringify(this.mData.url))
			}
		},
		methods: {
			saveAuthentication() {
				uni.showLoading({

				})
				const data = this.formData
				saveAuthentication(data)
					.then(res => {
						uni.hideLoading();
						uni.$u.toast('提交成功,请耐心等待审核。')
						setTimeout(() => {
							uni.navigateBack()
						}, 800);
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100%;
		display: flex;
		padding-top: 20rpx;
		align-items: center;
		flex-direction: column;
	}


	.card-box {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin: 0 auto 20rpx auto;
		display: flex;
		padding: 20rpx 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.h-view {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.left-title {
		margin-left: 20rpx;
		font-size: 28rpx;
	}


	button::after {
		border: none;
	}

	.avatar-wrapper button::before {
		padding: 0;
		margin: 0;
		border-radius: 20rpx;
		background: transparent;
		border: none;
		line-height: 1;
	}

	.avatar-wrapper button::after {
		padding: 0;
		margin: 0;
		border-radius: 20rpx;
		background: transparent;
		border: none;
		line-height: 1;
	}

	.tips-card {
		width: 710rpx;
		background: #F6F0FD;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 0 auto 20rpx auto;
		display: flex;
		flex-direction: column;

		text {
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #9C81B7;
			line-height: 38rpx;
		}

		.tips-box {
			margin: 23rpx 20rpx 0rpx 20rpx;
			display: flex;
			align-items: center;
			flex-direction: row;

			text {
				margin-left: 4rpx;
				margin-bottom: 0;
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #765AEE;
				line-height: 38rpx;
			}
		}
	}


	.bottom-view {
		margin-bottom: var(--window-bottom);
		padding-bottom: calc(150rpx);
	}




	.bottom-menu-box {
		height: calc(150rpx);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		position: fixed;
		z-index: 9;
		background: white;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		width: 100vw;



		.primary-btn {
			width: 713rpx;
			margin-top: 14rpx;
			height: 78rpx;
			line-height: 78rpx;
			background: #815BFF;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		button::after {
			height: 78rpx;
			line-height: 78rpx;
		}

		.primary-btn:active {
			opacity: 0.7;
		}
	}
</style>