From 343cf59e1d58d8ff1619729570a822faa3ba58ee Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 9 Sep 2021 23:55:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BAdom=E7=B1=BB=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A3=E6=9B=BFjquery=E7=9A=84=E4=B8=80=E4=BA=9B=E7=AE=80?=
 =?UTF-8?q?=E5=8D=95=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/icon/loved.svg |   2 +-
 src/config/index.js           |   4 +-
 src/pages/Test2.vue           | 104 ++++++++++----
 src/pages/Test3.vue           | 253 ++++++++++++----------------------
 src/pages/home/Index2.vue     |   2 +-
 src/utils/dom.js              |  69 ++++++++++
 6 files changed, 244 insertions(+), 190 deletions(-)
 create mode 100644 src/utils/dom.js

diff --git a/src/assets/img/icon/loved.svg b/src/assets/img/icon/loved.svg
index 7a14a6a..e03e9b6 100644
--- a/src/assets/img/icon/loved.svg
+++ b/src/assets/img/icon/loved.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#eb6276"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#e73a57"></path></svg>
\ No newline at end of file
diff --git a/src/config/index.js b/src/config/index.js
index d8a9f81..930589f 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,6 +1,6 @@
 export default {
-  baseUrl: 'http://192.168.0.105/index.php/v1',
-  filePreview:'http://192.168.0.105/static/uploads/',
+  baseUrl: 'http://192.168.0.103/index.php/v1',
+  filePreview:'http://192.168.0.103/static/uploads/',
   // baseUrl: 'http://192.168.10.164/index.php/v1',
   // filePreview:'http://192.168.10.164/static/uploads/'
   // baseUrl: 'http://localhost/index.php/v1',
diff --git a/src/pages/Test2.vue b/src/pages/Test2.vue
index 75f0158..abd4a06 100644
--- a/src/pages/Test2.vue
+++ b/src/pages/Test2.vue
@@ -1,36 +1,94 @@
 <template>
   <div class="Test">
-    <BaseHeader>
-      <template v-slot:center>
-        <span class="f16">申报学校信息</span>
-      </template>
-    </BaseHeader>
-    <div class="content">
-      <div ref="input"
-           class="auto-input"
-           contenteditable
-           @input="changeText">
-        <span contenteditable="false" class="link">test</span>
-        <img src="../assets/img/icon/message/emoji/4.webp" class="emoji">
-        <img src="../assets/img/icon/message/emoji/2.webp" class="emoji">
-        {{ comment }}
-        <img src="../assets/img/icon/message/emoji/3.webp" class="emoji">
-      </div>
-
-      <b-button class="mt1r" @click="call">@</b-button>
-      <b-button class="mt1r" @click="emoji">emoji</b-button>
-      <b-button class="mt1r" @click="get">get</b-button>
-    </div>
+    <Video1
+        :play="true"
+        :video="item"
+        :index="0"
+    />
   </div>
 </template>
 <script>
 
+import mp40 from "../assets/video/0.mp4";
+
 export default {
   name: "Test",
   props: {},
   data() {
     return {
-      comment: '12'
+      comment: '12',
+      item: {
+        "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+        "cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/48e513ae1df94a6cb0e23eabdacfdb64~c5_300x400.webp?from=4257465056_large",
+        "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-p-0015/80e3288d63094603beaaf2f0e1568e19_1577426215?from=4257465056_large",
+        "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/be6a2e67b69646778749e932c6d456b6_1577426215~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459040102120742003404DFC4&biz_tag=feed_cover",
+        video: mp40,
+        "video_data_size": 26829508,
+        "duration": 427780,
+        "desc": "几人到深山探险，发现里面一只动物昆虫都没有，知道原因后都怕了 #看电影",
+        "allow_download": 0,
+        "allow_duet": 0,
+        "allow_react": 0,
+        "allow_music": 1,
+        "allow_douplus": 1,
+        "allow_share": 1,
+        "digg_count": 381,
+        "comment_count": 20,
+        "download_count": 6,
+        "play_count": 0,
+        "share_count": 2,
+        "forward_count": 0,
+        "collect_count": 3,
+        "sort": 195,
+        "is_top": 0,
+        "city": "",
+        "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+        "create_time": "1630423555",
+        "creator_id": "93864497380",
+        "status": 1,
+        "topics": [
+          {
+            "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+            "name": "看电影",
+            "creator_id": "93864497380",
+            "create_time": "1630423555",
+            "status": 1
+          }
+        ],
+        "music": {
+          "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+          "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+          "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+          "title": "@穷电影创作的原声",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        },
+        "author": {
+          "id": "93864497380",
+          "unique_id_modify_time": "1630393144",
+          "unique_id": "dyg141319",
+          "favoriting_count": 0,
+          "avatar": "https://p26.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_1080x1080.jpeg?from=116350172",
+          "city": "",
+          "province": null,
+          "country": "",
+          "location": "",
+          "birthday": "1990-01-01",
+          "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+          "following_count": 0,
+          "follower_count": 0,
+          "aweme_count": 0,
+          "nickname": "穷电影",
+          "phone": "",
+          "sex": "0",
+          "last_login_time": "1630423555",
+          "create_time": "1630423555",
+          "status": 1,
+          "desc": null,
+          "is_private": 0
+        }
+      }
     }
   },
   computed: {},
@@ -43,7 +101,7 @@ export default {
 
     },
     get() {
-     console.log( this.$refs.input)
+      console.log(this.$refs.input)
 
     },
     call() {
diff --git a/src/pages/Test3.vue b/src/pages/Test3.vue
index 1bcdb48..a7b5245 100644
--- a/src/pages/Test3.vue
+++ b/src/pages/Test3.vue
@@ -1,198 +1,125 @@
 <template>
-  <div class="play-feedback">
-    <div class="feedback-header">
-      <span>&nbsp;</span>
-      <div class="title">播放反馈</div>
-      <back mode="dark" img="close" @click="cancel"></back>
-    </div>
-    <div class="content">
-      <div class="notice">请选择要反馈的问题</div>
-      <div class="l-row" @click="falseOther(()=>{this.type1 = true} )">
-        <Check mode="red" :modelValue="type1" @change="falseOther(()=>{this.type1 = true} )"/>
-        <span>网络正常无法播放视频</span>
-      </div>
-      <div class="l-row" @click="falseOther(()=>{this.type2 = true} )">
-        <Check mode="red" :modelValue="type2" @change="falseOther(()=>{this.type2 = true} )"/>
-        <span>视频画面正常没声音</span>
-      </div>
-      <div class="l-row" @click="falseOther(()=>{this.type3 = true} )">
-        <Check mode="red" :modelValue="type3" @change="falseOther(()=>{this.type3 = true} )"/>
-        <span>播放几秒/中途卡信</span>
-      </div>
-      <div class="l-row" @click="falseOther(()=>{this.type4 = true} )">
-        <Check mode="red" :modelValue="type4" @change="falseOther(()=>{this.type4 = true} )"/>
-        <span>画面内容不全</span>
-      </div>
-      <div class="l-row" @click="falseOther(()=>{this.type5 = true} )">
-        <Check mode="red" :modelValue="type5" @change="falseOther(()=>{this.type5 = true} )"/>
-        <span>播放过程中闪退回桌面</span>
-      </div>
-      <div class="l-row" @click="falseOther(()=>{this.type6 = true} )">
-        <Check mode="red" :modelValue="type6" @change="falseOther(()=>{this.type6 = true} )"/>
-        <span>画面模糊不清晰</span>
-      </div>
-      <div class="l-row" @click="falseOther(()=>{this.type7 = true} )">
-        <Check mode="red" :modelValue="type7" @change="falseOther(()=>{this.type7 = true} )"/>
-        <span>视频播放其他问题或建议</span>
-      </div>
-      <div v-if="type7" class="other">
-        <div class="textarea-ctn">
-          <textarea name="" id="" cols="30" rows="10"
-                    v-model="desc"
-                    placeholder="详输入内容"></textarea>
-        </div>
-        <div class="text-num">{{ desc.length }}/300</div>
-      </div>
-      <b-button type="primary" :disabled="!disabled" @click="submit">提交</b-button>
-    </div>
+  <div class="test" @click="click">
+    <img class="left" src="../assets/img/icon/loved.svg" alt="">
   </div>
 </template>
 <script>
-import FromBottomDialog from "../components/dialog/FromBottomDialog";
-import Check from "../components/Check";
-import BaseButton from "../components/BaseButton";
+import Dom from "../utils/dom";
 
 export default {
   name: "Test",
   props: {},
-  components: {
-    BaseButton,
-    FromBottomDialog,
-    Check
-  },
+  components: {},
   data() {
     return {
       showShareDialog: true,
-      type1: false,
-      type2: false,
-      type3: false,
-      type4: false,
-      type5: false,
-      type6: false,
-      type7: false,
-      disabled: false,
-      desc: ''
-    }
-  },
-  computed: {
-    disabled() {
-      if (this.type7 && this.desc) return true
-      return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
     }
   },
-  created() {
-  },
   methods: {
-    falseOther(cb) {
-      this.type1 = false
-      this.type2 = false
-      this.type3 = false
-      this.type4 = false
-      this.type5 = false
-      this.type6 = false
-      this.type7 = false
-      cb()
+    click(e) {
+      let id = 'a' + Date.now()
+      let elWidth = 80
+      let rotate = this.randomNum(0, 1)
+      let template = `<img class="${rotate ? 'left' : 'right'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">`
+      let el = new Dom().create(template)
+      el.css({top: e.y - elWidth, left: e.x - elWidth / 2,})
+      new Dom().find('.test').append(el)
+
+      setTimeout(() => {
+        new Dom().find(`#${id}`).remove()
+      }, 1000)
     },
-    cancel() {
-
-    },
-    submit() {
-      if (this.disabled) return
-      this.cancel()
-      this.$notice('感谢你的反馈，我们会尽快答复！')
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+        default:
+          return 0;
+      }
     }
   }
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 @import "../assets/scss/index";
 
-.play-feedback {
-  max-height: 49rem;
-  overflow: auto;
-  background: #fff;
-  color: black;
+.test {
   position: fixed;
-  bottom: 5rem;
   left: 0;
   right: 0;
-
-  .feedback-header {
-    position: fixed;
-    left: 0;
-    right: 0;
-    background: white;
-    height: 3rem;
-    padding: 1.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    font-weight: bold;
-    font-size: 1.8rem;
-  }
-
-  .content {
-    padding: 6rem 1.5rem 1.5rem 1.5rem;
-  }
-
-  .notice {
-    font-size: 1.2rem;
-    color: @second-text-color;
-  }
-
-  .l-row {
-    display: flex;
-    align-items: center;
-    min-height: 5rem;
-    font-size: 1.4rem;
-    border-bottom: 1px solid #f1f1f1;
-
-
-    .check {
-      width: 2rem;
-      height: 2rem;
-      margin-right: 1rem;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  font-size: 1.4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    position: absolute;
+    @width: 8rem;
+    width: @width;
+    height: @width;
+
+    &.left {
+      animation: loveLeft 1.1s linear;
     }
-  }
-
-  .no-border {
-    border-bottom: none;
-  }
-
-  .other {
-    .textarea-ctn {
-      width: 100%;
-      background: #eae8e8;
-      padding: 1.5rem;
-      box-sizing: border-box;
-      margin-top: 1rem;
-      border-radius: 2px;
 
+    &.right {
+      animation: loveRight 1.1s linear;
+    }
 
-      textarea {
-        font-family: "Microsoft YaHei UI";
-        outline: none;
-        width: 100%;
-        border: none;
-        background: transparent;
-        color: black;
+    @scale: scale(1.2);
+    @rotate: 10deg;
 
-        &::placeholder {
-          color: @second-text-color;
-        }
+    @keyframes loveLeft {
+      0% {
+        opacity: 0;
+        transform: scale(2) rotate(0-@rotate);
+      }
+      10% {
+        opacity: 1;
+        transform: scale(1) rotate(0-@rotate);
+      }
+      15% {
+        opacity: 1;
+        transform: @scale rotate(0-@rotate);
+      }
+      40% {
+        opacity: 1;
+        transform: @scale rotate(0-@rotate);
+      }
+      100% {
+        transform: translateY(-10rem) scale(2) rotate(0-@rotate);
+        opacity: 0;
       }
     }
-
-    .text-num {
-      margin-top: .8rem;
-      margin-bottom: .8rem;
-      font-size: 1rem;
-      color: @second-text-color;
-      text-align: right;
+    @keyframes loveRight {
+      0% {
+        opacity: 0;
+        transform: scale(2) rotate(0+@rotate);
+      }
+      10% {
+        opacity: 1;
+        transform: scale(1) rotate(0+@rotate);
+      }
+      15% {
+        opacity: 1;
+        transform: @scale rotate(0+@rotate);
+      }
+      40% {
+        opacity: 1;
+        transform: @scale rotate(0+@rotate);
+      }
+      100% {
+        transform: translateY(-10rem) scale(2) rotate(0+@rotate);
+        opacity: 0;
+      }
     }
   }
-}
-
 
+}
 </style>
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 0e6aaf7..714f1a7 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -290,7 +290,7 @@ export default {
         {
           "id": "21c4d0e6-4895-44cf-abae-1ad6d4e51cfe",
           "posterUrl": "images/20210815/11.png",
-          "videoUrl": mp42,
+          "videoUrl": c,
           "title": "",
           "likeNum": "4312856",
           "commentNum": "14431",
diff --git a/src/utils/dom.js b/src/utils/dom.js
new file mode 100644
index 0000000..40d286e
--- /dev/null
+++ b/src/utils/dom.js
@@ -0,0 +1,69 @@
+export default class Dom {
+
+  constructor() {
+
+  }
+
+  find(tag) {
+    let els = document.querySelectorAll(tag)
+    if (els.length) {
+      this.els = els
+    }
+    return this
+  }
+
+  create(template) {
+    let tempNode = document.createElement('div');
+    tempNode.innerHTML = template;
+    this.els = [tempNode.firstChild]
+    return this;
+  }
+
+  append(that) {
+    this.els.forEach(el => {
+      that.els.map(v => {
+        el.appendChild(v)
+      })
+    })
+    return this
+  }
+
+  remove() {
+    this.els.forEach(el => {
+      el.parentNode.removeChild(el)
+    })
+    return this
+  }
+
+  css(style, value = null) {
+    if (!value) {
+      Object.keys(style).map(key => {
+          this.els.map(el => {
+            el.style[key] = this.getStyleValue(key, style[key])
+          })
+        }
+      )
+    } else {
+      this.els.map(el => {
+        el.style[style] = this.getStyleValue(style, value)
+      })
+    }
+    return this
+  }
+
+  getStyleValue(key, value) {
+    let whiteList = [
+      'top',
+      'left',
+      'right',
+      'bottom',
+    ]
+    if (whiteList.find(v => v === key)) {
+      if (typeof value === 'number') {
+        return value + 'px'
+      }
+    } else {
+      return value
+    }
+  }
+}
\ No newline at end of file