Skip to content

html / wanda-ball

Go to a project
Commit 767ccb09 by hank
Options

touch

parent f5311498
Showing with 146 additions and 97 deletions
package.json
......@@ -22,6 +22,7 @@
"vue": "^2.5.2",
"vue-lazyload": "^1.2.6",
"vue-router": "^3.0.1",
"vue-touchjs": "^0.0.9",
"vue-waterfall-easy": "^2.4.1",
"vuex": "^3.0.1",
"vux": "^2.9.2",
......
src/pages/index/ImgUp2.vue
......@@ -7,23 +7,21 @@
<div class="text">上传视频</div>
</div>
<div class="upLoad">
<div class="list-default-img" @click="addPic" v-show="isPhoto">
<img src="./assets/images/icon_photo.png">
<p>上传宝贝精彩视频</p>
<p>用视界的力量让宝贝与世同行</p>
<input
type="file"
id="text"
accept="video/*"
@change="onFileChange($event)"
style="display: none;"
>
<!-- capture="camera" -->
<!-- <label>
</label> -->
<!-- @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">
<p>上传宝贝精彩视频</p>
<p>用视界的力量让宝贝与世同行</p>
<input
type="file"
id="text"
accept="video/*"
@change="onFileChange($event)"
style="display: none;"
>
<!-- capture="camera" -->
</div>
<!-- <label></label> -->
<ul class="list-ul" v-if="isPreivw">
<!-- <li v-for="(item, index) in testUrl" :key="index">
<img :src="item" alt>
......@@ -36,7 +34,13 @@
size="30"
icon-success-color="red"
></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>
</div>
</div>
......@@ -87,7 +91,12 @@ import { XTextarea, Group, Datetime } from "vux";
// import lrz from 'lrz';
import { MessageBox, Toast, DatetimePicker, Indicator } from "mint-ui";
import axios from "axios";
import { clearTimeout, clearInterval, clearImmediate, setTimeout } from "timers";
import {
clearTimeout,
clearInterval,
clearImmediate,
setTimeout
} from "timers";
import $ from "jquery";
import wx from "weixin-js-sdk";
......@@ -100,11 +109,11 @@ export default {
pictureType: "1",
activeIndex: 1,
videoUrl: "",
poster: '',
poster: "",
base64: [],
testUrl: [],
isPhoto: true,
title: '',
title: "",
resizeLock: true,
isIos: null,
isPreivw: false,
......@@ -116,7 +125,8 @@ export default {
// 拍摄地
image_address: "",
// 拍摄时间
image_time: ""
image_time: "",
isClick: false
};
},
computed: {
......@@ -173,21 +183,42 @@ export default {
var num = Number(num);
this.activeIndex = num;
},
addPic() {
document.querySelector('#text').click()
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() {
if (!this.isClick && !this.isIos) {
this.isClick = true;
alert()
document.querySelector("#text").click();
var timer = setTimeout(() => {
this.isClick = false;
clearTimeout(timer);
}, 500);
}
},
getFileToken() {
return axios.get("wandah5/oss/info",{
headers: {
'content-type': 'application/json'
}
return axios.get("wandah5/oss/info", {
headers: {
"content-type": "application/json"
}
});
},
upload(flie) {
console.log("upload");
Indicator.open({
text: '上传中',
spinnerType: 'fading-circle'
text: "上传中",
spinnerType: "fading-circle"
});
return this.getFileToken().then(res => {
return new Promise((resolve, reject) => {
......@@ -195,7 +226,7 @@ export default {
var formData = new FormData();
// formData.append('name', flie.name)
formData.append("OSSAccessKeyId", data.accessid);
formData.append("key", data.dir + data.expire + flie.name);
formData.append("key", data.dir + data.expire + flie.name);
formData.append("policy", data.policy);
formData.append("dir", data.dir);
// formData.append('name', flie)
......@@ -204,63 +235,77 @@ export default {
formData.append("success_action_status", "200");
formData.append("file", flie);
console.log(formData, data);
// Indicator.close()
axios.post(data.host, formData, {
onUploadProgress: (progressEvent) => {
let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
console.log(complete, 'progress')
// Indicator.close()
axios
.post(data.host, formData, {
onUploadProgress: progressEvent => {
let complete =
(((progressEvent.loaded / progressEvent.total) * 100) | 0) +
"%";
console.log(complete, "progress");
// Indicator.close()
document.querySelector('.mint-indicator-text').innerText = complete
},
headers: {
"Content-Type": "multipart/form-data;"
}
}).then(file => {
Indicator.close()
Indicator.open({
text: '上传成功',
spinnerType: 'fading-circle'
});
setTimeout(() =>{
Indicator.close()
}, 500)
resolve({
url: 'https://wanda-static.bdideal.com' + "/" + data.dir + data.expire + flie.name
});
console.log(
data.host + "/" + data.dir + data.expire + flie.name
);
}).catch(err => {
Indicator.open({
text: '上传失败',
spinnerType: 'fading-circle'
document.querySelector(
".mint-indicator-text"
).innerText = complete;
},
headers: {
"Content-Type": "multipart/form-data;"
}
})
.then(file => {
Indicator.close();
Indicator.open({
text: "上传成功",
spinnerType: "fading-circle"
});
setTimeout(() => {
Indicator.close();
}, 500);
resolve({
url:
"https://wanda-static.bdideal.com" +
"/" +
data.dir +
data.expire +
flie.name
});
console.log(data.host + "/" + data.dir + data.expire + flie.name);
})
.catch(err => {
Indicator.open({
text: "上传失败",
spinnerType: "fading-circle"
});
setTimeout(() => {
Indicator.close();
}, 500);
console.log("upload 失败", err);
});
setTimeout(() =>{
Indicator.close()
}, 500)
console.log("upload 失败", err);
})
});
});
},
onFileChange: function(e) {
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;
}
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.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.isPreivw = true;
})
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.isPreivw = true;
});
// this.createImage(files, e);
},
createImage(file, e) {
......@@ -287,10 +332,10 @@ export default {
},
deleteAll() {
var vm = this;
vm.videoUrl = '';
vm.desc = '';
vm.poster = '';
vm.title = '';
vm.videoUrl = "";
vm.desc = "";
vm.poster = "";
vm.title = "";
vm.isPreivw = false;
this.small_image = "";
this.big_image = "";
......@@ -354,11 +399,11 @@ export default {
axios
.post("/contest/join", {
image: '',
image: "",
product_type: 2,
title: this.title,
video: this.videoUrl,
desc: this.desc,
desc: this.desc
})
.then(res => {
console.log("发布的res");
......@@ -598,6 +643,8 @@ body {
min-height: 300px;
background: #f5f5f5;
.list-default-img {
display: block;
cursor: pointer;
label {
display: block;
width: 100%;
......@@ -728,23 +775,23 @@ body {
</style>
<style lang="less">
.miaoshu {
.weui-textarea {
font-size: 34px;
}
textarea::-webkit-input-placeholder {
color: #aab2bd;
font-size: 30px;
text-align: left;
}
.weui-cell__bd {
background: #f5f5f5;
}
.vux-x-textarea {
background: #f5f5f5;
}
textarea {
background: #f5f5f5;
}
.weui-textarea {
font-size: 34px;
}
textarea::-webkit-input-placeholder {
color: #aab2bd;
font-size: 30px;
text-align: left;
}
.weui-cell__bd {
background: #f5f5f5;
}
.vux-x-textarea {
background: #f5f5f5;
}
textarea {
background: #f5f5f5;
}
}
</style>
src/pages/index/index.js
......@@ -7,7 +7,8 @@ import App from './App'
import router from './router'
Vue.config.productionTip = false
var VueTouch = require('vue-touchjs');
Vue.use(VueTouch);
import 'normalize.css';
import '@/modules/css/myreset.css';
import '@/modules/js/flexible.js';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment