mteacher/src/views/creation/edit/index.vue

<template>
  <div
     class="creationEdit"
     :style="{
        '--navBarHeight': navBarHeight + 'px'
     }"
  >
     <van-sticky>
        <van-nav-bar class="nav" :fixed="false" title="编辑" left-arrow @click-left="goBack" />
     </van-sticky>
     <div class="section sectionFile ">
        <div :class="['uploadImg2']">
           <!-- <img class="muploader showImg" :src="img || this.musicBg" /> -->
           <MUpload class="muploader mupload uploadSingleImg opacity" cropper :defaultImg="musicBg" v-model="img" :previewImage="true" />
        </div>
        <div class="musicDetail">
           <p class="musicName">{{ musicDetail.musicSheetName }}</p>
           <p class="username">{{ musicDetail.username }}</p>
        </div>
     </div>
     <div class="section sectionVideo" v-if="playType === 'Video'">
        <img :src="videoImg || videoBg" class="videoBg" />
        <div class="btnGroup">
           <MUpload class="muploader imgCover" cropper :previewImage="false" v-model="videoImg" :options="{ fixedNumber: [16, 9] }">
              <template #default>
                 <div class="btnImg" @click="onCropper">
                    相册获取封面
                 </div>
              </template>
           </MUpload>

           <div class="btnCropper" @click="onCropper">
              视频截取封面
           </div>
        </div>
     </div>
     <div class="section">
        <van-field
            class="fieldText"
           :rows="4"
           autosize
           type="textarea"
           maxlength="150"
           placeholder="我发布了一首演奏作品，快来听听吧～"
           showWordLimit
           v-model="desc"
        />
     </div>
     <div class="btnGroup">
        <van-button class="subBtn" type="primary" round block color="#01C1B5" @click="onSubmit">
           {{ musicDetail.type === "FORMAL" ? "保存" : "发布" }}
        </van-button>
     </div>
  </div>
</template>

<script>
import { postMessage } from "@/helpers/native-message"
import { browser } from "@/common/common"
import { api_userMusicSave, api_userMusicDetail } from "../api"
import MUpload from "@/components/MUpload"
export default {
  name: "creationEdit",
  data() {
     return {
        navBarHeight: 0,
        files: [],
        id: this.$route.query.id,
        musicDetail: {},
        playType: "",
        desc: "",
        videoImg: "", // 视频封面
        img: "",
        videoBg: require("../img/video-bg.png"),
        musicBg: require("../img/music_bg.png")
     }
  },
  components: { MUpload },
  methods: {
     goBack() {
        if (browser().isApp) {
           postMessage({
              api: "goBack"
           })
        } else {
           this.$router.back()
        }
     },
     async onSubmit() {
        try {
           await api_userMusicSave({
              id: this.id,
              img: this.img,
              videoImg: this.videoImg,
              desc: this.desc || "我发布了一首演奏作品，快来听听吧～",
              musicPracticeRecordId: this.musicDetail.musicPracticeRecordId,
              type: "FORMAL"
           })

           this.$router.back()
        } catch {
           //
        }
     },
     // 截图
     onCropper() {
        postMessage(
           {
              api: "videoCrop",
              content: {
                 url: this.musicDetail.videoUrl
              }
           },
           res => {
              if (res?.content.videoCover) {
                 this.videoImg = res.content.videoCover
              }
           }
        )
     }
  },
  created() {
     postMessage({ api: "getNavHeight" }, res => {
        const { content } = res
        const dpi = content.dpi || 2
        if (content.navHeight) {
           const navHeight = content.navHeight / dpi
           this.navBarHeight = navHeight
        }
     })
  },
  async mounted() {
     try {
        const { data } = await api_userMusicDetail(this.id)
        this.musicDetail = data
        this.desc = data.desc
        this.videoImg = data.videoImg
        this.img = data.img

        if (data?.videoUrl.lastIndexOf("mp4") !== -1) {
           this.playType = "Video"
        } else {
           this.playType = "Audio"
        }
     } catch {
        //
     }
  }
}
</script>

