HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

更新商品编辑

This commit is contained in:
姜棚 2022-01-20 10:58:57 +08:00
parent f31deff8f1
commit c0d2727524
7 changed files with 684 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/exchangecode/commodity/commodity.js
View File

@ -11,7 +11,7 @@ import Filterbar from "../../../components/filterbar/main.js"
import {getCodeProductList,handelResponse,delCodeProduct} from "../../../assets/api.js"
import Productform from "../product/add"
import _ from "lodash";
/* <span className="grid-link" onClick={(e)=>this.editinfo(e,rowData)}>编辑</span> */
const Column = [
{
title: '商品编号',
@ -292,7 +292,7 @@ export default class commoditylist extends React.Component{
if(com == "opearo")
{
return <div>
<span className="grid-link" onClick={(e)=>this.editinfo(e,rowData)}>编辑</span>
<span className="grid-link" onClick={(e)=>this.deleteFn(e,rowData)}>删除</span>
</div>
}

275
src/pages/exchangecode/commodity/goodedit.js
View File

@ -8,8 +8,11 @@ import Bus from "../../../assets/eventBus.js"
import {getProductInfoSelect,handelResponse,uploadImg,getCodeProduct,putCodeProduct} from "../../../assets/api.js"
import _ from "lodash";
import "./commodity.less"
import "./goodedit.less"
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
export default class adduserinfo extends React.Component{
mySwiper = null;
constructor(props){
super(props)
this.state={
@ -23,37 +26,48 @@ export default class adduserinfo extends React.Component{
quantity:"",
usage:"",
name:"",
show_url:"",
loadshow:false,
show_url:"",
loadshow:false,
describe_url:"",
map_product_name:''
map_product_name:'',
detail_url:"",
},
cur_product:null,
cur_product:null,
productOption:[],
img:[{src:"https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/account_avatar/20211119/ae4e7d7eafd6eb1a4d9ca0efd281dba0.png"}]
productpic:[]
}
}
componentDidMount() {
this.mySwiper = new Swiper('.swiper-container', {
slidesPerView: 1,
centeredSlides: true,
loop : true,
autoplay : 3000,
initialSlide :0,
observer: true, // 修改swiper自己或子元素时，自动初始化swiper
observeParents: true, // 修改swiper的父元素时，自动初始化swiper
pagination: '.swiper-pagination',
})
}
componentWillMount(e){
//获取商品信息
this.getProductInfo()
}
componentWillReceiveProps() {
this.mySwiper.update();
}
//获取直连天下商品映射信息
getProductInfo(){
// getProductInfoSelect().then((res)=>{
// handelResponse(res,(req,msg)=>{
let productList = sessionStorage.getItem("productsList")
productList = JSON.parse(productList);
let product_data = []
@ -89,6 +103,29 @@ export default class adduserinfo extends React.Component{
getCodeProduct(code_batch_id,product_id).then(res=>{
handelResponse(res,(req,msg)=>{
let defaultPic = []
let arr = []
let temp_productpic = this.state.productpic
for(let i = 0;i < req.describe_url.length;i++)
{
let obj = {}
let nameArr = req.describe_url[i].split('/');
obj.name = nameArr[5]
obj.src = req.describe_url[i];
defaultPic.push(obj)
let obj2={
name:nameArr[5],
url:req.describe_url[i]
}
temp_productpic.push(obj2)
}
this.setState({temp_productpic})
let temp ={ //数据模型不可少
id:req.product_id,
type:req.product_type,
@ -101,8 +138,9 @@ export default class adduserinfo extends React.Component{
usage:req.usage,
name:req.product_name,
show_url:req.show_url[0],
describe_url: req.describe_url[0] ,
map_product_name:req.map_product_name
describe_url: defaultPic ,
map_product_name:req.map_product_name,
detail_url:req.detail_url
}
let sel_item = this.state.productOption.find((o)=>{
@ -111,21 +149,12 @@ export default class adduserinfo extends React.Component{
this.setState({cur_product:sel_item})
this.setState({model:temp,loadshow:true})
console.log(789798)
console.log(this.state.model)
},(err)=>{
})
}).catch(err=>{
});
// },(err)=>{
// })
// })
}
cancel(){
@ -157,6 +186,10 @@ export default class adduserinfo extends React.Component{
Notify.error(`商品总库存量不能小于已使用数量`);
return;
}
let urls = _.map(this.state.productpic,(o)=>{
return o.url
})
let formdata = {
"product_type": this.state.model.type,
"product_name": this.state.model.name,
@ -168,8 +201,9 @@ export default class adduserinfo extends React.Component{
"usage": this.state.model.usage,
"stock":this.state.model.quantity - this.state.model.usage,
"show_url": this.state.model.show_url,
"describe_url": this.state.model.describe_url,
// "map_product_name": this.state.model.map_product_name
"describe_url": urls.toString(),
"detail_url":this.state.model.detail_url,
"map_product_name": this.state.model.map_product_name
}
putCodeProduct(code_batch_id,product_id,formdata).then((res)=>{
@ -207,8 +241,9 @@ export default class adduserinfo extends React.Component{
stock:this.state.model.quantity - this.state.model.usage,
account_type:cur_product.account_type,
show_url:picItem ? picItem.pic : "",
describe_url:this.state.describe_url ,
map_product_name:cur_product.title
describe_url:this.state.model.describe_url ,
map_product_name:cur_product.title,
detail_url:""
}
this.setState({model:model2})
@ -337,6 +372,108 @@ export default class adduserinfo extends React.Component{
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
}
};
onUploadChange3(files,e){
let arr =_.map(files,(o)=>{
return o.name
})
console.log("保留的数据",arr)
if(arr.length > this.state.productpic.length)
{
//新增
for(let i = 0;i < arr.length;i++)
{
let index = this.state.productpic.findIndex((o)=>{
return o.name == arr[i]
})
if(index < 0)
{
let path = ""
let formdata= new FormData();
formdata.append("file",files[i].file)
formdata.append("path","common_image")
uploadImg(formdata).then((res)=>{
handelResponse(res,(req,msg)=>{
path = req.path;
let obj={
name:files[i].name,
url:path
}
let arr = this.state.productpic;
arr.push(obj)
this.setState({arr})
},(err)=>{
})
});
}
}
}
if(arr.length < this.state.productpic.length)
{
let temp_arr = Object.assign([],this.state.productpic);
this.setState({productpic:[]})
this.state.productpic = []
let temp_arr2 = this.state.productpic
console.log(temp_arr)
console.log("删除前的数据",this.state.productpic)
for(let i = 0;i < temp_arr.length;i++ )
{
let temp =temp_arr[i]
if(arr.indexOf(temp.name) > -1)
{
temp_arr2.push(temp)
}
}
console.log("删除过后的数组",this.state.productpic)
this.setState({temp_arr2})
}
// //调整位置
if(arr.length == this.state.productpic.length)
{
let temp_arr = []
let pic_arr = this.state.productpic
for(let i = 0;i < arr.length;i++ )
{
let temp = pic_arr.find((o)=>{return o.name == arr[i]})
temp_arr[i] = temp
}
this.setState({productpic:temp_arr})
}
};
onUploadChange2(files){
if(files.length > 0 )
{
let formdata= new FormData();
formdata.append("file",files[0].file)
formdata.append("path","common_image")
uploadImg(formdata).then((res)=>{
handelResponse(res,(req,msg)=>{
let path = req.path;
let model = this.state.model;
model.detail_url = path;
this.setState({model:model})
},(err)=>{
})
});
}
else{
let model = this.state.model;
model.detail_url = "";
this.setState({model:model})
}
}
render(){
@ -466,21 +603,73 @@ export default class adduserinfo extends React.Component{
{
this.state.loadshow? <FormItem prop="describe_url" labelname="商品图" id="describe_url" required={false}>
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
tips="建议尺寸 30*30，图片不超过 20KB"
maxAmount={1}
onChange={(e)=>{this.onUploadChange1(e)}}
onUpload={this.onUpload}
fileList={this.state.model.describe_url ? [{'src':this.state.model.describe_url}] : null}
value={this.state.model.describe_url}
/></FormItem>:null
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
tips="建议尺寸 30*30，图片不超过 20KB"
maxAmount={9}
sortable
defaultFileList={this.state.model.describe_url }
multiple
onChange={(e)=>{this.onUploadChange3(e)}}
/></FormItem>:null
}
{
this.state.loadshow? <FormItem prop="detail_url" labelname="商品详情" id="detail_url" required={false}>
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
tips="建议尺寸 30*30，图片不超过 20KB"
maxAmount={1}
fileList={this.state.model.detail_url ? [{'src':this.state.model.detail_url}] : null}
onChange={(e)=>{this.onUploadChange2(e)}}
/>
</FormItem> : null
}
</Form>
<div className="mobile">
<div className="mobile_top">
{
this.state.productpic ?
(
<div className="swiper-container">
<div className="swiper-wrapper" ref="swiperwrapper">
{
this.state.productpic.map((item, index) => {
return (<div className="swiper-slide" >
<img src={item.url} />
</div>)
})
}
</div>
<div className="swiper-pagination"></div>
</div>
) : null
}
</div>
<div className="mobile_center">
</div>
<div className="mobile_bottom">
{
this.state.model.detail_url ? (<img src={this.state.model.detail_url} />) : null
}
</div>
</div>
</Card>
<div className="btnList" >

56
src/pages/exchangecode/commodity/goodedit.less Normal file
View File

@ -0,0 +1,56 @@
.zent-image-upload-item-delete{
display: inline-block !important;
}
.mobile{
width: 375px;
height: 667px;
max-height: 667px;
background-color: #fafafa;
position: absolute;
top: 80px;
right: 60px;
border-color: 1px solid #B4B6B9;
padding: 5px;
overflow: auto;
}
.mobile_top{
width: 100%;
height: 373px;
background-image: url(https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailtop.png);
background-size: 100% 100%;
}
.mobile_center{
margin-top: 10px;
width: 100%;
height: 158px;
background-image: url(https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png);
background-size: 100% 100%;
}
.mobile_bottom{
margin-top: 10px;
width: 100%;
height: auto;
img{
width: 100%;
}
// background-image: url;
}
.swiper-container{
width: 100%;
height: 100%;
}
.swiper-slide{
img{
width: 100% !important;
height: 100% !important;
}
}
.swiper-mobile-simple{
height: 100% !important;
}

0
src/pages/exchangecode/commodity/goodscreate.js
View File

47
src/pages/exchangecode/product/add.js
View File

@ -63,6 +63,8 @@ export default class adduserinfo extends React.Component{
if(this.props.data)
{
let model_temp = this.props.data;
let model = this.state.model;
model.product_id = model_temp.product_id;
model.product_type = model_temp.product_type
@ -76,7 +78,7 @@ export default class adduserinfo extends React.Component{
let defaultPic = []
let arr = []
console.log("描述图",model_temp.describe_url)
let temp_productpic = this.state.productpic
for(let i = 0;i < model_temp.describe_url.length;i++)
{
@ -168,26 +170,28 @@ export default class adduserinfo extends React.Component{
temp[index].stock = this.state.model.quantity
temp[index].usage = this.state.model.usage
temp[index].show_url = this.state.model.show_url
temp[index].detail_url = this.state.model.detail_url
let urls = _.map(this.state.productpic,(o)=>{
return o.url
})
console.log("提交数据url",urls)
temp[index].describe_url = urls
temp[index].map_product_name = this.state.model.map_product_name
temp[index].account_type = this.state.model.account_type
console.log("临时存储",temp)
sessionStorage.setItem('productData', JSON.stringify(temp));
}
}
else{
console.log("模型")
let model = this.state.model;
let urls = _.map(this.state.productpic,(o)=>{
return o.url
})
model.describe_url = urls
this.setState({model:model})
if(this.state.model.show_url == "")
{
@ -223,6 +227,7 @@ export default class adduserinfo extends React.Component{
product_name:cur_product.title,
show_url:picItem ? picItem.pic : "",
describe_url: "",
detail_url:'',
map_product_name:cur_product.title,
account_type:cur_product.account_type
}
@ -347,26 +352,6 @@ export default class adduserinfo extends React.Component{
}
this.setState({productpic:temp_arr})
}
// console.log("swiperwrapper",this.refs.swiperwrapper)
// this.refs.swiperwrapper.innerHTML=""
// this.mySwiper.destroy();
// this.mySwiper = new Swiper('.swiper-container', {
// slidesPerView: 1,
// centeredSlides: true,
// loop : true,
// autoplay : 3000,
// observer: true, // 修改swiper自己或子元素时，自动初始化swiper
// observeParents: true, // 修改swiper的父元素时，自动初始化swiper
// pagination: '.swiper-pagination',
// watchSlidesVisibility: true,
// })
// this.mySwiper.update();
// let swiperBox = this.refs.swiperwrapper
};
onUploadError = (type, data) => {
if (type === 'overMaxAmount') {

68
src/pages/plan/add/step2.js
View File

@ -56,6 +56,7 @@ export default class acclist extends React.Component{
uploading:false,
rowIndex:-1,
isload:props.isload ? props.isload : false,
product_title:"新建商品"
}
}
@ -155,6 +156,7 @@ export default class acclist extends React.Component{
}
addProduct(){
this.setState({drawerVisible2:true})
this.setState({productData:null})
}
async productSubmit(){
let visible = await this.refs.product.submit()
@ -269,7 +271,8 @@ export default class acclist extends React.Component{
obj.official_price= item.official_price;
obj.quantity = item.quantity;
obj.show_url = item.show_url;
obj.describe_url = item.describe_url;
obj.describe_url = item.describe_url.toString();
obj.detail_url = item.detail_url;
obj.account_type = item.account_type;
obj.map_product_name = item.map_product_name;
return obj
@ -528,6 +531,12 @@ export default class acclist extends React.Component{
}
productEditShow(rowData){
this.setState({drawerVisible2:true})
this.setState({productData:rowData})
this.setState({product_title:"编辑商品"})
}
render(){
@ -640,20 +649,13 @@ export default class acclist extends React.Component{
type: "slot",
width:'auto',
},
{
title: '商品Logo',
prop: 'show_url',
name: 'show_url',
type: "slot",
width:'auto',
},
{
title: '商品图',
prop: 'describe_url',
name: 'describe_url',
type: "slot",
width:'auto',
},
{
title: '操作',
prop: 'edit',
name: 'edit',
type: "slot",
width:'auto',
}
];
@ -963,33 +965,15 @@ export default class acclist extends React.Component{
return <Input width={100} placeholder="请输入合同价" value={rowData.contract_price} onChange={(e)=>{this.onPriceChange(e,rowData,rowIndex)}} />
}
if(com == "show_url")
if(com == "edit")
{
return <ImageUpload
style={{width:"30px",height:"30px"}}
className="td-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
onChange={(e)=>{this.onUploadChange1(e,rowData)}}
onUpload={this.onUpload}
defaultFileList={[{'src':rowData.show_url}]}
value={rowData.show_url}
/>
return <a className="grid-link" onClick={(e)=>{
this.productEditShow(rowData)
}} >编辑</a>
}
if(com == "describe_url")
{
return <ImageUpload
style={{width:"30px",height:"30px"}}
className="td-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
onChange={(e)=>{this.onUploadChange2(e,rowData)}}
onUpload={this.onUpload}
defaultFileList={ rowData.describe_url ? [{'src':rowData.describe_url}] : null}
value={rowData.describe_url}
/>
}
}}
@ -1002,8 +986,8 @@ export default class acclist extends React.Component{
</Drawer>
<Drawer
className="draw"
width={"60%"}
title={"新建商品"}
width={"80%"}
title={this.state.product_title}
footer={
<div style={{ textAlign: 'center' }}>
<Button type="primary" onClick={(e) =>{this.productSubmit()} }>提交</Button>
@ -1017,7 +1001,7 @@ export default class acclist extends React.Component{
<div className="draw2">
<Card style={{ width:'90%',"margin":"10px auto" }} >
<Productform ref="product" data={this.state.productData}/>
<Productform ref="product" data={this.state.productData} />
</Card>
</div>

437
src/pages/plan/product/add.js
View File

@ -8,9 +8,11 @@ import {Select,Button,ImageUpload ,onUpload,Sweetalert,RadioButton,RadioGroup,No
import Bus from "../../../assets/eventBus.js"
import {getProductInfoSelect,handelResponse,uploadImg} from "../../../assets/api.js"
import _ from "lodash";
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
export default class adduserinfo extends React.Component{
mySwiper = null
constructor(props){
super(props)
this.state={
@ -25,6 +27,7 @@ export default class adduserinfo extends React.Component{
show_url:"",
describe_url:"",
map_product_name:"",
detail_url:""
},
cur_product:null,
productOption:[],
@ -32,63 +35,189 @@ export default class adduserinfo extends React.Component{
show_url:"",
describe_url:"",
loadshow:false,
productpic:[],
}
}
componentDidMount() {
this.mySwiper = new Swiper('.swiper-container', {
slidesPerView: 1,
centeredSlides: true,
loop : true,
autoplay : 3000,
initialSlide :0,
observer: true, // 修改swiper自己或子元素时，自动初始化swiper
observeParents: true, // 修改swiper的父元素时，自动初始化swiper
pagination: '.swiper-pagination',
})
}
componentWillMount(e){
if(this.props.data)
{
let model_temp = this.props.data;
let model = this.state.model;
model.product_id = model_temp.product_id;
model.product_type = model_temp.product_type
model.contract_price = model_temp.contract_price
model.official_price = model_temp.official_price
model.cost_price = model_temp.cost_price
model.quantity = model_temp.quantity
model.product_name = model_temp.product_name
model.show_url = model_temp.show_url
model.detail_url = model_temp.detail_url
let defaultPic = []
let arr = []
let temp_productpic = this.state.productpic
let pics = ""
if(Array.isArray(model_temp.describe_url))
{
pics = model_temp.describe_url
}
else{
if(model_temp.describe_url !="")
{
pics = model_temp.describe_url.split(',')
}
else{
pics = []
}
}
console.log("默认图",pics)
for(let i = 0;i < pics.length;i++)
{
let obj = {}
let nameArr = pics[i].split('/');
obj.name = nameArr[5]
obj.src = pics[i];
defaultPic.push(obj)
let obj2={
name:nameArr[5],
url:pics[i]
}
temp_productpic.push(obj2)
}
this.setState({temp_productpic})
model.describe_url = defaultPic == [] ? "" : defaultPic
model.stock = model_temp.stock
model.usage = model_temp.usage
model.map_product_name = model_temp.map_product_name
model.account_type = model_temp.account_type
this.setState({model:model})
}
this.getProductInfo()
}
componentWillReceiveProps() {
this.mySwiper.update();
}
componentDidMount(e){
//获取商品信息
this.getProductInfo()
}
//获取直连天下商品映射信息
getProductInfo(){
// getProductInfoSelect().then((res)=>{
// handelResponse(res,(req,msg)=>{
let product_data = []
let productList = sessionStorage.getItem("productsList")
productList = JSON.parse(productList);
if(sessionStorage.getItem("productData"))
{
product_data = JSON.parse( sessionStorage.getItem("productData")) ;
}
let checked_product= product_data ? product_data : [];
let arr = [];
this.setState({products:productList})
_.map(productList,(res)=>{
let obj = {};
obj.key = res.id;
obj.text= res.title;
obj.disabled = checked_product.findIndex((item)=>{return item.product_id == res.id}) > -1;
if(obj.disabled)
{
}
arr.push(obj)
return obj;
})
let product_data = []
let productList = sessionStorage.getItem("productsList")
productList = JSON.parse(productList);
if(sessionStorage.getItem("productData"))
{
product_data = JSON.parse( sessionStorage.getItem("productData")) ;
}
let checked_product= product_data ? product_data : [];
let arr = [];
this.setState({products:productList})
_.map(productList,(res)=>{
let obj = {};
obj.key = res.id;
obj.text= res.title;
obj.disabled = checked_product.findIndex((item)=>{return item.product_id == res.id}) > -1;
if(obj.disabled)
{
}
arr.push(obj)
return obj;
})
this.setState({"productOption":arr})
// },(err)=>{
// })
// })
if(this.state.model.product_id)
{
let cur_product = arr.find((item)=>{return item.key ==this.state.model.product_id})
this.setState({cur_product:cur_product})
}
}
async submit(){
if(this.refs.form1.validator())
{
console.log("提交新增数据",this.props.data)
if(this.props.data)
{ let temp = []
console.log("编辑",this.state.model)
if(sessionStorage.getItem("productData"))
{
temp = JSON.parse(sessionStorage.getItem("productData"));
let index = temp.findIndex((item)=>{return item.product_id ==this.props.data.product_id})
console.log("账号类型",this.state.model.account_type)
temp[index].product_name = this.state.model.product_name
temp[index].account_type = this.state.model.account_type
temp[index].product_id = this.state.model.product_id
temp[index].product_type = this.state.model.product_type
temp[index].contract_price = this.state.model.contract_price
temp[index].official_price = this.state.model.official_price
temp[index].cost_price = this.state.model.cost_price
temp[index].quantity = this.state.model.quantity
temp[index].stock = this.state.model.quantity
temp[index].usage = this.state.model.usage
temp[index].show_url = this.state.model.show_url
temp[index].detail_url = this.state.model.detail_url
console.log(77777)
let urls = _.map(this.state.productpic,(o)=>{
return o.url
})
console.log(8888)
temp[index].describe_url = urls
temp[index].map_product_name = this.state.model.map_product_name
sessionStorage.setItem('productData', JSON.stringify(temp));
return true;
}
}
else{
let model = this.state.model;
console.log("商品",this.state.model)
let urls = _.map(this.state.productpic,(o)=>{
return o.url
})
model.describe_url = urls
this.setState({model:model})
if(this.state.model.show_url == "")
{
Notify.error(`请上传商品Logo`);
@ -104,18 +233,16 @@ export default class adduserinfo extends React.Component{
data.push(this.state.model)
sessionStorage.setItem('productData', JSON.stringify(data));
return true;
}
}
}
onProductChange(e){
this.setState({cur_product:e})
let cur_product = this.state.products.find((item)=>{return item.id == e.key})
console.log(window.goods)
console.log(cur_product.product_category_id)
console.log("当前商品",cur_product)
let picItem = window.goods.find((item)=>{return item.id == cur_product.product_category_id})
console.log(picItem)
let model2 = {...this.state.model}
model2.product_id = cur_product.id;
model2.product_type=cur_product.type;
@ -128,7 +255,7 @@ export default class adduserinfo extends React.Component{
model2.show_url=picItem ? picItem.pic : "";
model2.describe_url= "";
model2.map_product_name= cur_product.title;
model2.detail_url = "";
// let model2 = {
// product_id:cur_product.id,
// product_type:cur_product.type,
@ -152,28 +279,14 @@ export default class adduserinfo extends React.Component{
onUpload = (file, report) => {
return new Promise((resolve, reject) => {
console.log(file)
console.log(report)
// let count = file.size;
// const update = () => {
// console.log(count)
// if(count < 0)
// {
// resolve();
// }
// else{
// count -= 10000;
// report(10);
// setTimeout(update, 100);
// }
// };
// setTimeout(update, 100);
});
};
onUploadChange(files){
console.log(files)
if(files.length > 0 )
@ -183,19 +296,19 @@ export default class adduserinfo extends React.Component{
Notify.error(`图片大小不能超过 20KB`);
return;
}
let formdata= new FormData();
formdata.append("file",files[0].file)
formdata.append("path","common_image")
uploadImg(formdata).then((res)=>{
handelResponse(res,(req,msg)=>{
let path = req.path;
let model = this.state.model;
model.show_url = path;
this.setState({model:model})
},(err)=>{
})
});
let formdata= new FormData();
formdata.append("file",files[0].file)
formdata.append("path","common_image")
uploadImg(formdata).then((res)=>{
handelResponse(res,(req,msg)=>{
let path = req.path;
let model = this.state.model;
model.show_url = path;
this.setState({model:model})
},(err)=>{
})
});
}
else{
let model = this.state.model;
@ -240,6 +353,109 @@ export default class adduserinfo extends React.Component{
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
}
};
onUploadChange3(files,e){
let arr =_.map(files,(o)=>{
return o.name
})
if(arr.length > this.state.productpic.length)
{
//新增
for(let i = 0;i < arr.length;i++)
{
let index = this.state.productpic.findIndex((o)=>{
return o.name == arr[i]
})
if(index < 0)
{
let path = ""
let formdata= new FormData();
formdata.append("file",files[i].file)
formdata.append("path","common_image")
uploadImg(formdata).then((res)=>{
handelResponse(res,(req,msg)=>{
path = req.path;
let obj={
name:files[i].name,
url:path
}
let arr = this.state.productpic;
arr.push(obj)
this.setState({arr})
},(err)=>{
})
});
}
}
}
if(arr.length < this.state.productpic.length)
{
let temp_arr = Object.assign([],this.state.productpic);
this.setState({productpic:[]})
this.state.productpic = []
let temp_arr2 = this.state.productpic
console.log(temp_arr)
console.log("删除前的数据",this.state.productpic)
for(let i = 0;i < temp_arr.length;i++ )
{
let temp =temp_arr[i]
if(arr.indexOf(temp.name) > -1)
{
temp_arr2.push(temp)
}
}
console.log("删除过后的数组",this.state.productpic)
this.setState({temp_arr2})
}
// //调整位置
if(arr.length == this.state.productpic.length)
{
let temp_arr = []
let pic_arr = this.state.productpic
for(let i = 0;i < arr.length;i++ )
{
let temp = pic_arr.find((o)=>{return o.name == arr[i]})
temp_arr[i] = temp
}
this.setState({productpic:temp_arr})
}
this.mySwiper.update();
};
onUploadChange2(files){
if(files.length > 0 )
{
let formdata= new FormData();
formdata.append("file",files[0].file)
formdata.append("path","common_image")
uploadImg(formdata).then((res)=>{
handelResponse(res,(req,msg)=>{
let path = req.path;
let model = this.state.model;
model.detail_url = path;
this.setState({model:model})
},(err)=>{
})
});
}
else{
let model = this.state.model;
model.detail_url = "";
this.setState({model:model})
}
}
render(){
//校验规则
@ -359,19 +575,70 @@ export default class adduserinfo extends React.Component{
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
tips="建议尺寸 30*30，图片不超过 20KB"
maxAmount={1}
onChange={(e)=>{this.onUploadChange1(e)}}
fileList={this.state.model.describe_url ? [{'src':this.state.model.describe_url}] : null}
value={this.state.model.describe_url}
maxAmount={9}
onChange={(e)=>{this.onUploadChange3(e)}}
sortable
defaultFileList={this.state.model.describe_url }
multiple
/>
</FormItem>
<FormItem prop="detail_url" labelname="商品详情" id="detail_url" required={false}>
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
tips="建议尺寸 30*30，图片不超过 20KB"
maxAmount={1}
fileList={this.state.model.detail_url ? [{'src':this.state.model.detail_url}] : null}
onUpload={this.onUpload}
onChange={(e)=>{this.onUploadChange2(e)}}
/>
</FormItem>
</Form>
<div className="mobile">
<div className="mobile_top">
{
this.state.productpic ?
(
<div className="swiper-container">
<div className="swiper-wrapper" ref="swiperwrapper">
{
this.state.productpic.map((item, index) => {
return (<div className="swiper-slide" >
<img src={item.url} />
</div>)
})
}
</div>
<div className="swiper-pagination"></div>
</div>
) : null
}
</div>
<div className="mobile_center">
</div>
<div className="mobile_bottom">
{
this.state.model.detail_url ? (<img src={this.state.model.detail_url} />) : null
}
</div>
</div>
</div>
)