Apq
/
MyUrls
mirror of https://github.com/CareyWang/MyUrls.git


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyUrls</title>

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
  <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-clipboard.min.js"></script>
</head>

<body>
  <div id="app">
    <el-container>
      <el-header></el-header>
      <el-main>
        <div :class="[isPc ? 'body-center body-width-pc' : 'body-center body-width-mb']">
          <img width="300" src="https://cdn.jsdelivr.net/gh/CareyWang/MyUrls@master/public/logo.png" @click="goToGayHub">
          <el-input ref="long" v-model="longUrl" size="medium" @keyup.enter.native="enterToDoShort">
            <el-button slot="append" icon="el-icon-magic-stick" @click="doShort" :loading="loading"></el-button>
          </el-input>
          <el-input ref="shortUrl" @dblclick.native="changeDisableStatus" class="copy-content" v-model="shortUrl" size="medium">
            <el-button slot="append" v-clipboard:copy="shortUrl" v-clipboard:success="onCopy" ref="copy-btn"
              icon="el-icon-document-copy"></el-button>
          </el-input>
        </div>
      </el-main>
    </el-container>
  </div>

  <script>
    const repo = 'https://github.com/CareyWang/MyUrls'

    let app = new Vue({
      el: "#app",
      data() {
        return {
          isPc: true,

          loading: false,
          longUrl: '',
          shortUrl: ''
        }
      },
      created() {
        const os = this.getOS()
        if (os.isPc !== true) {
          this.isPc = false
        }
      },
      mounted() {
        this.$refs.long.focus()
      },
      methods: {
        enterToDoShort(ev) {
          ev.keyCode === 13 && this.doShort()
        },
        doShort() {
          let re = new RegExp('http(s*)://[^\s]*')
          if (re.exec(this.longUrl) === null) {
            this.$message.warning('请输入正确格式的长链接')
            return
          }

          this.loading = true

          let data = new FormData();
          data.append("longUrl", btoa(this.longUrl));
          data.append("shortKey", this.shortUrl.indexOf('http') < 0 ? this.shortUrl : '');
          axios.post('/short', data, {
            header: {
              "Content-Type": "application/form-data; charset=utf-8"
            }
          })
            .then(res => {
              if (res.data.Code === 1 && res.data.ShortUrl !== "") {
                this.shortUrl = res.data.ShortUrl;
                this.$copyText(this.shortUrl)
                this.$refs.shortUrl.disabled = true
                this.$message.success("短链接已复制到剪贴板");
              } else {
                this.$message.error("短链接获取失败：" + res.data.Message);
              }
            })
            .catch(() => {
              this.$message.error("短链接获取失败");
            })
            .finally(() => {
              this.loading = false;
            });
        },
        goToGayHub() {
          window.open(repo)
        },
        getOS() {
          let ua = navigator.userAgent,
            isWindowsPhone = /(?:Windows Phone)/.test(ua),
            isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
            isAndroid = /(?:Android)/.test(ua),
            isFireFox = /(?:Firefox)/.test(ua),
            isChrome = /(?:Chrome|CriOS)/.test(ua),
            isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
            isPhone = /(?:iPhone)/.test(ua) && !isTablet,
            isPc = !isPhone && !isAndroid && !isSymbian;

          return {
            isTablet: isTablet,
            isPhone: isPhone,
            isAndroid: isAndroid,
            isPc: isPc
          };
        },
        getBodyClass() {
          return this.isPc ? 'body-center body-width-pc' : 'body-center'
        },
        onCopy() {
          this.$message.success("Copied!");
        },
        changeDisableStatus(event) {
          this.$refs.shortUrl.disabled = false
        }
      },
    })
  </script>

  <style>
    .body-center {
      width: 40%;
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .body-width-pc {
      width: 40%;
    }

    .body-width-mb {
      width: 90%;
    }

    .el-input {
      margin-top: 20px;
    }
  </style>
</body>

</html>