Small_goose_Vue3/pages/mine/cancelAccount.vue

<template>
  <view class="cancel-account-container">
    <view class="header">账号注销</view>
    <view class="desc">注销账号将清空所有个人数据且无法恢复，是否确认注销？</view>
    <button class="submit-btn" type="warn" @click="submit">确认注销</button>
  </view>
</template>

<script>
export default {
  methods: {
    submit() {
      uni.showModal({
        title: '确认注销',
        content: '注销后所有数据将无法恢复，是否继续？',
        success: (res) => {
          if (res.confirm) {
            uni.request({
              url: 'http://localhost:9527/api/cancelAccount',
              method: 'POST',
              data: { uid: uni.getStorageSync('uid') },
              success: (res) => {
                if (res.statusCode === 200 && res.data.code === 200) {
                  uni.showToast({ title: '注销成功', icon: 'success' })
                  setTimeout(() => {
                    uni.clearStorageSync()
                    uni.reLaunch({ url: '/pages/index/index' })
                  }, 1000)
                } else {
                  uni.showToast({ title: res.data.message || '注销失败', icon: 'none' })
                }
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.cancel-account-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding: 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  background: #fff;
  padding: 32rpx 0;
  width: 100%;
}
.desc {
  font-size: 28rpx;
  color: #e74c3c;
  margin: 60rpx 0 40rpx 0;
  text-align: center;
  padding: 0 32rpx;
}
.submit-btn {
  width: 80%;
  background: #e74c3c;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  margin-top: 16rpx;
  height: 80rpx;
}
</style>