feat: 初始化

components/CustomModal/CustomModal.vue

@@ -0,0 +1,102 @@
+<template>
+	<view v-if="show">		
+		<uni-popup ref="customModalRef" :isMaskClick="options.isMaskClick" :mask-background-color="options.type === 'message' ? 'transparent' : ''">
+			<view :class="['customModal', options.type === 'confirm' ? 'confirmModal' : 'messageModal']">
+				<image src="/static/closeIcon.svg" mode="aspectFit" class="customModalCloseIcon" @click="onClose"></image>
+				<view class="customModalDecoration">
+					<view class="customModalDecorationLeft"></view>
+					<view class="customModalDecorationRight"></view>
+				</view>
+				<view class="customModalContent">
+					<view class="customModalContentStatusIcon" v-if="options.type === 'message'">
+						<image v-if="options.status === 'success'" src="/static/success.png" mode="aspectFit" style="width: 35px; height: 35px"></image>
+						<image v-if="options.status === 'warning'" src="/static/warning.png" mode="aspectFit" style="width: 35px; height: 35px"></image>
+					</view>
+					<view class="customModalContentText">
+						<text>{{ options.contentText }}</text>
+					</view>
+				</view>
+				<view class="customModalConfirmBtns" v-if="options.type === 'confirm'">
+					<button class="secondaryButton cancelBtn" @click="onCancel">{{ options.cancelText }}</button>
+					<view :disabled="confirmBtnLoading" class="primaryButton confirmBtn" @click="onConfirm">
+						<image v-show="confirmBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
+						{{ options.confirmText }}
+					</view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'CustomModal',
+	data() {
+		return {
+			options: {
+				type: 'confirm',
+				isMaskClick: false,
+				closeAfterConfirm: true,
+				confirmText: this.$t('common.okText'),
+				cancelText: this.$t('common.cancelText')
+			},
+			confirmBtnLoading: false,
+			show: false
+		};
+	},
+	methods: {
+		showDialog(options) {
+			this.show = true
+			this.options = { ...this.options, ...options };
+			this.$nextTick(() => {
+				this.$refs.customModalRef.open();
+			})
+		},
+		async onConfirm() {
+			try {
+				if (this.options.onConfirm) {
+					this.confirmBtnLoading = true;
+					await this.options.onConfirm();
+					this.confirmBtnLoading = false;
+				}
+			} catch (e) {
+				console.log('e==>', e);
+			}
+			if (this.options.closeAfterConfirm) {
+				this.closeDialog();
+			}
+		},
+		async onCancel() {
+			try {
+				if (this.options.onCancel) {
+					await this.options.onCancel();
+				}
+			} catch (e) {
+				console.log('e==>', e);
+			}
+			await this.onClose();
+			this.closeDialog();
+		},
+		async onClose() {
+			try {
+				if (this.options.onClose) {
+					await this.options.onClose();
+				}
+			} catch (e) {
+				console.log('e==>', e);
+			}
+			this.closeDialog();
+		},
+		closeDialog() {
+			this.$refs.customModalRef.close();
+			this.$nextTick(() => {
+				this.show = false
+			})
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

components/CustomModal/index.scss

@@ -0,0 +1,82 @@
+.customModal {
+	position: relative;
+	width: 90vw;
+	box-sizing: border-box;
+	background-color: #fff;
+	overflow: hidden;
+	box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.25);
+	&.confirmModal {
+		max-width: 360px;
+		border-radius: 18px;
+		.customModalContent {
+			padding: 54px 54px 45px;
+		}
+	}
+	&.messageModal {
+		max-width: 264px;
+		border-radius: 12px;
+		.customModalContent {
+			padding: 16px 24px;
+		}
+		.customModalCloseIcon {
+			top: 14px;
+			right: 10px;
+			width: 14px;
+			height: 14px;
+		}
+		.customModalDecoration {
+			height: 5px;
+			.customModalDecorationLeft {
+				width: 60px;
+			}
+		}
+		.customModalContent {
+			.customModalContentText {
+				line-height: 29px;
+			}
+		}
+	}
+	.customModalCloseIcon {
+		position: absolute;
+		top: 26px;
+		right: 22px;
+		width: 16px;
+		height: 16px;
+	}
+	.customModalDecoration {
+		display: flex;
+		width: 100%;
+		height: 8px;
+		.customModalDecorationLeft {
+			width: 90px;
+			height: 100%;
+			background-color: #0f3675;
+		}
+		.customModalDecorationRight {
+			flex: 1;
+			height: 100%;
+			background-color: #29bbe4;
+		}
+	}
+	.customModalContent {
+		box-sizing: border-box;
+		.customModalContentStatusIcon {
+			display: flex;
+			justify-content: center;
+			margin-bottom: 4px;
+		}
+		.customModalContentText {
+			font-size: 20px;
+			font-weight: 500;
+			line-height: 35px;
+			text-align: center;
+		}
+	}
+	.customModalConfirmBtns {
+		display: flex;
+		align-items: center;
+		column-gap: 37px;
+		padding: 0px 41px 31px;
+		box-sizing: border-box;
+	}
+}