商品编辑
This commit is contained in:
姜棚
parent
28b25dd3eb
commit
54b59c0b73
|
|
@ -65,8 +65,6 @@ import classNames from 'classnames'
|
|||
componentWillMount(){
|
||||
let val=this.props.value?this.props.value:'';
|
||||
|
||||
console.log("当前的值",val)
|
||||
|
||||
if(val!=''){
|
||||
this.setState({iptVal:val});
|
||||
this.setState({'iptVallength':String(val).length});
|
||||
|
|
|
|||
|
|
@ -986,7 +986,7 @@ export default class exchangedit extends React.Component{
|
|||
</div>
|
||||
<Drawer
|
||||
className="draw"
|
||||
width={"60%"}
|
||||
width={"80%"}
|
||||
title={this.state.product_title}
|
||||
footer={
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import "./add.less"
|
|||
import Ipt from "../../../components/input/main"
|
||||
import Form from "../../../components/form/main"
|
||||
import FormItem from "../../../components/form-item/main"
|
||||
import {Select,Button,ImageUpload ,onUpload,Sweetalert,RadioButton,RadioGroup,Notify} from "zent"
|
||||
import {Swiper,Select,Button,ImageUpload ,onUpload,Sweetalert,RadioButton,RadioGroup,Notify} from "zent"
|
||||
import Bus from "../../../assets/eventBus.js"
|
||||
import {getProductInfoSelect,handelResponse,uploadImg} from "../../../assets/api.js"
|
||||
import _ from "lodash";
|
||||
|
|
@ -26,13 +26,14 @@ export default class adduserinfo extends React.Component{
|
|||
describe_url:[],
|
||||
stock:"",
|
||||
usage:"",
|
||||
goodDetail:"",
|
||||
map_product_name:""
|
||||
},
|
||||
cur_product:null,
|
||||
productOption:[],
|
||||
products:[],
|
||||
product_pic:[],
|
||||
product_url:[]
|
||||
productpic:[],
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -54,12 +55,24 @@ export default class adduserinfo extends React.Component{
|
|||
model.show_url = model_temp.show_url
|
||||
|
||||
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++)
|
||||
{
|
||||
let obj = {}
|
||||
let nameArr = model_temp.describe_url[i].split('/');
|
||||
obj.name = nameArr[5]
|
||||
obj.src = model_temp.describe_url[i];
|
||||
defaultPic.push(obj)
|
||||
let obj2={
|
||||
name:nameArr[5],
|
||||
url:model_temp.describe_url[i]
|
||||
}
|
||||
temp_productpic.push(obj2)
|
||||
}
|
||||
this.setState({temp_productpic})
|
||||
model.describe_url = defaultPic
|
||||
model.stock = model_temp.stock
|
||||
model.usage = model_temp.usage
|
||||
|
|
@ -82,7 +95,7 @@ export default class adduserinfo extends React.Component{
|
|||
{
|
||||
product_data = JSON.parse( sessionStorage.getItem("productData")) ;
|
||||
}
|
||||
let checked_product= product_data ? product_data : [];
|
||||
let checked_product= product_data ? product_data : [];
|
||||
|
||||
let arr = [];
|
||||
this.setState({products:productList})
|
||||
|
|
@ -107,7 +120,6 @@ export default class adduserinfo extends React.Component{
|
|||
{
|
||||
let cur_product = arr.find((item)=>{return item.key ==this.state.model.product_id})
|
||||
this.setState({cur_product:cur_product})
|
||||
console.log("当前商品",cur_product)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -124,12 +136,8 @@ export default class adduserinfo extends React.Component{
|
|||
|
||||
temp = JSON.parse(sessionStorage.getItem("productData"));
|
||||
|
||||
console.log("临时变量",temp)
|
||||
|
||||
let index = temp.findIndex((item)=>{return item.product_id ==this.props.data.product_id})
|
||||
|
||||
console.log("索引",index)
|
||||
|
||||
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
|
||||
|
|
@ -142,16 +150,21 @@ export default class adduserinfo extends React.Component{
|
|||
temp[index].usage = this.state.model.usage
|
||||
temp[index].show_url = this.state.model.show_url
|
||||
|
||||
let urls = _.map(this.state.product_pic,(o)=>{
|
||||
let urls = _.map(this.state.productpic,(o)=>{
|
||||
return o.url
|
||||
})
|
||||
|
||||
|
||||
console.log("商品集合",urls)
|
||||
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
|
@ -205,38 +218,7 @@ export default class adduserinfo extends React.Component{
|
|||
onUpload = (file, report) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
console.log("文件",file)
|
||||
let path = ""
|
||||
let formdata= new FormData();
|
||||
formdata.append("file",file)
|
||||
formdata.append("path","common_image")
|
||||
uploadImg(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
path = req.path;
|
||||
let obj={
|
||||
name:file.name,
|
||||
url:path
|
||||
}
|
||||
|
||||
let arr = this.state.product_pic;
|
||||
arr.push(obj)
|
||||
this.setState({product_pic:arr})
|
||||
|
||||
|
||||
let pic =_.map(this.state.product_pic,(o)=>{
|
||||
let obj={
|
||||
src:o.url
|
||||
}
|
||||
return obj
|
||||
})
|
||||
|
||||
this.setState({describe_url:[{src:"https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220118/015f3e3e21662982cd51915b918d1d0e.png"}]})
|
||||
|
||||
},(err)=>{
|
||||
reject();
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
};
|
||||
onUploadChange(files){
|
||||
|
|
@ -269,84 +251,78 @@ export default class adduserinfo extends React.Component{
|
|||
this.setState({model:model})
|
||||
}
|
||||
};
|
||||
onUploadChange1(files){
|
||||
console.log("文件",files)
|
||||
|
||||
console.log(this.state.product_pic)
|
||||
|
||||
onUploadChange1(files,e){
|
||||
|
||||
let arr =_.map(files,(o)=>{
|
||||
return o.name
|
||||
})
|
||||
|
||||
console.log("文件数据",arr)
|
||||
|
||||
if(arr.length < this.state.product_pic.length)
|
||||
// console.log("保留的数据",arr)
|
||||
// console.log( this.state.productpic)
|
||||
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();
|
||||
console.log("新增文件",files)
|
||||
|
||||
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 deleteArr = this.state.product_pic.filter((o)=>{
|
||||
// return arr.indexOf(o.name) < 0
|
||||
// })
|
||||
// console.log("删除的数据",deleteArr)
|
||||
let temp_arr = [];
|
||||
for(let i = 0;i < this.state.product_pic;i++ )
|
||||
for(let i = 0;i < this.state.productpic.length;i++ )
|
||||
{
|
||||
let temp = this.state.product_pic[i]
|
||||
let temp = this.state.productpic[i]
|
||||
if(arr.indexOf(temp.name) > -1)
|
||||
{
|
||||
temp_arr.push(temp)
|
||||
}
|
||||
}
|
||||
this.setState({product_pic:temp_arr})
|
||||
this.setState({productpic:temp_arr})
|
||||
}
|
||||
|
||||
// //调整位置
|
||||
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})
|
||||
}
|
||||
console.log("上传图",this.state.product_pic)
|
||||
// if(this.state.product_pic.indexof(""))
|
||||
|
||||
|
||||
// if(files.length)
|
||||
// {
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// if(files.length > 0)
|
||||
// {
|
||||
// if(files[files.length - 1].file.size > 20000)
|
||||
// {
|
||||
// Notify.error(`图片大小不能超过 20KB`);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// if(files.length > 0 )
|
||||
// {
|
||||
// if(files[files.length - 1].file.size > 20000)
|
||||
// {
|
||||
// Notify.error(`图片大小不能超过 20KB`);
|
||||
// return;
|
||||
// }
|
||||
// let formdata= new FormData();
|
||||
// formdata.append("file",files[files.length - 1].file)
|
||||
// formdata.append("path","common_image")
|
||||
// uploadImg(formdata).then((res)=>{
|
||||
// handelResponse(res,(req,msg)=>{
|
||||
// let path = req.path;
|
||||
// let model = this.state.model;
|
||||
|
||||
|
||||
// console.log("模型",model)
|
||||
// model.describe_url.push(path);
|
||||
// this.setState({model:model})
|
||||
// },(err)=>{
|
||||
|
||||
// })
|
||||
// });
|
||||
// }
|
||||
// else{
|
||||
// let model = this.state.model;
|
||||
// model.describe_url = [];
|
||||
// this.setState({model:model})
|
||||
// }
|
||||
};
|
||||
onUploadError = (type, data) => {
|
||||
if (type === 'overMaxAmount') {
|
||||
|
|
@ -355,7 +331,30 @@ export default class adduserinfo extends React.Component{
|
|||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
||||
}
|
||||
};
|
||||
|
||||
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.goodDetail = path;
|
||||
|
||||
this.setState({model:model})
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
});
|
||||
}
|
||||
else{
|
||||
let model = this.state.model;
|
||||
model.goodDetail = "";
|
||||
this.setState({model:model})
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
|
|
@ -479,8 +478,50 @@ export default class adduserinfo extends React.Component{
|
|||
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem prop="goodDetail" labelname="商品详情" id="goodDetail" required={false}>
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
tips="建议尺寸 30*30，图片不超过 20KB"
|
||||
maxAmount={1}
|
||||
fileList={this.state.model.goodDetail ? [{'src':this.state.model.goodDetail}] : null}
|
||||
onUpload={this.onUpload}
|
||||
onChange={(e)=>{this.onUploadChange2(e)}}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
||||
<div className="mobile">
|
||||
<div className="mobile_top">
|
||||
{
|
||||
this.state.productpic ?
|
||||
( <Swiper
|
||||
className="swiper-mobile-simple"
|
||||
autoplay
|
||||
autoplayInterval={3000}
|
||||
dotsColor="#31A896"
|
||||
dotsSize="small"
|
||||
>
|
||||
{
|
||||
this.state.productpic.map((item, index) => {
|
||||
return <img src={item.url} />;
|
||||
})
|
||||
}
|
||||
</Swiper> ) : null
|
||||
|
||||
}
|
||||
</div>
|
||||
<div className="mobile_center">
|
||||
</div>
|
||||
<div className="mobile_bottom">
|
||||
{
|
||||
this.state.model.goodDetail ? (<img src={this.state.model.goodDetail} />) : null
|
||||
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,4 +6,44 @@
|
|||
}
|
||||
.zent-image-upload-item-delete{
|
||||
display: inline-block !important;
|
||||
}
|
||||
.mobile{
|
||||
width: 375px;
|
||||
height: 667px;
|
||||
max-height: 667px;
|
||||
background-color: #fafafa;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
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-mobile-simple{
|
||||
height: 100% !important;
|
||||
}
|
||||
Loading…
Reference in New Issue