fix: make content api

components/LoginPopup/LoginPopup.vue

@@ -2,30 +2,79 @@
   <view>
     <uni-popup ref="popupRef" type="bottom" :safe-area="false">
       <view class="popup-container">
+        <view class="drag-handle"></view>
         <view class="popup-header">
-          <text class="popup-title">登录授权</text>
+          <text class="popup-title">授权登录</text>
+          <view class="close-btn" @tap="close">
+            <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
+          </view>
         </view>
 
-        <view class="avatar-nickname">
+        <view class="avatar-section">
           <button
             open-type="chooseAvatar"
             @chooseavatar="onChooseAvatar"
             class="avatar-selector custom-button"
           >
+            <view class="avatar-wrapper">
               <image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
-            <text v-else>点击获取头像</text>
+              <image
+                v-else
+                src="/static/images/default-avatar.png"
+                class="avatar-preview"
+              />
+              <view class="camera-icon">
+                <uni-icons
+                  type="camera-filled"
+                  size="14"
+                  color="#fff"
+                ></uni-icons>
+              </view>
+            </view>
+            <text class="upload-tip">点击上传头像</text>
           </button>
+        </view>
+
+        <view class="form-section">
+          <view class="input-group">
+            <text class="label">昵称</text>
             <input
               class="nickname-input"
               type="nickname"
               v-model="nickname"
-            placeholder="请输入昵称"
+              placeholder="请输入或点击获取昵称"
+              placeholder-class="placeholder"
             />
+            <!-- <text class="get-nickname-btn">获取微信昵称</text> -->
+          </view>
         </view>
 
+        <view class="action-section">
           <button class="confirm-btn custom-button" @tap="confirmLogin">
-          确认登录
+            一键登录
           </button>
+
+          <!-- <view class="agreement-row" @tap="toggleAgreement">
+            <view class="checkbox" :class="{ checked: isAgreed }">
+              <uni-icons
+                v-if="isAgreed"
+                type="checkmarkempty"
+                size="12"
+                color="#fff"
+              ></uni-icons>
+            </view>
+            <view class="agreement-text">
+              登录即代表您同意
+              <text class="link" @tap.stop="openAgreement('user')"
+                >《用户协议》</text
+              >
+              及
+              <text class="link" @tap.stop="openAgreement('privacy')"
+                >《隐私政策》</text
+              >
+            </view>
+          </view> -->
+        </view>
       </view>
     </uni-popup>
 
@@ -47,6 +96,7 @@ const popupRef = ref(null);
 const privacyRef = ref(null);
 const avatarUrl = ref("");
 const nickname = ref("");
+const isAgreed = ref(false);
 
 const userStore = useUserStore();
 
@@ -97,10 +147,8 @@ const getFestivalName = () => {
 };
 
 const open = async () => {
-  console.log(22223333);
   // #ifdef MP-WEIXIN
   const isAgreed = await privacyRef.value.check();
-  console.log(1111, isAgreed);
   if (isAgreed) {
     popupRef.value.open();
   }
@@ -124,6 +172,10 @@ const onChooseAvatar = (e) => {
 };
 
 const confirmLogin = async () => {
+  // if (!isAgreed.value) {
+  //   uni.showToast({ title: "请先同意用户协议和隐私政策", icon: "none" });
+  //   return;
+  // }
   try {
     const platform = getPlatformProvider();
     if (platform === "mp-weixin") {
@@ -181,61 +233,175 @@ defineExpose({ open, close });
 }
 .popup-container {
   background-color: #fff;
-  padding: 40rpx 30rpx 60rpx;
-  border-top-left-radius: 30rpx;
-  border-top-right-radius: 30rpx;
+  padding: 20rpx 40rpx 60rpx;
+  border-top-left-radius: 48rpx;
+  border-top-right-radius: 48rpx;
+  position: relative;
+
+  .drag-handle {
+    width: 64rpx;
+    height: 8rpx;
+    background: #e5e5e5;
+    border-radius: 4rpx;
+    margin: 0 auto 30rpx;
+  }
 
   .popup-header {
-    text-align: center;
-    margin-bottom: 30rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 60rpx;
+    position: relative;
 
     .popup-title {
       font-size: 36rpx;
-      font-weight: bold;
+      font-weight: 600;
+      color: #1a1a1a;
+    }
+
+    .close-btn {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      padding: 10rpx;
     }
   }
 
-  .avatar-nickname {
+  .avatar-section {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 80rpx;
+
+    .avatar-selector {
       display: flex;
       flex-direction: column;
       align-items: center;
-    margin-bottom: 30rpx;
-
-    .avatar-selector {
-      width: 145rpx;
-      height: 145rpx;
-      border-radius: 50%;
-      font-size: 26rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 20rpx;
-      background-color: #eee;
     }
 
+    .avatar-wrapper {
+      width: 200rpx;
+      height: 200rpx;
+      background: #f5f5f5;
+      border-radius: 50%;
+      position: relative;
+      margin-bottom: 20rpx;
+      border: 4rpx solid #fff;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
       .avatar-preview {
         width: 100%;
         height: 100%;
         border-radius: 50%;
       }
 
-    .nickname-input {
-      width: 80%;
-      border: 1rpx solid #ccc;
-      border-radius: 20rpx;
-      padding: 20rpx;
-      font-size: 26rpx;
-      text-align: center;
+      .camera-icon {
+        position: absolute;
+        right: 10rpx;
+        bottom: 10rpx;
+        width: 48rpx;
+        height: 48rpx;
+        background: #ff4d4f;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 4rpx solid #fff;
       }
     }
 
-  .confirm-btn {
-    background-color: #07c160;
-    color: white;
+    .upload-tip {
+      font-size: 26rpx;
+      color: #999;
+    }
+  }
+
+  .form-section {
+    margin-bottom: 80rpx;
+
+    .input-group {
+      display: flex;
+      align-items: center;
+      padding: 30rpx 0;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      .label {
         font-size: 30rpx;
+        color: #1a1a1a;
+        font-weight: 500;
+        width: 100rpx;
+      }
+
+      .nickname-input {
+        flex: 1;
+        font-size: 30rpx;
+        color: #1a1a1a;
+        margin-left: 20rpx;
+      }
+
+      .placeholder {
+        color: #ccc;
+      }
+
+      .get-nickname-btn {
+        font-size: 26rpx;
+        color: #576b95;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .action-section {
+    .confirm-btn {
+      background: #ff4d4f;
+      color: #fff;
+      font-size: 34rpx;
+      font-weight: 600;
+      height: 100rpx;
       border-radius: 50rpx;
-    padding: 20rpx 0;
-    width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 40rpx;
+      box-shadow: 0 12rpx 24rpx rgba(255, 77, 79, 0.3);
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    .agreement-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-bottom: 20rpx;
+
+      .checkbox {
+        width: 32rpx;
+        height: 32rpx;
+        border: 2rpx solid #ccc;
+        border-radius: 50%;
+        margin-right: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+
+        &.checked {
+          background: #ff4d4f;
+          border-color: #ff4d4f;
+        }
+      }
+
+      .agreement-text {
+        font-size: 24rpx;
+        color: #999;
+
+        .link {
+          color: #576b95;
+        }
+      }
+    }
   }
 }
 </style>