update

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

@@ -0,0 +1,661 @@
+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: '',
+        weight: '0',
+        show_url: '',
+        describe_url: [],
+        detail_url: '',
+        stock: '',
+        usage: '',
+        detail_url: '',
+        map_product_name: ''
+      },
+      cur_product: null,
+      productOption: [],
+      products: [],
+      productpic: [],
+      productsList: [],
+      isSelectGoods: false
+    }
+  }
+  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.weight = model_temp.weight
+      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 = ''
+      console.log("model_temp.describe_url =>", model_temp.describe_url)
+      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]
+        obj.url = pics[i]
+        defaultPic.push(obj)
+        temp_productpic.push(obj)
+      }
+      console.log("temp_productpic ==>", temp_productpic);
+      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
+      console.log('model => 编辑', model)
+      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 : []
+    console.log('product_data ==>1', product_data)
+
+    let arr = []
+    this.setState({ products: productList })
+
+    _.map(productList, (res) => {
+      let index = checked_product.findIndex((item) => {
+        return item.product_id == res.id
+      })
+      let obj = {}
+      obj.key = res.id
+      obj.text = res.title
+      obj.disabled = index > -1 ? true : false
+      if (obj.disabled) {
+      }
+      obj.in = index > -1 ? checked_product[index].in : false
+      arr.push(obj)
+      return obj
+    })
+
+    this.setState({ productOption: arr })
+    console.log('this.state.model.product_id =>', this.state.model.product_id)
+    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 })
+
+      console.log('cur_product ==>2', cur_product)
+      console.log('arr ==>', arr)
+
+      if (cur_product && cur_product.in) {
+        this.setState({ isSelectGoods: true })
+      }
+    }
+  }
+
+  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].weight = this.state.model.weight
+          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.src
+          })
+          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.src
+        })
+
+        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
+    })
+    const obj1 = []
+    if(picItem.describe_url){
+      let id_name = `${new Date().getTime()}`;
+      picItem?.describe_url.map((item) => {
+        obj1.push({ src: item, url: item, id: `${id_name}`, type:"add", name:`${picItem.name}`})
+      })
+    }
+    console.log(" picItem =>", picItem);
+
+    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,
+      weight: this.state.model.weight,
+      product_name: cur_product.title,
+      show_url: picItem ? picItem.pic : '',
+      describe_url: obj1,
+      detail_url: '',
+      map_product_name: cur_product.title,
+      account_type: cur_product.account_type
+    }
+    console.log('model2 =>111', model2)
+    this.setState({ model: model2, productpic: obj1 })
+  }
+  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(fileLists, detail) {
+    console.log('files ==>', fileLists)
+    console.log("detail =>", detail)
+    console.log("productpic ==>", this.state.productpic)
+
+    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(!detail){
+        return
+      }
+      // 第一步：判断是否是新增还是编辑
+      if(detail.type === "add"){
+        let formdata = new FormData()
+        formdata.append('file', detail.item.file)
+        formdata.append('path', 'common_image')
+        uploadImg(formdata).then((res) => {
+          handelResponse(
+            res,
+            (req, msg) => {
+              let file_s = fileLists.slice(0);
+              file_s[file_s.length -1].src = req.path;
+              console.log("file_s =>",file_s)
+              const model = this.state.model
+              model.describe_url = file_s;
+
+              let arr = this.state.productpic
+              arr = file_s;
+
+              this.setState({ productpic: arr, model })
+            },
+            (err) => {}
+          )
+        })
+      }else{
+        // 删除
+        let new_files_list =  fileLists.filter((item) => item.id !== detail.item.id);
+        new_files_list = new_files_list.map(item =>{
+          return {
+            ...item,
+            url:item.src
+          }
+        })
+
+        const model = this.state.model
+        model.describe_url = new_files_list;
+        this.setState({ productpic:new_files_list, model })
+
+        console.log("new_files_list =>", new_files_list);
+      }
+
+    }, 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: '请输入商品名称' }],
+      /*  权重 */
+      weight: [
+        { type: 'required', message: '请输入权重' },
+        {
+          type: 'regExp',
+          message: '请输入0~100权重数字',
+          reg: '^([0-9]{0,2}|100)$'
+        }
+      ]
+    }
+    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}
+              disabled={this.state.isSelectGoods}
+              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='weight' id='weight'>
+            <Ipt
+              onChange={(e) => {
+                let model2 = this.state.model
+                model2.weight = e
+
+                this.setState({ model: model2 })
+              }}
+              onClearItem={(e) => {
+                let model2 = this.state.model
+                model2.weight = ''
+                this.setState({ model: model2 })
+              }}
+              value={this.state.model.weight}
+              placeholder={'请输入'}
+              labelWidth={'0px'}
+              maxLength={3}
+              height={'36px'}
+              countShow={false}
+              width={'520px'}
+              alignment={'left'}
+            />
+          </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}
+              fileList={this.state.model.describe_url}
+              multiple
+              onUpload={this.onUpload}
+              onChange={this.onUploadChange1.bind(this)}
+            />
+          </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' key={index}>
+                        <img src={item.src} />
+                      </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>
+    )
+  }
+}