soc_app/src/views/home/isMy.vue

<template>
  <div v-if="showMine" class="about-container">
    <top-bar></top-bar>
    <div  class="item-list">

      <van-cell is-link @click="clickMine">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <p class="item-title">
            <!--            <van-icon size=".5rem" name="smile-comment-o" color="#008cd6"/>-->
            <van-image
              width="0.6rem"
              height="0.6rem"
              style="margin-left: 10px;float: left"
              :src="require('@/assets/img/my/server.png')"
            />
            <span class="custom-title">签名印章</span>
          </p>
        </template>
      </van-cell>
      <van-cell is-link @click="clickServe">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <p class="item-title">
<!--            <van-icon size=".5rem" name="smile-comment-o" color="#008cd6"/>-->
            <van-image
              width="0.6rem"
              height="0.6rem"
              style="margin-left: 10px;float: left"
              :src="require('@/assets/img/my/server.png')"
            />
            <span class="custom-title">客服服务</span>
          </p>
        </template>
      </van-cell>
      <van-cell is-link @click="checkOperate">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <p class="item-title">
<!--            <van-icon size=".5rem" name="info-o" color="#008cd6"/>-->
            <van-image
              width="0.6rem"
              height="0.6rem"
              style="margin-left: 10px;float: left"
              :src="require('@/assets/img/my/operta.png')"
            />
            <span class="custom-title">操作手册</span>
          </p>
        </template>
      </van-cell>
    </div>
  </div>
  <!-- 消息详情 -->
  <div v-else-if="showServer" class="serve-detail">
    <van-nav-bar
      title="客服服务"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="detail-box" v-if="dataInfo">
      <div class="message-content">
        <div class="text-content">
          <p v-html="dataInfo.content"></p>
        </div>
      </div>
    </div>
  </div>
  <!-- 个人印章 -->
  <div v-else class="serve-detail">
    <van-nav-bar
      title="签名印章"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="detail-box" v-if="dataInfo">
      <div class="message-content">
        <div class="text-content">
          <div class="mainItem" style="margin-top: 10%;">
            <van-row>
              <van-col :span="6" class="label">
<!--                <div style="text-align: center;">签名印章</div>-->
              </van-col>
              <van-col :span="18">
                <imgCom
                  :width="'150'"
                  :list="imgList"
                  v-for="item in imgList"
                  :key="item"
                  :height="'150'"
                  :src="item"
                ></imgCom>
              </van-col>
            </van-row>
            <div class="btns" style="text-align: center;margin-top: 10px;">
              <van-button v-if="signatureSeal" type="info" size="small" @click="showSignHandler">重置签名印章</van-button>
              <van-button v-else size="small" type="info" @click="showSignHandler">新增签名印章</van-button>
            </div>
            <van-action-sheet v-model="showSign" title="签名" class="sheet">
              <writingPad ref="esign" :show-into-btn="false" @resultImg="resultImg" @cancelSign="cancelSign"></writingPad>
            </van-action-sheet>
            <!-- <div class="label">上传图片</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar'
import {getServer} from '@/views/home/api'
import { getOperatings } from '@/views/menu/operate/api'
import imgCom from "@/components/imgCom/index.vue";
import writingPad from "@/components/writingPad/index.vue";
import {base64ToBlob} from "@/utils/base64TurnImg";
import {upload,updateSignatureSeal} from "@/api/public";
export default {
  name: 'isMy',
  components: {writingPad, imgCom, TopBar },
  data() {
    return {
      showServer:false,
      showMine:true,
      imgList:[],
      signatureSeal:"",
      showSign:false,
      dataInfo:{
        content:'每一代PCIe标准的速度都实现了翻倍的增长，例如我们熟悉的PCIe 3.0与PCIe 4.0，其单通道速度就分别为8GT/s与16GT/s，考虑到数据编码方案(均为128b/130b)效率，最终换算为我们更熟悉的单位时则是984.6MB/s与1969MB/s。看到这里，想必大家都能联想到PCIe 3.0与4.0固态硬盘常见的速率水平，由于它们都采用4通道，因此上限速率能够达到3500MB/s以及7000MB/s以上。\n' +
          '\n' +
          '　　相似的规律依旧延续到PCIe 5.0标准上，其单通道速度再次翻倍达到32GT/s，因此针对NVMe固态硬盘常见的4通道，其速率上限应该能达到15000MB/s左右。然而只需了解一下目前市面上为数不多的PCIe 5.0固态硬盘产品，就能看出它们距离这个理论上限还有一段距离。'
      },
    }
  },
  created() {
    this.showServer = false;
    this.showMine =true;
    let imgUrl = JSON.parse(window.sessionStorage.getItem('SET_MASTER_SIGNATURE_SEAL')) + '';
    if (imgUrl !== "" && imgUrl !== null && imgUrl !== "null"){
      this.signatureSeal = imgUrl;
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData(){
      this.imgList = this.signatureSeal.split(',') || [];
      getServer({code:'CUSTOMER_SERVICE'}).then(res => {
        let data = res.data;
        if(data){
          this.dataInfo.content = data.configValue;
        }
      });
    },
    checkOperate(){
      this.$router.push({path:"/operate"})
    },
    clickServe(){
      this.showMine = false;
      this.showServer = true;
    },
    clickMine(){
      this.showMine = false;
      this.showServer = false;
    },
    onClickLeft(){
      this.showMine = true;
      this.showServer = false;
    },
    showSignHandler(){
      this.showSign = true;
    },
    cancelSign()
    {
      this.showSign = false
    },
    //上传签名图到服务器
    resultImg(img) {
      let obj = base64ToBlob(img)
      let formData = new FormData()

      obj.name = '签名.jpg'
      formData.append('file', base64ToBlob(img))

      upload(formData, 'image')
        .then(res => {
          /*上传成功*/
          let imgUrl = process.env.NODE_ENV === 'development' ? res.data.url : res.data.url
          updateSignatureSeal({"signatureSeal":imgUrl}).then(res => {
            this.showSign = false;
            this.imgList = imgUrl.split(',') || [];
            this.$store.commit('SET_MASTER_SIGNATURE_SEAL', imgUrl)
          })

          // this.$emit("imgUrl", res.data.url);
        })
        .catch(err => {
          /*上传失败*/
        })
    },
  }
}
</script>

<style lang="scss" scoped>
.about-container {
  /* 你的命名空间 */
  .item-list {
    height: calc(100vh - 858px);
    overflow: auto;
    -border:1px solid red;
  }
  .item-title{
    display: flex;
    align-items: center;
  }
  .custom-title{
    margin-left: 10px;
    font-size: 4vw;
    color: #797979;
  }
}

.message-detail{
  height: calc(100vh - 102px)
}
.detail-box{
  height: calc(100% - 90px);
  overflow: auto;
  background-color: #fff;
  margin: 20px;
}
.msg-title{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 2.666667vw 4.266667vw;
  overflow: hidden;
  color: #323233;
  font-size: 3.733333vw;
  line-height: 6.4vw;
  border-bottom: 1px solid #f5f5f5;
}
.message-content {
  width: 100%;
  padding: 20px 30px 20px 30px;
  height: 100%;
  overflow: auto;

  .text-content {
    width: 100%;
    min-height: 40px;
    overflow: auto;

    > p {
      text-indent: 2em;
      word-break: break-word;
      white-space: pre-wrap;
      text-align: justify;
      width: 100%;
      color: #777;
    }
  }

  .file-box {
    width: 100%;
    min-height: 40px;
    padding: 20px 0;

    > div {
      line-height: 32px;
      padding-left: 20px;
      margin: 10px 0;
    }
  }
}
</style>