web-store-retail-h5/pages/address/index.vue

<template>
  <view class="main">
    <view class="contents">
      <u-form :model="addressForm" labelWidth="auto" ref="uForm">
        <view class="view-class">
          <u-form-item label="收货人" label-width="100px" prop="recName">
            <u-input
              :maxlength="40"
              v-model.trim="addressForm.recName"
              placeholder-class="place-class"
              class="border-color"
              placeholder="请输入收货人姓名"
            />
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item label="联系方式" label-width="100px" prop="recPhone">
            <u-input
              v-if="pkCountry == 1"
              v-model.trim="addressForm.recPhone"
              placeholder-class="place-class"
              :maxlength="11"
              class="border-color"
              type="number"
              placeholder="请输入联系方式"
            />
            <u-input
              v-else
              v-model.trim="addressForm.recPhone"
              placeholder-class="place-class"
              :maxlength="30"
              class="border-color"
              placeholder="请输入联系方式"
            />
          </u-form-item>
        </view>
        <view class="view-class" @click="getDiqu">
          <u-form-item label="收货地址" label-width="100px" prop="address">
            <view
              v-if="address"
              style="font-size: 28rpx; color: #333; margin-left: 20rpx"
              >{{ address }}</view
            >
            <view
              style="
                margin-left: 20rpx;
                font-size: 28rpx;
                color: rgb(192, 196, 204);
              "
              v-else
              >请选择收货地址</view
            >
          </u-form-item>
          <view class="drop">
            <image src="../../static/images/drop.png"></image>
          </view>
        </view>
        <view class="view-class">
          <u-form-item
            label="详细地址"
            class="label-style"
            label-width="100px"
            prop="recAddress"
          >
            <u-textarea
              v-model.trim="addressForm.recAddress"
              placeholder-class="place-class"
              class="border-color"
              maxlength="200"
              placeholder="请输入详细地址"
            />
          </u-form-item>
        </view>
        <view class="view-class flex-s">
          <view> 设为默认地址 </view>
          <view @click="checkTap">
            <view class="check" v-if="addressForm.isDefault == 0">
              <view></view>
            </view>
            <view class="check" v-else>
              <image src="../../static/images/check.png"></image>
            </view>
          </view>
        </view>
      </u-form>
    </view>
    <v-address
      ref="address"
      @getAddressData="AddressData"
      :defaultCode="defaultCode"
      @addressData="addressData"
    ></v-address>
    <u-button
      :disabled="
        !addressForm.recName || !addressForm.recPhone || !addressForm.recAddress
      "
      type="success"
      shape="circle"
      class="btn"
      @click="submit"
      color="#005BAC"
      :loading="loading"
    >
      确定
    </u-button>
    <view style="height: 20rpx"></view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import address from '@/components/address.vue'
import store from '@/store'
export default {
  data() {
    return {
      userInfo: '',
      pkCountry: '',
      check: false,
      address: '',
      defaultCode: [],
      urls: '/member/api/maker-space/update-file',
      addressForm: {
        recName: '',
        recPhone: '',
        recProvince: '',
        recCity: '',
        recCounty: '',
        recAddress: '',
        isDefault: 0,
        pkId: '',
      },
      loading: false,
      rules: {
        recName: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '姓名不能为空',
          },
        ],
        recAddress: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '详细地址不能为空',
          },
        ],
        recProvince: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '地址不能为空',

            trigger: ['change'],
          },
        ],
        recPhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: '手机号格式不正确',
            trigger: ['blur'],
          },
        ],
      },
    }
  },
  onLoad(option) {
    if (option.pkId) {
      this.getAddress(option.pkId)
      uni.setNavigationBarTitle({
        title: '修改收货地址',
      })
    }
    this.pkCountry = uni.getStorageSync('pkCountry')
    this.userInfo = uni.getStorageSync('User')
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  components: {
    'v-address': address,
  },
  methods: {
    AddressData(name) {
      this.address = name
    },
    submit() {
      this.$refs.uForm.validate().then(res => {
        this.loading = true
        api
          .saveAddress(this.addressForm)
          .then(res => {
            if (res.code == '200') {
              const toast = uni.showToast({
                title: res.msg,
                icon: 'none',
                complete() {
                  setTimeout(() => {
                    this.loading = false
                    uni.navigateBack(1)
                    toast.hideToast()
                  }, 500)
                },
              })
            } else {
              this.loading = false
            }
          })
          .catch(() => {
            this.loading = false
          })
      })
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    addressData(diqu, obj) {
      this.address = diqu
      this.addressForm.recProvince = obj.province
      this.addressForm.recCity = obj.city
      this.addressForm.recCounty = obj.county
      this.$forceUpdate()
      // this.getPostAge()
      // this.queryAdressPostage()
    },
    checkTap() {
      if (this.addressForm.isDefault == 0) {
        this.addressForm.isDefault = 1
      } else {
        this.addressForm.isDefault = 0
      }
    },
    getAddressData(e) {
      console.error(e)
    },
    getAddress(id) {
      api
        .getAddress(id)
        .then(res => {
          if (res) {
            this.addressForm = {
              recName: res.data.recName,
              recPhone: res.data.recPhone,
              recProvince: res.data.recProvince,
              recCity: res.data.recCity,
              recCounty: res.data.recCounty || '',
              pkId: res.data.pkId,
              recAddress: res.data.recAddress,
              isDefault: res.data.isDefault,
            }
            this.defaultCode = [
              res.data.recProvince,
              res.data.recCity,
              res.data.recCounty || '',
            ]
          }
        })
        .catch(error => {
          reject(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
:v-deep .u-form-item__body__right__message {
  margin-left: 215rpx !important;
  padding-bottom: 20rpx;
}
.drop {
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 0;
    top: 30rpx;
  }
}
.check {
  position: relative;
  view {
    width: 36rpx;
    height: 36rpx;
    border: 1rpx solid #000;
    border-radius: 50%;
    margin-top: 25rpx;
  }
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 0rpx;
    top: 25rpx;
    // margin-top: 20rpx;
  }
}
.flex-s {
  justify-content: space-between;
  display: flex;
  height: 90rpx;
  line-height: 90rpx;
}
.label-style {
  display: block !important;
}
:v-deep .label-style .u-form-item__body__left {
  display: block !important;
  margin-top: 20rpx;
}
.uni-textarea {
  height: 100rpx;
}
.view-class {
  border-bottom: 1rpx solid #eee;
  margin: 0 30rpx;
  position: relative;
}
.border-color {
  border: none;
}
page {
  background-color: #f2f2f2;
}
.contents {
  background-color: #fff;
}
.btn {
  height: 92rpx;
  line-height: 92rpx;
  font-size: 30rpx;
  margin: 40rpx auto;
  width: 690rpx;
}
</style>