proginn-frontend/components/kaifain/ChangeBgImage.vue

<template>
  <div :class="{connectUs: !mobile, connectUsMobile: mobile}">
    <div class="toastBox1" v-if="isShowToast">
      <div class="toastArea1">
        <div class="title">更换背景</div>

        <div class="freeBg">
          <p class="label">免费背景</p>
          <div class="list">
            <div class="cell" v-for="(item, index) in bgList"
             :class="{selected: index===choosedBgIndex}"
              @click="choosedBgIndex=index"
            >
              <img :src="item.url" alt="" />
              <div class="imgSel"></div>
            </div>
          </div>
        </div>

        <div class="myBg">
          <div class="labelArea">
            <p class="label">自定义背景</p>
            <div class="icon"></div>
            <div class="word">会员专享</div>
          </div>
          <div class="uploadInfo">
            <div class="left">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :multiple="false"
                accept="image/png, image/jpeg"
                :before-upload="(file) => handleFileChange(file, 'bg')"
              >
                <i v-if="bg" class="el-icon-delete avatar-uploader-icon"
                   @click.stop="() => handleDeleteFile('bg') "></i>
                <img v-if="bg" :src="bg" class="avatar"/>
                <div v-else class="noneImage">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
              <div class="coverIsNotVip" v-if="!checkVip" @click="openToast"></div>
            </div>
            <div class="right">
              <p>建议分辨率2000*500px, 不超过2MB</p>
            </div>
          </div>
        </div>
        <div class="btnList">
          <div class="submitBtn" @click="handleSubmit">
            <p>确定</p>
          </div>
          <div class="cancleBtn" @click="close">
            <p>取消</p>
          </div>
        </div>
        <div class="closeIcon" @click="close"/>
      </div>
    </div>
  </div>
</template>

<script>

  const bgList = [
    {color: "blue", url: "https://filescdn.proginn.com/community/64168/20200402/tbYRzPFDCa.png"}, //蓝色
    {color: "green", url: "https://filescdn.proginn.com/community/64168/20200402/tmqVdIL2MO.png"}, //绿色
    {color: "purple", url: "https://filescdn.proginn.com/community/64168/20200402/rRprryIdvO.png"}, //紫色
    {color: "orange", url: "https://filescdn.proginn.com/community/64168/20200402/N4Bi6xDTna.png"}, //橙色
    {color: "black", url: "https://filescdn.proginn.com/community/64168/20200402/kQlmkC1HXp.png"}, //黑色
    {color: "red", url: "https://filescdn.proginn.com/community/64168/20200402/hhkR6VNTNT.png"}, //红色
  ]
export default {
  props: ["isShowToast", "pId"],
  components: {},
  data() {
    return {
      bg: "",
      bgList: bgList,
      uploading: false,
      choosedBgIndex: 0,
      mobile: false,
    }
  },
  computed: {
    checkVip() {
      let {is_vip, vip_type_id} = this.$store.state.userinfo || {}
      vip_type_id = Number(vip_type_id)
      return is_vip && (vip_type_id === 1 || vip_type_id === 3)
    },
  },
  mounted() {
  },
  methods: {
    close() {
      this.$emit('close')
    },
    ok() {
      this.$emit('ok')
    },
    /** 校验是不是企业会员 **/
    handleSubmit() {
      let url = bgList[this.choosedBgIndex].url
      if (this.checkVip && this.bg) {
        url = this.bg
      }
      let p = {
        id: this.pId,
        url: url
      }
      this.$axios.post('/api/kaifawu/update_bg_image', p).then(res => {
         if (res.data.status === 1) {
           this.$message.success(res.info || '提交成功')
           this.$emit('close')
           this.$emit('ok')
         }
      })
    },
    /** 图片文件上传 **/
    handleFileChange(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return
      }
      const formData = new FormData();
      formData.append("file", file);
      formData.append("original_filename", file.name);
      this.uploading = true;
      this.$axios
        .$post(`/upload_image`, formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(res => {
          this.bg = res.filename
        })
        .finally(() => {
          this.uploading = false;
        });
    },
    /** 删除问及爱你 **/
    handleDeleteFile() {
      this.bg = ""
    },
    openToast () {
      const h = this.$createElement;
      this.$msgbox({
        title: '开通会员',
        message: h('p', null, [
          h('span', null, '开通会员，即可自定义上传解决方案背景图片 '),
        ]),
        showCancelButton: true,
        confirmButtonText: '立即开通',
        cancelButtonText: '不了谢谢',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            location.href = "/type/vip/enterprise"
          } else {
            done();
          }
        }
      }).then(action => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        });
      });
    }
  }
};
</script>

