fohow_wx/src/views/user/address/Detail.vue

<template>
  <div class="eait-bg">
    <div class="eait-list">
      <div class="list-item">
        <div class="item-title">收货人</div>
        <div class="item-text">
          <van-field type="text" v-model="realname" placeholder="请输入收货人姓名" />
        </div>
        <!-- <div class="item-text" v-if="show">呸呸呸</div> -->
        <div class="clear"></div>
      </div>
      <div class="list-item">
        <div class="item-title">手机号</div>
        <div class="item-text">
          <van-field type="tel" v-model="tel" placeholder="请输入收货人手机号" />
        </div>
        <!-- <div class="item-text" v-if="show">呸呸呸</div> -->
        <div class="clear"></div>
      </div>
      <div class="list-item">
        <div class="item-title">选择地区</div>
        <div @click="clickcity">
          <div class="item-text" :style="cityname === '请选择收货人地区'? 'color: #bbb;': 'color: #4c4c4c;'">{{cityname}}</div>
            <!-- <van-field type="text" readonly v-model="address" placeholder="请选择收货人地区" /> -->
          <img src="@/assets/img/icon.png" class="item-icon" alt="">
          <!-- <div class="item-text" v-if="show">呸呸呸</div> -->
          <div class="clear">
          </div>
        </div>
      </div>
      <div class="list-item">
        <div class="item-title">详细地址</div>
        <div class="item-text">
          <van-field type="text" v-model="address1" placeholder="如街道、门牌号、小区、乡镇、村等" />
        </div>
        <!-- <div class="item-text" v-if="show">呸呸呸</div> -->
        <div class="clear"></div>
      </div>
      <div class="list-item">
        <div v-if="id">
          <van-switch @input="onInput()" :value="state === 0 ? checked : !checked" size="0.4rem" active-color="#28cd5e" class="change-btn" inactive-color="#cccccc" />
          <div v-if="!checked" class="change-text">设为默认</div>
          <div v-if="checked" class="change-text1">已设为默认</div>
        </div>
        <div v-if="!id">
          <van-switch @input="onInput()" :value="checked" size="0.4rem" active-color="#28cd5e" class="change-btn" inactive-color="#cccccc" />
          <div v-if="!checked" class="change-text">设为默认</div>
          <div v-if="checked" class="change-text1">已设为默认</div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <Btn :title="titlename" @titleclick="issave" />
    <van-popup v-model="cityshow" position="bottom" :style="{ height: '50%', position: 'absolute' }" >
      <van-area :area-list="areaList1" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
import Vue from 'vue'
import { Switch, Toast } from 'vant'
import areaList from '@/common/city'
import validator from '@/common/validator'
import Btn from '@/components/Btn.vue'
export default {
  name: 'userAddressEdit',
  data () {
    return {
      show: false,
      realname: '',
      tel: '',
      address: '',
      address1: '',
      cityshow: false,
      cityname: '请选择收货人地区',
      prov: '',
      city: '',
      area: '',
      titlename: '保存',
      detail: {},
      state: false,
      checked: false,
      id: 0
    }
  },
  computed: {},
  methods: {
    validate () {
      let msg
      if (!validator.required(this.realname)) {
        msg = '姓名不能为空'
      } else if (!validator.required(this.tel)) {
        msg = '手机号码不能为空'
      } else if (!validator.telphone(this.tel)) {
        msg = '手机号码格式不正确'
      } else if (!validator.required(this.prov)) {
        msg = '省市区不能为空'
      } else if (!validator.required(this.address1)) {
        msg = '详细地址不能为空'
      }
      return { isOk: !msg, msg }
    },
    issave () {
      let { isOk, msg } = this.validate()
      if (isOk) {
        this.save()
      } else {
        Toast({
          message: msg,
          duration: 2000
        })
      }
    },
    onInput () {
      this.checked = !this.checked
    },
    getdetail () {
      this.$get({
        url: `v1/address/${Number(this.$route.query.id)}`,
        data: {
        }
      }).then((res) => {
        this.detail = res
        this.realname = res.contact
        this.tel = res.tel
        this.prov = res.province
        this.city = res.city
        this.area = res.district
        this.cityname = res.province + ' ' + res.city + ' ' + res.district
        this.address1 = res.address
        this.state = res.state
      })
    },
    save () {
      if (this.checked === false) {
        var ischeacked = 0
      } else {
        ischeacked = 1
      }
      if (this.id) {
        this.$put({
          url: 'v1/address/' + Number(this.id),
          data: {
            province: this.prov,
            city: this.city,
            district: this.area,
            address: this.address1,
            tel: this.tel,
            contact: this.realname,
            // state: ischeacked,
            set_default: ischeacked
            // address_id: Number(this.id)
          }
        }).then((res) => {
          console.log(res)
          Toast('保存成功')
          this.$router.back()
        })
      } else {
        if (this.$route.query.one && ischeacked === 0) {
          Toast({
            message: '请把新增的首个地址设为默认地址',
            duration: 2000
          })
        } else {
          this.$post({
            url: 'v1/address',
            data: {
              province: this.prov,
              city: this.city,
              district: this.area,
              address: this.address1,
              tel: this.tel,
              contact: this.realname,
              set_default: ischeacked
              // address_id: Number(this.$route.params.id)
            }
          }).then((res) => {
            console.log(res)
            Toast('保存成功')
            // this.$router.push({ path: `/user/address/list` })
            this.$router.back()
          })
        }
      }
    },
    clickcity () {
      this.cityshow = true
    },
    onCancel () {
      this.cityshow = false
    },
    onConfirm (e) {
      var citydata = e
      this.cityname = citydata[0].name + ' ' + citydata[1].name + ' ' + citydata[2].name
      this.prov = citydata[0].name
      this.city = citydata[1].name
      this.area = citydata[2].name
      this.cityshow = false
    }
  },
  created () {
    Vue.use(Switch)
    this.areaList1 = areaList
    this.id = this.$route.query.id
    if (this.$route.query.id) {
      this.getdetail()
    }
  },
  watch: {},
  components: {
    Btn
  }
}
</script>
<style lang='less' scoped>
.eait-bg {
  /deep/ .van-picker__cancel {
    color: #28cd5e;
  }
  /deep/ .van-picker__confirm {
    color: #28cd5e;
  }
  background: #eeeeed;
  min-height: 100%;
  overflow: hidden;
  text-align: left;
  .eait-list {
    background: #fff;
    box-sizing: border-box;
    padding: 0 0.2rem;
    .list-item {
      height: 0.98rem;
      width: 100%;
      border-bottom: 0.02rem solid #eeeeee;
      line-height: 0.98rem;
      font-size: 0.26rem;
      color: #4c4c4c;
      .change-btn {
        float: left;
        margin-top: 0.3rem;
      }
      .change-text {
        float: left;
        color: #999;
        font-size: 0.26rem;
        margin-top: 0.05rem;
        margin-left: 0.15rem;
      }
      .change-text1 {
        float: left;
        color: #28cd5e;
        font-size: 0.26rem;
        margin-top: 0.05rem;
        margin-left: 0.15rem;
      }
      .item-title {
        float: left;
        width: 1.6rem;
        // margin-right: 0.4rem;
        text-align: left;
      }
      .item-text {
        float: left;
        width: 5rem;
        text-align: left;
        .van-cell {
          padding-left: 0;
          padding-top: 0.28rem;
          height: 100%;
        }
      }
      .item-icon {
        float: right;
        width: 0.12rem;
        height: 0.2rem;
        margin-top: 0.35rem;
      }
    }
  }
}
</style>