feat: 合并

components/Layer.vue

+<template>
+  <view class="Layer-custom">
+    <!-- 遮罩层 -->
+    <view v-if="visible" class="layer-mask" @click="onMaskClick"></view>
+    <!-- 底部弹出层 -->
+    <view v-if="visible" class="layer-popup">
+      <view class="layer-panel">
+        <!-- 头部插槽或默认头部 -->
+        <slot name="header">
+          <view class="layer-header" v-if="!customHeader">
+            <text v-if="showCancel" @click="onCancel" class="layer-cancel"
+              >取消</text
+            >
+            <text v-if="title" class="layer-title">{{ title }}</text>
+            <text v-if="showConfirm" @click="onConfirm" class="layer-confirm"
+              >确定</text
+            >
+          </view>
+        </slot>
+        <!-- 内容插槽 -->
+        <view class="layer-content">
+          <slot></slot>
+        </view>
+        <!-- 底部插槽 -->
+        <slot name="footer"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+import { ref, watch, defineEmits, defineProps } from "vue";
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title: { type: String, default: "" },
+  showCancel: { type: Boolean, default: true },
+  showConfirm: { type: Boolean, default: true },
+  maskClosable: { type: Boolean, default: true },
+  customHeader: { type: Boolean, default: false },
+});
+const emit = defineEmits([
+  "update:modelValue",
+  "confirm",
+  "cancel",
+  "open",
+  "close",
+]);
+
+const visible = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    visible.value = val;
+    if (val) emit("open");
+    else emit("close");
+  }
+);
+
+function open() {
+  visible.value = true;
+  emit("update:modelValue", true);
+  emit("open");
+}
+function close() {
+  visible.value = false;
+  emit("update:modelValue", false);
+  emit("close");
+}
+function onConfirm() {
+  emit("confirm");
+  close();
+}
+function onCancel() {
+  emit("cancel");
+  close();
+}
+function onMaskClick() {
+  if (props.maskClosable) {
+    onCancel();
+  }
+}
+
+defineExpose({ open, close });
+</script>
+<style lang="less" scoped>
+.layer-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 3999;
+}
+.layer-popup {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: layer-up 0.3s;
+}
+@keyframes layer-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.layer-panel {
+  width: 100vw;
+  min-height: 20vh;
+  background: #f6f8fa;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.layer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 140rpx;
+  box-sizing: border-box;
+  background: #f6f8fa;
+  padding: 0 32rpx;
+  .layer-cancel {
+    color: #6f6d67;
+    font-size: 28rpx;
+    width: 136rpx;
+    height: 74rpx;
+    border-radius: 20rpx;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .layer-confirm {
+    color: #ffffff;
+    font-size: 28rpx;
+    width: 136rpx;
+    height: 74rpx;
+    border-radius: 20rpx;
+    background: #d3a358;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .layer-title {
+    color: #222;
+    font-size: 32rpx;
+    font-weight: bold;
+    flex: 1;
+    text-align: center;
+  }
+}
+.layer-content {
+  flex: 1;
+  padding: 32rpx;
+  box-sizing: border-box;
+}
+</style>
\ No newline at end of file

pages.json

@@ -5,6 +5,12 @@
 			"style": {
 				"navigationBarTitleText": "首页"
 			}
+		},
+		{
+			"path": "pages/person/person",
+			"style": {
+				"navigationBarTitleText": ""
+			}
 		}
 	],
 	"globalStyle": {
@@ -15,4 +21,4 @@
 		"navigationStyle": "custom"
 	},
 	"uniIdRouter": {}
-}
+}
\ No newline at end of file

pages/person/person.vue

@@ -84,7 +84,7 @@
               v-model="formData[item.name]"
             />
             <!-- 选择器类型 -->
-            <PickerCustom
+            <picker-custom
               v-else-if="item.type === 'picker'"
               :mode="item.mode"
               :range="item.range"
@@ -101,7 +101,7 @@
                   src="/static/person/icon_arrow_yellow_right.png"
                 />
               </view>
-            </PickerCustom>
+            </picker-custom>
             <!-- 单选类型 -->
             <radio-group
               v-else-if="item.type === 'radio'"

views/My.vue

@@ -16,7 +16,7 @@
         <view class="avatar-container">
           <image
             class="avatar"
-            :src="userInfo.avatar || '/static/my/avatar.png'"
+            :src="userInfo.avatar"
             mode="aspectFill"
           />
         </view>