4dkankan_official/src/page/manage/temp/information.vue

<template>
  <div class="info-layout">
    <edit
      :name="'账号信息'"
      @clickOper="handleOper('infoStatus')"
      :oper="infoStatus?'编辑':'收起'"
      :isActive="infoStatus"
    >
      <div class="info" slot="show">
        <p>头像</p>
        <img class="avatar" :src="info.head" alt>
        <p>昵称</p>
        <div>{{info.nickName}}</div>
      </div>
      <div class="info edit-info" slot="edit">
        <div class="info-left">
          <p>头像</p>
          <img class="avatar" :src="info.head" alt>
          <p>昵称</p>
          <input
            autofocus
            v-model="editinfo.nickName"
            placeholder="输入昵称"
            class="nickname"
            type="text"
          >
          <div @click="saveNickName" class="btn parmary">保存</div>
        </div>
        <div>
          <div class="btn choose">
            <input class="el-upload" ref="uploadInput" name="file" type="file" @change="update">
            <span>选择图片</span>
          </div>
          <p class="p-desc">请选择一张新照片进行上传</p>
          <p class="p-desc">支持图片格式为：JPG/PNG</p>
          <p class="p-desc">推荐分辨率为：512*512px，大小不大于1MB</p>
        </div>
      </div>
    </edit>

    <edit
      :name="'我的收货地址'"
      @clickOper="handleOper('addressStatus')"
      :oper="addressStatus?'编辑':'收起'"
      :isActive="addressStatus"
    >
      <div class="address" slot="show">
        <template v-if="address.shipName">
          <p>
            <span>{{address.shipName}}</span>
            <span>{{address.shipMobile}}</span>
          </p>
          <p class="p-desc">{{`${address.shipAreaPath}${address.shipAddress}`}}</p>
        </template>
        <template v-else>
          <p class="p-desc">暂无信息</p>
        </template>
      </div>
      <div class="address edit-address" slot="edit">
        <div class="input-con">
          <input type="text" v-model="editAdd.shipName" :placeholder="'姓名'">
          <input type="text" v-model="editAdd.shipMobile" :placeholder="'电话'">
        </div>
        <div class="input-con">
          <citySelect :areaPath="editAdd.shipAreaPath" @currentVal="getCurrentSelect"/>
        </div>
        <div class="input-con address-input">
          <input
            type="text"
            v-model="editAdd.shipAddress"
            :placeholder="'详细地址'"
          >
        </div>
        <div class="btn parmary" @click="uAddress">保存</div>
      </div>
    </edit>

    <edit
      :name="'我的发票抬头'"
      @clickOper="handleOper('invoiceStatus')"
      :oper="invoiceStatus?'编辑':'收起'"
      :isActive="invoiceStatus"
    >
      <div class="invoice" slot="show">
        <p class="p-desc">{{invoice2.title||invoice3.title||'暂无信息'}}</p>
      </div>
      <div class="invoice edit-invoice" slot="edit">
        <div class="select-con">
          <div :class="{'tag-active':cInvoice==='normal'}" @click="cInvoice='normal'">
            <span>增值税普通发票</span>
            <img src="@/assets/images/tag-icon.png" alt>
          </div>
          <div :class="{'tag-active':cInvoice==='zengzhi'}" @click="cInvoice='zengzhi'">
            <span>增值税专用发票</span>
            <i></i>
            <img src="@/assets/images/tag-icon.png" alt>
          </div>
        </div>
        <div v-if="cInvoice==='normal'">
          <div class="input-con">
            <input type="text" placeholder="请输入发票抬头" v-model="editInvoice2.title">
            <input type="text" placeholder="请输入税务登记号（个人用户可不填）" v-model="editInvoice2.code">
          </div>
        </div>
        <div v-else>
          <div class="input-con">
            <input type="text" v-model="invoice3.title" placeholder="请输入发票抬头">
            <input type="text" v-model="invoice3.code" placeholder="请输入税务登记号（个人用户可不填）">
          </div>
          <div class="input-con">
            <input type="text" v-model="invoice3.organizedAddress" placeholder="注册地址">
            <input type="text" v-model="invoice3.registerPhone" placeholder="注册电话">
          </div>
          <div class="input-con">
            <input type="text" v-model="invoice3.bankName" placeholder="开户银行">
            <input type="text" v-model="invoice3.bankAccount" placeholder="银行账户">
          </div>
        </div>
        <div @click="saveInvoice(cInvoice)" class="btn parmary">保存</div>
      </div>
    </edit>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import edit from '@/components/edit'
