mp_seller/pages/goods/edit.js

// pages/goods/edit.js
import * as API_Category from '../../api/category.js'
import * as API_Goods from '../../api/goods.js'
import * as Reg from '../../utils/RegExp.js'
import * as API_Passport from '../../api/passport.js'
import {
  guid
} from '../../utils/util.js'
import {
  $wuxToptips,
  $wuxToast,
  $wuxLoading,
  $wuxDialog,
  $wuxForm
} from '../../wux/index.js'
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    goods_id: null,
    uploadUrl: app.globalData.api_domain.api_base + 'uploaders?scene=goods',
    options2: [],
    categoryValue: [],
    defaultFieldNames: {
      label: 'name',
      value: 'category_id',
      children: 'children'
    },
    categoryDisplay: '选择商品分类',
    categoryChangeDone:false,
    /** test */
    goodsNameError: false,
    fileList: [],
    pics:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let shop = app.globalData.sellerShop
    if(shop.shop_type==='2'){
      this.getCategorys(0)
    }else{
      this.getCategory(-1)
    }

    var that = this
    /** 获取商品id参数 */

    if (options.id) {
      wx.setNavigationBarTitle({
        title: '产品编辑',
      })
      var goods_id = decodeURIComponent(options.id)
      this.setData({
        goods_id: goods_id
      })
      this.GET_GoodData()
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    // console.log("onshow",app.globalData.goodsImg);
    //清理 fileList
    if (app.globalData.goodsImg){
      let fileList = this.data.fileList
      let goodsImg = app.globalData.goodsImg;
      console.log(goodsImg);
      if (goodsImg.idx == -1){
        fileList.push({
          url: goodsImg.src,
          uid: guid(),
          status: 'done'
        })
      } else {
        fileList[goodsImg.idx] = {
          url: goodsImg.src,
          uid: guid(),
          status: 'done'
        }
      }
      this.setData({
        fileList: fileList
      })
      app.globalData.goodsImg = "";
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  /**
   * 打开分类选择器
   */
  showCategoryPicker() {
    if (!this.data.goods_id) {
      this.setData({
        categoryShow: true
      })
    }

  },
  /**
   *  关闭分类选择器
   */
  closeCategoryPicker() {
    this.setData({
      categoryShow: false
    })
  },

  categoryChange(e) {
    this.setData({
      categoryChangeDone: e.detail.done,
      categoryValue: e.detail.value,
      categoryDisplay: e.detail.done ? e.detail.options.map((n) => n.name).join('/') : '选择商品分类'
    })
  },
  getCategorys(id) {
    API_Category.getCategory(id).then(res => {
      this.setData({
        options2: res
      })

    })
  },
  /** 表单输入 */
  inputChange(e) {
    let dataKey = e.currentTarget.dataset.name
    this.setData({
      [dataKey]: e.detail.value
    })
  },

  onError(e) {
    const that = this
    let dataKey = e.currentTarget.dataset.name
    let {
      label,
      rules
    } = e.currentTarget.dataset
    const {
      value
    } = e.detail
    if (!value && rules.indexOf('required') > -1) {
      label = label + '必填'
    } else {
      label = label + '格式错误'
    }
    $wuxToptips().show({
      icon: 'cancel',
      hidden: false,
      text: label,
      duration: 3000,
      success() {
        that.setData({
          [dataKey + '_focus']: true
        })
      },
    })
  },

  onBlur(e) {
    const that = this
    let dataKey = e.currentTarget.dataset.name
    const {
      rules
    } = e.currentTarget.dataset
    const {
      value
    } = e.detail
    if (rules) {
      that.setData({
        [dataKey + '_error']: false
      })
      rules.split(',').forEach(n => {
        if (n === 'required' && !value) {
          that.setData({
            [dataKey + '_error']: true
          })
        }
        if (n !== 'required' && !Reg[n].test(value)) {
          that.setData({
            [dataKey + '_error']: true
          })
        }

      })
    }

  },

  onFileUploadSuccess(e) {
    const {
      file,
      fileList
    } = e.detail
    //转换image对象
    fileList.forEach(item => {
      item.url = JSON.parse(item.res.data).url
    })
    this.setData({
      fileList: fileList
    })
  },
  onFileChange(e) {
    const {
      file
    } = e.detail
    if (file.status === 'uploading') {
      this.setData({
        progress: 0,
      })
      wx.showLoading()
    } else if (file.status === 'done') {
      this.setData({
        imageUrl: file.url,
      })
    }
  },
  onFileComplete(e) {
    const {
      data,
      errMsg
    } = e.detail
    //转换image对象
    let fileList = this.data.fileList
    if (errMsg === 'uploadFile:ok') {
      fileList.push({
        url: JSON.parse(data).url,
        uid: guid(),
        status: 'done'
      })
      this.setData({
        fileList: fileList
      })
    }


    wx.hideLoading()
  },
  navToResize(e){
    console.log(e);
    const that = this
    if (e.currentTarget.dataset.action === "edit"){
      let index = e.currentTarget.dataset.index;
      let fileList = this.data.fileList;
      let imgFile = fileList[index];
      console.log('imgFile.uid===', imgFile.uid)
      wx.showModal({
        title: '操作提示',
        content: '请选择您的操作？',
        confirmText: '修改图片',
        confirmColor: '#576B95',
        cancelText: '删除图片',
        cancelColor: '#d02a2a',
        success: function (res) {
          if (res.confirm) {
            console.log('imgFile===', imgFile)
            wx.navigateTo({
              url: '/pages/image/resize?imgSrc=' + imgFile.url + '&idx=' + index,
            })
          } else {
            that.setData({
              fileList: fileList.filter((n) => n.uid !== imgFile.uid),
            })
          }
        }
      })

    } else {
      wx.navigateTo({
        url: '/pages/image/resize',
      })
    }
  },
  onFileRemove(e) {
    const {
      file,
      fileList
    } = e.detail
    this.setData({
      fileList: fileList.filter((n) => n.uid !== file.uid),
    })
  },
  /** 输入框变化 */
  onChange(e) {
    const {
      detail
    } = e.detail
    let dataKey = e.currentTarget.dataset.name
    this.setData({
      [dataKey]: e.detail
    })
  },
  /** 上架产品 */
  aboveProduct() {
    /** 产品分类校验 */
    if (!this.data.categoryChangeDone||this.data.categoryValue.length === 0) {
      $wuxToptips().show({
        icon: 'cancel',
        hidden: false,
        text: "请选择商品分类",
        duration: 2000
      })
      return false
    }
    /** 输入参数校验 */
    let param = {
      goodsName: null,
      sn: null,
      price: null,
      stock: null
    }
    let ps = {
      ...param,
      ...this.data
    }
    Object.keys(param).forEach(
      n => {
        if (!ps[n]) {
          this.setData({
            [n + '_error']: true
          })
        }
      }
    )
    let flag = true
    Object.keys(this.data).forEach(n => {
      if (n.indexOf('_error') > -1 && this.data[n]) {
        flag = false
        return false
      }
    })

    /** 图片校验 */
    let gallery_list = []
    if (this.data.fileList.length === 0) {
      $wuxToptips().show({
        icon: 'cancel',
        hidden: false,
        text: "请上传商品图片",
        duration: 2000
      })
      flag = false
    } else {
      this.data.fileList.forEach((item, index) => {
        let image = {
          original: item.url,
          img_id: (Reg.integer.test(item.uid) ? item.uid : -1),
          sort: index
        }
        gallery_list.push(image)
      })
    }

    if (!flag) {
      return false
    }


    /**  产品上架参数  */
    const goodsParam = {
      category_id: this.data.categoryValue[this.data.categoryValue.length - 1],
      exchange: {
        category_id: "",
        enable_exchange: 0,
        exchange_money: 0,
        exchange_point: 0
      },
      goods_gallery_list: [...gallery_list],
      goods_id: this.data.goods_id,
      goods_name: this.data.goodsName,
      goods_params_list: [],
      goods_transfee_charge: 1,
      has_changed: 0,
      intro: this.imgToHtml(this.data.pics),
      market_enable: 1,
      meta_description: '',
      meta_keywords: '',
      mktprice: this.data.price,
      price: this.data.price,
      cost: this.data.price,
      page_title: '',
      quantity: this.data.stock,
      shop_cat_id: 0,
      sku_list: [],
      sn: this.data.sn,
      template_id: 0,
      weight: 0
    }
    $wuxLoading().show({
      text: '正在保存..',
      mask: true
    })
    if (this.data.goods_id) {
      API_Goods.editGoods(this.data.goods_id, goodsParam).then(res => {
        if (res.goods_id) {
          $wuxLoading().hide()
          $wuxToptips().success({
            hidden: false,
            text: "保存成功",
            duration: 3000,
            success: () => {
              wx.navigateBack({
                detal: 1
              })
            }
          })
        } else {
          $wuxLoading().hide()
          $wuxToptips().error({
            icon: 'cancel',
            hidden: false,
            text: res.message,
            duration: 3000
          })
        }

      })
    } else {
      API_Goods.aboveGoods(goodsParam).then(
        res => {
          if (res.goods_id) {
            $wuxLoading().hide()
            $wuxToptips().success({
              hidden: false,
              text: "上架成功",
              duration: 2000,
              success: () => {
                wx.navigateBack({
                  detal: 1
                })
              }
            })
          } else {
            $wuxLoading().hide()
            $wuxToptips().error({
              icon: 'cancel',
              hidden: false,
              text: res.message,
              duration: 2000
            })
          }
        }
      ).catch(err=>{
        $wuxLoading().hide()
        $wuxToptips().error({
          icon: 'cancel',
          hidden: false,
          text: res.message,
          duration: 2000
        })
      })
    }

  },

  /** 查询单个商品信息*/
  GET_GoodData() {
    const that = this
    API_Goods.getGoodData(that.data.goods_id, {}).then((response) => {

      /** 商品相册校验属性 */
      let images = []
      response.goods_gallery_list.forEach(key => {
        images.push({
          uid: key.img_id,
          status: 'done',
          url: key.original
        })
      })
      console.log('srcs',this.getImgSrc(response.intro))
      that.setData({
        pics:that.getImgSrc(response.intro),
        goodsName: response.goods_name,
        price: response.mktprice,
        stock: response.quantity,
        sn: response.sn,
        fileList: images,
        categoryChangeDone:true,
        categoryDisplay: response.category_name.replace(/>/g, '/').replace(/\s+/g, ''),
        categoryValue: [0, response.category_id]
      })
    })
  },
  /** 下架产品 */
  offProduct() {
    const that = this
    $wuxDialog().confirm({
      resetOnClose: true,
      closable: true,
      title: '操作提示',
      content: '你确定要下架商品?',
      onConfirm(e) {
        API_Goods.underGoods(that.data.goods_id, {}).then(res => {
          if (res === '') {
            $wuxToptips().success({
              hidden: false,
              text: '产品已下架',
              duration: 2000,
              success: () => {
                wx.navigateBack({
                  detal: 1
                })
              }
            })
          } else {
            $wuxToptips().error({
              icon: 'cancel',
              hidden: false,
              text: res.message,
              duration: 2000
            })
          }
        }).catch(error => {
          $wuxToptips().error({
            icon: 'cancel',
            hidden: false,
            text: error.message,
            duration: 2000
          })
        })
      },
      onCancel(e) {

      },
    })
  },
  formSubmit(e) {
    console.log(e)
    API_Passport.saveFormId({ form_id: e.detail.formId }).then(res => {

    })
  },
   sendImage() {
    let _this = this
     _this.uploadPic().then(res=>{
    let resData = JSON.parse(res.data)
    let imgs=_this.data.pics
    imgs.push(resData.url)
    _this.setData({
      pics:imgs
    })
    console.log(_this.data.pics)
   }).catch(err=>{
     console.log('er',err)
    $wuxToptips().error({
      hidden: false,
      text: "图片上传失败",
      duration: 2000,
      success: () => {

      }
    })
   })

  },
  changePic(e){
    const {id}=e.currentTarget.dataset
    let _this = this
    _this.uploadPic().then(res=>{
     let resData = JSON.parse(res.data);
     console.log(res, resData);
     let imgs=_this.data.pics

    imgs[id]=resData.url

     _this.setData({
       pics:imgs
     })
     console.log(_this.data.pics)
    }).catch(err=>{
      console.log('err',err)
     $wuxToptips().error({
       hidden: false,
       text: "图片上传失败",
       duration: 2000,
       success: () => {

       }
     })
    })
  },
  deletePic(e){
    const {id}=e.currentTarget.dataset
    let imgs=this.data.pics
    let index=imgs.findIndex(p=>p.id===id)
    imgs.splice(index,1)
    this.setData({
      pics:imgs
    })
  },
  //同步上传图片
  uploadPic(){
    return new Promise((resolve,reject)=>{
      const _this=this
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res => {
          console.log(res);
          let { tempFilePaths } = res;
          let tempFilePath = tempFilePaths[0];

          wx.getImageInfo({
            src: tempFilePath,
            success: function (image) {
              wx.uploadFile({
                url: _this.data.uploadUrl,
                filePath: tempFilePath,
                name: 'file',
                header: {
                  'Content-Type': 'multipart/form-data'
                },
                success: function(res) {
                  console.log('success',res)
                  resolve(res)
                },
                fail: function(res) {
                 reject(res)
                }
              })
            }
          })
        }
      })

    })
  },
  imgToHtml(imgs){
    let html=''
    if(imgs instanceof Array) {
      imgs.forEach(item=>{
        html+='<p><img src="'+item+'" width="100%"></img></p>'
       })
    }
    return html;
  },
  // 提取图片地址
  getImgSrc(html){
      let imgReg=/<img\b.*?(?:\>|\/>)/gi
      var srcReg = /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i
      var arr = []
      let imgArr=html.match(imgReg)

      if(imgArr&&imgArr.length>0){
        imgArr.forEach(item=>{
          console.log(item)
          let srcMatch=srcReg.exec(item)
          console.log('srcMatch',srcMatch)
          if(srcMatch&&srcMatch.length>1){
            console.log(srcMatch[1])
            arr.push(srcMatch[1])
          }
        })
      }


      return arr;
  }
})