<style lang="less" scoped>
.creationEdit {
  min-height: 100vh;
  overflow: hidden;
  .nav {
     padding-top: var(--navBarHeight, 0);
     background: #f1f1f1;
     &::after {
        display: none;
     }
     /deep/ .van-nav-bar__content {
        height: 44px;
        .van-icon {
           font-size: 0.19rem;
           color: #333333;
        }
        .van-nav-bar__title {
           font-size: 0.18rem;
           color: #333333;
           font-weight: 500;
        }
     }
  }
  .sectionVideo {
     position: relative;
     line-height: 0;
     overflow: visible !important;
     margin-bottom: 24px !important;

     .videoBg {
        width: 100%;
        height: 196px;
        object-fit: cover;
        border-radius: 10px;
     }

     .btnGroup {
        position: absolute;
        left: 50%;
        bottom: 12px;
        background: linear-gradient(180deg, rgba(128, 177, 200, 0.59) 0%, rgba(58, 152, 162, 0.59) 100%);
        border-radius: 15px;
        height: 30px;
        // transform: translate(-50%);
        display: flex;
        align-items: center;
        flex: 1;
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
        line-height: 17px;
        width: 300px;
        margin: 0 0 0 -150px;

        & > div {
           flex: 1;
           text-align: center;
           display: flex;
           align-items: center;
           justify-content: center;
        }

        .btnCropper {
           border-left: 1px solid #fff;
           line-height: 1;

           &::before {
              content: "";
              width: 16px;
              height: 16px;
              display: inline-block;
              background: url("../img/icon-cropper.png") no-repeat center;
              background-size: contain;
              margin-right: 4px;
           }
        }

        /deep/.imgCover {
           .mcropperSection {
              display: none;
           }
        }

        .btnImg {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           margin: 0;
           line-height: 1;
           display: flex;
           align-items: center;
           justify-content: center;

           &::before {
              content: "";
              width: 16px;
              height: 16px;
              display: inline-block;
              background: url("../img/icon-image.png") no-repeat center;
              background-size: contain;
              margin-right: 4px;
              vertical-align: text-top;
           }

           // &::after {
           //   content: "相册获取封面";
           //   font-size: 12px;
           //   color: #fff;
           // }

           img {
              display: none;
           }
        }
     }
  }

  .section {
     margin: 12px 13px;
     background: #ffffff;
     border-radius: 10px;
     font-size: 16px;
     overflow: hidden;
     .fieldText /deep/.van-field__control{
         caret-color: #01C1B5;
      }

     .van-field__control::placeholder {
        color: #aaa;
     }
  }

  .sectionFile {
     padding: 12px;
     display: flex;

     .van-uploader {
        border-radius: 8px;
        overflow: hidden;
     }

     .van-uploader__upload,
     .van-uploader__preview-image {
        margin: 0;
        width: 0.62rem !important;
        height: 0.62rem !important;
     }

     /deep/.muploader {
        position: relative;
        z-index: 8;
        width: 0.62rem;
        height: 0.62rem;
        border: none;
        margin: 0;
        border-radius: 8px;
        background-color: #ffffff;
     }

     .uploadImg2 {
        position: relative;
        border-radius: 8px;
        margin-right: 16px;

        .showImg {
           position: absolute;
           left: 0;
           top: 0;
        }
        .tip {
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           z-index: 10;
           background: #000000;
           opacity: 0.37;
           font-size: 13px;
           color: #ffffff;
           line-height: 18px;
           text-align: center;
           border-radius: 0 0 8px 8px;
           pointer-events: none;
        }

        &::before {
           content: "";
           background: url("../img/audio-pan.png") no-repeat center;
           background-size: contain;
           position: absolute;
           top: 0;
           right: -6px;
           z-index: 4;
           width: 60px;
           height: 60px;
        }
     }

     .musicDetail {
        display: flex;
        justify-content: center;
        flex-direction: column;

        .musicName {
           font-size: 16px;
           font-weight: 600;
           color: #131415;
           line-height: 22px;
        }

        .username {
           padding-top: 4px;
           font-size: 14px;
           color: #777777;
           line-height: 20px;
        }
     }
  }

  .showInfoImg {
     width: 0.62rem;
     height: 0.62rem;
  }

  .btnGroup {
     margin: 32px 24px 12px;
     font-weight: 500;
     font-size: 16px;
     .subBtn /deep/.van-button__text{
         font-size: 16px;
      }
  }

  /deep/.uploadSingleImg {
     .mcropperSection,
     .cropper {
        width: 0.62rem !important;
        height: 0.62rem !important;
        border-radius: 6px !important;
        overflow: hidden !important;
     }

     .mcropperSection .uploadImg {
        margin-right: 0;
     }
     .cropper::before {
        content: "选封面";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        background: #000000;
        opacity: 0.37;
        line-height: 20px;
        height: 20px;
        font-size: 13px;
        color: #ffffff;
        line-height: 18px;
        text-align: center;
        border-radius: 0 0 8px 8px;
        pointer-events: none;
     }
     &.opacity {
        // &::before {
        //   display: none;
        // }

        .upbtn > input {
           width: 0.62rem !important;
           height: 0.62rem !important;
        }
     }
  }
}
</style>