<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">
</head>
<style>
*,body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: 400;
vertical-align: baseline;
}
body, html {
line-height: 1;
font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* -webkit-tap-highlight-color: transparent; */
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
header{
position: relative;
height: 44px;
line-height: 44px;
text-align: center;
background-color: #43cf7c;
box-shadow: 0 1px 6px #ccc;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 5;
}
li{ list-style: none;}
.cube-btn-primary{
background-color: #4285F4!important;
}
header h1{
color: white!important;
}
.cubeic-back{
position: absolute;
top: 0;
left: 0;
padding: 0 15px;
color: white;
font-family: cube-icon!important;
font-size: 100%;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: .2px;
-moz-osx-font-smoothing: grayscal
}
.cubeic-back:before {
content: "\E608";
}
.imgli{
width: 100%;
}
.imgli .descimgs{
display: inline-block;
width: 25%;
float: left;
}
.imgli div img{
border: 1px solid #E1E1E1;
box-sizing: border-box;
width: 100%;
display: block;
height: 80px;
}
.makesure{
width: 100%;
height: 45px;
margin: auto;
text-align: center;
position: fixed;
bottom: 30px;
}
.makesure span{
display: block;
line-height: 45px;
text-align: center;
width: 80%;
background: #43cf7c;
color: white;
margin: auto;
z-index: 1000;
}
@media screen and (min-width: 800px) {
#app {
width: 540px!important;
margin: auto;
}
.mint-header {
width: 540px!important;
}
}
</style>
<body>
<div id="app">
<header class="header"><h1>图库选择</h1> <i class="cubeic-back" @click="goback"></i></header>
<ul>
<li v-for="(list,index) in datalist" class="imgli">
<div v-for="(view,index) in list.details.descimgs" @click="picturesClick(view,index,$event)" class="descimgs detail-btn">
<img :src="view" class="viewimg" />
</div>
<div v-for="(view,index) in list.details.pictures" @click="picturesClick(view,index,$event)" class="descimgs detail-btn">
<img :src="view" class="viewimg" />
</div>
</li>
</ul>
<div class="makesure"><span @click="suresubmit">确认上传</span></div>
<input id="upbigmore" type="file" style="display: none;" accept='image/*' name="file" @change="ScrollChange($event)"/>
</div>
<!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
<script src="http://www.17sucai.com/static/js/jquery.min.js"></script>
<script src="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
xsun:0,
pagelength:'',
indexmain:0,
setdata:[],
builddata:[],
datalist :[],
imgchange:false,
LINK:'http://kuaidi.haxbs.com',
imglength:[],
lefttxt:'',
weighttxt:'',
value:'这是一个商品',
actions:[
{
text: '完成订单',
action: 'showText'
},
],
},
methods: {
picturesClick(viewitem,viewindex,viewevent){
if (viewevent.target.className.indexOf("detail-selected") == -1) {
this.builddata = this.builddata.concat(viewitem)
if(this.builddata.length>4){
viewevent.target.className = ""; //切换按钮样式
this.builddata.length = 4
const toast = this.$createToast({
time: 500,
txt: '最多只能上传4张图片'
})
toast.show()
return false;
}else{
viewevent.target.className = "detail-btn detail-selected"; //切换按钮样式
}
} else {
if(this.builddata.length>4){
this.builddata.length = 4
viewevent.target.className = "detail-btn";//切换按钮样式
var delone = this.builddata.indexOf(viewitem)
this.builddata.splice(delone,1)
}else{
viewevent.target.className = "detail-btn";//切换按钮样式
var delone = this.builddata.indexOf(viewitem)
this.builddata.splice(delone,1)
}
}
},
suresubmit(){
if(this.builddata.length ===0) {
const toast = this.$createToast({
time: 1500,
txt:'请上传图片！再次提交'
})
toast.show()
return false
}
////console.log(this.builddata)
const toast = this.$createToast({
time:0,
txt: 'loading',
mask: true
})
toast.show()
let p1,p2,p3,p4;
let urlp1=this.builddata[0];
if(this.builddata[0]!=undefined&&this.builddata[0]!=""){
p1 = new Promise((resolve, reject) => {
var param = new FormData(); //创建form对象
param.append('url',this.builddata[0]) //对应后台接收图片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
console.info(res);
console.info(res.body.code);
if(res.body.code === 200){
resolve(res.body.data);
}else{
reject("failed");
}
})
.catch(function(error){
reject("failed");
});
})
}else{
p1 = new Promise((resolve, reject) => {
let data = {
code: 999
};
resolve(data)
})
}
if(this.builddata[1]!=undefined&&this.builddata[1]!=""){
p2 = new Promise((resolve, reject) => {
var param = new FormData(); //创建form对象
param.append('url',this.builddata[1]) //对应后台接收图片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
if(res.data.code === 200){
resolve(res.data.data);
}else{
reject("failed");
}
})
.catch(function(error){
reject("failed");
});
})
}else{
p2 = new Promise((resolve, reject) => {
let data = {
code: 999
};
resolve(data)
})
}
if(this.builddata[2]!=undefined&&this.builddata[2]!=""){
p3 = new Promise((resolve, reject) => {
var param = new FormData(); //创建form对象
param.append('url',this.builddata[2]) //对应后台接收图片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
if(res.data.code === 200){
resolve(res.data.data);
}else{
reject("failed");
}
})
.catch(function(error){
reject("failed");
});
})
}else{
p3 = new Promise((resolve, reject) => {
let data = {
code: 999
};
resolve(data)
})
}
if(this.builddata[3]!=undefined&&this.builddata[3]!=""){
p4 = new Promise((resolve, reject) => {
var param = new FormData(); //创建form对象
param.append('url',this.builddata[3]) //对应后台接收图片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
if(res.data.code === 200){
resolve(res.data.data);
}else{
reject("failed");
}
})
.catch(function(error){
reject("failed");
});
})
}else{
p4 = new Promise((resolve, reject) => {
let data = {
code: 999
};
resolve(data)
})
}
Promise.all([p1, p2, p3,p4]).then(function(values) {
toast.hide()
//console.log(values);
var newArr = new Array();
for(var i=0;i< values.length;i++){
var j=values[i];
if(j.name!=undefined&&j.name!=""){
newArr.push(j);
}
}
console.info(newArr);
if (window.localStorage){
var Datatransmission=JSON.stringify(newArr);//将json对象转化成字符串
localStorage.setItem("passData",Datatransmission);
window.location.href = 'upimg.html';
}
}).catch((error) => {
//console.log(error)
})
},
descimgsClick(viewitem,b){
},
goback(){
window.history.back(); //返回
},
cartView(a) {
var that = this;
var nametitle = localStorage.getItem("setname")
var formData = new FormData();
formData.append('title', nametitle)
$.ajax({
url:'http://pic.tongchengxianggou.com:9010/api/Api/getPicList?title='+nametitle,
type : 'get',
dataType:'jsonp',
success : function(resp){
JSON.stringify(resp);
that.datalist = resp
JSON.stringify(that.datalist);
},
error : function(resp){
//console.log(resp);
}
});
},
},
mounted: function() {
this.$nextTick(function() {
this.cartView();
});
},
});
</script>
</body>
</html>
网友评论