更新：增加数据迁移功能

2025-12-02 11:46:19 +08:00
parent d653575d27
commit 35e27753b8
7 changed files with 296 additions and 41 deletions
--- a/pages/user/migrate/index.vue
+++ b/pages/user/migrate/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <view class="page-wrap">
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('user.dataMigrate')"></nav-bar>
+
+    <view class="text-red-500 text-center mb-[20rpx]! font-bold">{{ $t('user.migrateWarning') }}</view>
+    
+    <!-- 主要内容区域 -->
+    <wd-form ref="migrateForm" :model="formData" :rules="rules" :label-width="120" class="migrate-card p-[10rpx]">
+      <wd-cell-group border>
+        <wd-input
+          v-model="formData.tel"
+          prop="tel"
+          clearable
+          :label="$t('user.oldAccount')"
+          :placeholder="$t('user.oldAccountPlaceholder')"
+        />
+        <wd-input
+          v-model="formData.code"
+          prop="code"
+          clearable
+          :label="$t('user.migrateCode')"
+          :placeholder="$t('user.migrateCodePlaceholder')"
+        />
+        <view class="pb-[20rpx] pt-[10rpx]">
+          <wd-button type="primary" size="medium" @click="handleSubmit" block>{{ $t('user.confirmMigrate') }}</wd-button>
+        </view>
+      </wd-cell-group>
+    </wd-form>
+
+    <!-- 迁移说明 -->
+    <view class="migrate-card p-[30rpx]">
+      <view class="instructions-title">{{ $t('user.migrateInstructions') }}</view>
+      
+      <view class="instructions-content">
+        <view class="instruction-item">
+          <text class="instruction-number">1.</text>
+          <text class="instruction-text">{{ $t('user.instruction1') }}</text>
+        </view>
+        
+        <view class="instruction-item">
+          <text class="instruction-number">2.</text>
+          <text class="instruction-text">{{ $t('user.instruction2') }}</text>
+        </view>
+        
+        <view class="instruction-item">
+          <text class="instruction-number">3.</text>
+          <text class="instruction-text">{{ $t('user.instruction3') }}</text>
+        </view>
+        
+        <view class="instruction-item">
+          <text class="instruction-number">4.</text>
+          <text class="instruction-text">{{ $t('user.instruction4') }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { t } from '@/utils/i18n'
+import { migrateUserData } from '@/api/modules/user'
+
+// 表单引用
+const migrateForm = ref()
+
+// 表单数据
+const formData = ref({
+  tel: '',
+  code: ''
+})
+
+// 表单验证规则
+const rules = ref({
+  tel: [
+    { required: true, message: t('common.pleaseInput') + t('user.oldAccountPlaceholder'), trigger: 'blur' }
+  ],
+  code: [
+    { required: true, message: t('common.pleaseInput') + t('user.migrateCodePlaceholder'), trigger: 'blur' }
+  ]
+})
+
+// 提交表单
+const handleSubmit = async () => {
+  migrateForm.value.validate().then(({ valid, errors }: any) => {
+    if (valid) {
+      uni.showModal({
+        title: t('global.tips'),
+        content: t('user.migrateWarning'),
+        success: (res: any) => {
+          if (res.confirm) {
+            submitMigrate()
+          }
+        }
+      })
+    }
+  })
+  .catch((error: any) => {
+    console.log(error)
+  })
+}
+// 处理迁移
+const submitMigrate = async () => {
+  await migrateUserData(formData.value)
+  uni.showToast({
+    title: t('user.migrateSuccess'),
+    icon: 'success'
+  })
+
+  // 清空表单
+  formData.value.tel = ''
+  formData.value.code = ''
+}
+</script>
+
+<style lang="scss" scoped>
+.page-wrap {
+  padding: 20rpx;
+  background-color: #F8F9FA;
+  min-height: 100vh;
+}
+
+.migrate-card {
+  background: #ffffff;
+  border-radius: 16rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.migrate-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
+  border-radius: 12rpx;
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: 500;
+  margin-top: 40rpx;
+  
+  &:not([disabled]):active {
+    opacity: 0.8;
+  }
+  
+  &[disabled] {
+    background: #cccccc;
+    color: #ffffff;
+  }
+}
+
+.instructions-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-bottom: 30rpx;
+}
+
+.instructions-content {
+  .instruction-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 20rpx;
+    line-height: 1.6;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  .instruction-number {
+    font-size: 28rpx;
+    color: #007aff;
+    font-weight: 600;
+    margin-right: 16rpx;
+    min-width: 40rpx;
+  }
+  
+  .instruction-text {
+    font-size: 28rpx;
+    color: #666666;
+    flex: 1;
+  }
+}
+</style>