app-AgricultureSmart/uniapp/subpkg/addAddress/addAddress.vue

<template>
  <view class="container">
    <view class="chooseAddress">
      <button class="choose-btn" @click="chooseLocation">
        <van-icon name="location-o" />
        选择收货地址
      </button>
      <view v-if="location" class="location-info">
        <text>{{ location.name }}</text>
        <text>{{ location.address }}</text>
      </view>
    </view>
    <view class="info">
      <view class="detailAddress">
        <input placeholder="详细地址,例如101室" v-model="detailAddress" />
      </view>
      <view class="tag">
        <radio-group @change="changeAddressTag">
          <label class="tag-label" v-for="tag in addressTags" :key="tag">
            <radio :value="tag" :checked="addressTag === tag" />
            {{ tag }}
          </label>
        </radio-group>
      </view>
      <view class="person-info">
        <input
            class="person-input"
            placeholder="请填写收货人的姓名"
            v-model="receiverName"
        />
        <radio-group class="gender" @change="changeGender">
          <label v-for="g in genders" :key="g">
            <radio :value="g" :checked="gender === g" />{{ g }}
          </label>
        </radio-group>
      </view>
      <view class="phoneNumber">
        <input placeholder="请填写收货手机号码" v-model="phoneNumber" />
      </view>
    </view>
    <view class="savaAddress">
      <button class="save-btn" @click="saveAddress">保存地址</button>
    </view>
  </view>
</template>

<script>
import { mapMutations ,mapGetters} from 'vuex'
export default {
  data() {
    return {
      detailAddress: '',
      addressTag: '家',
      addressTags: ['家', '公司', '学校', '公寓'],
      receiverName: '',
      phoneNumber: '',
      gender: '先生',
      genders: ['先生', '女士'],
      location: null
    };
  },
  methods: {
    ...mapMutations('m_addr', ['addAddress']),
    chooseLocation() {
      uni.chooseLocation({
        success: (res) => {
          this.location = res;
        }
      });
    },
    changeAddressTag(e) {
      this.addressTag = e.detail.value;
    },
    changeGender(e) {
      this.gender = e.detail.value;
    },

    saveAddress() {
      let data={
        detailAddress: this.detailAddress,
        addressTag: this.addressTag,
        receiverName: this.receiverName,
        phoneNumber: this.phoneNumber,
        gender: this.gender,
        location: this.location
      }
      this.addAddress(data)
      console.log('详细地址:', this.detailAddress);
      console.log('地址标签:', this.addressTag);
      console.log('收货人姓名:', this.receiverName);
      console.log('手机号码:', this.phoneNumber);
      console.log('性别:', this.gender);
      console.log('位置:', this.location);
      uni.navigateBack();

    },
    saveAndBack() {

      // 返回上一层页面
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
}

.chooseAddress {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .choose-btn {
    display: flex;
    align-items: center;
    background-color: #ff6600;
    color: #fff;
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;

    .van-icon-location-o {
      margin-right: 10rpx;
    }
  }

  .location-info {
    margin-top: 20rpx;
    color: #666;
    font-size: 26rpx;

    text {
      display: block;
    }
  }
}

.info {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .detailAddress,
  .phoneNumber {
    input {
      border: 1px solid #eee;
      border-radius: 5rpx;
      padding: 10rpx;
      margin-bottom: 20rpx;
    }
  }

  .tag {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20rpx;

    .tag-label {
      background-color: #f7f7f7;
      color: #666;
      padding: 5rpx 10rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
      border-radius: 5rpx;

      radio {
        transform: scale(0.8);
      }
    }
  }

  .person-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .person-input {
      flex: 1;
      border: 1px solid #eee;
      border-radius: 5rpx;
      padding: 10rpx;
    }

    .gender {
      display: flex;

      radio {
        transform: scale(0.8);
      }
    }
  }
}

.savaAddress {
  margin-top: 20rpx;

  .save-btn {
    background-color: #ff6600;
    color: #fff;
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
  }
}
</style>