添加编辑头像弹窗

src/pages/point-book-profile.vue

@@ -7,6 +7,8 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 
+const editAvatar = ref(false);
+
 const toEditPage = () => {
   uni.navigateTo({
     url: "/pages/point-book-edit",
@@ -18,7 +20,7 @@ const toEditPage = () => {
   <view class="container">
     <view class="header">
       <image :src="user.avatar" mode="widthFix" />
-      <button hover-class="none" @click="toEditPage">
+      <button hover-class="none" @click="editAvatar = true">
         <image src="../static/pen-yellow.png" mode="widthFix" />
       </button>
     </view>
@@ -46,6 +48,23 @@ const toEditPage = () => {
         <text>shelingxingqiu@163.com</text>
       </view>
     </view>
+    <view
+      class="edit-avatar"
+      :style="{ height: editAvatar ? '100vh' : '0' }"
+      @click="editAvatar = false"
+    >
+      <image :src="user.avatar" mode="widthFix" />
+      <view>
+        <button hover-class="none">
+          <text>Take a photo</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+        <button hover-class="none">
+          <text>Choose photo</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -134,4 +153,43 @@ const toEditPage = () => {
 .body > view:last-child > text:last-child {
   color: $uni-link-color;
 }
+.edit-avatar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100vw;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.edit-avatar > image {
+  width: 85vw;
+  height: 85vw;
+  border-radius: 50%;
+}
+.edit-avatar > view {
+  border-radius: 25rpx;
+  margin-top: 100rpx;
+  width: calc(100% - 150rpx);
+  padding: 0 40rpx;
+  background: #585858;
+}
+.edit-avatar > view > button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 30rpx;
+  color: #ffffff;
+  padding: 40rpx 0;
+}
+.edit-avatar > view > button:not(:last-child) {
+  border-bottom: 1rpx solid #fff3;
+  border-radius: 0;
+}
+.edit-avatar > view > button > image {
+  width: 28rpx;
+}
 </style>