upimg.html
<!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;
}
.cube-btn-primary{
background-color: #43cf7c!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";
}
.nothing{
width: 100%;
height: 20px;
background: #f3f3f3;
}
.topmain{
height: 45px;
line-height: 45px;
font-size: 14px;
width: 100%;
overflow: hidden;
clear: both;
background: white;
box-sizing: border-box;
padding: 0px 15px;
margin-top: 10px;
}
.topmain .spaninput{
background: white;
width: 68%;
height: 45px;
line-height: 45px;
}
.spaninputmode{
background: white;
width: 68%;
height: 45px;
line-height: 45px;
font-weight: bold;
}
.topmain .spanmane{
height: 45px;
line-height: 45px;
display: inline-block;
width: 20%;
float: left;
}
.topmain .spanimg{
height: 45px;
line-height: 45px;
display: inline-block;
width: 35px;
float: right;
}
.topmain .spanimg img{
margin-top: 5px;
display: block;
width: 30px;
}
.txtlist{
width: 100%;
box-sizing: border-box;
padding: 0px 15px;
font-size: 14px;
}
.txtname{
padding: 14px 0px;
}
.imglist{
box-sizing: border-box;
padding: 0px 15px;
overflow: hidden;
clear: both;
width: 100%;
}
.imglist span{
clear: both;
overflow: hidden;
display: block;
font-weight: bold;
font-size: 14px;
color: #8a8a8a;
padding: 10px 0px;
}
.txtdet{
font-weight: bold;
padding-bottom: 14px;
}
.dange{
height: 45px;
line-height: 45px;
font-size: 14px;
width: 100%;
overflow: hidden;
clear: both;
background: white;
box-sizing: border-box;
padding: 0px 15px;
}
.dange .dangeinput{
width: 35%;
height: 45px;
line-height: 45px;
margin-left: 2%;
}
.xuanze{
box-sizing: border-box;
border: 1px solid #E1E1E1;
float: right;
width: 30%;
height: 45px;
line-height: 45px;
margin-left: 2%;
}
.dange .dangemane{
height: 45px;
line-height: 45px;
display: inline-block;
width: 22%;
float: left;
}
.buttonclick{
width: 80%;
margin: auto;
margin-top: 80px;
}
.buttonclick button{
display: block;
margin: 20px 0px;
padding: 17px 16px;
width: 100%;
text-align: center;
white-space: nowrap;
cursor: pointer;
font-size: 16px;
line-height: 1;
color: #fff;
background: #43cf7c;
outline: none;
border: none;
border-radius: 2px;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.imgchange{
width: 100%;
background: seagreen;
}
@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>
<div class="topmain">
<span class="spanmane">商品条码：</span>
<input v-model="valuecorder" class="spaninput" @blur="onFocus($event)"></input>
<span class="spanimg"><img src="img/sao.png" @click="saoclick"></span>
</div>
<div class="nothing"></div>
<div class="txtall">
<div class="txtlist">
<p class="txtname">商品名称</p>
<input v-model="producename" class="spaninputmode" @blur="Focusgoods($event)"></input>
</div>
</div>
<div class="nothing"></div>
<div class="allupimg">
<div class="imglist">
<span>商品缩略图</span>
<div v-for="(list,index) in smallimglist" class="thumbnail">
<i class="cholesmall" @click="deleteimg(index)">Θ</i>
<img :src="list.url+list.name" class="viewimg" />
</div>
<img src="img/up.png" @click="upimgstyle" class="Scrollbg" v-show="smallimglist.length ==0"/>
<input id="upload_file" type="file" style="display: none;" accept='image/*' name="file" @change="fileChange($event)"/>
</div>
<div class="imglist">
<span>商品滚动图</span>
<div v-for="(list,index) in Scrollviewimgs" class="thumbnail">
<i class="cholesmall" @click="Chartdelete(index)">Θ</i>
<img :src="list.url+list.name" class="viewimg" />
</div>
<img src="img/up.png" @click="ScrollChart" style="margin-top: 4px;" class="Scrollbg" v-show="Scrollviewimgs.length <4"/>
<input id="upbigmore" type="file" style="display: none;" accept='image/*' name="file" @change="ScrollChange($event)"/>
</div>
</div>
<div class="nothing"></div>
<div class="dange">
<span class="dangemane">保质期：</span>
<input class="dangeinput" v-model="lefttxt" placeholder="请填写保质期" type="number"></input>
<select class="xuanze" v-model="couponSelected" @change="getCouponSelected($event)" >
<option v-for="(item,index) in couponList" :key="index" :value='item.id'>{{item.label}}</option>
</select>
</div>
<div class="nothing"></div>
<div class="dange">
<span class="dangemane">重量(kg):</span>
<input class="dangeinput" v-model="weighttxt" placeholder="请填写重量单位千克" type="number"></input>
</div>
<div class="nothing"></div>
<div class="buttonclick">
<button :primary="true" @click="submitclick">提 交</button>
</div>
<div class="imgchange" v-show="imgchange">
<span @click="chosepics">图库选择</span>
<span @click="paizhao">手机相册</span>
<span @click="guanbi">取消选择</span>
</div>
<!--滚动图弹出-->
<div class="imgchange" v-show="moreshow" style="background:#43cf7c">
<span @click="chosebig">图库选择</span>
<span @click="morebig">手机相册</span>
<span @click="guanbi">选择取消</span>
</div>
<!--//我也不知道该肿么办-->
<div>
<div class="image-item space" @click="showActionSheet()">
<div class="image-up"></div>
</div>
<div class="upload_warp">
<div class="upload_warp_img">
<div class="upload_warp_img_div" v-for="(item,index) in imgList">
<div class="upload_warp_img_div_top">
</div>
<img :src="item.file.src" style="display: inline-block;">
</div>
<div class="upload_warp_left" id="upload_warp_left" @click="fileClick()">
</div>
</div>
</div>
</div>
</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="http://www.17sucai.com/preview/1527619/2019-06-15/Special/js/jquery.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="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
couponSelected:'',
couponList:[
{
name: '天',
label: '天',
id:0,
},{
name: '月',
label: '月',
id:1,
},{
name: '年',
label: '年',
id:2,
}
],
valuecorder :null,
producename:null,
Receiveall:[],
datas:[],
imgList :[],
moreshow:false,
imgchange:false,
LINK:'http://kuaidi.haxbs.com',
imglength:[],
lefttxt:null,
weighttxt:null,
value:'这是一个商品',
smallimglist:[],
Scrollviewimgs:[],
maxsmallCount:2,
weixincode:'',
},
methods: {
onFocus(e){
var param = new FormData();
if(this.producename=== null){
param.append(' goodName',"")
}else{
param.append(' goodName',this.producename)
}
param.append(' barCode',e.target.value)
param.append(' productNumber',e.target.value)
//判断是不是一样 如果有一样就弹出提示
this.$http.post(`http://pic.tongchengxianggou.com:9011/sku/o-product/flag`,param)
.then(response => {
if(response.data.code === 200){
this.valuecorder = e.target.value;
}else{
this.valuecorder="";
e.target.value="";
alert("有重复商品条码和商品名称请重新扫码")
}
})
.catch(function(error){
});
//alert(e.target.value)
},
Focusgoods(e){
var param = new FormData();
if(this.valuecorder=== null){
param.append(' barCode',"")
param.append(' productNumber',"")
}else{
param.append(' barCode',this.valuecorder)
param.append(' productNumber',this.valuecorder)
}
param.append(' goodName',e.target.value)
//判断是不是一样 如果有一样就弹出提示
this.$http.post(`http://pic.tongchengxianggou.com:9011/sku/o-product/flag`,param)
.then(response => {
if(response.data.code === 200){
this.producename = e.target.value
}else{
e.target.value="";
this.producename="";
alert("有重复商品条码和商品名称请重新扫码")
}
})
.catch(function(error){
});
//alert(e.target.value)
},
getCouponSelected(){
console.log(this.couponSelected)
},
//点击滚动图的时候
guanbi(){
this.imgchange = false;
this.moreshow = false;
},
ScrollChart(){
this.imgchange = false;
this.moreshow = true;
},
change(){
},
//滚动图删除
Chartdelete(index){
this.Scrollviewimgs.splice(index, 1);
},
//删除缩略图
deleteimg(index) {
this.smallimglist.splice(index, 1);
//this.images.splice(index, 1);
},
//上传缩略图
fileChange(el) {
const toast = this.$createToast({
time: 0,
txt: '提交中',
mask: true
})
toast.show()
this.files=$("#upload_file").get(0).files;
var param = new FormData(); //创建form对象
param.append('imgFileTmp',this.files[0]) //对应后台接收图片名
this.$http.post(`http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do`,param)
.then(res => {
if(res.data.code === 200){
this.smallimglist = JSON.parse(res.data.data)
localStorage.setItem("localphoto", res.data.data);
toast.hide();
this.imgchange = false;
this.moreshow = false;
}else{
this.$toast({
message: res.data.msg,
position: 'center',
duration: 2000
});
}
})
.catch(function(error){
//console.log(error);
});
},
ScrollChange(viewel){
const toast = this.$createToast({
time: 0,
txt: '提交中',
mask: true
})
toast.show()
let files = viewel.target.files;
//console.log(files)
if (files.length === 0) {
return;
}
if(this.Scrollviewimgs.length + files.length > 5) {
alert("最多只能传4张滚动图")
return;
}
this.files=$("#upbigmore").get(0).files;
var param = new FormData(); //创建form对象
param.append('imgFileTmp',this.files[0])
//接口
//this.$http.post(`http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do`,param)
//this.$http.post(`http://192.168.124.66:8888/web/sku/o-product/upload-tmp-pic-dothing/do`,param)
this.$http.post(`http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do`,param)
.then(res => {
if(res.data.code === 200){
//console.log(JSON.parse(res.data.data))
this.Scrollviewimgs = this.Scrollviewimgs.concat(JSON.parse(res.data.data))
//console.log("获取到的新数组")
this.imgchange = false;
this.moreshow = false;
toast.hide()
}else{
this.$toast({
message: res.data.msg,
position: 'center',
duration: 2000
});
}
})
.catch(function(error){
//console.log(error);
});
},
chosepics(){
localStorage.removeItem('localphoto');
localStorage.removeItem('passsingle');
this.smallimglist=[];
window.location.href="choseone.html"
},
chosebig(){
window.location.href="moreChose.html"
},
paizhao(){
$('#upload_file').click();
localStorage.removeItem('localphoto');
localStorage.removeItem('passsingle');
this.smallimglist=[];
},
morebig(){
$('#upbigmore').click();
},
upimgstyle(){
this.imgchange = true;
this.moreshow = false;
},
goback(){
},
saoclick(){
var that = this;
//模拟接收数据
localStorage.setItem("localtradename","苹果");
wx.scanQRCode({
needResult:1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var param = new FormData(); //创建form对象
var result = res.resultStr;
var arr = result.split(',');
param.append('code', arr[1])
param.append('os', "aaaa")
param.append('channelId', "bbb")
param.append('uuid', "f6d642f6-239a-4e51-b5a7-375c0e95a104 EEFE1515-C5B8-4C3A-8F0E-B6333F36C0F4")
axios({
method:'post',
url:'http://ha.tongchengxianggou.com/api/sp/product/read/code',
data:param,
}).then(res => {
var param = new FormData();
param.append(' barCode',res.data.code)
param.append(' productNumber',res.data.code)
param.append(' goodName',res.data.name)
//判断是不是一样 如果有一样就弹出提示
that.$http.post(`http://pic.tongchengxianggou.com:9011/sku/o-product/flag`,param)
.then(response => {
if(response.data.code === 200){
localStorage.setItem("localcode", res.data.code);
that.valuecorder = localStorage.getItem("localcode");
localStorage.setItem("localtradename", res.data.name);
that.producename = localStorage.getItem("localtradename")
}else{
alert("有重复商品条码和商品名称请重新扫码")
}
})
.catch(function(error){
});
})
.catch(function(error){
//console.log(error);
});
}
});
},
submitclick(){
var that = this;
console.log(this.smallimglist)
//测试需要注销
//localStorage.clear();
if(this.valuecorder== null||this.producename== null||this.lefttxt== null|| this.weighttxt== null){
const toast = this.$createToast({
time: 1000,
txt: '信息不完整无法提交！'
})
toast.show()
return false;
}
if(this.Scrollviewimgs.length==0 || this.smallimglist.length==0){
const toast = this.$createToast({
time: 1000,
txt: '缩略图和滚动图不可为空！'
})
toast.show()
return false;
}
var param = new FormData(); //创建form对象
var meiyong=[
{
attrName:"1滴",
atrrValue:"1",
id:16,
attribute:0,
isMandatory:0
}
];
param.append(' barCode',this.valuecorder) //条码
param.append('productNumber', this.valuecorder)//
param.append(' productName',this.producename) //名称
param.append('goodName', this.producename)//suoluetu
param.append(' lifetime',this.lefttxt) //保质期
param.append(' weight',this.weighttxt) //重量
param.append('thumbPicStr', JSON.stringify(this.smallimglist))//suoluetu
param.append('scrollPicStr', JSON.stringify(this.Scrollviewimgs))//suoluetu
param.append('lifeState', this.couponSelected)//日月选择
param.append('tags', "没有标签")//suoluetu
param.append('productClassId', 1)//suoluetu
param.append('productClassAtrrValue',JSON.stringify(meiyong))//suoluetu
param.append('detailHtmlText', "")//suoluetu
this.$http.post(`http://pic.tongchengxianggou.com:9011/sku/o-product/add/do`,param).then(res => {
//this.$http.post(`http://192.168.124.66:8888/web/sku/o-product/add/do`,param).then(res => {
if(res.data.code === 200){
const toast = this.$createToast({
time: 600,
txt: '新增商品成功'
})
toast.show()
localStorage.clear();
this.imgchange = false;
this.moreshow = false;
setTimeout(function(){
window.location.reload();
},700);
that.Scrollviewimgs=[];
that.smallimglist=[];
}else{
alert("提交失败")
}
})
},
smallimg(file){
this.imglength.push(file)
},
databuild(a) {
this.couponSelected = this.couponList[1].id;
//商品名称和商品条码
this.valuecorder = localStorage.getItem("localcode")
this.producename = localStorage.getItem("localtradename")
//图片判断保存
if(JSON.parse(localStorage.getItem("passData")) == null){
this.Scrollviewimgs =[];
}else{
this.Scrollviewimgs = JSON.parse(localStorage.getItem("passData"))
}
//缩略图
if(JSON.parse(localStorage.getItem("passsingle")) == null){
this.smallimglist=[];
}else{
this.smallimglist = JSON.parse(localStorage.getItem("passsingle"));
}
if(JSON.parse(localStorage.getItem("localphoto")) == null){
if(JSON.parse(localStorage.getItem("passsingle")) == null){
this.smallimglist=[];
}else{
this.smallimglist = JSON.parse(localStorage.getItem("passsingle"));
}
}else{
this.smallimglist= JSON.parse(localStorage.getItem("localphoto"))
}
console.log("单个上传")
console.log(JSON.parse(localStorage.getItem("passsingle")))
console.log("滚动图的图库")
console.log(JSON.parse(localStorage.getItem("passData")))
},
},
mounted: function() {
this.$nextTick(function() {
this.databuild();
$.ajax({
url: "http://kuaidi.haxbs.com/index.php?c=index&a=weixin",
type:"POST",
dataType:"json",
success: function(res){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
});
//console.log(wx);
wx.error(function(res){
//console.log(res);
});
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['checkJsApi','scanQRCode'],
success: function (res) {
this.weixincode=res.code;
console.info(res);
}
});
});
}
});
});
},
});
</script>
</body>
</html>
moreChose.html
<!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("localtradename")
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>
choseone.html
<!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;
}
.consigneeListClick img{
border: 1px solid red!important;
}
@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 @click="picturesClick(list,index,$event)" class="descimgs detail-btn" :class="{'consigneeListClick':CouponIndex == index}">
<img :src="list.thumb" 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 src="http://www.17sucai.com/static/js/jquery.min.js"></script>
<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="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
CouponIndex:-1,
setdata:[],
builddata:[],
datalist :[],
imgchange:false,
LINK:'http://kuaidi.haxbs.com',
imglength:[],
lefttxt:'',
weighttxt:'',
value:'这是一个商品',
actions:[
{
text: '完成订单',
action: 'showText'
},
],
},
methods: {
picturesClick(viewitem,viewindex,viewevent){
this.CouponIndex = viewindex;
this.builddata=[];
this.builddata.push(viewitem.thumb);
},
suresubmit(){
if(this.builddata.length == 0){
const toast = this.$createToast({
time: 1000,
txt: '请上传图片！再次提交'
})
toast.show()
return false
}
const toast = this.$createToast({
txt: 'Loading...',
time: 0,
mask: true
})
toast.show()
this.builddata.map((item, index) => {
var param = new FormData(); //创建form对象
param.append('url',item) //对应后台接收图片名
this.$http.post(`http://pic.tongchengxianggou.com:9011/upload/oss`,param)
.then(res => {
if(res.data.code === 200){
toast.hide()
this.setdata=[];
this.setdata.push(res.data.data)
if (window.localStorage){
var Datasingle=JSON.stringify(this.setdata);//将json对象转化成字符串
localStorage.setItem("passsingle",Datasingle);
window.location.href = 'upimg.html';
}
}else{
}
})
.catch(function(error){
});
});
},
descimgsClick(viewitem,b){
},
goback(){
window.history.back(); //返回
},
cartView(a) {
var that = this;
var nametitle = localStorage.getItem("localtradename")
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);
//console.log(resp)
},
error : function(resp){
//console.log(resp);
}
});
},
},
mounted: function() {
this.$nextTick(function() {
this.cartView();
});
},
});
</script>
</body>
</html>
网友评论