feat: 初始化

pages/components/completeInfoReminder/detailModal/index.scss

@@ -0,0 +1,41 @@
+.detailModal {
+	position: relative;
+	width: calc(100vw - 50px);
+	max-width: 363px;
+	padding: 32px 29px 42px;
+	background-color: #fff;
+	box-sizing: border-box;
+	.closeIcon {
+		position: absolute;
+		top: 18px;
+		right: 21px;
+		width: 17px;
+		height: 17px;
+	}
+	.detailContent {
+		.title {
+			color: #333333;
+			font-size: 28px;
+			font-weight: 700;
+			line-height: 41px;
+		}
+		.desc {
+			margin-top: 8px;
+			color: #999999;
+			font-size: 14px;
+			line-height: 14px;
+		}
+		.steps {
+			margin-top: 27px;
+			::v-deep .uni-steps__column-title {
+				font-weight: 500;
+				color: #333333 !important;
+			}
+		}
+		.startNow {
+			margin-top: -17px;
+			height: 40px;
+			cursor: pointer;
+		}
+	}
+}

pages/components/completeInfoReminder/detailModal/index.vue

@@ -0,0 +1,70 @@
+<template>
+	<slot :showDetailDialog="showDetailDialog"></slot>
+	<uni-popup ref="alertDialog" :isMaskClick="false">
+		<view class="detailModal">
+			<uni-icons type="closeempty" size="17" class="closeIcon" @click="closeDetailDialog"></uni-icons>
+			<view class="detailContent">
+				<view class="title">{{ $t('home.verificationSteps.title') }}</view>
+				<view class="desc">{{ $t('home.verificationSteps.desc') }}</view>
+				<view class="steps">
+					<uni-steps :options="stepList" :active="-1" active-color="#007AFF" direction="column" />
+				</view>
+				<view class="primaryButton startNow" @click="toComplete">
+					{{ $t('home.verificationSteps.startNow') }}
+				</view>
+			</view>
+		</view>
+	</uni-popup>
+</template>
+
+<script>
+export default {
+	name: 'DetailModal',
+	props: {
+		visible: {
+			type: Boolean,
+			required: true,
+			default: false
+		}
+	},
+	data() {
+		return {
+			stepList: [
+				{
+					title: this.$t('home.verificationSteps.step1.title'),
+					desc: this.$t('home.verificationSteps.step1.desc')
+				},
+				{
+					title: this.$t('home.verificationSteps.step2.title'),
+					desc: this.$t('home.verificationSteps.step2.desc')
+				},
+				{
+					title: this.$t('home.verificationSteps.step3.title'),
+					desc: this.$t('home.verificationSteps.step3.desc')
+				},
+				{
+					title: this.$t('home.verificationSteps.step4.title'),
+					desc: this.$t('home.verificationSteps.step4.desc')
+				}
+			]
+		};
+	},
+	methods: {
+		toVerifyPage() {},
+		showDetailDialog() {
+			this.$refs.alertDialog.open();
+		},
+		closeDetailDialog() {
+			this.$refs.alertDialog.close();
+		},
+		toComplete() {
+			this.closeDetailDialog()
+			uni.navigateTo({ url: '/pages/user/index' });
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

pages/components/completeInfoReminder/index.scss

@@ -0,0 +1,31 @@
+.reminderWrapper {
+	display: flex;
+	flex-direction: column;
+	padding: 30px 19px 24px;
+	row-gap: 24px;
+	background-color: rgba(234, 247, 250, 1);
+	.reminderTitle {
+		display: flex;
+		column-gap: 12px;
+		align-items: center;
+		font-size: 16px;
+		color: rgba(15, 54, 117, 1);
+		.reminderAvatar {
+			width: 24px;
+			height: 24px;
+		}
+	}
+	.reminderButtonWrapper {
+		display: flex;
+		column-gap: 14px;
+		align-items: center;
+		.reminderButton {
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 37px;
+			cursor: pointer;
+		}
+	}
+}

pages/components/completeInfoReminder/index.vue

@@ -0,0 +1,50 @@
+<template>
+	<view class="reminderWrapper" v-show="!authStatus">
+		<view class="reminderTitle">
+			<image src="/static/reminderAvatar.png" mode="aspectFit" class="reminderAvatar"></image>
+			<text>{{ $t('home.reminder.title') }}</text>
+		</view>
+		<view class="reminderButtonWrapper">
+			<DetailModal>
+				<template v-slot="{ showDetailDialog }">
+					<view class="reminderButton primaryButton" @click="showDetailDialog">{{ $t('home.reminder.detailBtn') }}</view>
+				</template>
+			</DetailModal>
+			<view class="reminderButton secondaryButton" @click="toComplete">{{ $t('home.reminder.completeBtn') }}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import DetailModal from './detailModal/index.vue';
+import { getPersonalAuthStatus } from '@/services/user.ts';
+export default {
+	name: 'CompleteInfoReminder',
+	data() {
+		return {
+			authStatus: true
+		};
+	},
+	methods: {
+		toComplete() {
+			uni.navigateTo({ url: '/pages/user/index' });
+		},
+		async getAuthStatus() {
+			const res = await getPersonalAuthStatus();
+			if (res && res.code === 0) {
+				this.authStatus = res.data.address == 1 && res.data.identity == 1 && res.data.email == 1;
+			}
+		}
+	},
+	created() {
+		this.getAuthStatus();
+	},
+	components: {
+		DetailModal
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>