要封裝一個登錄頁面，可以按照以下步驟進行操作：

1. 創建一個 Login 組件文件，例如 Login.vue。
2. 在 Login.vue 文件中定義一個表單，包含用戶名和密碼的輸入框以及登錄按鈕。
3. 在 data 中定義一個 formData 對象，用于存儲用戶輸入的用戶名和密碼。
4. 在 methods 中定義一個 login 方法，用于處理登錄操作。可以在該方法中發送登錄請求，將用戶名和密碼傳遞給后端進行驗證。
5. 在 template 中綁定輸入框的 v-model 到 formData 對象的相應屬性上，確保用戶輸入的內容能正確綁定到 formData 對象中。
6. 在 template 中綁定登錄按鈕的點擊事件到 login 方法上，當用戶點擊登錄按鈕時，會觸發 login 方法進行登錄操作。

以下是一個簡單的示例代碼：

<template>
  <view>
    <form>
      <input type="text" v-model="formData.username" placeholder="請輸入用戶名">
      <input type="password" v-model="formData.password" placeholder="請輸入密碼">
      <button @click="login">登錄</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      // 發送登錄請求，將用戶名和密碼傳遞給后端進行驗證
      // 可以使用 uni.request 或其他網絡庫來發送請求
      // 示例代碼：
      uni.request({
        url: 'http://example.com/login',
        method: 'POST',
        data: {
          username: this.formData.username,
          password: this.formData.password
        },
        success: (res) => {
          console.log(res)
          // 登錄成功后的處理邏輯
        },
        fail: (err) => {
          console.error(err)
          // 登錄失敗后的處理邏輯
        }
      })
    }
  }
}
</script>

以上就是一個簡單的登錄頁面的封裝示例。你可以根據實際需求進行修改和擴展。