cfc/cfc-frontend/pages/shop/address-edit/address-edit.vue

<template>
  <view class="container">
    <view class="form-wrap">
      <!-- 收货人 -->
      <view class="form-row">
        <text class="form-label">收货人</text>
        <input
          class="form-input"
          v-model="form.receiverName"
          placeholder="请输入收货人姓名"
          placeholder-style="color: #ccc; font-size: 28rpx;"
        />
      </view>

      <!-- 手机号 -->
      <view class="form-row">
        <text class="form-label">手机号</text>
        <input
          class="form-input"
          v-model="form.phone"
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
          placeholder-style="color: #ccc; font-size: 28rpx;"
        />
      </view>

      <!-- 区域选择 (省市区三级联动) -->
      <view class="form-row address-row" @click="openRegionPicker">
        <text class="form-label">所在地区</text>
        <view class="address-value-wrap">
          <text v-if="form.fullAddress" class="address-value">{{ form.fullAddress }}</text>
          <text v-else class="address-placeholder">请选择省市区</text>
          <text class="address-arrow">›</text>
        </view>
      </view>

      <!-- 详细地址 -->
      <view class="form-row">
        <text class="form-label">详细地址</text>
        <input
          class="form-input"
          v-model="form.street"
          placeholder="请输入详细地址"
          placeholder-style="color: #ccc; font-size: 28rpx;"
        />
      </view>

      <!-- 设为默认 -->
      <view class="form-row switch-row">
        <text class="form-label">设为默认地址</text>
        <view
          :class="['switch', form.isDefault === 1 ? 'switch-on' : '']"
          @click="toggleDefault"
        >
          <view :class="['switch-knob', form.isDefault === 1 ? 'knob-on' : '']"></view>
        </view>
      </view>

      <!-- 区域选择弹窗 -->
      <view class="region-mask" v-if="showRegionPicker" @click="cancelRegion">
        <view class="region-picker" @click.stop>
          <view class="region-header">
            <text class="region-header-btn" @click="cancelRegion">取消</text>
            <text class="region-header-title">选择地区</text>
            <text class="region-header-btn region-confirm" @click="confirmRegion">确定</text>
          </view>
          <view class="region-breadcrumb">
            <text
              v-for="(name, i) in regionBreadcrumb"
              :key="i"
              :class="['crumb-item', i === currentRegionLevel ? 'crumb-active' : '']"
              @click="jumpRegionLevel(i)"
            >{{ name || '请选择' }}</text>
            <text class="crumb-arrow" v-if="currentRegionLevel < 2">›</text>
          </view>
          <scroll-view class="region-list" scroll-y>
            <view
              v-for="(item, idx) in currentRegionItems"
              :key="idx"
              :class="['region-item', isRegionSelected(item) ? 'region-item-selected' : '']"
              @click="selectRegionItem(item)"
            >
              <text class="region-item-text">{{ getRegionName(item) }}</text>
              <text class="region-item-check" v-if="isRegionSelected(item)">✓</text>
            </view>
            <view v-if="regionLoading" class="region-loading">
              <text>加载中...</text>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- Save Button -->
      <button
        :class="['save-btn', saving ? 'disabled' : '']"
        :disabled="saving"
        @click="onSave"
      >
        {{ saving ? '保存中...' : '保存地址' }}
      </button>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      addressId: null,
      saving: false,
      form: {
        receiverName: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        street: '',
        isDefault: 0,
        fullAddress: ''
      },
      // 区域选择弹窗
      showRegionPicker: false,
      currentRegionLevel: 0, // 0=province, 1=city, 2=district
      regionLoading: false,
      provinceList: [],
      cityList: [],
      districtList: [],
      tempProvince: null,
      tempCity: null,
      tempDistrict: null
    }
  },
  onLoad(options) {
    if (options.addressId) {
      this.addressId = parseInt(options.addressId)
      uni.setNavigationBarTitle({ title: '编辑地址' })
      this.loadAddress()
    } else {
      uni.setNavigationBarTitle({ title: '新增地址' })
    }
  },
  computed: {
    regionBreadcrumb() {
      var names = []
      names.push(this.tempProvince ? this.getRegionName(this.tempProvince) : '省份')
      names.push(this.tempCity ? this.getRegionName(this.tempCity) : '城市')
      names.push(this.tempDistrict ? this.getRegionName(this.tempDistrict) : '区县')
      return names
    },
    currentRegionItems() {
      if (this.currentRegionLevel === 0) return this.provinceList
      if (this.currentRegionLevel === 1) return this.cityList
      if (this.currentRegionLevel === 2) return this.districtList
      return []
    }
  },
  methods: {
    loadAddress() {
      var that = this
      uni.request({
        url: config.api('/api/user/address/get'),
        method: 'POST',
        data: { id: this.addressId },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          if (res.data && res.data.code === 200) {
            var data = res.data.data || {}
            that.form.receiverName = data.receiverName || ''
            that.form.phone = data.phone || ''
            that.form.province = data.province || ''
            that.form.city = data.city || ''
            that.form.district = data.district || ''
            that.form.street = data.street || ''
            that.form.isDefault = data.isDefault || 0
            that.form.fullAddress = (data.province || '') + (data.city || '') + (data.district || '') + (data.street || '')
          }
        }
      })
    },
    // ===== 区域选择弹窗 =====
    openRegionPicker() {
      this.tempProvince = this.form.province ? { name: this.form.province, id: null } : null
      this.tempCity = this.form.city ? { name: this.form.city, id: null } : null
      this.tempDistrict = this.form.district ? { name: this.form.district, id: null } : null
      this.currentRegionLevel = 0
      this.showRegionPicker = true
      this.loadRegionProvinces()
    },
    loadRegionProvinces() {
      var that = this
      that.regionLoading = true
      uni.request({
        url: config.api('/api/region/provinces'),
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.regionLoading = false
          if (res.data && res.data.code === 200) {
            that.provinceList = res.data.data || []
          }
        },
        fail: function() {
          that.regionLoading = false
        }
      })
    },
    selectRegionItem(item) {
      if (this.currentRegionLevel === 0) {
        this.tempProvince = item
        this.tempCity = null
        this.tempDistrict = null
        this.cityList = []
        this.districtList = []
        this.currentRegionLevel = 1
        this.loadRegionCities(this.getRegionId(item))
      } else if (this.currentRegionLevel === 1) {
        this.tempCity = item
        this.tempDistrict = null
        this.districtList = []
        this.currentRegionLevel = 2
        this.loadRegionDistricts(this.getRegionId(item))
      } else if (this.currentRegionLevel === 2) {
        this.tempDistrict = item
        this.confirmRegion()
      }
    },
    loadRegionCities(parentId) {
      if (!parentId) return
      var that = this
      that.regionLoading = true
      uni.request({
        url: config.api('/api/region/cities'),
        method: 'POST',
        data: { parentId: parentId },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.regionLoading = false
          if (res.data && res.data.code === 200) {
            that.cityList = res.data.data || []
          }
        },
        fail: function() {
          that.regionLoading = false
        }
      })
    },
    loadRegionDistricts(parentId) {
      if (!parentId) return
      var that = this
      that.regionLoading = true
      uni.request({
        url: config.api('/api/region/districts'),
        method: 'POST',
        data: { parentId: parentId },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.regionLoading = false
          if (res.data && res.data.code === 200) {
            that.districtList = res.data.data || []
          }
        },
        fail: function() {
          that.regionLoading = false
        }
      })
    },
    confirmRegion() {
      if (this.tempProvince) {
        this.form.province = this.getRegionName(this.tempProvince)
      }
      if (this.tempCity) {
        this.form.city = this.getRegionName(this.tempCity)
      }
      if (this.tempDistrict) {
        this.form.district = this.getRegionName(this.tempDistrict)
      }
      this.updateFullAddress()
      this.showRegionPicker = false
    },
    cancelRegion() {
      this.showRegionPicker = false
    },
    jumpRegionLevel(level) {
      if (level < this.currentRegionLevel) {
        this.currentRegionLevel = level
      }
    },
    getRegionName(item) {
      return item && (item.name || item.province || item.city || item.district || '')
    },
    getRegionId(item) {
      return item && (item.id || item.code)
    },
    isRegionSelected(item) {
      var name = this.getRegionName(item)
      if (this.currentRegionLevel === 0) return this.tempProvince && this.getRegionName(this.tempProvince) === name
      if (this.currentRegionLevel === 1) return this.tempCity && this.getRegionName(this.tempCity) === name
      if (this.currentRegionLevel === 2) return this.tempDistrict && this.getRegionName(this.tempDistrict) === name
      return false
    },
    updateFullAddress() {
      this.form.fullAddress = (this.form.province || '') + (this.form.city || '') + (this.form.district || '') + (this.form.street || '')
    },
    toggleDefault() {
      this.form.isDefault = this.form.isDefault === 1 ? 0 : 1
    },
    onSave() {
      // Validate
      if (!this.form.receiverName.trim()) {
        uni.showToast({ title: '请输入收货人姓名', icon: 'none' })
        return
      }
      if (!this.form.phone.trim() || this.form.phone.trim().length !== 11) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
      if (!this.form.province && !this.form.fullAddress) {
        uni.showToast({ title: '请选择所在地区', icon: 'none' })
        return
      }

      this.saving = true
      var data = {
        receiverName: this.form.receiverName.trim(),
        phone: this.form.phone.trim(),
        province: this.form.province,
        city: this.form.city,
        district: this.form.district,
        street: this.form.street,
        isDefault: this.form.isDefault
      }
      if (this.addressId) {
        data.id = this.addressId
      }

      var that = this
      uni.request({
        url: this.addressId
          ? config.api('/api/user/address/update')
          : config.api('/api/user/address/create'),
        method: 'POST',
        data: data,
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.saving = false
          if (res.data && res.data.code === 200) {
            uni.showToast({ title: '保存成功', icon: 'success' })
            setTimeout(function() {
              uni.navigateBack()
            }, 1500)
          } else {
            uni.showToast({ title: res.data.message || '保存失败', icon: 'none' })
          }
        },
        fail: function() {
          that.saving = false
          uni.showToast({ title: '网络请求失败', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
}
.form-wrap {
  padding: 20rpx;
}
.form-row {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}
.form-label {
  font-size: 28rpx;
  color: #333;
  width: 160rpx;
  flex-shrink: 0;
}
.form-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;
  height: 48rpx;
  line-height: 48rpx;
}
.address-row {
  cursor: pointer;
}
.address-value-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.address-value {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address-placeholder {
  font-size: 28rpx;
  color: #ccc;
  text-align: right;
}
.address-arrow {
  font-size: 36rpx;
  color: #ccc;
  margin-left: 8rpx;
}
.switch-row {
  justify-content: space-between;
}
.switch {
  width: 88rpx;
  height: 48rpx;
  background: #ddd;
  border-radius: 24rpx;
  position: relative;
  transition: background 0.3s;
  padding: 2rpx;
}
.switch.switch-on {
  background: #F97316;
}
.switch-knob {
  width: 44rpx;
  height: 44rpx;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 2rpx;
  top: 2rpx;
  transition: left 0.3s;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
}
.switch-knob.knob-on {
  left: 42rpx;
}
.save-btn {
  margin-top: 40rpx;
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 44rpx;
  border: none;
  text-align: center;
}
.save-btn::after {
  border: none;
}
.save-btn.disabled {
  background: #ddd;
  color: #999;
}

/* ===== 区域选择弹窗 ===== */
.region-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}
.region-picker {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.region-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.region-header-btn {
  font-size: 28rpx;
  color: #999;
}
.region-confirm {
  color: #F97316;
  font-weight: bold;
}
.region-header-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.region-breadcrumb {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.crumb-item {
  font-size: 26rpx;
  color: #999;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
}
.crumb-item.crumb-active {
  color: #F97316;
  font-weight: bold;
}
.crumb-arrow {
  font-size: 24rpx;
  color: #ccc;
  margin: 0 8rpx;
}
.region-list {
  max-height: 50vh;
  overflow-y: auto;
}
.region-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.region-item:active {
  background: #FFF7ED;
}
.region-item-text {
  font-size: 28rpx;
  color: #333;
}
.region-item-check {
  font-size: 28rpx;
  color: #F97316;
  font-weight: bold;
}
.region-item-selected {
  background: #FFF7ED;
}
.region-item-selected .region-item-text {
  color: #F97316;
  font-weight: bold;
}
.region-loading {
  padding: 40rpx;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}
</style>