update

src/pages/exchangecode/add/add.js

@@ -1287,7 +1287,7 @@ export default class acclist extends React.Component {
               style={{ width: "95%", margin: "10px auto" }}
               title={"基本信息"}
             >
-              <p className="addcode">
+              <div className="addcode">
                 <Form
                   model={this.state.codeInfo}
                   rules={codeInfo}
@@ -1365,13 +1365,13 @@ export default class acclist extends React.Component {
                     />
                   </FormItem>
                 </Form>
-              </p>
+              </div>
             </Card>
             <Card
               style={{ width: "95%", margin: "10px auto" }}
               title={"基本规则"}
             >
-              <p>
+              <div>
                 <Form
                   model={this.state.codeInfo}
                   rules={rulesInfo}
@@ -1500,7 +1500,7 @@ export default class acclist extends React.Component {
                     />
                   </FormItem>
                 </Form>
-              </p>
+              </div>
             </Card>
           </div>
         </Drawer>

src/pages/exchangecode/product/add copy.js

@@ -0,0 +1,619 @@
+import ReactDOM from "react-dom";
+import React from "react";
+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 from "swiper/dist/js/swiper.js";
+import "swiper/dist/css/swiper.min.css";
+import Bus from "../../../assets/eventBus.js";
+import {
+  getProductInfoSelect,
+  handelResponse,
+  uploadImg,
+} from "../../../assets/api.js";
+import _ from "lodash";
+
+var mySwiper = null;
+var timer = null;
+export default class adduserinfo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      model: {
+        //数据模型不可少
+        product_id: "",
+        product_type: "1",
+        contract_price: "",
+        official_price: "",
+        cost_price: "",
+        quantity: "",
+        product_name: "",
+        show_url: "",
+        describe_url: [],
+        detail_url: "",
+        stock: "",
+        usage: "",
+        detail_url: "",
+        map_product_name: "",
+      },
+      cur_product: null,
+      productOption: [],
+      products: [],
+      productpic: [],
+    };
+  }
+  componentDidMount() {
+    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",
+    });
+  }
+  componentWillReceiveProps() {
+    mySwiper.update();
+  }
+  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.account_type = model_temp.account_type;
+      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 != "" &&
+          model_temp.describe_url != undefined
+        ) {
+          pics = model_temp.describe_url.split(",");
+        } else {
+          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;
+      model.stock = model_temp.stock;
+      model.usage = model_temp.usage;
+      model.map_product_name = model_temp.map_product_name;
+      this.setState({ model: model });
+    }
+    this.getProductInfo();
+  }
+
+  //获取直连天下商品映射信息
+  getProductInfo() {
+    let productList = sessionStorage.getItem("productsList");
+
+    productList = JSON.parse(productList);
+    let product_data = [];
+    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;
+    });
+    console.log("arr ==>", arr);
+
+    this.setState({ productOption: arr });
+
+    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()) {
+      if (this.props.data) {
+        let temp = [];
+        if (sessionStorage.getItem("productData")) {
+          temp = JSON.parse(sessionStorage.getItem("productData"));
+
+          let index = temp.findIndex((item) => {
+            return item.product_id == this.props.data.product_id;
+          });
+
+          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;
+          let urls = _.map(this.state.productpic, (o) => {
+            return o.url;
+          });
+          if (urls.length <= 0) {
+            Notify.error(`商品图至少请上传一张`);
+            return;
+          }
+
+          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;
+
+          sessionStorage.setItem("productData", JSON.stringify(temp));
+        }
+      } else {
+        let model = this.state.model;
+
+        let urls = _.map(this.state.productpic, (o) => {
+          return o.url;
+        });
+
+        if (urls.length <= 0) {
+          Notify.error(`商品图至少请上传一张`);
+          return;
+        }
+
+        model.describe_url = urls;
+
+        this.setState({ model: model });
+
+        if (this.state.model.show_url == "") {
+          Notify.error(`请上传商品Logo`);
+          return;
+        }
+        let temp = [];
+        if (sessionStorage.getItem("productData")) {
+          temp = JSON.parse(sessionStorage.getItem("productData"));
+        }
+        let data = temp ? temp : [];
+        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;
+    });
+    let picItem = window.goods.find((item) => {
+      return item.id == cur_product.product_category_id;
+    });
+    let quantity = this.state.model.quantity;
+    let model2 = {
+      product_id: cur_product.id,
+      product_type: cur_product.type,
+      contract_price: this.state.model.contract_price,
+      official_price: cur_product.official_price,
+      cost_price: cur_product.cost_price,
+      quantity: quantity,
+      stock: quantity,
+      usage: 0,
+      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,
+    };
+    this.setState({ model: model2 });
+  }
+  onTypeChange(e) {
+    let model2 = this.state.model;
+    model2.type = e.target.value;
+    this.setState({ model: model2 });
+  }
+
+  onUpload = (file, report) => {
+    return new Promise((resolve, reject) => {});
+  };
+  onUploadChange(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.show_url = path;
+
+            this.setState({ model: model });
+          },
+          (err) => {}
+        );
+      });
+    } else {
+      let model = this.state.model;
+      model.show_url = "";
+      this.setState({ model: model });
+    }
+  }
+  onUploadChange1(files, e) {
+    let arr = _.map(files, (o) => {
+      return o.name;
+    });
+    if (mySwiper !== 0) {
+      mySwiper.destroy();
+    }
+    mySwiper = new Swiper(".swiper-container", {
+      observer: true, //修改swiper自己或子元素时，自动初始化swiper
+      observeParents: true, //修改swiper的父元素时，自动初始化swiper
+      pagination: ".swiper-pagination",
+      paginationClickable: true,
+      autoplay: 3000,
+    });
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      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;
+        for (let i = 0; i < temp_arr.length; i++) {
+          let temp = temp_arr[i];
+          if (arr.indexOf(temp.name) > -1) {
+            temp_arr2.push(temp);
+          }
+        }
+        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 });
+      }
+    }, 500);
+  }
+  onUploadError = (type, data) => {
+    if (type === "overMaxAmount") {
+      Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
+    } else if (type === "overMaxSize") {
+      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.detail_url = path;
+
+            this.setState({ model: model });
+          },
+          (err) => {}
+        );
+      });
+    } else {
+      let model = this.state.model;
+      model.detail_url = "";
+      this.setState({ model: model });
+    }
+  }
+
+  render() {
+    //校验规则
+    const rules = {
+      product: [{ type: "required", message: "请选择映射商品" }],
+      quantity: [
+        { type: "required", message: "请输入商品库存" },
+        {
+          type: "regExp",
+          message: "请输入小于100万的整数",
+          reg: "^(?!0)(?:[0-9]{1,6}|1000000)$",
+        },
+      ],
+      contract_price: [
+        { type: "required", message: "请输入合同价" },
+        {
+          type: "regExp",
+          message: "最多保留4位小数",
+          reg: "^[0-9]+(.[0-9]{1,4})?$",
+        },
+      ],
+      product_name: [{ type: "required", message: "请输入商品名称" }],
+    };
+    return (
+      <div id="addproduct">
+        <Form model={this.state.model} rules={rules} ref="form1">
+          <FormItem labelname="映射商品" prop="product" id="product">
+            <Select
+              options={this.state.productOption}
+              width={500}
+              placeholder="请选择商品"
+              value={this.state.cur_product}
+              onChange={(e) => {
+                this.onProductChange(e);
+                Bus.emit("change", "product", e);
+              }}
+            />
+          </FormItem>
+          <FormItem labelname="商品类型" prop="type" id="type">
+            <RadioGroup
+              onChange={(e) => {
+                this.onTypeChange(e);
+              }}
+              value={this.state.model.product_type}
+            >
+              <RadioButton value={1}>直充</RadioButton>
+              <RadioButton value={2}>卡密</RadioButton>
+            </RadioGroup>
+          </FormItem>
+          <FormItem labelname="商品成本" prop="cost_price" id="cost_price">
+            <div className="line-value">{this.state.model.cost_price}</div>
+          </FormItem>
+          <FormItem labelname="库存总数量" prop="quantity" id="quantity">
+            <Ipt
+              onChange={(e) => {
+                let model2 = this.state.model;
+                model2.quantity = e;
+                model2.stock = e;
+                this.setState({ model: model2 });
+              }}
+              onClearItem={(e) => {
+                let model2 = this.state.model;
+                model2.quantity = "";
+                model2.stock = 0;
+                this.setState({ model: model2 });
+              }}
+              value={this.state.model.quantity}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={7}
+              height={"36px"}
+              width={"520px"}
+              alignment={"left"}
+            />
+          </FormItem>
+
+          <FormItem
+            id="contract_price"
+            labelname="合同价"
+            prop="contract_price"
+          >
+            <Ipt
+              onChange={(e) => {
+                let model2 = this.state.model;
+                model2.contract_price = e;
+                this.setState({ model: model2 });
+              }}
+              onClearItem={(e) => {
+                let model2 = this.state.model;
+                model2.contract_price = "";
+                this.setState({ model: model2 });
+              }}
+              value={this.state.model.contract_price}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={16}
+              height={"36px"}
+              width={"520px"}
+              alignment={"left"}
+            />
+          </FormItem>
+          <FormItem id="product_name" labelname="商品名称" prop="product_name">
+            <Ipt
+              onChange={(e) => {
+                let model2 = this.state.model;
+                model2.product_name = e;
+                this.setState({ model: model2 });
+              }}
+              onClearItem={(e) => {
+                let model2 = this.state.model;
+                model2.product_name = "";
+                this.setState({ model: model2 });
+              }}
+              value={this.state.model.product_name}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={16}
+              height={"36px"}
+              width={"520px"}
+              alignment={"left"}
+            />
+          </FormItem>
+
+          <FormItem
+            id="official_price"
+            labelname="商品官方价"
+            prop="official_price"
+          >
+            <div className="line-value">{this.state.model.official_price}</div>
+          </FormItem>
+
+          <FormItem id="show_url" prop="show_url" labelname="商品Logo">
+            <ImageUpload
+              className="zent-image-upload-demo"
+              maxSize={2 * 1024 * 1024}
+              tips="图片不超过 2M"
+              maxAmount={1}
+              onError={this.onUploadError}
+              onChange={(e) => {
+                this.onUploadChange(e);
+              }}
+              fileList={
+                this.state.model.show_url
+                  ? [{ src: this.state.model.show_url }]
+                  : null
+              }
+              value={this.state.model.show_url}
+            />
+          </FormItem>
+          <FormItem prop="describe_url" labelname="商品图" id="describe_url">
+            <ImageUpload
+              className="good-image-upload-demo"
+              maxSize={2 * 1024 * 1024}
+              tips="图片不超过 2M"
+              maxAmount={9}
+              sortable
+              onError={this.onUploadError}
+              defaultFileList={this.state.model.describe_url}
+              multiple
+              onUpload={this.onUpload}
+              onChange={(e) => {
+                this.onUploadChange1(e);
+              }}
+            />
+          </FormItem>
+          <FormItem
+            prop="detail_url"
+            labelname="商品详情"
+            id="detail_url"
+            required={false}
+          >
+            <ImageUpload
+              className="zent-image-upload-demo"
+              maxSize={2 * 1024 * 1024}
+              tips="图片不超过 2M"
+              maxAmount={1}
+              onError={this.onUploadError}
+              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>
+    );
+  }
+}

