微信小程序商品发布

<!--pages/good/good.wxml-->
<!--商品发布-->
<form bindsubmit="formSubmit">
  <!--商品名称-->
  <view class='title'>
    <view class='title_text'>
      <text>商品名称:</text>
      <input name="title" type='text' value='{{title}}' bindblur='titleBlur'></input>
    </view>
  </view>
  <!--商品价格-->
  <view class='title'>
    <view class='title_text'>
      <text>商品价格:</text>
      <input name="price" type='number' value='{{price}}' bindblur='priceBlur'></input>
    </view>
  </view>
  <!--商品信息-->
  <view class='info-point'>
    <view class='title_text'>
      <text>商品属性:</text>
      <textarea name="info" class='textarea' value='{{info}}' bindblur='infoBlur'></textarea>
    </view>
  </view>
  <!--商品类型-->
  <view class='title'>
    <view class='title_text'>
      <text>商品类型:</text>
      <picker name="type" mode="selector" range="{{type}}" range-key="name" value="{{typeInd}}" bindchange="type">
        <input id='{{type[typeInd].id}}' name="type" type='text' value='{{type[typeInd].name}}'disabled='true'></input>
      </picker>
      <span class='icon iconfont icon-weibiaoti34'></span>
    </view>
  </view>
    <view class='upImv_text'>商品图片上传</view>
    <view class="addImv">
      <!--这个是已经选好的图片-->
      <view wx:for="{{detail}}" wx:key="key" class="upFile" bindtap="showImageDetail" style="border-radius: 5px" data-id="{{index}}">
        <image class="itemImv" src="{{item}}" name="img"></image>
        <image class="closeImv" src="../../resources/images/delect.png" mode="scaleToFill" catchtap="deleteImvDetail" data-id="{{index}}" name="img"></image>
      </view>
      <!--这个是选择图片-->
      <view class="chooseView" bindtap="chooseDetail" wx:if="{{chooseViewShowDetail}}">
        <image class="chooseImv"  name="img" src="../../resources/images/add.png"></image>
      </view>
    </view>
<!-- 点击按钮 -->
  <button form-type='submit' class='sureRelease'>确认发布</button>
</form>

wxjs:

