bocai_supplyChain_pc/src/components/userinfo/accountsetting/inedex.vue

<template>
  <div class="accountsetting-container">
    <a-modal
      v-model="visible"
      title="设置图标"
      @cancel="modalcancel"
      on-ok="handleOk"
    >
      <div class="container">
        <div class="cropper-content">
          <div class="cropper-box">
            <div class="cropper">
              <vue-cropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.outputSize"
                :outputType="option.outputType"
                :info="option.info"
                :canScale="option.canScale"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixed="option.fixed"
                :fixedNumber="option.fixedNumber"
                :canMoveBox="option.canMoveBox"
                :height="option.height"
                :infoTrue="option.infoTrue"
                :maxImgSize="option.maxImgSize"
                :enlarge="option.enlarge"
                :mode="option.mode"
                @realTime="realTime"
              >
              </vue-cropper>
            </div>
          </div>
          <div class="previewcontainer">
            <!-- 图标预览框 -->
            <p>预览</p>
            <div :style="previewStyle3" class="show-preview">
              <div :style="previews.div" class="preview">
                <img :src="previews.url" :style="previews.img" />
              </div>
            </div>
            <div class="btncontainer">
              <!-- <a-button @click="restaricon">重置</a-button> -->
              <a-button @click="changeavatar">确定</a-button>
              <a-button @click="modalcancel">取消</a-button>
            </div>
          </div>
        </div>
      </div>
      <template slot="footer">
        {{ &nbsp; }}
      </template>
    </a-modal>
    <div class="accountcontent w">
      <div class="accountSetList">
        <div class="userinfobox">
          <div class="avatarbox">
            <i @click="uploadavatar" style="cursor: pointer">
              <span
                class="iconfont icon-morentouxiang"
                v-if="!userbaseInfo.imgSrc"
              ></span>
              <img :src="userbaseInfo.imgSrc" alt="" v-else />
              <div class="mask"><div>修改头像</div></div></i
            >
            <input
              type="file"
              ref="updateicon"
              @change="filepick($event)"
              style="display: none"
            />
          </div>
          <div class="username" v-if="userinfo.userName">
            Hi,{{ userinfo.userName }}
          </div>
          <div class="username" v-else>Hi,{{ userinfo.hidetel }}</div>
        </div>
        <div class="priceinfo">
          <ul style="display:none">
            <li
              @click="pushto('/accountsetting/myintegral')"
              :class="{ tagactive: activelist === 6 }"
            >
              <span><i class="iconfont icon-jifen"></i>我的积分</span
              ><span
                ><span>{{ userpoint >= 0 ? userpoint : "--" }}分</span
                ><i class="iconfont icon-youjiantou"></i
              ></span>
            </li>
            <li
              @click="pushto('/accountsetting/mycard')"
              :class="{ tagactive: activelist === 7 }"
            >
              <span><i class="iconfont icon-kaquan"></i>我的卡券</span
              ><span
                ><span
                  >{{
                    cardinfo.recordCount ? cardinfo.recordCount : "0"
                  }}张</span
                ><i class="iconfont icon-youjiantou"></i
              ></span>
            </li>
            <li
              @click="pushto('/accountsetting/mybalance')"
              :class="{ tagactive: activelist === 8 }"
            >
              <span><i class="iconfont icon-yue"></i>我的余额</span
              ><span
                ><span>{{ userbalance >= 0 ? userbalance : "0" }}元</span>
                <i class="iconfont icon-youjiantou"></i
              ></span>
            </li>
          </ul>
        </div>
        <ul>
          <li
            @click="pushto('/accountsetting/boundtel')"
            :class="{ tagactive: activelist === 1 }"
          >
            <span
              ><i class="iconfont icon-gerenzhongxin-bangdingshouji"></i
              >绑定手机</span
            ><span
              ><span>{{ userinfo.hidetel }}</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <li
            @click="pushto('/accountsetting/boundwx')"
            :class="{ tagactive: activelist === 2 }"
          >
            <span><i class="iconfont icon-weixin1"></i>绑定微信</span
            ><span
              ><span v-if="userinfo.openIdAppDTDL">已绑定</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <li
            @click="pushto('/accountsetting/boundbankcard')"
            :class="{ tagactive: activelist === 3 }"
            style="display:none"
          >
            <span
              ><i class="iconfont icon-bangdingyinhangka"></i>绑定银行卡</span
            ><span
              ><span>{{ userbanklist.length }}张</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
        </ul>
        <ul>
          <li
            @click="pushto('/accountsetting/loginpsw')"
            :class="{ tagactive: activelist === 0 }"
          >
            <span><i class="iconfont icon-gerenzhongxin-mima"></i>登录密码</span
            ><span
              ><span>已设置</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <li
            @click="pushto('/accountsetting/realname')"
            :class="{ tagactive: activelist === 4 }"
            style="display:none"
          >
            <span><i class="iconfont icon-shimingrenzheng"></i>实名认证</span
            ><span
              ><span v-if="userinfo.realName">已认证</span
              ><span v-else>未认证</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="rightcontent">
        <router-view
          :userinfo="userinfo"
          :userbanklist="userbanklist"
          :userpoint="userpoint"
          :userbalance="userbalance"
        ></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userBaseInfoApi,
  getUserBankListApi,
  userBalanceApi,
  getPointApi,
  // uploadUserAvatarApi,
  userCardApi,
} from "../../../api/userinfo";
import { VueCropper } from "vue-cropper";
import request from "@/utils/request";

