bindbox-mini/pages-user/address/submit.vue

<template>
  <view class="container">
    <view class="header glass-card">
      <view class="title">填写收货信息</view>
      <view class="desc">好友正在为您申请奖品发货，请填写您的准确收货地址</view>
    </view>

    <view class="form glass-card">
      <view class="form-item">
        <text class="label">收货人</text>
        <input v-model="form.name" placeholder="请输入姓名" class="input" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入手机号" class="input" />
      </view>
      <view class="form-item">
        <text class="label">地区</text>
        <picker mode="region" @change="onRegionChange" class="input">
          <view class="picker-value" v-if="form.province">
            {{ form.province }} {{ form.city }} {{ form.district }}
          </view>
          <view class="picker-placeholder" v-else>请选择省市区</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <textarea v-model="form.address" placeholder="街道、楼牌号等" class="textarea" />
      </view>
    </view>

    <view class="footer-btn">
      <button class="submit-btn" :loading="loading" @tap="onSubmit">确认提交</button>
    </view>
    
    <view class="tip-section">
      <text class="tip-text">* 请确保信息准确，提交后无法修改</text>
      <text class="tip-text" v-if="isLoggedIn">* 您已登录，提交后该奖品将转移至您的账户下</text>
      <text class="tip-text" v-else>* 您当前未登录，提交后资产仍归属于原发起人</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { request } from '@/utils/request'

const token = ref('')
const loading = ref(false)
const isLoggedIn = ref(!!uni.getStorageSync('token'))

const form = reactive({
  name: '',
  mobile: '',
  province: '',
  city: '',
  district: '',
  address: ''
})

onLoad((options) => {
  if (options.token) {
    token.value = options.token
  } else {
    uni.showToast({ title: '参数错误', icon: 'none' })
  }
})

function onRegionChange(e) {
  const [p, c, d] = e.detail.value
  form.province = p
  form.city = c
  form.district = d
}

async function onSubmit() {
  if (!token.value) return
  if (!form.name || !form.mobile || !form.province || !form.address) {
    uni.showToast({ title: '请完善收货信息', icon: 'none' })
    return
  }
  if (!/^1\d{10}$/.test(form.mobile)) {
    uni.showToast({ title: '手机号格式错误', icon: 'none' })
    return
  }

  loading.value = true
  try {
    const res = await request({
      url: '/api/app/address-share/submit',
      method: 'POST',
      data: {
        share_token: token.value,
        ...form
      },
      // 手动带上 token，因为公共 request 可能不带
      header: {
        'Authorization': uni.getStorageSync('token') || ''
      }
    })

    uni.showModal({
      title: '提交成功',
      content: '收货信息已提交，请等待发货。' + (isLoggedIn.value ? '资产已转移至您的盒柜。' : ''),
      showCancel: false,
      success: () => {
        uni.switchTab({ url: '/pages/index/index' })
      }
    })
  } catch (e) {
    uni.showToast({ title: e.message || '提交失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: $bg-page;
}

.header {
  padding: 40rpx;
  margin-bottom: 30rpx;
  animation: fadeInDown 0.5s ease-out;
  
  .title {
    font-size: 36rpx;
    font-weight: 700;
    color: $text-main;
    margin-bottom: 16rpx;
  }
  
  .desc {
    font-size: 26rpx;
    color: $text-sub;
    line-height: 1.5;
  }
}

.form {
  padding: 20rpx 40rpx;
  animation: fadeInUp 0.5s ease-out 0.1s backwards;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid rgba(0,0,0,0.05);
  
  &:last-child { border-bottom: none; }
  
  .label {
    display: block;
    font-size: 28rpx;
    color: $text-main;
    margin-bottom: 20rpx;
    font-weight: 600;
  }
  
  .input, .textarea {
    width: 100%;
    font-size: 28rpx;
    color: $text-main;
  }
  
  .textarea {
    height: 160rpx;
    padding: 0;
  }
  
  .picker-placeholder { color: $text-tertiary; }
}

.footer-btn {
  margin-top: 60rpx;
  padding: 0 40rpx;
}

.submit-btn {
  height: 88rpx;
  background: $gradient-brand;
  color: #fff;
  border-radius: $radius-round;
  font-size: 32rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: $shadow-warm;
  
  &:active { transform: scale(0.98); opacity: 0.9; }
}

.tip-section {
  margin-top: 40rpx;
  padding: 0 40rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.tip-text {
  font-size: 22rpx;
  color: $text-tertiary;
}
</style>