flat:职业图谱小程序端页面完成

pages/service/components/RemindPopup.vue

@@ -0,0 +1,140 @@
+<template>
+    <uni-popup
+        ref="popupRef"
+        type="center"
+        borderRadius="10px 10px 10px 10px"
+        background-color="#FFFFFF"
+        :mask-click="false"
+    >
+        <view class="remind-popup-content">
+            <view class="remind-title">提醒</view>
+            <view class="remind-message">请先完善您的个人信息:</view>
+            <view class="remind-list">
+                <view 
+                    class="remind-item" 
+                    v-for="(item, index) in remindList" 
+                    :key="index"
+                >
+                    {{ index + 1 }}、{{ item }}
+                </view>
+            </view>
+            <view class="remind-btns">
+                <button class="remind-btn cancel-btn" @click="handleCancel">取消</button>
+                <button class="remind-btn confirm-btn" @click="handleConfirm">确认</button>
+            </view>
+        </view>
+    </uni-popup>
+</template>
+
+<script setup>
+import { ref, defineExpose } from 'vue';
+
+const props = defineProps({
+    remindList: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['cancel', 'confirm']);
+
+const popupRef = ref(null);
+
+// 打开弹窗
+function open() {
+    if (popupRef.value) {
+        popupRef.value.open('center');
+    }
+}
+
+// 关闭弹窗
+function close() {
+    popupRef.value?.close('center');
+}
+
+// 取消按钮
+function handleCancel() {
+    emit('cancel');
+}
+
+// 确认按钮
+function handleConfirm() {
+    emit('confirm');
+}
+
+defineExpose({
+    open,
+    close
+});
+</script>
+
+<style lang="scss" scoped>
+.remind-popup-content {
+    padding: 40rpx;
+    width: 630rpx;
+    background-color: #FFFFFF;
+    border-radius: 20rpx;
+    box-sizing: border-box;
+}
+
+.remind-title {
+    font-weight: 600;
+    font-size: 32rpx;
+    color: #000000;
+    margin-bottom: 24rpx;
+}
+
+.remind-message {
+    font-size: 28rpx;
+    color: #000000;
+    margin-bottom: 20rpx;
+    line-height: 40rpx;
+}
+
+.remind-list {
+    margin-bottom: 32rpx;
+    min-height: 40rpx;
+}
+
+.remind-item {
+    font-size: 28rpx;
+    color: #000000;
+    line-height: 40rpx;
+    margin-bottom: 8rpx;
+}
+
+.remind-btns {
+    display: flex;
+    justify-content: space-between;
+    gap: 20rpx;
+}
+
+.remind-btn {
+    flex: 1;
+    height: 88rpx;
+    line-height: 88rpx;
+    text-align: center;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    padding: 0;
+    box-sizing: border-box;
+    font-weight: 400;
+}
+
+.cancel-btn {
+    background-color: #FFFFFF;
+    color: #666666;
+    border: 1rpx solid #E5E7EB;
+}
+
+.confirm-btn {
+    background-color: #256BFA;
+    color: #FFFFFF;
+    border: none;
+}
+
+button::after {
+    border: none;
+}
+</style>
+