商品编辑
This commit is contained in:
parent
28b25dd3eb
commit
54b59c0b73
|
@ -65,8 +65,6 @@ import classNames from 'classnames'
|
||||||
componentWillMount(){
|
componentWillMount(){
|
||||||
let val=this.props.value?this.props.value:'';
|
let val=this.props.value?this.props.value:'';
|
||||||
|
|
||||||
console.log("当前的值",val)
|
|
||||||
|
|
||||||
if(val!=''){
|
if(val!=''){
|
||||||
this.setState({iptVal:val});
|
this.setState({iptVal:val});
|
||||||
this.setState({'iptVallength':String(val).length});
|
this.setState({'iptVallength':String(val).length});
|
||||||
|
|
|
@ -986,7 +986,7 @@ export default class exchangedit extends React.Component{
|
||||||
</div>
|
</div>
|
||||||
<Drawer
|
<Drawer
|
||||||
className="draw"
|
className="draw"
|
||||||
width={"60%"}
|
width={"80%"}
|
||||||
title={this.state.product_title}
|
title={this.state.product_title}
|
||||||
footer={
|
footer={
|
||||||
<div style={{ textAlign: 'center' }}>
|
<div style={{ textAlign: 'center' }}>
|
||||||
|
|
|
@ -4,7 +4,7 @@ import "./add.less"
|
||||||
import Ipt from "../../../components/input/main"
|
import Ipt from "../../../components/input/main"
|
||||||
import Form from "../../../components/form/main"
|
import Form from "../../../components/form/main"
|
||||||
import FormItem from "../../../components/form-item/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 Bus from "../../../assets/eventBus.js"
|
||||||
import {getProductInfoSelect,handelResponse,uploadImg} from "../../../assets/api.js"
|
import {getProductInfoSelect,handelResponse,uploadImg} from "../../../assets/api.js"
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
|
@ -26,13 +26,14 @@ export default class adduserinfo extends React.Component{
|
||||||
describe_url:[],
|
describe_url:[],
|
||||||
stock:"",
|
stock:"",
|
||||||
usage:"",
|
usage:"",
|
||||||
|
goodDetail:"",
|
||||||
map_product_name:""
|
map_product_name:""
|
||||||
},
|
},
|
||||||
cur_product:null,
|
cur_product:null,
|
||||||
productOption:[],
|
productOption:[],
|
||||||
products:[],
|
products:[],
|
||||||
product_pic:[],
|
productpic:[],
|
||||||
product_url:[]
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -54,12 +55,24 @@ export default class adduserinfo extends React.Component{
|
||||||
model.show_url = model_temp.show_url
|
model.show_url = model_temp.show_url
|
||||||
|
|
||||||
let defaultPic = []
|
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++)
|
for(let i = 0;i < model_temp.describe_url.length;i++)
|
||||||
{
|
{
|
||||||
let obj = {}
|
let obj = {}
|
||||||
|
let nameArr = model_temp.describe_url[i].split('/');
|
||||||
|
obj.name = nameArr[5]
|
||||||
obj.src = model_temp.describe_url[i];
|
obj.src = model_temp.describe_url[i];
|
||||||
defaultPic.push(obj)
|
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.describe_url = defaultPic
|
||||||
model.stock = model_temp.stock
|
model.stock = model_temp.stock
|
||||||
model.usage = model_temp.usage
|
model.usage = model_temp.usage
|
||||||
|
@ -82,7 +95,7 @@ export default class adduserinfo extends React.Component{
|
||||||
{
|
{
|
||||||
product_data = JSON.parse( sessionStorage.getItem("productData")) ;
|
product_data = JSON.parse( sessionStorage.getItem("productData")) ;
|
||||||
}
|
}
|
||||||
let checked_product= product_data ? product_data : [];
|
let checked_product= product_data ? product_data : [];
|
||||||
|
|
||||||
let arr = [];
|
let arr = [];
|
||||||
this.setState({products:productList})
|
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})
|
let cur_product = arr.find((item)=>{return item.key ==this.state.model.product_id})
|
||||||
this.setState({cur_product:cur_product})
|
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"));
|
temp = JSON.parse(sessionStorage.getItem("productData"));
|
||||||
|
|
||||||
console.log("临时变量",temp)
|
|
||||||
|
|
||||||
let index = temp.findIndex((item)=>{return item.product_id ==this.props.data.product_id})
|
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].product_name = this.state.model.product_name
|
||||||
temp[index].account_type = this.state.model.account_type
|
temp[index].account_type = this.state.model.account_type
|
||||||
temp[index].product_id = this.state.model.product_id
|
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].usage = this.state.model.usage
|
||||||
temp[index].show_url = this.state.model.show_url
|
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
|
return o.url
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
console.log("商品集合",urls)
|
console.log("提交数据url",urls)
|
||||||
|
|
||||||
temp[index].describe_url = urls
|
temp[index].describe_url = urls
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
temp[index].map_product_name = this.state.model.map_product_name
|
temp[index].map_product_name = this.state.model.map_product_name
|
||||||
temp[index].account_type = this.state.model.account_type
|
temp[index].account_type = this.state.model.account_type
|
||||||
|
|
||||||
|
console.log("临时存储",temp)
|
||||||
|
|
||||||
sessionStorage.setItem('productData', JSON.stringify(temp));
|
sessionStorage.setItem('productData', JSON.stringify(temp));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -205,38 +218,7 @@ export default class adduserinfo extends React.Component{
|
||||||
onUpload = (file, report) => {
|
onUpload = (file, report) => {
|
||||||
return new Promise((resolve, reject) => {
|
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){
|
onUploadChange(files){
|
||||||
|
@ -269,84 +251,78 @@ export default class adduserinfo extends React.Component{
|
||||||
this.setState({model:model})
|
this.setState({model:model})
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
onUploadChange1(files){
|
onUploadChange1(files,e){
|
||||||
console.log("文件",files)
|
|
||||||
|
|
||||||
console.log(this.state.product_pic)
|
|
||||||
|
|
||||||
let arr =_.map(files,(o)=>{
|
let arr =_.map(files,(o)=>{
|
||||||
return o.name
|
return o.name
|
||||||
})
|
})
|
||||||
|
// console.log("保留的数据",arr)
|
||||||
console.log("文件数据",arr)
|
// console.log( this.state.productpic)
|
||||||
|
if(arr.length > this.state.productpic.length)
|
||||||
if(arr.length < this.state.product_pic.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 = [];
|
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)
|
if(arr.indexOf(temp.name) > -1)
|
||||||
{
|
{
|
||||||
temp_arr.push(temp)
|
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) => {
|
onUploadError = (type, data) => {
|
||||||
if (type === 'overMaxAmount') {
|
if (type === 'overMaxAmount') {
|
||||||
|
@ -355,7 +331,30 @@ export default class adduserinfo extends React.Component{
|
||||||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
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(){
|
render(){
|
||||||
|
|
||||||
|
@ -479,8 +478,50 @@ export default class adduserinfo extends React.Component{
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</FormItem>
|
</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>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -6,4 +6,44 @@
|
||||||
}
|
}
|
||||||
.zent-image-upload-item-delete{
|
.zent-image-upload-item-delete{
|
||||||
display: inline-block !important;
|
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