taimed-international-app/pages/user/migrate/index.vue

<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>

    <wd-message-box />
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { t } from '@/utils/i18n'
import { migrateUserData } from '@/api/modules/user'
import { useMessage } from '@/uni_modules/wot-design-uni'

const message = useMessage()

// 表单引用
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) {
      message.confirm({
        title: t('global.tips'),
        msg: t('user.instruction2'),
      }).then(() => {
        message.confirm({
          title: t('global.tips'),
          msg: t('user.migrateWarning'),
        }).then(() => {
          submitMigrate()
        }).catch(() => {
          // 取消数据迁移
        })
      }).catch(() => {
        // 取消数据迁移
      })
    }
  })
  .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>