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-18 18:31:10 +08:00
parent 28b25dd3eb
commit 54b59c0b73
4 changed files with 194 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/input/main.js
View File

@ -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});

2
src/pages/exchangecode/edit/edit.js
View File

@ -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' }}>

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

@ -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>
)

40
src/pages/exchangecode/product/add.less
View File

@ -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;
}