src/pages/exchangecode/product/add.js

@@ -51,6 +51,7 @@ export default class adduserinfo extends React.Component {
       productOption: [],
       products: [],
       productpic: [],
+      productsList: [],
     };
   }
   componentDidMount() {
@@ -65,9 +66,11 @@ export default class adduserinfo extends React.Component {
       pagination: ".swiper-pagination",
     });
   }
+
   componentWillReceiveProps() {
     mySwiper.update();
   }
+
   componentWillMount(e) {
     //获取商品信息
     if (this.props.data) {
@@ -127,9 +130,10 @@ export default class adduserinfo extends React.Component {
 
   //获取直连天下商品映射信息
   getProductInfo() {
+    // let productList = this.state.productsList;
     let productList = sessionStorage.getItem("productsList");
-
     productList = JSON.parse(productList);
+
     let product_data = [];
     if (sessionStorage.getItem("productData")) {
       product_data = JSON.parse(sessionStorage.getItem("productData"));
@@ -138,7 +142,6 @@ export default class adduserinfo extends React.Component {
 
     let arr = [];
     this.setState({ products: productList });
-
     _.map(productList, (res) => {
       let obj = {};
       obj.key = res.id;
@@ -149,7 +152,6 @@ export default class adduserinfo extends React.Component {
         }) > -1;
       if (obj.disabled) {
       }
-
       arr.push(obj);
       return obj;
     });