import citySelect from '@/components/citySelect'
var cloneObj = function (obj) {
  var newObj = {}
  if (obj instanceof Array) {
    newObj = []
  }
  for (var key in obj) {
    var val = obj[key] || ''
    newObj[key] = typeof val === 'object' ? cloneObj(val) : val
  }
  return newObj
}
export default {
  components: { edit, citySelect },
  computed: {
    ...mapState({
      info: state => state.user.info,
      editinfo: state => cloneObj(state.user.info),
      token: state => state.user.token,
      invoice2: state => {
        let type = Object.prototype.toString.call(state.user.invoice2)
        if (type === '[object Object]') {
          return state.user.invoice2
        }
        let condition = state.user.invoice2 && state.user.invoice2 !== 'null' && type !== '[object Array]'
        return (condition ? JSON.parse(state.user.invoice2) : {})
      },
      editInvoice2: state => {
        let type = Object.prototype.toString.call(state.user.invoice2)
        if (type === '[object Object]') {
          return state.user.invoice2
        }
        let condition = state.user.invoice2 && state.user.invoice2 !== 'null' && type !== '[object Array]'
        return cloneObj(condition ? JSON.parse(state.user.invoice2) : {})
      },
      invoice3: state => {
        let type = Object.prototype.toString.call(state.user.invoice3)
        if (type === '[object Object]') {
          return state.user.invoice3
        }
        let condition = state.user.invoice3 && state.user.invoice3 !== 'null' && type !== '[object Array]'
        return (condition ? JSON.parse(state.user.invoice3) : {})
      },
      editInvoice3: state => {
        let type = Object.prototype.toString.call(state.user.invoice3)
        if (type === '[object Object]') {
          return state.user.invoice3
        }
        let condition = state.user.invoice3 && state.user.invoice3 !== 'null' && type !== '[object Array]'
        return cloneObj(condition ? JSON.parse(state.user.invoice3) : {})
      },
      address: state => state.user.address || {},
      editAdd: state => cloneObj(state.user.address) || {}
    })
  },
  data () {
    return {
      infoStatus: true,
      addressStatus: true,
      invoiceStatus: true,
      cInvoice: 'normal',
      tempSelect: '',
      addre: []
    }
  },
  methods: {
    handleOper (type) {
      this[type] = !this[type]
    },
    getCurrentSelect (data) {
      this.tempSelect = data
    },
    async saveNickName () {
      if (this.editinfo.nickName.trim()) {
        let res = await this.$http
          .post(
            '/user/updateNickName',
            { nickName: this.editinfo.nickName },
            {
              headers: {
                token: this.token
              }
            }
          )

        let data = res.data
        if (data.code === 0) {
          this.infoStatus = true
          this.$store.dispatch('getInfo', {url: '/user/getUserInfo', name: 'info'})
        } else {
          this.$toast.show('warn', '修改失败')
        }
      } else {
        return this.$toast.show('warn', '昵称不能为空')
      }
    },

    saveInvoice (cInvoice) {
      let isObject = function (obj) {
        return JSON.stringify(obj) === '{}' ? '' : obj
      }
      let params = {}
      let invoiceType = ''
      if (cInvoice === 'normal') {
        invoiceType = 2
        params = {
          invoiceType,
          title: isObject(this.editInvoice2.title),
          code: isObject(this.editInvoice2.code)
        }
      } else {
        let {title, code, organizedAddress, registerPhone, bankName, bankAccount} = this.editInvoice3
        invoiceType = 3
        params = {
          invoiceType: isObject(invoiceType),
          title: isObject(title),
          code: isObject(code),
          organizedAddress: isObject(organizedAddress),
          registerPhone: isObject(registerPhone),
          bankName: isObject(bankName),
          bankAccount: isObject(bankAccount)
        }
      }
      this.$http
        .post('user/invoice/save', params, {
          headers: {
            token: this.token
          }
        })
        .then(data => {
          this.invoiceStatus = true
          this.$store.dispatch('getInvoice', {
            type: invoiceType,
            params: {
              invoiceType: invoiceType
            }
          })
        })
    },
    uAddress () {
      this.editAdd.province = this.tempSelect[0]
      this.editAdd.city = this.tempSelect[1]
      this.editAdd.shipAreaPath = this.tempSelect.join(',')
      let {
        shipAddress,
        shipAreaPath,
        province,
        city,
        shipMobile,
        shipName
      } = this.editAdd
      let params = {
        shipAddress,
        shipAreaPath,
        province,
        city,
        shipMobile,
        shipName
      }
      this.$http
        .post('/user/updateAddress', params, {
          headers: {
            token: this.token
          }
        })
        .then(data => {
          this.addressStatus = true
          this.$store.dispatch('getInfo', {
            url: '/user/getReceiverInfo',
            name: 'address'
          })
        })
    },
    update (e) {
      let file = e.target.files[0]
      let type = file.type.toLowerCase()
      if (type !== 'image/jpeg' && type !== 'image/png') {
        return this.$toast.show('warn', '上传的图片类型不正确，请重新上传')
      }

      let token = this.token
      let config = {
        headers: {
          token
        }
      } // 添加请求头
      var reader = new FileReader()
      reader.onload = async e => {
        let imgdata = e.target.result
        this.$http.post('/user/uploadHead', { imgdata }, config).then(data => {
          this.info.head = data.data.msg
          localStorage.setItem('info', JSON.stringify(this.info))
        })
      }
      reader.readAsDataURL(file)
    }
  },
  watch: {},
  mounted () {
    this.$store.dispatch('getInfo', {
      url: '/user/getReceiverInfo',
      name: 'address'
    })
    Object.keys(this.invoice2).length === 0 && this.$store.dispatch('getInvoice', {
      type: 2,
      params: {
        invoiceType: 2
      }
    })
    Object.keys(this.invoice3).length === 0 && this.$store.dispatch('getInvoice', {
      type: 3,
      params: {
        invoiceType: 3
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.info-layout {
  $theme-color: #1fe4dc;
  $border-color: #e7e7e7;
  width: 90%;
  padding-bottom: 100px;
  input {
    appearance: none;
    line-height: 36px;
    height: 36px;
    border: solid 1px $border-color;
    padding-left: 10px;
    &:focus {
      border: solid 1px $theme-color;
    }
  }
  .btn {
    text-align: center;
    cursor: pointer;
  }
  .parmary {
    background-color: $theme-color;
    width: 126px;
    height: 36px;
    line-height: 36px;
    margin-top: 20px;
  }
  .choose {
    background-color: #ddd;
    color: #fff;
    width: 100px;
    line-height: 26px;
    height: 26px;
    font-size: 12px;
    margin: 12px 0 20px;
  }
  .info,
  .address,
  .invoice {
    margin-top: 20px;
    p {
      line-height: 36px;
      span {
        padding-right: 10px;
      }
    }
    .p-desc {
      color: #a0a0a0;
      line-height: 24px;
    }
    .avatar {
      width: 68px;
      height: 68px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
      margin: 5px 0;
    }
    .nickname {
      width: 126px;
    }
  }
  .edit-info {
    display: flex;
    .info-left {
      min-width: 210px;
    }
    .choose {
      cursor: pointer;
      position: relative;
      .el-upload {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        line-height: 1;
        cursor: pointer;
        height: 100%;
        z-index: 10;
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: 0;
        display: inline-block;
      }
      span {
        cursor: pointer;
      }
    }
  }
  .edit-address {
    .input-con {
      input {
        width: 200px;
        line-height: 36px;
        height: 36px;
        margin: 10px 25px 10px 0;
      }
    }
    .address-input {
      input {
        width: 660px;
      }
    }
  }
  .edit-invoice {
    .select-con {
      div {
        position: relative;
        cursor: pointer;
        width: 200px;
        line-height: 36px;
        height: 36px;
        margin: 10px 25px 10px 0;
        border: solid 1px $border-color;
        color: #a0a0a0;
        padding: 0 10px;
        display: inline-block;
        img {
          display: none;
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
      .tag-active {
        border: solid 1px $theme-color;
        color: #000;
        img {
          display: inline-block;
        }
      }
    }
    .input-con {
      input {
        width: 316px;
        line-height: 36px;
        height: 36px;
        margin: 10px 25px 10px 0;
      }
    }
  }
}
</style>