export default {
  inject: ["reload"],
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {
    VueCropper,
  },

  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      userinfo: {}, // 用户基础信息
      userbalance: "",
      userpoint: "",
      activelist: "",
      userbanklist: [],
      cardinfo: {},
      visible: false,
      previewStyle3: {},
      previews: {},
      userbaseInfo: JSON.parse(sessionStorage.getItem("LOGIN_DATA")),
      option: {
        // 裁剪图片配置
        img: "", // 裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
        outputType: "png", // 裁剪生成图片的格式（jpeg || png || webp）
        info: true, // 图片大小信息
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 150, // 默认生成截图框宽度
        autoCropHeight: 150, // 默认生成截图框高度
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        // full: false, // false按原比例裁切图片，不失真
        // fixedBox: false, // 固定截图框大小，不允许改变
        // canMove: false, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        // original: false, // 上传图片按照原始比例渲染
        // centerBox: false, // 截图框是否被限制在图片里面
        height: true, // 是否按照设备的dpr 输出等比例图片
        infoTrue: true, // true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 290, // 限制图片最大宽度和高度
        enlarge: 1, // 图片根据截图框输出比例倍数
        mode: "auto", // 图片默认渲染方式
      },
    };
  },
  // 计算属性
  computed: {
    path() {
      return this.$route.fullPath;
    },
  },
  // 侦听器
  watch: {
    path() {
      this.changeactive();
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getUserInfo();
    this.changeactive();
    this.getuserbnak();
    this.getUserBalanceInfo();
    this.getPoint();
    this.getcardcount();
    console.log(this.userbaseInfo);
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    async getUserInfo() {
      try {
        const { data } = await userBaseInfoApi();
        if (data.status === 200) {
          this.userinfo = data.data;
          console.log(this.userinfo);
          const beforetel = this.userinfo.tel.substr(0, 3);
          const aftertel = this.userinfo.tel.substr(7, 4);
          this.userinfo.hidetel = beforetel + "****" + aftertel;
          const beforeId = this.userinfo.IDCard.substr(0, 1);
          const afterId = this.userinfo.IDCard.substr(17, 1);
          this.userinfo.hideId = beforeId + "****************" + afterId;
          const hidename = this.userinfo.realName.substr(
            this.userinfo.realName.length - 1,
            1
          );
          // this.userinfo.hidename =  hidename;
          let newstr = "";
          for (let i = 0; i < this.userinfo.realName.length - 1; i++) {
            newstr += "*";
          }
          this.userinfo.hidename = newstr + hidename;
          console.log(aftertel);
          console.log(beforetel);
        }
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    pushto(url) {
      this.$router.push(url);
    },
    changeactive() {
      if (this.path.indexOf("/loginpsw") > -1) {
        this.activelist = 0;
      } else if (this.path.indexOf("/boundtel") > -1) {
        this.activelist = 1;
      } else if (this.path.indexOf("/boundwx") > -1) {
        this.activelist = 2;
      } else if (this.path.indexOf("/boundbankcard") > -1) {
        this.activelist = 3;
      } else if (this.path.indexOf("/realname") > -1) {
        this.activelist = 4;
      } else if (this.path.indexOf("/myintegral") > -1) {
        this.activelist = 6;
      } else if (this.path.indexOf("/mycard") > -1) {
        this.activelist = 7;
      } else if (this.path.indexOf("/mybalance") > -1) {
        this.activelist = 8;
      }
    },
    async getuserbnak() {
      try {
        const { data } = await getUserBankListApi();
        console.log(data);
        this.userbanklist = data.data;
        this.userbanklist.forEach((ele) => {
          ele.newbankNo = ele.bankNo.substr(14, 4);
        });
        // const newdata = this.userbanklist.bankNo.substr(14, 4);
        // console.log(newdata);
      } catch (error) {
        console.log(error);
      }
    },
    async getUserBalanceInfo() {
      try {
        const { data } = await userBalanceApi();
        this.userbalance = data.data.balance / 100;

        console.log(data);
        console.log(this.userbalance);
      } catch (error) {
        console.log(error);
      }
    },
    async getPoint() {
      try {
        const { data } = await getPointApi();
        console.log(data);
        this.userpoint = data.data.pointTotal;
      } catch (error) {
        console.log(error);
      }
    },
    async getcardcount() {
      try {
        const { data } = await userCardApi();
        console.log(data);
        this.cardinfo = data.data;
      } catch (error) {
        console.log(error);
      }
    },
    uploadavatar() {
      //上传头像
      this.$refs.updateicon.click();
    },
    filepick(e) {
      console.log(this.$refs.updateicon);
      console.log(e);
      const that = this;
      this.visible = true;
      const imgFile = new FileReader();
      imgFile.readAsDataURL(this.$refs.updateicon.files[0]);
      imgFile.onload = function () {
        that.option.img = this.result;
      };
      // this.option.img = window.URL.createObjectURL(
      //   this.$refs.updateicon.files[0]
      // )
      this.filelength = this.$refs.updateicon.files.length;
    },
    realTime(data) {
      // data.div.height = "50px";
      // data.div.width = "50px";
      // data.w = 50;
      // data.h = 50;
      console.log(data);

      var previews = data;
      var h = 0.5;
      var w = 0.2;
      this.previewStyle1 = {
        width: previews.w + "px",
        height: previews.h + "px",
        overflow: "hidden",
        margin: "0",
        zoom: h,
      };

      this.previewStyle2 = {
        width: previews.w + "px",
        height: previews.h + "px",
        overflow: "hidden",
        margin: "0",
        zoom: w,
      };

      // 固定为 100 宽度
      this.previewStyle3 = {
        width: previews.w + "px",
        height: previews.h + "px",
        overflow: "hidden",
        margin: "0",
        zoom: 100 / previews.w,
      };

      // 固定为 100 高度
      this.previewStyle4 = {
        width: previews.w + "px",
        height: previews.h + "px",
        overflow: "hidden",
        margin: "0",
        zoom: 100 / previews.h,
      };
      this.previews = data;
    },
    modalcancel() {
      this.visible = false;
      this.$refs.updateicon.value = "";
      this.filelength = this.$refs.updateicon.files.length;

      // console.log(this.filelength)
    },
    changeavatar() {
      let that = this;
      this.$refs.cropper.getCropBlob((data) => {
        // const that = this;
        // do something
        // console.log(data)
        const imgFile = new FileReader();
        imgFile.readAsDataURL(data);
        imgFile.onload = function () {
          let formData1 = new FormData();
          formData1.append("imgName", "abc.png");
          formData1.append("userImg", this.result);

          request({
            method: "post",
            url: "/yishoudan/user/changeUserImgsrc",
            data: formData1,
            withCredentials: true,
            // headers: {'Content-Type': 'application/x-www-form-urlencoded'}

            headers: {
              "Content-Type":
                "multipart/form-data;boundary = " + new Date().getTime(),
            },
          })
            .then(({ data }) => {
              console.log(data);
              console.log();
              if (data.status === 200) {
                let userinfo = JSON.parse(sessionStorage.getItem("LOGIN_DATA"));
                userinfo.imgSrc = data.data.url;
                sessionStorage.setItem("LOGIN_DATA", JSON.stringify(userinfo));
                that.reload();
              }
            })
            .catch((error) => {
              console.log(error);
            });
          console.log(data);
        };
        this.visible = false;
      });

      // console.log(this.avatarready)
      // console.log(this.filelength)
      this.AvatarWaringmsgshow = false;
    },
  },
};
</script>

<style scoped lang="less">
.accountcontent {
  // height: 1000px;
  margin-top: 16px;
  // background-color: pink;
  display: flex;
  .accountSetList {
    width: 346px;
    // height: 500px;
    // background-color: skyblue;
    margin-right: 16px;
    .userinfobox {
      width: 346px;
      height: 158px;
      background: #ffffff;
      border-radius: 4px;
      padding: 24px 0;
      text-align: center;

      .avatarbox {
        margin: 0 auto;
        width: 64px;
        position: relative;

        &:hover {
          .mask {
            display: block;
          }
        }
        img {
          display: block;
          width: 64px;
          height: 64px;
          border-radius: 50%;
        }
        i {
          width: 64px;
          height: 64px;
          color: #ff6a00;
          > span {
            font-size: 64px;
            line-height: 64px;
          }
          .mask {
            position: absolute;
            display: none;
            width: 64px;
            height: 64px;
            left: 0;
            top: 0;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.7);

            div {
              position: relative;
              padding: 2px;
              width: 40px;
              margin-top: 11px !important;
              margin-left: 13px !important;
              font-size: 14px;
              line-height: 19px;
              font-weight: bold;
              letter-spacing: 2px;
              color: rgba(255, 255, 255, 0.8);
              top: 0;
              right: 0;
              left: 0;
              bottom: 0;
              margin: auto;
            }
          }
        }
      }
      .username {
        margin-top: 18px;
      }
    }
    .priceinfo {
      margin-top: 16px;
      ul {
        // margin-top: 16px;
        // padding: 0 16px;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        li {
          position: relative;
          display: flex;
          padding: 16px 16px 16px 16px;

          line-height: 24px;
          justify-content: space-between;
          // border-bottom: 1px solid #f3f4f4;
          cursor: pointer;
          &:nth-child(-n + 2):after {
            position: absolute;
            content: "";
            display: inline-block;
            height: 1px;
            width: 314px;
            bottom: -1px;
            left: 16px;
            background-color: #f3f4f4;
          }
          span:first-of-type {
            font-size: 16px;
            i:first-of-type {
              margin-right: 12px;
              font-size: 20px;
              vertical-align: middle;
            }
          }
          span:last-of-type {
            span {
              color: #999999;
              font-size: 14px;
            }
            i {
              color: #888;
              font-size: 22px;
              vertical-align: middle;
            }
          }
          &:hover {
            // background-color: #ff6a00 !important;
            color: #ff6a00;
            span {
              span {
                color: #ff6a00;
              }
              i {
                color: #ff6a00;
              }
            }
            i {
              color: #ff6a00;
            }
          }
        }
      }
    }
    > ul {
      background-color: #fff;
      margin-top: 16px;
      // padding: 0 16px;
      border-radius: 4px;
      overflow: hidden;

      li {
        position: relative;
        display: flex;
        padding: 16px;
        line-height: 24px;
        justify-content: space-between;
        // border-bottom: 1px solid #f3f4f4;
        cursor: pointer;
        &:nth-child(-n + 3):after {
          position: absolute;
          content: "";
          display: inline-block;
          height: 1px;
          width: 314px;
          bottom: -1px;
          left: 16px;
          background-color: #f3f4f4;
        }
        > span:first-child {
          font-size: 16px;
          i {
            margin-right: 12px;
            font-size: 20px;
          }
        }
        > span:last-child {
          line-height: 22px;
          span {
            color: #999;
            font-size: 14px;
          }
          > i {
            color: #888;
            // margin-left: 12px;
            vertical-align: middle;

            font-size: 22px;
          }
        }
        &:hover {
          // background-color: #ff6a00 !important;
          color: #ff6a00;
          span {
            span {
              color: #ff6a00;
            }
            i {
              color: #ff6a00;
            }
          }
          i {
            color: #ff6a00;
          }
        }
      }
    }
  }
  .rightcontent {
    width: 838px;
    height: 600px;
    padding: 0 16px;
    background-color: #fff;
  }
}