// pages/productReleased/productReleased.js
var app = getApp();
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    title: "",
    info: "",
    point: "",
    price: "",
    type: [{
      name: "实物",
      id: 0
    }, {
      name: "虚拟",
      id: 1
    }],
    productID: 0,
    category: [],
    typeInd: 0, //类型
    detail: [], //详情图片
    detailNew: [],
    detailAll: [],
    checkUp: true, //判断从编辑页面进来是否需要上传图片
    chooseViewShowDetail: true,
    chooseViewShowBanner: true,
    params: {
      productID: 0,
      contentFile: "",
      bannerFile: "",
      check: false,
    },
    dis: false,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    
  },
  /**
   * 获取标题
   */
  titleBlur(e) {
    this.setData({
      title: e.detail.value
    })
  },
  /**
   * 获取商品价格
   */
  priceBlur(e) {
    this.setData({
      price: e.detail.value
    })
  },
  /**
   * 获取商品信息
   */
  infoBlur(e) {
    this.setData({
      info: e.detail.value
    })
  },

  /** 
   * 商品价格
   */
  price(e) {
    this.setData({
      price: e.detail.value
    })
  },
  /**
   * 商品类型
   */
  type(e) {
    this.setData({
      typeInd: e.detail.value
    })
  },
  

 
 

 
  /**发布提交 */
  formSubmit(e) {
//   获取商品名称
     var title=e.detail.value.title;
    //  商品价格
     var price=e.detail.value.price;
    //  商品类型
     var type=e.detail.value.type;
    //  商品属性
     var info=e.detail.value.info;
     let that=this
    var priceTF = /^\d+(\.\d{1,2})?$/
    // 验证非空
    if (e.detail.value.title === "") {
      wx.showToast({
        title: '请输入商品名称',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (e.detail.value.title.length > 60) {
      wx.showToast({
        title: '商品名称不得大于60字',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (e.detail.value.title.length === "") {
      wx.showToast({
        title: '请输入商品价格',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (!priceTF.test(e.detail.value.price)) {
      wx.showToast({
        title: '商品价格精确到两位',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (e.detail.value.info === "") {
      wx.showToast({
        title: '请输入商品信息',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (e.detail.value.point === "") {
      wx.showToast({
        title: '请输入商品卖点',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } 
     else if (that.data.typeInd === -1) {
      wx.showToast({
        title: '请选择商品类型',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } 
   else if (that.data.detail.length === 0) {
      wx.showToast({
        title: '请选择图片',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } 
    // 发送Ajax请求，进行入库
    wx.request({
      url: 'http://www.yan.com/api/xcx/getData',
      data: {
        title:title,
        price :price,
        type:type,
        info:info,
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      method:'POST',
      success (res) {
        //   提示发布成功
       if(res.data.code==200){
           wx.showToast({
             title: res.data.meg,
           })
       }
      }
    })
    
  },
 


 

  /** 选择图片detail */
  chooseDetail: function() {
    var that = this;
    if (that.data.detail.length < 3) {
      wx.chooseImage({
        count: 3,
        sizeType: [ 'compressed'],
        sourceType: ['album', 'camera'],
        success: function(photo) {
          //detail中包含的可能还有编辑页面下回显的图片，detailNew中包含的只有所选择的图片
          let detail = that.data.detail;
          detail = detail.concat(photo.tempFilePaths);
          let detailNew = that.data.detailNew
          detailNew = detailNew.concat(photo.tempFilePaths)
          that.setData({
            detail: detail,
            detailNew: detailNew,
            checkUp: false
          })
          that.chooseViewShowDetail();
 
          if (that.data.productID != 0) {
            let params = {
              productID: that.data.productID,
              isBanner: false,
              index: -1,
            }
            app.deleteProductImage(params).then(res => {
              //判断不为空防止将原有图片全删除后文件夹名返回空
              if (res.data.fileContent !== "" && res.data.fileBanner !== "") {
                that.data.params.contentFile = res.data.fileContent
                that.data.params.bannerFile = res.data.fileBanner
              }
            })
          }
        }
      })
    } else {
      wx.showToast({
        title: '限制选择3个文件',
        icon: 'none',
        duration: 1000
      })
    }
  },
 
  /** 删除图片detail */
  deleteImvDetail: function(e) {
    var that = this;
    var detail = that.data.detail;
    var itemIndex = e.currentTarget.dataset.id;
    if (that.data.productID != 0) {
      wx.showModal({
        title: '提示',
        content: '删除不可恢复，请谨慎操作',
        success(res) {
          if (res.confirm) {
            detail.splice(itemIndex, 1);
            that.setData({
              detail: detail,
              checkUp: false
            })
            that.chooseViewShowDetail();
            let params = {
              productID: that.data.productID,
              isBanner: false,
              index: itemIndex,
            }
            app.deleteProductImage(params).then(res => {
              if (res.data.fileContent !== "" && res.data.fileBanner !== "") {
                that.data.params.contentFile = res.data.fileContent
                that.data.params.bannerFile = res.data.fileBanner
              }
            })
          }
        }
      })
    } else {
      detail.splice(itemIndex, 1);
      that.setData({
        detail: detail,
        checkUp: false
      })
      that.chooseViewShowDetail();
    }
  },
 
 
  /** 是否隐藏图片选择detail */
  chooseViewShowDetail: function() {
    if (this.data.detail.length >= 3) {
      this.setData({
        chooseViewShowDetail: false
      })
    } else {
      this.setData({
        chooseViewShowDetail: true
      })
    }
  },
 
  /** 查看大图Detail */
  showImageDetail: function(e) {
    var detail = this.data.detail;
    var itemIndex = e.currentTarget.dataset.id;
    wx.previewImage({
      current: detail[itemIndex], // 当前显示图片的http链接
      urls: detail // 需要预览的图片http链接列表
    })
  },
 
 
  /** 选择图片Banner */
  chooseBanner: function() {
    var that = this;
    if (that.data.banner.length < 2) {
      wx.chooseImage({
        count: 2, //最多选择4张图片- that.data.imgArr.length,
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(photo) {
          var banner = that.data.banner;
          banner = banner.concat(photo.tempFilePaths);
          var bannerNew = that.data.bannerNew;
          bannerNew = bannerNew.concat(photo.tempFilePaths);
          that.setData({
            banner: banner,
            bannerNew: bannerNew,
            checkUp: false
          })
          that.chooseViewShowBanner();
          if (that.data.productID != 0) {
            let params = {
              productID: that.data.productID,
              isBanner: false,
              index: -1,
            }
            app.deleteProductImage(params).then(res => {
              if (res.data.fileContent !== "" && res.data.fileBanner !== "") {
                that.data.params.contentFile = res.data.fileContent
                that.data.params.bannerFile = res.data.fileBanner
              }
            })
          }
        }
      })
 
    } else {
      wx.showToast({
        title: '限制选择2个文件',
        icon: 'none',
        duration: 1000
      })
    }
  },
 
  /** 删除图片Banner */
  deleteImvBanner: function(e) {
    var that = this
    var banner = that.data.banner;
    var itemIndex = e.currentTarget.dataset.id;
    if (that.data.productID != 0) {
      wx.showModal({
        title: '提示',
        content: '删除不可恢复，请谨慎操作',
        success(res) {
          if (res.confirm) {
            banner.splice(itemIndex, 1);
            that.setData({
              banner: banner,
              checkUp: false
            })
            that.chooseViewShowBanner();
            let params = {
              productID: that.data.productID,
              isBanner: true,
              index: itemIndex,
            }
            app.deleteProductImage(params).then(res => {
              if (res.data.fileContent !== "" && res.data.fileBanner !== "") {
                that.data.params.contentFile = res.data.fileContent
                that.data.params.bannerFile = res.data.fileBanner
              }
            })
          }
        }
      })
    } else {
      banner.splice(itemIndex, 1);
      that.setData({
        banner: banner,
        checkUp: false
      })
      that.chooseViewShowBanner();
    }
  },
 
 
  /** 是否隐藏图片选择Banner*/
  chooseViewShowBanner() {
    if (this.data.banner.length >= 2) {
      this.setData({
        chooseViewShowBanner: false
      })
    } else {
      this.setData({
        chooseViewShowBanner: true
      })
    }
  },
 
  /** 查看大图Banner */
  showImageBanner: function(e) {
    var banner = this.data.banner;
    var itemIndex = e.currentTarget.dataset.id;
    wx.previewImage({
      current: banner[itemIndex], // 当前显示图片的http链接
      urls: banner // 需要预览的图片http链接列表
    })
  },
})

页面效果图：

 

 点击发布按钮将数据发布至laravel7进行添加入库

首先laravel7，api.php定义一个路由：

Route::group(['namespace'=>'xcx'],function (){
//商品发布
    Route::post('xcx/getData','LoginController@getData');

});

控制器代码：

   public function getData(Request $request)
    {

        $data = $request->post();
        $validator = Validator::make($data, ['title' => 'required', 'price' => 'required', 'type' => 'required', 'info' => 'required'],
            ['title.required' => '商品名称不可以为空', 'price.required' => '商品价格不可以为空', 'type.required' => '商品类型不可以为空', 'info.required' => '商品属性不可以为空',]);
        if ($validator->fails()) {
            return ['code' => 501, 'meg' => $validator->errors()->first(), 'data' => ''];
        }
        $res = GoodRelease::create($data);
        if (!$res) {
            return ['code' => 500, 'meg' => '发布失败', 'data' => ''];
        }
        return ['code' => 200, 'meg' => '发布成功', 'data' => $data];

    }

模型代码：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class GoodRelease extends Model
{
    //
    public $timestamps=false;
    protected $table='good_release';
    protected $guarded=[];
}

数据库字段