整合登录注册页面

web/src/components/RedeemVerify.vue

@@ -1,42 +1,22 @@
 <template>
-  <el-dialog
-    v-model="showDialog"
-    :close-on-click-modal="true"
-    :before-close="close"
-    :width="450"
-    :title="title"
-  >
-    <div class="form" id="bind-mobile-form">
-      <el-form :model="form">
-        <el-form-item>
-          <el-input v-model="form.code" />
-        </el-form-item>
-      </el-form>
+  <div class="form" id="redeem-form">
+    <el-form :model="form">
+      <el-form-item>
+        <el-input v-model="form.code" placeholder="请输入兑换码" />
+      </el-form-item>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="save">兑换</el-button>
+      <el-button @click="emits('hide')">取消</el-button>
     </div>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="save"> 立即兑换 </el-button>
-      </span>
-    </template>
-  </el-dialog>
+  </div>
 </template>
 
 <script setup>
-import { showMessageError, showMessageOK } from '@/utils/dialog'
+import { showMessageError, showMessageInfo, showMessageOK } from '@/utils/dialog'
 import { httpPost } from '@/utils/http'
-import { ElMessage } from 'element-plus'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
-const props = defineProps({
-  show: Boolean,
-})
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('兑换码核销')
 const form = ref({
   code: '',
 })
@@ -45,7 +25,7 @@ const emits = defineEmits(['hide'])
 
 const save = () => {
   if (form.value.code === '') {
-    return ElMessage.error({ message: '请输入兑换码' })
+    return showMessageInfo('请输入兑换码')
   }
 
   httpPost('/api/redeem/verify', form.value)
@@ -57,10 +37,23 @@ const save = () => {
       showMessageError('兑换失败：' + e.message)
     })
 }
-
-const close = function () {
-  emits('hide', false)
-}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.form {
+  padding: 20px;
+
+  .form-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .dialog-footer {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
+</style>