ebiz-h5/src/views/YB_APP/mine.vue

<template>
  <div class="public_container" style="position: relative;">
    <p style="color: #fff;font-size: 20px;position: absolute;top: 50px;right: 10px;padding: 5px;background: #698ad9;border-radius: 20px;width: 20px;display: flex;justify-content: center;align-items: center;">
      <van-icon v-if="!messages" name="chat-o" />
      <van-icon v-if="messages" name="chat-o" dot/>
      <!-- <van-icon name="chat-o" dot /> -->
    </p>
    
    <div style="display:flex;justify-content: flex-start;padding: 65px 15px 15px 20px;align-items: center;">
      <div style="width:60px;">
        <!-- <img style="width:100%;" src="@/assets/YB_APP/images/25.png" @click="uploadHeadImage(item)"> -->
        <img style="width:100%;" :src="imagePath" @click="uploadHeadImage()">
      </div>
      <div style="margin-left:15px;">
        <p style="color:#fff;padding: 3px;display: flex;align-items: center;">
          <span style="font-size:20px;margin-right: 15px;font-weight: bold;">{{ userInfo.agentName | encryCheckModelName }}</span>
          <img style="width:70px;" src="@/assets/YB_APP/images/31.png">
        </p>
        <p style="color:#e9e9e9;padding: 3px;">
          <span>工号</span>
          <span style="margin:0px 5px;">|</span>
          <span>Y5000065</span>
        </p>
      </div>
    </div>

    <div class="menu1" style="margin: 15px;background: linear-gradient(#dce2fb 10%, #fff 70%);border-radius: 5px;padding: 10px;margin-top: 5px;">
      <div style="display: flex;justify-content: space-around;align-items: center;height: 100%;">
        <div style="text-align:center;position: relative;width: 33.3%;">
          <p style="line-height: 40px;font-size: 18px;font-weight: bold;">广西</p>
          <p style="line-height:30px;">分公司</p>
          <div style="position:absolute;right: 0px;width: 1px;background: #eee;top: calc(50% - 10px);height: 20px;"></div>
        </div>
        <div style="text-align:center;position: relative;width: 33.3%;">
          <p style="line-height: 40px;font-size: 18px;font-weight: bold;">河池</p>
          <p style="line-height:30px;">机构</p>
          <div style="position:absolute;right: 0px;width: 1px;background: #eee;top: calc(50% - 10px);height: 20px;"></div>
        </div>
        <div style="text-align:center;position: relative;width: 33.3%;">
          <p style="line-height: 40px;font-size: 18px;font-weight: bold;">申旺部</p>
          <p style="line-height:30px;">营业部</p>
        </div>
      </div>
    </div>

    <div class="menu1" style="margin: 15px;background: #fff;border-radius: 5px;padding: 8px;margin-top: 5px;">
      <van-cell v-for="(item,index) in menu1" is-link>
        <template #title>
          <div style="display:flex;align-items: center;">
            <img style="width:20px;" :src="item.img">
            <span class="custom-title" style="margin-left:10px;">{{item.name}}</span>
          </div>
        </template>
      </van-cell>
    </div>

  </div>
</template>

<script>
import { Icon, Cell } from 'vant'
import { homeConfigYB, mineConfigYB } from '@/api/YB_APP/index'
import imagePath from '@/assets/YB_APP/images/25.png'
export default {
  name: 'mine',
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
  },
  data() {
    return {
      messages:false,
      userInfo:{},
      menu1:[],
      imagePath: imagePath //新头像URL
    }
  },
  mounted(){
    this.getHomeConfigYB()
    this.getMineConfigYB()
    window['getMessage'] = (data)  => {
     this.getMessage(data) 
    }
  },
  methods:{
    getMessage(data){
      this.$store.commit('updateMessageStatus',data )
    },
    getMineConfigYB(){
      let params = {

      }
      mineConfigYB(params).then(res=>{
        if(res.result == 0){
          console.log(res)
          this.userInfo = res.content
        }else{
          this.$toast(res.resultMessage)
        }
      })
    },
    getHomeConfigYB(){
      let params = {

      }
      homeConfigYB(params).then(res=>{
        if(res.result == 0){
          if(res.content.icon){
            res.content.icon.myPageIcon.forEach(item=>{
              this.menu1.push({
                name:item.title,
                img:item.img
              })
            })
          }
        }else{
          this.$toast(res.resultMessage)
        }
      })
    },
    uploadHeadImage(){
      EWebBridge.webCallAppInJs("head_image").then(data => {
          console.log(data,'head_image')
          let uploadResult = JSON.parse(data)
          if(uploadResult.code==0){
              // 头像上传成功
              let uploadData = uploadResult.content
              // 新头像URL
              this.imagePath = uploadData.imageUrl
          } else if(uploadResult.code==1) {
              //头像选择或上传失败 错误信息
              let errorMessage = uploadResult.message
              // 提示异常信息
              // 用户选择了头像预览
          }
      })
    }
  },
  filters: {
    encryCheckModelName(code) {
      if(code.length > 2){
        return code.replace(/(?<=[\u4e00-\u9fa5]).*(?=[\u4e00-\u9fa5])/, "*")
      }else{
        return code.replace(/.*(?=[\u4e00-\u9fa5])/, "*")
      }
    }
  },
}
</script>
<style lang="scss" scoped>
  .public_container{
    font-size: 12px;
    height: 100vh;
    width: 100vw;
    background-image: url("../../assets/YB_APP/images/26.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
</style>