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>

      <!-- 省市区街道 (4级地址选择) -->
      <view class="form-row address-row" @click="showAddressPicker">
        <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>

      <!-- 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,
      userId: null,
      saving: false,
      form: {
        receiverName: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        street: '',
        isDefault: 0,
        fullAddress: ''
      }
    }
  },
  onLoad(options) {
    this.userId = uni.getStorageSync('userId')
    if (options.addressId) {
      this.addressId = parseInt(options.addressId)
      uni.setNavigationBarTitle({ title: '编辑地址' })
      this.loadAddress()
    } else {
      uni.setNavigationBarTitle({ title: '新增地址' })
    }
  },
  methods: {
    loadAddress() {
      var that = this
      uni.request({
        url: config.danshop('/danshop/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 || '')
          }
        }
      })
    },
    showAddressPicker() {
      // Use multi-column picker for region selection
      var that = this
      // Load provinces first
      uni.showLoading({ title: '加载地址...' })
      uni.request({
        url: config.danshop('/danshop/region/provinces'),
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          uni.hideLoading()
          if (res.data && res.data.code === 200) {
            var provinces = res.data.data || []
            var provinceList = provinces.map(function(p) { return p.name || p.province })
            uni.showActionSheet({
              itemList: provinceList,
              success: function(pRes) {
                var selectedProvince = provinces[pRes.tapIndex]
                that.form.province = selectedProvince.name || selectedProvince.province
                var provinceId = selectedProvince.id || selectedProvince.code
                that.loadCities(provinceId)
              }
            })
          } else {
            // Fallback: simple text input for full address
            that.showSimpleAddressInput()
          }
        },
        fail: function() {
          uni.hideLoading()
          that.showSimpleAddressInput()
        }
      })
    },
    loadCities(provinceId) {
      var that = this
      uni.showLoading({ title: '加载城市...' })
      uni.request({
        url: config.danshop('/danshop/region/cities'),
        method: 'POST',
        data: { parentId: provinceId },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          uni.hideLoading()
          if (res.data && res.data.code === 200) {
            var cities = res.data.data || []
            var cityList = cities.map(function(c) { return c.name || c.city })
            uni.showActionSheet({
              itemList: cityList,
              success: function(cRes) {
                var selectedCity = cities[cRes.tapIndex]
                that.form.city = selectedCity.name || selectedCity.city
                var cityId = selectedCity.id || selectedCity.code
                that.loadDistricts(cityId)
              }
            })
          }
        },
        fail: function() {
          uni.hideLoading()
        }
      })
    },
    loadDistricts(cityId) {
      var that = this
      uni.showLoading({ title: '加载区县...' })
      uni.request({
        url: config.danshop('/danshop/region/districts'),
        method: 'POST',
        data: { parentId: cityId },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          uni.hideLoading()
          if (res.data && res.data.code === 200) {
            var districts = res.data.data || []
            var districtList = districts.map(function(d) { return d.name || d.district })
            uni.showActionSheet({
              itemList: districtList,
              success: function(dRes) {
                var selectedDistrict = districts[dRes.tapIndex]
                that.form.district = selectedDistrict.name || selectedDistrict.district
                that.updateFullAddress()
              }
            })
          }
        },
        fail: function() {
          uni.hideLoading()
        }
      })
    },
    showSimpleAddressInput() {
      var that = this
      uni.showModal({
        title: '请输入地址',
        content: '请输入省市区街道信息',
        editable: true,
        placeholderText: '如: 北京市朝阳区XX街道',
        success: function(res) {
          if (res.confirm && res.content) {
            that.form.fullAddress = res.content
            that.form.province = res.content
          }
        }
      })
    },
    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 = {
        userId: this.userId,
        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: config.danshop('/danshop/address/save'),
        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;
}
</style>