<style lang="scss">
  @import "~@/assets/css/scssCommon.scss";
.connectUs {
  .toastBox1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 888;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .toastArea1 {
      position: relative;
      width: 584px;
      height: 593px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      padding: 40px 22px;

      .title {
        height:24px;
        font-size:17px;
        font-weight:600;
        color:rgba(34,34,34,1);
        line-height:24px;
        text-align: center;
      }

      .freeBg, .myBg {
        .label {
          height:24px;
          font-size:13px;
          font-weight:600;
          color:rgba(51,51,51,1);
          line-height:24px;
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 3px;
          margin-left: -10px;
          .cell {
            position: relative;
            margin-top: 10px;
            margin-left: 10px;
            img {
              width: 170px;
              height: 90px;
              border-radius: 4px;
            }
            &.selected {
              .imgSel {
                width:34px;
                height:34px;
                border-radius: 50%;
                background:
                  url("data:image/png;base64,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") no-repeat;
                background-size: cover;
                position: absolute;
                left: calc(50% - 17px);
                top: calc(50% - 17px);

              }
            }
          }

        }
      }
      .myBg {
        margin-top: 30px;
        .labelArea {
          display: flex;
          align-items: center;
          .label {
            height:24px;
            font-size:13px;
            font-weight:600;
            color:rgba(51,51,51,1);
            line-height:24px;
          }
          .icon {
            margin-left: 8px;
            width: 17px;
            height: 14px;
            background: url("~@/assets/img/kaifain/detail/vip_icon@2x.png") no-repeat;
            background-size: cover;
          }
          .word {
            margin-left: 2px;
            height:17px;
            font-size:12px;
            font-weight:500;
            color:rgba(221,175,90,1);
            line-height:17px;
          }
        }
        .uploadInfo {
          margin-top: 10px;
          display: flex;
          .left {
            width: 170px;
            height: 90px;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
            background: #fff;
            .el-icon-delete {
              display: none;
            }
            .avatar-uploader .el-upload {
              width: 170px;
              height: 90px;
              border: 1px dashed #6f6c6f;
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
              img {
                width: 100%;
                height: auto;
                object-fit: contain;
                object-position: top left;
              }
            }
            .avatar-uploader .el-upload:hover {
              border-color: #409eff;
              .el-icon-delete {
                display: block;
              }
            }
            .avatar-uploader-icon {
              position: absolute;
              top: 0;
              left: 0;
              font-size: 44px;
              color: #6f6c6f;;
              width: 170px;
              height: 90px;
              line-height: 90px;
              text-align: center;
            }
            .avatar {
              width: 170px;
              height: 90px;
              display: block;
            }
            .title {
              position: absolute;
              left: 50%;
              bottom: 40px;
              transform: translateX(-50%);
              font-size: 13px;
              font-weight: 500;
              color: #409eff;
              line-height: 18px;
              text-decoration: underline;
            }
            .rightTips {
              height: 19px;
              font-size: 13px;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 19px;
              text-align: center;
            }

            .coverIsNotVip {
              position: absolute;
              left: 0;
              top: 0;
              width: 170px;
              height: 90px;
              cursor: pointer;
            }
          }
          .right {
            margin-left: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            p {
              height: 17px;
              font-size: 12px;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 17px;
            }
          }
        }
      }

      .btnList {
        display: flex;
        margin-top: 37px;
        .submitBtn, .cancleBtn {
          margin-top: 0;
          width:140px;
          height:44px;
          background:rgba(48,142,255,1);
          box-shadow:0px 2px 6px 0px rgba(48,142,255,0.3);
          border-radius:2px;
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            height:20px;
            font-size:14px;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:20px;
          }
        }
        .cancleBtn {
          cursor: pointer;
          margin-left: 10px;
          background:rgba(236,236,236,1);
          box-shadow: none;
          p {
            color:rgba(102,102,102,1);
          }
        }
      }

      .closeIcon {
        position: absolute;
        right: 20px;
        top: 34px;
        width: 16px;
        height: 16px;
        background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
    }

  }

}
.connectUsMobile {
  .toastBox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 888;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .toastArea {
      position: relative;
      width: pxtovw(355);
      height: pxtovw(403);
      background: rgba(255, 255, 255, 1);
      border-radius: pxtovw(3);
      padding: pxtovw(30) pxtovw(30);

      .title {
        font-size: pxtovw(19);
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: pxtovw(26);
        text-align: center;
      }



      .closeIcon {
        position: absolute;
        right: pxtovw(20);
        top: pxtovw(34);
        width: pxtovw(16);
        height: pxtovw(16);
        background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
    }

  }
}
</style>