裁剪图片image-clip.js

js:
import { ga } from 'ga';
import jcApp from '@ceair/jc-base-app/all/1.10.1'
import apiConfig from '@/js/config/api.js'
import 'layerApp';
import 'layerAppCss';
import {
  message,
  isInApp,
  saveP,
  getCookie,
  parse_url,
  APPLogin,
  changeTitle
} from './lib/utils-fn.js';
ga();
jcApp.getPValue(p => {
  var p_value = p || "", loginToken = getCookie('com.ceair.cesso') || "";
  // var p_value = 'U/kdIFBV9sB1McanwTjmlO7mQdTam3AccQ2GnYtDAq2AIJkkzisAtgx5vsiFTa7bX8BvIgeDUXqOt3i5JIEWkt6cCFKOYpqtYRp5YQf6ymiOki65IYUG9Y9v8h3nWGzpcNyIg0Ib%2BHM1%2BrhgHqZif7n/tAjE25G71aUt1b/DeqCMS4CgJ4I1JV%2B//DVzlWvvIF5Y6L2orGkuBkodrwXMoacYT4XHuJsn/KRwupVy392kBbbS1t8hgf07rrnLDCBcmC%2BQnthpfdMOkVwtkVEfYdxAf%2B9PhBaS4zHMWw73ETxpiFYfxqYZaeKMAEhNKjYaTRFk3f7j8PbaJpyxLPp5jbS%2B48NEckpSGyjy%2BsOumFA%3D';
  var votePhotoData = new Vue({
    el: "#myPhotoTemp",
    data: {
      ajaxUrl: apiConfig.ajaxUrl,
      isLoading: false,   //loading
      imgsType: {     //判断图片类型
        accept: 'image/gif,image/jpeg,image/png,image/jpg'
      },
      isMyProduction: true,  //是否显示我的作品
      myProductionTempData: [],  //我需要上传的作品
      myProductionHDTempData: [],  //我需要上传的HD作品
      myUploadNum: 0,  //用户可上传次数
      isSucceed: false, //是否成功
      isDisable: true,  //上传按钮是否可用
      isAndroid: false,
      photoAppbase: [{ Img: '', ImgHD: '' }],   //保存图片base64
      isClip: false,
      isEnlarged: false  //是否放大图片
      //ImageUrlHDArr: []
    },
    filters: {
    },
    beforeMount: function () {
    },
    mounted: function () {
      jcApp.setHeader(`作品上传`);
      this.$nextTick(function () {
        this.onLoad();
      });
    },
    methods: {
      //页面加载
      onLoad: function () {
        if (jcApp.isInApp()) {
          var u = navigator.userAgent;
          if (u.match(/Android/i) != null) { //android设备
            this.isAndroid = true;
          }
        }
        //需要上传我的作品
        if (p_value != "" || loginToken != "") {
          this.myProductionTempData = JSON.parse(sessionStorage.getItem('PitchOnPhotoList'));
          this.myProductionHDTempData = JSON.parse(sessionStorage.getItem('PitchOnHDPhotoList'));
          if (this.myProductionTempData.length == 0) {
            window.location.href = "myProduction.html?p=" + p_value;
          }
        } else {
          window.location.href = "photoPrizeIndex.html";
        }
      },
      //安卓更换图片
      changePhotoAndroid: function (e) {
        e.preventDefault();
        //this.isLoading = true;
        // tophoto.clickOnPhoto("400", "400", "1");
        //app内返回base64
        jcApp.on_photo((stream) => {
          this.initImgClip(stream)
          // this.loadImg('data:image/png;base64,' + stream)
          // this.photoAppbase[0].ImgHD = stream;
          //this.uploadAPP(stream);
        })
      },
      changePhotoAPP: function (stream) {
        this.photoAppbase[0].Img = stream;
        axios.post(
          this.ajaxUrl + '/UpLoadImage', {
            ImgList: this.photoAppbase,
            PValue: p_value || loginToken
          }
        ).then((res) => {
          this.isLoading = true;
          if (res.data.Code == 200) {
            this.isLoading = false;    //loading关闭
            this.isClip = false;
            this.$refs.thumb[0].src = res.data.Data.ImgUrl[0];   //替换图片
            this.$refs.thumb2[0].src = res.data.Data.ImgUrl[0];   //替换图片
            this.myProductionHDTempData[index] = res.data.Data.ImageUrlHD[0]; //高清图
          }
        }).catch((error) => {
          // message(error.data.Msg);
        });
      },
      dataURLtoBlob(dataurl) {
        return dataurl.split(',')[1]
      },
      //裁剪上传图片
      initImgClip(e) {
        let that = this;
        that.targetImg = e;
        if (this.isAndroid) {
          that.loadImg(e);  //原图b64
          that.photoAppbase[0].ImgHD = that.dataURLtoBlob(e);
        } else {
          new FileInput({
            container: '#targetImg',
            isMulti: false,
            type: 'Image_Camera',
            success: function (b64, file, detail) {
              // console.log("选择:" + b64);
              //alert("fileName:" + file.name);
              that.loadImg(b64);  //原图b64
              that.photoAppbase[0].ImgHD = that.dataURLtoBlob(b64);
            },
            error: function (error) {
              console.error(error);
            }
          })
        }

      },

      loadImg: function (b64) {
        let that = this;
        that.isClip = true;
        that.changeImgClipShow(that.isClip);

        var img = new Image();
        img.src = b64;

        img.onload = function () {
          EXIF.getData(img, function () {
            var orientation = EXIF.getTag(this, 'Orientation');

            that.cropImage && that.cropImage.destroy();
            that.cropImage = new ImageClip({
              container: '.img-clip',
              // width: 650,
              // height: 300,
              img,
              // 0代表按下才显示,1恒显示,-1不显示
              sizeTipsStyle: 0,
              // 为1一般是屏幕像素x2这个宽高
              // 最终的大小为:屏幕像素*屏幕像素比(手机中一般为2)*compressScaleRatio
              compressScaleRatio: 1.1,
              // iphone中是否继续放大:x*iphoneFixedRatio
              // 最好compressScaleRatio*iphoneFixedRatio不要超过2
              iphoneFixedRatio: 1.8,
              // 减去顶部间距,底部bar,以及显示间距
              maxCssHeight: window.innerHeight - 100 - 50 - 20,
              // 放大镜捕获的图像半径
              captureRadius: 30,
              // 是否采用原图像素(不会压缩)
              isUseOriginSize: false,
              // 增加最大宽度,增加后最大不会超过这个宽度
              maxWidth: 0,
              // 是否固定框高,优先级最大,设置后其余所有系数都无用直接使用这个固定的宽,高度自适应
              forceWidth: 0,
              // 同上,但是一般不建议设置,因为很可能会改变宽高比导致拉升,特殊场景下使用
              forceHeight: 0,
              // 压缩质量
              quality: 0.92,
              mime: 'image/png',
            });

            // 6代表图片需要顺时针修复(默认逆时针处理了,所以需要顺过来修复)
            switch (orientation) {
              case 6:
                that.cropImage.rotate(true);
                break;
              default:
                break;
            }

          });
        }
      },

      changeImgClipShow(isclip) {
        let that = this;
        if (!isclip) {
          that.targetImg.value = '';
        }
      },
      uploadCancel(e) {
        let that = this;
        e.preventDefault();
        that.cropImage && that.cropImage.destroy();
        that.isClip = false;
        that.changeImgClipShow(that.isClip);
      },
      anticlockwise(e) {
        let that = this;
        e.preventDefault();
        that.cropImage.rotate(false);
      },
      clockwise(e) {
        let that = this;
        e.preventDefault();
        that.cropImage.rotate(true);
      },
      uploadEnter(e) {
        let that = this;
        e.preventDefault();
        that.isLoading = true;
        that.cropImage.clip(false);
        that.imgData = that.cropImage.getClipImgData();
        that.recognizeImg(function () {
          that.isShowContent = true;
          that.changeContent();
        }, function (error) {
          tips(JSON.stringify(error), true);
        });
      },
      changeContent() {
        let that = this;
        that.resizeShowImg(that.imgData);
        that.changePhotoAPP(that.dataURLtoBlob(that.imgData))
      },
      resizeShowImg(b64) {
        let that = this;
        var img = new Image();
        img.src = b64;
        img.onload = that.showImgOnload();
      },
      showImgOnload() {
        let that = this;
        // 必须用一个新的图片加载,否则如果只用showImg的话永远都是第1张
        // margin的话由于有样式,所以自动控制了
        var width = that.width;
        var height = that.height;
        var wPerH = width / height;
        var MAX_WIDTH = Math.min(window.innerWidth, width);
        var MAX_HEIGHT = Math.min(window.innerHeight - 50 - 100, height);
        var legalWidth = MAX_WIDTH;
        var legalHeight = legalWidth / wPerH;

        if (MAX_WIDTH && legalWidth > MAX_WIDTH) {
          legalWidth = MAX_WIDTH;
          legalHeight = legalWidth / wPerH;
        }
        if (MAX_HEIGHT && legalHeight > MAX_HEIGHT) {
          legalHeight = MAX_HEIGHT;
          legalWidth = legalHeight * wPerH;
        }

        var marginTop = (window.innerHeight - 50 - legalHeight) / 2;

        that.$refs.showImg.style.marginTop = marginTop + 'px';
        that.$refs.showImg.style.width = legalWidth + 'px';
        that.$refs.showImg.style.height = legalHeight + 'px';
      },
      recognizeImg(success, error) {
        // 里面正常有:裁边,摆正,梯形矫正,锐化等算法操作
        success();
      },
      //放大图片
      enlargedImg: function (isEnlarged) {
        this.isEnlarged = isEnlarged;
      },

      //之前更换图片,不使用
      changePhoto: function (index, e) {
        this.isLoading = true;
        e.preventDefault();
        let imgOne = event.target.files[0], imgType = imgOne.type || '', imgSize = imgOne.size, imgForm = new FormData();
        if (this.imgsType.accept.indexOf(imgType) == -1) {
          message('图片格式不支持!');
          return false;
        }
        if (imgSize > 5242880) {
          message('请选择5M以内的图片!');
          return false;
        }
        imgForm.append('file', imgOne);
        imgForm.append('PValue', p_value || loginToken)  //表单添加图片路径

        var headers = { headers: { 'Content-Type': 'multipart/form-data' } };
        axios.post(
          this.ajaxUrl + '/UpLoadImageForm', imgForm, headers
        ).then((res) => {
          this.isLoading = false;
          if (res.data.Code == 200) {
            this.isLoading = false;    //loading关闭
            this.$refs.thumb[index].src = res.data.Data.ImgUrl[0];
            this.myProductionHDTempData[index] = res.data.Data.ImageUrlHD[0]; //高清图
          }
        }).catch((error) => {
          message(error.data.Msg);
        });
      },

      //删除图片
      deletePhoto: function (index, e) {
        e.preventDefault();
        // this.$refs.upLoadPicturesLi[index].remove();
        this.myProductionTempData.splice(index, 1);
        this.myProductionHDTempData.splice(index, 1);
        sessionStorage.setItem('PitchOnPhotoList', JSON.stringify(this.myProductionTempData));  //存入session
        sessionStorage.setItem('PitchOnHDPhotoList', JSON.stringify(this.myProductionHDTempData));  //存入session
        if (this.myProductionTempData.length == 0) {
          window.location.href = "myProduction.html?p=" + p_value;
        }
      },
      //同意知识产权
      agreementBox: function () {
        if (document.getElementById('agreementCheck').checked) {
          this.isDisable = false;
        } else {
          this.isDisable = true;
        }
      },
      //确定上传作品
      enterUpload: function () {
        this.isDisable = true;
        // setTimeout(() => {
        //     this.isDisable = false;
        // }, 1000)
        let myProductionData = [];
        //var reg2 = /([\u00A9\u00AE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9-\u21AA\u231A-\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA-\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614-\u2615\u2618\u261D\u2620\u2622-\u2623\u2626\u262A\u262E-\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u2660\u2663\u2665-\u2666\u2668\u267B\u267F\u2692-\u2697\u2699\u269B-\u269C\u26A0-\u26A1\u26AA-\u26AB\u26B0-\u26B1\u26BD-\u26BE\u26C4-\u26C5\u26C8\u26CE-\u26CF\u26D1\u26D3-\u26D4\u26E9-\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733-\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2764\u2795-\u2797\u27A1\u27B0\u27BF\u2934-\u2935\u2B05-\u2B07\u2B1B-\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70-\uDD71\uDD7E-\uDD7F\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01-\uDE02\uDE1A\uDE2F\uDE32-\uDE3A\uDE50-\uDE51\uDF00-\uDF21\uDF24-\uDF93\uDF96-\uDF97\uDF99-\uDF9B\uDF9E-\uDFF0\uDFF3-\uDFF5\uDFF7-\uDFFF])|(\uD83D[\uDC00-\uDCFD\uDCFF-\uDD3D\uDD49-\uDD4E\uDD50-\uDD67\uDD6F-\uDD70\uDD73-\uDD7A\uDD87\uDD8A-\uDD8D\uDD90\uDD95-\uDD96\uDDA4-\uDDA5\uDDA8\uDDB1-\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA-\uDE4F\uDE80-\uDEC5\uDECB-\uDED2\uDEE0-\uDEE5\uDEE9\uDEEB-\uDEEC\uDEF0\uDEF3-\uDEF6])|(\uD83E[\uDD10-\uDD1E\uDD20-\uDD27\uDD30\uDD33-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4B\uDD50-\uDD5E\uDD80-\uDD91\uDDC0])/g;
        var reg3 = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;
        for (var i = 0; i < this.myProductionTempData.length; i++) {
          let tempPhotoData = new Object();
          tempPhotoData.ImgUrl = this.$refs.thumb[i].src;
          tempPhotoData.ImageUrlHD = this.myProductionHDTempData[i];
          if (this.$refs.photoDescribe[i].value != "") {
            tempPhotoData.Content = this.$refs.photoDescribe[i].value.replace(reg3, '')
            //tempPhotoData.Content = this.$refs.photoDescribe[i].value;
          } else {
            message("请填写作品描述!");
            //checkbox改成未选择状态
            this.$refs.agreementCheck.checked = false;
            return;
          }
          myProductionData.push(tempPhotoData);
        }
        //alert(JSON.stringify(myProductionData));
        axios.post(
          this.ajaxUrl + '/PushPhoto', {
            PValue: p_value || loginToken,
            List: myProductionData
          }
        ).then((res) => {
          if (res.data.Code == 200 && res.data.Data) {
            this.isLoading = true;
            message("上传成功!");
            setTimeout(function () {
              window.location.href = "myProduction.html?p=" + p_value //跳转到我的作品
            }, 2000)
          } else {
            message(res.data.Msg);
          }
        }).catch((error) => {
          message(error.data.Msg);
        });
      },
      //知识产权规则
      ruleBoxShow: function () {
        this.$refs.activityRuleBox.style.display = "block";
      },
      //知识产权关闭
      ruleBoxClose: function () {
        this.$refs.activityRuleBox.style.display = "none";
      },
      //活动规则
      activityRuleShow() {
        this.$refs.activityRuleShow.style.display = "block";
      },
      //规则关闭
      activityRuleClose: function () {
        this.$refs.activityRuleShow.style.display = "none";
      },
    }
  });
})


html:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>作品上传</title>
  <meta content="" name="keywords" />
  <meta content="" name="description" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" href="dest/css/index.css">
  <link rel="stylesheet" href="dest/css/common.css">
  <link rel="stylesheet" href="dest/css/image-clip.css">
  <link rel="stylesheet" href="dest/css/clip.css">
  <script src="dest/js/lib/flexible.min.js"></script>

</head>

<body style="background:#f2f2f2">
  <div id="myPhotoTemp">
    <div class="show-content hidden">
      <div class="img-wrap">
        <img class="show-img" data-preview-src="" data-preview-group="2" ref="showImg"></img>
      </div>
    </div>
    <!--我的作品上传-->
    <div class="upLoadPictures">
      <ul>
        <li v-for="(item,index) in myProductionTempData">
          <div class="myPicturesWrap">
            <img :src=item ref="thumb" @click="enlargedImg(true)" />
            <div v-show="isEnlarged" class="enlargedImgShow" @click="enlargedImg(false)">
              <img :src=item ref="thumb2" />
            </div>
            <div>
              <div class="myPicturesBtn">
                <a v-if="isAndroid" href="javascript:void(0)" @click="changePhotoAndroid($event)">更换图片</a>
                <div v-else class="changePhotoBtn" ref="choose_gallery">
                  <input type="file" id="targetImg" @click="initImgClip($event)" class="changeFile"
                    multiple="multiple" accept="image/png, image/jpeg, image/jpg">更换图片
                </div>
                <!-- <a v-else href="javascript:void(0)">更换图片<input @change='changePhoto(index,$event)' type="file"
                    class="changeFile" /></a> -->
                <a href="javascript:void(0)" @click="deletePhoto(index,$event)">删除</a>
              </div>
              <!-- <p>图片大小1.2M</p> -->
            </div>
          </div>
          <div>
            <textarea class="myPicturesInfo" ref="photoDescribe" maxlength="80"
              placeholder="您还可以在此为您的作品添加创作心得哦(限80个字符)"></textarea>
          </div>
        </li>
      </ul>
      <div class="agreementText">
        <input type="checkbox" ref="agreementCheck" id="agreementCheck" @click='agreementBox()' /> 我已阅读并同意 
        <a
          href="javascript:void(0)" @click='activityRuleShow()'>活动规则</a>和<a
          href="javascript:void(0)" @click='ruleBoxShow()'>设计授权协议</a>
      </div>
      <button class="uploadingBtn" @click='enterUpload()' :disabled="isDisable">确定上传</button>

      <div :class="isClip ? 'uploadImgLayer' : 'hidden'">
        <div class="img-clip"></div>

        <nav :class="isClip ? 'clip-action nav-bar nav-bar-tab' : 'clip-action nav-bar nav-bar-tab hidden'">
          <a class="tab-item" @click="uploadCancel($event)">
            <span class="tab-label">取消</span>
          </a>
          <a class="tab-item " @click="clockwise($event)">
            <span class="tab-label clockwise"></span>
          </a>
          <a class="tab-item " @click="anticlockwise($event)">
            <span class="tab-label anticlockwise"></span>
          </a>
          <a class="tab-item" @click="uploadEnter($event)">
            <span class="tab-label">确认</span>
          </a>
        </nav>
      </div>
    </div>
    <!--设计授权协议-->
    <div class="ruleBoxWrap" ref="activityRuleBox">
      <div class="ruleScroll">
        <div class="ruleBox">
          <h5>设计授权协议</h5>
          <p>感谢您参与本次活动,在参与本次活动前,请您认真阅读本协议,并确认承诺同意遵守本协议之全部约定。本协议由您与东方航空电子商务有限公司于您点击同意本协议之时在上海市签署并生效。如您勾选“我同意《设计授权协议》”并继续使用东航的服务或参与东航发布的任何活动,即视为您已阅读并同意本协议, 自愿接受本协议的所有内容的约束。请您在决定参与或使用服务前再次确认 您已知悉并完全理解本协议的所有内容。
          </p>
          <p>本人上传、提交、存储或发布用于参与本次“随心飞夏日着装设计师征集令”活动的内容(包括但不限于文字、图片、视频、音频、动画等)系本人原创,本人享有完整、排他的著作权,且不存在侵犯任何第三方的知识产权或其他合法权益的情形。</p>
          <p>本人同意,将上述内容的非专属、可转让的财产性权利,如除署名权以外的全部著作权,在全世界范围内永久、免费、独家且不可撤销地授权给东方航空电子商务有限公司及其关联公司,东方航空电子商务有限公司及其关联公司可基于该等授权使用上述内容(包括但不限于用于随心飞服饰生产、销售及相关宣传推广等商业用途)或向第三方自主进行任何必要的转授权。该等授权、转授权的使用场景包括但不限于当前或其他任何网站、应用程序、产品或移动终端设备等,且东航及其关联公司或东航及其关联公司所授权许可的第三方可通过对上述授权内容进行修改、复制、改编、翻译、汇编或制作,形成衍生产品。在不违反相关法律法规的强制性规定、尊重相关原始授权内容的知识产权的基础上,该等衍生产品的相关知识产权归东航及其关联公司或东航所授权许可的第三方所有。
          </p>
          <p>您承诺不得以任何方式利用发布平台直接或者间接从事违反中国法律、以及社会公德的行为,东航有权对违反上述承诺的内容予以删除或屏蔽,并立即停止相关服务。
          </p>
          <p>您不得利用本平台制作、上载、复制、发布、传播或者转载如下内容:</p>
          <p>(1)反对宪法所确定的基本原则的;</p>
          <p>(2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一的;</p>
          <p>(3)损害国家荣誉和利益的;</p>
          <p>(4)煽动民族仇恨、民族歧视,破坏民族团结的;</p>
          <p>(5)破坏国家宗教政策,宣扬邪教和封建迷信的;</p>
          <p>(6)散步谣言,扰乱社会秩序,破坏社会稳定的;</p>
          <p>(7)散步淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的;</p>
          <p>(8)侮辱或者诽谤他人的,侵害他人合法权益的;</p>
          <p>(9)含有法律、行政法规禁止的其他内容的信息。 </p>
          <p>若您是未满18周岁的未成年人,应在监护人监护、指导并获得监护人同意情况下阅读本协议和参与本次活动。</p>
          <p>在获得您授权的情况下,东航有权对作品进行调整和修改。</p>
          <p>您同意,因您通过东航上传、发布的任何内容导致的知识产权侵权等违法问题,您将独立承担全部责任;如东航及其关联公司,或东航授权的其他服务提供方因第三方知识产权维权而产生损失(含诉讼费、律师费等相关法律程序费用),您将等额赔偿。</p>
        </div>
      </div>
      <div class="closeBox" @click="ruleBoxClose()"></div>
    </div>
    <!--活动规则-->
    <div class="ruleBoxWrap" ref="activityRuleShow">
        <div class="ruleScroll">
            <div class="ruleBox">
                <h5>活动规则</h5>
                <p>1.参与设计征集活动的用户须为“东方万里行”会员
                </p>
                <p>2.设计征集及投票时间:即日起-2021年4月18日</p>
                <p>3.用户须在设计模板中的创作区域内进行设计
                </p>
                <p>4.设计主题须与随心飞相关、内容积极向上,设计作品须为用户原创
                </p>
                <p>5.每位用户最多可上传3张作品,作品审核通过后,用户将收到短信提醒;用户也可通过活动页面“查看我的作品”了解审核进展</p>
                <p>6.作品审核通过后可邀请好友投票,每位用户每天可投3票,用户可为本人作品投票</p>
                <p>7.如同一“东方万里行”会员账号对应的用户有多款设计作品取得获奖资格,则仅视为获奖1次,仅限领取1份奖品</p>
                <p>8.工作人员将在活动结束后15个工作日内与获奖者联系</p>
                <p>9.机票奖品为东上航实际承运的国内直达航线经济舱往返机票一套(不包含税费、机场建设费),限乘坐由东航、上航实际承运的经济舱航班,可选航班期限为2021年4月21日-2021年10月31日</p>
                <p>10.机票奖品仅限参与活动的“东方万里行”账号所对应的用户本人领取并使用,用户须保留往返机票的行程单及登机牌以报销形式兑现,具体报销流程由工作人员告知</p>
                <p>11.为适应随心飞服饰的生产制作,被选用的设计作品可能进行微调</p>
                <p>12.上传作品前请仔细阅读《设计授权协议》,作品一经上传即视为用户同意授权东方航空将此设计用于随心飞服饰的制作及发售,如无法履行该协议条款,即视为放弃获奖资格</p>
              </div>
        </div>
        <div class="closeBox" @click="activityRuleClose()"></div>
      </div>
    <!--loading-->
    <div v-show="isLoading" class="showLoading">
      <span></span>
    </div>
  </div>
  <!-- <script src="//ecpassport.ceair.com/api/member/login/login_api"></script> -->
  <script src="dest/js/lib/vue.min.js"></script>
  <script src="dest/js/lib/axios.min.js"></script>
  <script src="dest/js/lib/fileinput.js"></script>
  <script src="dest/js/lib/exif.js"></script>
  <script src="dest/js/upLoadPhoto.min.js"></script>
  <script src="dest/js/lib/image-clip.js"></script>

</body>

</html>

插件网址:https://www.jq22.com/jquery-info17342

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值