touch

package.json

@@ -22,6 +22,7 @@
     "vue": "^2.5.2",
     "vue": "^2.5.2",
     "vue-lazyload": "^1.2.6",
     "vue-lazyload": "^1.2.6",
     "vue-router": "^3.0.1",
     "vue-router": "^3.0.1",
+    "vue-touchjs": "^0.0.9",
     "vue-waterfall-easy": "^2.4.1",
     "vue-waterfall-easy": "^2.4.1",
     "vuex": "^3.0.1",
     "vuex": "^3.0.1",
     "vux": "^2.9.2",
     "vux": "^2.9.2",

src/pages/index/ImgUp2.vue

@@ -7,7 +7,8 @@
           <div class="text">上传视频</div>
           <div class="text">上传视频</div>
         </div>
         </div>
         <div class="upLoad">
         <div class="upLoad">
-          <div class="list-default-img" @click="addPic" v-show="isPhoto">
+          <!-- @click="addPic" @touch="addPic" -->
+          <div href="#" class="list-default-img" v-touch:tap="addPicTap" @click.stop="addPic" v-show="isPhoto">
             <img src="./assets/images/icon_photo.png">
             <img src="./assets/images/icon_photo.png">
             <p>上传宝贝精彩视频</p>
             <p>上传宝贝精彩视频</p>
             <p>用视界的力量让宝贝与世同行</p>
             <p>用视界的力量让宝贝与世同行</p>
@@ -19,11 +20,8 @@
               style="display: none;"
               style="display: none;"
             >
             >
             <!-- capture="camera" -->
             <!-- capture="camera" -->
-            <!-- <label>
-             
-             
-            </label> -->
           </div>
           </div>
+          <!-- <label></label> -->
           <ul class="list-ul" v-if="isPreivw">
           <ul class="list-ul" v-if="isPreivw">
             <!-- <li v-for="(item, index) in testUrl" :key="index">
             <!-- <li v-for="(item, index) in testUrl" :key="index">
                             <img :src="item" alt>
                             <img :src="item" alt>
@@ -36,7 +34,13 @@
                             size="30"
                             size="30"
                             icon-success-color="red"
                             icon-success-color="red"
             ></x-icon>-->
             ></x-icon>-->
-            <video :src="videoUrl" controls preload="load" :poster="poster" style="width: 100%; height: auto;"></video>
+            <video
+              :src="videoUrl"
+              controls
+              preload="load"
+              :poster="poster"
+              style="width: 100%; height: auto;"
+            ></video>
           </ul>
           </ul>
         </div>
         </div>
       </div>
       </div>
@@ -87,7 +91,12 @@ import { XTextarea, Group, Datetime } from "vux";
 // import lrz from 'lrz';
 // import lrz from 'lrz';
 import { MessageBox, Toast, DatetimePicker, Indicator } from "mint-ui";
 import { MessageBox, Toast, DatetimePicker, Indicator } from "mint-ui";
 import axios from "axios";
 import axios from "axios";
-import { clearTimeout, clearInterval, clearImmediate, setTimeout } from "timers";
+import {
+  clearTimeout,
+  clearInterval,
+  clearImmediate,
+  setTimeout
+} from "timers";
 import $ from "jquery";
 import $ from "jquery";
 import wx from "weixin-js-sdk";
 import wx from "weixin-js-sdk";
 
 
