From 54b59c0b737547bac753e882de267e3a929ed146 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A7=9C=E6=A3=9A?= <849005670@qq.com> Date: Tue, 18 Jan 2022 18:31:10 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/input/main.js | 2 - src/pages/exchangecode/edit/edit.js | 2 +- src/pages/exchangecode/product/add.js | 265 ++++++++++++++---------- src/pages/exchangecode/product/add.less | 40 ++++ 4 files changed, 194 insertions(+), 115 deletions(-) diff --git a/src/components/input/main.js b/src/components/input/main.js index 4e93ee0f..0c63917f 100644 --- a/src/components/input/main.js +++ b/src/components/input/main.js @@ -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}); diff --git a/src/pages/exchangecode/edit/edit.js b/src/pages/exchangecode/edit/edit.js index e68aab68..37b973f4 100644 --- a/src/pages/exchangecode/edit/edit.js +++ b/src/pages/exchangecode/edit/edit.js @@ -986,7 +986,7 @@ export default class exchangedit extends React.Component{ diff --git a/src/pages/exchangecode/product/add.js b/src/pages/exchangecode/product/add.js index 412a7163..36a60b21 100644 --- a/src/pages/exchangecode/product/add.js +++ b/src/pages/exchangecode/product/add.js @@ -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{ /> - + + {this.onUploadChange2(e)}} + /> + + +
+
+ { + this.state.productpic ? + ( + { + this.state.productpic.map((item, index) => { + return ; + }) + } + ) : null + + } +
+
+
+
+ { + this.state.model.goodDetail ? () : null + + } +
+ +
+ ) diff --git a/src/pages/exchangecode/product/add.less b/src/pages/exchangecode/product/add.less index b95b1bdf..8f36a0b8 100644 --- a/src/pages/exchangecode/product/add.less +++ b/src/pages/exchangecode/product/add.less @@ -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; } \ No newline at end of file