gdy_app_8/src/view/user/company_info.vue

<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <van-cell-group>
      <van-cell title="公司LOGO" is-link class="company_info">
        <template solt="default">
          <vue-img-cropper v-if="isUploader" ref="cropper" :height="400" :width="400" :maxScale="6" :compressionRatio="0.5"  @cutImg="showCutImg" @showLoading="showLoading" @hideLoading="hideLoading">
            <img :src="site_info.logo_url?site_info.logo_url : 'static/images/default_company_logo.png'" class="needsclick company_img" />
          </vue-img-cropper>
          <div v-else @click="openText()">
            <img :src="site_info.logo_url?site_info.logo_url : 'static/images/default_company_logo.png'" class="needsclick company_img" />
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="company_name">
      <van-cell title="公司名称" is-link :value="site_info.name" @click="showPopup" />
    </van-cell-group>
      <!-- <vue-img-cropper
        ref="cropper"
        :height="400"
        :width="400"
        :maxScale="6"
        :compressionRatio="0.5"
        @cutImg="showCutImg"
        @showLoading="showLoading"
        @hideLoading="hideLoading"
        @showError="showError">
      </vue-img-cropper> -->

      <van-dialog v-model="show" title="修改公司名称" class="edit_com_popup" show-cancel-button @confirm="save_btn">
        <van-cell-group>
          <input type="text" class="edit_com_input" ref="input" v-model="edit_com_name" name="公司名称" v-validate="'required'" placeholder="请填写公司名称" style=" box-sizing: border-box; width: 100%;">
        </van-cell-group>
      </van-dialog>
    </div>
  </div>
</template>

<script>

import Vue from 'vue'
import { mapGetters, mapState } from 'vuex';
import VueImgCropper from '@/components/vue-img-cropper'
import { Notify, Image } from 'vant'
Vue.use(Notify).use(Image)
export default {
  // 状态
  data () {
    return {
      title: '企业信息',
      show: false,
      action_sheet_show: false,
      actions: [
        { name: '选项', color: '#07c160' },
        { name: '禁用选项', disabled: true }
      ],
      user_info: this.$userInfo(),
      click_count: 0,
      edit_com_name: '',
      company_info:{},
      isUploader: this.$getCache('isUploader'),
    }
  },
  // 组件
  components: {VueImgCropper},
  computed: {
    ...mapGetters(['site_info'])
  },
  // 方法
  methods: {
    // select_img () {
    //   if (this.click_count == 0) {
    //     // if(self.$getCache("isUploader")) {
    //     //   self.$refs.cropper.getImg()
    //     //   // setTimeout(() => {
    //     //   //   self.click_count = 0
    //     //   // }, 20)
    //     // }else {

    //     // }
    //     this.$dialog.confirm({
    //       title: '权限获取',
    //       message: '当您在我们的产品中使用拍照、拍摄、扫描二维码、图片上传等功能时，我们需要获取您设备的相机权限，以便您正常使用图片上传、图片下载、附件上传、头像设置等服务',
    //     }).then(() => {
    //       this.$refs.cropper.getImg()

    //       // setTimeout(() => {
    //       //   this.click_count = 0
    //       // }, 20)
    //     })

    //   }
    // },

    openText(){
      // 功道云需要使用媒体、相册、文件等权限，以便您正常使用图片上传、图片分享、图片下载等服务。
      this.$dialog.confirm({
        title: '权限获取',
        message: '当您在我们的产品中使用拍照、拍摄、扫描二维码、图片上传等功能时，我们需要获取您设备的相机权限，以便您正常使用图片上传、图片下载、附件上传、头像设置等服务',
      }).then(() => {
        this.$setCache('isUploader',true)
        this.isUploader = true
      })
    },
    showCutImg (d) {
      this.$toast.loading({
        mask: true,
        message: '正在处理'
      })
      this.$axiosUser('post','/api/pro/site/update',{logo_url:d.url}).then((res) => {
          this.$store.dispatch('get_site_info',true).then((res) => {})//公司信息
      })
    },
    showLoading () {
      this.$toast.loading({
        mask: true,
        message: '正在处理'
      })
    },
    hideLoading () {
      this.$toast.clear()
    },
    showError (d) {},
    // 保存
    save_btn () {
      this.$validator.validate().then(result => {
        if (!result) {
          Notify({ type: 'danger', message: this.$validator.errors.items[0].msg })
        } else {
          this.showLoading()
          this.$axiosUser('post','/api/pro/site/update',{name:this.edit_com_name}).then((res) => {
            this.company_info = res.data.data
            this.$store.dispatch('get_site_info',true).then((res) => {})//公司信息
            this.$toast.clear()
            this.$toast('修改成功')
          })
        }
      })
    },
    // 弹窗
    showPopup () {
      this.edit_com_name = this.site_info.name
      this.show = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    }
  },
}
</script>

<style scoped>
  .body_com {
    height: calc(100% - 1rem);
    position: relative;
  }
  .company_img{
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 0.1rem;
  }
  .company_info .van-cell__title,.company_info .van-icon {line-height: 1.42rem;}
  .com_name_popup{
    width: 50vw;
    height: auto;
  }
  .edit_com_popup{
    top: 3rem
  }
  /deep/.edit_com_popup .van-dialog__content{
    padding: 0.2rem;
  }
  .edit_com_input{
    border: 0.02rem solid #efefef;
    border-radius: 0.1rem;
    padding: 0.2rem 0.14rem;
    margin-bottom: 0.2rem;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
  }
  .company_name .van-cell{
    padding: 0.24rem 0.32rem;
  }
  .company_name .van-cell__value{
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /deep/ .van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after{
    border:none;
  }
  /deep/ .van-cell{
    padding: 0.15rem 0.32rem;
  }
  /deep/ .van-cell .van-cell__value{
    font-size:0.28rem;
  }
</style>