@@ -100,11 +109,11 @@ export default {
       pictureType: "1",
       pictureType: "1",
       activeIndex: 1,
       activeIndex: 1,
       videoUrl: "",
       videoUrl: "",
-      poster: '',
+      poster: "",
       base64: [],
       base64: [],
       testUrl: [],
       testUrl: [],
       isPhoto: true,
       isPhoto: true,
-      title: '',
+      title: "",
       resizeLock: true,
       resizeLock: true,
       isIos: null,
       isIos: null,
       isPreivw: false,
       isPreivw: false,
@@ -116,7 +125,8 @@ export default {
       // 拍摄地
       // 拍摄地
       image_address: "",
       image_address: "",
       // 拍摄时间
       // 拍摄时间
-      image_time: ""
+      image_time: "",
+      isClick: false
     };
     };
   },
   },
   computed: {
   computed: {
@@ -173,21 +183,42 @@ export default {
       var num = Number(num);
       var num = Number(num);
       this.activeIndex = num;
       this.activeIndex = num;
     },
     },
+    addPicTap() {
+      if(this.isIos) {
+        if (!this.isClick ) {
+          this.isClick = true;
+          document.querySelector("#text").click();
+          alert('click end')
+          var timer = setTimeout(() => {
+            this.isClick = false;
+            clearTimeout(timer);
+          }, 500);
+        }
+      }
+    },
     addPic() {      
     addPic() {      
-      document.querySelector('#text').click()
+      if (!this.isClick && !this.isIos) {
+        this.isClick = true;
+        alert()
+        document.querySelector("#text").click();
+        var timer = setTimeout(() => {
+          this.isClick = false;
+          clearTimeout(timer);
+        }, 500);
+      }
     },
     },
     getFileToken() {
     getFileToken() {
-      return axios.get("wandah5/oss/info",{
+      return axios.get("wandah5/oss/info", {
         headers: {
         headers: {
-              'content-type': 'application/json'
+          "content-type": "application/json"
         }
         }
       });
       });
     },
     },
     upload(flie) {
     upload(flie) {
       console.log("upload");
       console.log("upload");
       Indicator.open({
       Indicator.open({
-        text: '上传中',
-        spinnerType: 'fading-circle'
+        text: "上传中",
+        spinnerType: "fading-circle"
       });
       });
       return this.getFileToken().then(res => {
       return this.getFileToken().then(res => {
         return new Promise((resolve, reject) => {
         return new Promise((resolve, reject) => {
@@ -205,62 +236,76 @@ export default {
           formData.append("file", flie);
           formData.append("file", flie);
           console.log(formData, data);
           console.log(formData, data);
           //   Indicator.close()
           //   Indicator.close()
-          axios.post(data.host, formData, {
-            onUploadProgress: (progressEvent) => {
-                let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
-                console.log(complete, 'progress')
+          axios
+            .post(data.host, formData, {
+              onUploadProgress: progressEvent => {
+                let complete =
+                  (((progressEvent.loaded / progressEvent.total) * 100) | 0) +
+                  "%";
+                console.log(complete, "progress");
                 // Indicator.close()
                 // Indicator.close()
-                document.querySelector('.mint-indicator-text').innerText = complete
+                document.querySelector(
+                  ".mint-indicator-text"
+                ).innerText = complete;
               },
               },
               headers: {
               headers: {
                 "Content-Type": "multipart/form-data;"
                 "Content-Type": "multipart/form-data;"
               }
               }
-          }).then(file => {
-            Indicator.close()
+            })
+            .then(file => {
+              Indicator.close();
               Indicator.open({
               Indicator.open({
-                text: '上传成功',
-                spinnerType: 'fading-circle'
+                text: "上传成功",
+                spinnerType: "fading-circle"
               });
               });
-            setTimeout(() =>{
-                Indicator.close()
-            }, 500)
+              setTimeout(() => {
+                Indicator.close();
+              }, 500);
               resolve({
               resolve({
-              url: 'https://wanda-static.bdideal.com' + "/" + data.dir + data.expire + flie.name
+                url:
+                  "https://wanda-static.bdideal.com" +
+                  "/" +
+                  data.dir +
+                  data.expire +
+                  flie.name
               });
               });
-            console.log(
-              data.host + "/" + data.dir + data.expire + flie.name
-            );
-          }).catch(err => {
+              console.log(data.host + "/" + data.dir + data.expire + flie.name);
+            })
+            .catch(err => {
               Indicator.open({
               Indicator.open({
-                text: '上传失败',
-                spinnerType: 'fading-circle'
+                text: "上传失败",
+                spinnerType: "fading-circle"
               });
               });
-            setTimeout(() =>{
-                Indicator.close()
-            }, 500)
+              setTimeout(() => {
+                Indicator.close();
+              }, 500);
               console.log("upload 失败", err);
               console.log("upload 失败", err);
-          })
+            });
         });
         });
       });
       });
     },
     },
     onFileChange: function(e) {
     onFileChange: function(e) {
       var files = e.target.files || e.dataTransfer.files;
       var files = e.target.files || e.dataTransfer.files;
 
 
-      if (!files.length && files[0].size/1024/1024 <= 80) {
-        Toast({ message: '选择的视频文件不得大于80M，您先通过微信聊天窗口压缩视频，再另保存到手机内，再进行上传。' });
+      if (!files.length && files[0].size / 1024 / 1024 <= 80) {
+        Toast({
+          message:
+            "选择的视频文件不得大于80M，您先通过微信聊天窗口压缩视频，再另保存到手机内，再进行上传。"
+        });
         return;
         return;
       }
       }
       let file = files[0];
       let file = files[0];
 
 
       //   this.videoUrl = file;
       //   this.videoUrl = file;
 
 
-      console.log(files, "event", files[0].size/1024/1024);
+      console.log(files, "event", files[0].size / 1024 / 1024);
       this.upload(file).then(res => {
       this.upload(file).then(res => {
-          this.videoUrl = res.url
-          this.poster = res.url + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast'
+        this.videoUrl = res.url;
+        this.poster =
+          res.url + "?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast";
         this.isPhoto = false;
         this.isPhoto = false;
         this.isPreivw = true;
         this.isPreivw = true;
-      })
+      });
       // this.createImage(files, e);
       // this.createImage(files, e);
     },
     },
     createImage(file, e) {
     createImage(file, e) {
@@ -287,10 +332,10 @@ export default {
     },
     },
     deleteAll() {
     deleteAll() {
       var vm = this;
       var vm = this;
-      vm.videoUrl = '';
-      vm.desc = '';
-      vm.poster = '';
-      vm.title = '';
+      vm.videoUrl = "";
+      vm.desc = "";
+      vm.poster = "";
+      vm.title = "";
       vm.isPreivw = false;
       vm.isPreivw = false;
       this.small_image = "";
       this.small_image = "";
       this.big_image = "";
       this.big_image = "";
@@ -354,11 +399,11 @@ export default {
 
 
         axios
         axios
           .post("/contest/join", {
           .post("/contest/join", {
-            image: '',
+            image: "",
             product_type: 2,
             product_type: 2,
             title: this.title,
             title: this.title,
             video: this.videoUrl,
             video: this.videoUrl,
-            desc: this.desc,
+            desc: this.desc
           })
           })
           .then(res => {
           .then(res => {
             console.log("发布的res");
             console.log("发布的res");
@@ -598,6 +643,8 @@ body {
       min-height: 300px;
       min-height: 300px;
       background: #f5f5f5;
       background: #f5f5f5;
       .list-default-img {
       .list-default-img {
+        display: block;
+        cursor: pointer;
         label {
         label {
           display: block;
           display: block;
           width: 100%;
           width: 100%;
@@ -745,6 +792,6 @@ body {
   textarea {
   textarea {
     background: #f5f5f5;
     background: #f5f5f5;
   }
   }
-  }
+}
 </style>
 </style>
 
 

src/pages/index/index.js

@@ -7,7 +7,8 @@ import App from './App'
 import router from './router'
 import router from './router'
 
 
 Vue.config.productionTip = false
 Vue.config.productionTip = false
-
+var VueTouch = require('vue-touchjs');
+Vue.use(VueTouch);
 import 'normalize.css';
 import 'normalize.css';
 import '@/modules/css/myreset.css';
 import '@/modules/css/myreset.css';
 import '@/modules/js/flexible.js';
 import '@/modules/js/flexible.js';