4dkankan_mobile/src/pages/account/manage/information/index.vue

<template>
  <div class="information-layout">
    <div class="top-con">
      <img :src="`${$cdn}images/info-bg.png`" alt="">
      <div class="tc">
        <div>
          <p>{{content.content||'尚未开通任何会员'}}</p>
          <!-- <p>{{addstar(info.userName)}}</p> -->
        </div>
        <div class="btn" @click="$router.push({name:'purchase'})">立即购买</div>
      </div>
    </div>
    <div class="user-con">
      <div class="user-top">
        <div class="user-img" :style="{backgroundImage:`url(${info.head||`${$cdn}images/head-default.png`})`}">
        </div>
        <div class="user-upload">
          <p>上传头像</p>
          <div type="button" class="ant-btn">
            <input class="el-upload" ref="uploadInput" name="file" type="file" @change="update">
            <span>选择文件</span>
          </div>
          <p>允许的文件类型为JPG 或 PNG。</p>
        </div>
      </div>
    </div>
    <div class="address-con">
      <p class="sub-title">
        <span>我的收货地址</span>
      </p>
      <div class="address-show" v-if="isShowAddress">
        <template v-if="address.shipName">
          <div class="add-info">
            <div class="show-name">
              <span>{{address.shipName}}</span>
              <span>{{address.shipMobile}}</span>
            </div>
            <div class="show-address">
              {{`${address.shipAreaPath}${address.shipAddress}`}}
            </div>
          </div>
          <div class="add-edit" @click="isShowAddress=false">
            <img :src="`${$cdn}images/icon/edit.png`" alt="">
          </div>
        </template>
        <template v-else>
          <div class="add-info">暂无地址信息</div>
          <div class="add-edit" @click="isShowAddress=false">
            <img :src="`${$cdn}images/icon/edit.png`" alt="">
          </div>
        </template>
      </div>
      <citySelect class="address-scon" :address='address' :token="token" @closeSelect="data=>{isShowAddress=data}" v-else/>
    </div>
    <div class="address-con">
      <p class="sub-title">我的发票抬头</p>
      <div class="invoice-show" v-if="isShowInvoice">
        <template v-if="invoice2.title||invoice3.title">
          <div class="add-info">
            <div class="show-name">
              <span>{{invoice2.title||invoice3.title}}</span>
            </div>
            <div class="show-address">
              {{invoice2.code}}
            </div>
          </div>
          <div class="add-edit" @click="isShowInvoice=false">
            <img :src="`${$cdn}images/icon/edit.png`" alt="">
          </div>
        </template>
        <template v-else>
          <div class="add-info">暂无发票信息</div>
          <div class="add-edit" @click="isShowInvoice=false">
            <img :src="`${$cdn}images/icon/edit.png`" alt="">
          </div>
        </template>
      </div>
      <invoices :invoice='editInvoice2' :invoicet="editInvoice3" :token="token" @closeInvoice="data=>{isShowInvoice=data}" v-else />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import citySelect from '@/components/citySelect'
import invoices from '@/components/invoices'
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: {
    citySelect,
    invoices
  },
  computed: {
    ...mapState({
      info: state => 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 {
      isShowAddress: true,
      tempSelect: '',
      isShowInvoice: true,
      content: ''
    }
  },
  methods: {
    addstar (item) {
      let back = item.substring(7, 12)
      let font = item.substring(0, 3)
      return font + '*****' + back
    },
    async getInfo () {
      let res = await this.$http
        .post('/user/camera/deadline', {}, {
          headers: {
            token: this.token
          }
        })
      let data = res.data
      if (data.code !== 0) {
        return false
      }
      this.content = data.data
    },
    getCurrentStatus (data) {
      this.tempSelect = data
    },
    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
        let res = await this.$http.post('/user/uploadHead', { imgdata }, config)
        if (res.data.code === 0) {
          this.info.head = res.data.msg
          localStorage.setItem('info', JSON.stringify(this.info))
        } else {
          this.$toast.show('warn', '上传失败，请稍后再试')
        }
      }
      reader.readAsDataURL(file)
    }
  },
  mounted () {
    this.getInfo()
    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>
@import "./style.scss";
</style>