::v-deep .ant-modal-footer {
  display: none;
}
::v-deep .ant-modal-header {
  height: 48px;
  border-bottom: 0px solid #000;
}
::v-deep .ant-modal-title {
  font-size: 20px;
  font-weight: 400;
  text-align: left;
  color: #222222;
  line-height: 28px;
}
::v-deep .ant-modal-content {
  margin-top: 100px;
  width: 576px;
  height: 409px;
}

::v-deep .vue-cropper {
  width: 290px !important;
  margin: 0 !important;
}
.cropper-content {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  /deep/ .cropper-box {
    flex: 1;
    width: 100%;
    .cropper-view-box,
    .cropper-crop-box {
      border-radius: 50%;
    }
    .cropper-crop-box {
      .cropper-face {
        border-radius: 50%;
      }
      span:last-child {
        // display: none;
        span:nth-child(5) {
          display: none;
        }
        span:nth-child(7) {
          display: none;
        }
        span:nth-child(10) {
          display: none;
        }
        span:nth-child(12) {
          display: none;
        }
      }
    }
    .cropper {
      width: auto;
      height: 300px;
    }
  }
  .previewcontainer {
    text-align: center;
    margin-right: 50px !important;
    p {
      margin-bottom: 20px;
      margin-left: -150px;
    }
  }
  .show-preview {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #666;
    .preview {
      overflow: hidden;
      background: #cccccc;
    }
  }
}

.btncontainer {
  position: absolute;
  bottom: 25px;
  button {
    margin: 9px;
    height: 35px;
    width: 63px;
  }
  button:nth-child(1) {
    margin-left: -25px;
  }
}
</style>