recycle-front/pages/subcomponent/add.vue

<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="back" @tap="goBack">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text class="title">新建地址</text>
    </view>

    <!-- 表单内容 -->
    <view class="form-content">
      <!-- 寄件人信息卡片 -->
      <view class="form-card">
        <view class="card-title">寄件人信息</view>
        <view class="form-item">
          <text class="label">寄件人姓名</text>
          <input 
            class="input" 
            type="text" 
            v-model="formData.name"
            placeholder="请输入"
            placeholder-style="color: #999999;"
          />
        </view>
        <view class="form-item">
          <text class="label">寄件人电话</text>
          <input 
            class="input" 
            type="number" 
            v-model="formData.phone"
            placeholder="请输入"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>

      <!-- 寄件人地址卡片 -->
      <view class="form-card">
        <view class="card-title">寄件人信息</view>
        <view class="form-item">
          <text class="label">寄件地址</text>
          <input 
            class="input" 
            type="text" 
            v-model="formData.address"
            placeholder="请输入"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="bottom-btn" @tap="confirmAdd">确认</view>
  </view>
</template>

<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'

export default {
  mixins: [pullRefreshMixin],
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        address: ''
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.stopPullRefresh()
    },
    confirmAdd() {
      // 表单验证
      if (!this.formData.name.trim()) {
        return uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
      }
      if (!/^1\d{10}$/.test(this.formData.phone)) {
        return uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
      }
      if (!this.formData.address.trim()) {
        return uni.showToast({
          title: '请输入地址',
          icon: 'none'
        })
      }

      // 获取上一页实例并更新数据
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      if (prevPage) {
        // 添加新地址到地址列表
        prevPage.$vm.addressList.push({
          name: this.formData.name,
          phone: this.formData.phone,
          address: this.formData.address
        })
      }

      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  background: #fff;
  padding: 0 30rpx;

  .back {
    padding: 20rpx;
    margin-left: -20rpx;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
  }

  .right-btns {
    display: flex;
    align-items: center;
    gap: 30rpx;

    .more, .target {
      font-size: 40rpx;
      color: #333;
    }
  }
}

.form-content {
  padding: 20rpx;
}

.form-card {
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 30rpx;
  }

  .form-item {
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #f5f5f5;

    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }

    .input {
      font-size: 28rpx;
      color: #333;
      width: 100%;
	  
    }
  }
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #FFB74D;
  color: #fff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 50rpx;
}
</style>