xdd-uniapp-new/pkg_user/views/gift/components/GiftAddressForm.vue

<template>
  <u-popup :show="show" @close="close" mode="center" round="16" closeable>
    <view class="gift-address-form">
      <view class="form-title">填写您的信息</view>
      
      <view class="form-content">
        <view class="form-item">
          <text class="label">姓名：</text>
          <input 
            type="text" 
            v-model="form.realName" 
            placeholder="请填写姓名"
            class="input"
          />
        </view>
        
        <view class="form-item">
          <text class="label">联系电话：</text>
          <input 
            type="number" 
            v-model="form.phone" 
            placeholder="请填写联系电话"
            maxlength="11"
            class="input"
          />
        </view>
        
        <view class="form-item">
          <text class="label">入住时间：</text>
          <view class="date-picker" @click="showDatePicker = true">
            <text v-if="form.checkInDate && form.checkOutDate">
              {{ form.checkInDate }} 至 {{ form.checkOutDate }}
            </text>
            <text v-else class="placeholder">请选择入住时间</text>
            <u-icon name="calendar" size="28"></u-icon>
          </view>
        </view>
      </view>
      <date-range-picker
        v-model="dateRange"
        :show="showDatePicker"
        :travelGroupProductId="mid"
        :minBookingDays="minBookingDays"
        @update:show="showDatePicker = false"
        @input="handleDateRangeChange" 
      />

      <view class="form-footer">
        <button class="submit-btn" @click="submitForm">点击确定</button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import DateRangePicker from '@/components/DateRangePicker/DateRangePicker.vue'

export default {
  name: 'GiftAddressForm',
  
  components: {
    DateRangePicker
  },

  props: {
    show: {
      type: Boolean,
      default: false
    },
    unavailableDates: {
      type: Array,
      default: () => []
    },
    mid: {
      type: String,
      default: ''
    },
    minBookingDays: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      form: {
        realName: '',
        phone: '',
        checkInDate: '',
        checkOutDate: ''
      },
      showDatePicker: false,
      dateRange: [null, null]
    }
  },

  methods: {
    close() {
      this.$emit('close')
      this.showDatePicker = false
    },

    handleDateRangeChange(dates) {
      if (dates && dates.length === 2) {
        [this.form.checkInDate, this.form.checkOutDate] = dates
      }
    },

    submitForm() {
      if (!this.form.realName) {
        uni.showToast({
          title: '请填写姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.form.phone || !/^1\d{10}$/.test(this.form.phone)) {
        uni.showToast({
          title: '请填写正确的手机号',
          icon: 'none'
        })
        return
      }
      
      if (!this.form.checkInDate || !this.form.checkOutDate) {
        uni.showToast({
          title: '请选择入住时间',
          icon: 'none'
        })
        return
      }

      this.$emit('submit', this.form)
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.gift-address-form {
  width: 650rpx;
  background: #FFFFFF;
  border-radius: 32rpx;
  padding: 40rpx;
  box-sizing: border-box;
  
  .form-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }
  
  .form-content {
    .form-item {
      margin-bottom: 30rpx;
      
      .label {
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .input {
        width: 100%;
        height: 80rpx;
        background: #F8F8F8;
        border-radius: 12rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
      }
      
      .date-picker {
        height: 80rpx;
        background: #F8F8F8;
        border-radius: 12rpx;
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .placeholder {
          color: #999999;
          font-size: 28rpx;
        }
        
        .calendar-icon {
          font-size: 32rpx;
        }
      }
    }
  }
  
  .form-footer {
    margin-top: 40rpx;
    
    .submit-btn {
      width: 100%;
      height: 88rpx;
      background: #C52733;
      border-radius: 44rpx;
      color: #FFFFFF;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>]]>