REFACTOR：礼品功能重构

2025-10-24 01:31:50 +08:00
parent 705d64d238
commit d1bbea6e9b
8 changed files with 986 additions and 58 deletions
@@ -0,0 +1,213 @@
+<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>
+            <text class="calendar-icon"></text>
+          </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>]]>