如何将picker的值同input的值一同上传到云数据库？

Question

wxml：

<form bindsubmit="sp_fabu">
<view class="leixing">
  <picker bindchange="bindPickerChange" value="{{lx_index}}" range="{{lx_array}}">
    <view class="leixing_1" name = "lx_index">
      商品类型：{{lx_array[lx_index]}}
    </view>
  </picker>
</view>

<view class="biaoti">
   <input name="sp_biaoti" class="biaoti_1" maxlength="15" placeholder="商品标题（限定字数15以内~）" />
</view> 

<view class="jieshao">
   <textarea name="sp_jieshao" class="jieshao_1" maxlength="100" placeholder="商品介绍（限定字数100以内~）" />
</view>



<view class="jiage">
   价格：<input name="sp_jiage" type="number" class="jiage_1" maxlength="15" placeholder="商品价格" />
</view> 

<view class="lianxi">
  联系方式： <input name="sp_phone" type="number" class="lianxi_1" maxlength="11" placeholder="手机号码" />
</view> 

<button bindtap="tofabu" class="btn" size="large" form-type="submit">确认发布</button>

</form>

js：

const db = wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    lx_array: ['数码', '日化', '虚拟', '资料','服装'],
    objectArray: [
      {
        id: 0,
        name: '数码'
      },
      {
        id: 1,
        name: '日化'
      },
      {
        id: 2,
        name: '虚拟'
      },
      {
        id: 3,
        name: '资料'},
        {
          id: 4,
          name: '服装'},

      ],
        lx_index: 0,
    "lx_index":"",
    "sp_biaoti":"",
    "sp_jieshao":"",
    "sp_jiage":"",
    "sp_phone":"",
    "sp_time":"",

  },
  //改变商品类型
  bindPickerChange: function(res) {
    console.log('picker发送选择改变，携带值为', res.detail.value)
    this.setData({
      lx_index: res.detail.value
    })
  },
  //向sp_fabu发送数据
  sp_fabu:function(res){
    console.log(res)
    var lx_index = res.detail.value.lx_index
    var sp_biaoti = res.detail.value.sp_biaoti
    var sp_jieshao = res.detail.value.sp_jieshao
    var sp_jiage = res.detail.value.sp_jiage
    var sp_phone = res.detail.value.sp_phone
    var sp_time = Date()

    wx.showLoading({
      title: '数据正在提交中......',
      mask:"true"
    })
    db.collection("cs").add({
      data:{
        "lx_index": lx_index,
       "sp_biaoti": sp_biaoti,
       "sp_jieshao": sp_jieshao,
       "sp_jiage": sp_jiage,
       "sp_phone": sp_phone,
       "sp_time": Date()

      }
    }).then(res=>{
      console.log(res)
      wx.hideLoading()
    })
  },

})

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题：请解释一下上面代码中的一个功能逻辑，包括前端和后端的实现步骤以及相关代码。 回答：这段代码实现了一个小程序中的表单提交功能。用户在前端填写商品信息，包括选择商品类型、输入标题、介绍、价格和联系方式，然后点击确认发布按钮进行提交。提交过程中，将用户填写的数据存储到云数据库中。 实现步骤：

1. 前端部分：
2. 用户在wxml文件中填写商品信息，通过表单绑定提交事件bindsubmit="sp_fabu"。
3. 选择商品类型使用picker组件，并绑定改变事件bindchange="bindPickerChange"。
4. 输入标题、介绍、价格和联系方式分别用input和textarea组件。
5. 点击确认发布按钮时，触发tofabu函数，提交表单数据。
6. 后端部分：
7. 在js文件中，定义sp_fabu函数，获取前端传来的数据。
8. 获取用户填写的商品类型、标题、介绍、价格、联系方式，并获取当前时间。
9. 调用云数据库db.collection("cs").add方法，将用户数据存储到名为"cs"的集合中。
10. 提示用户数据提交中，等待数据库操作完成后隐藏loading提示。 相关代码：

//向sp_fabu发送数据
sp_fabu:function(res){
  var lx_index = res.detail.value.lx_index;
  var sp_biaoti = res.detail.value.sp_biaoti;
  var sp_jieshao = res.detail.value.sp_jieshao;
  var sp_jiage = res.detail.value.sp_jiage;
  var sp_phone = res.detail.value.sp_phone;
  var sp_time = Date();
  wx.showLoading({
    title: '数据正在提交中...',
    mask: true
  });
  db.collection("cs").add({
    data:{
      "lx_index": lx_index,
      "sp_biaoti": sp_biaoti,
      "sp_jieshao": sp_jieshao,
      "sp_jiage": sp_jiage,
      "sp_phone": sp_phone,
      "sp_time": sp_time
    }
  }).then(res=>{
    console.log(res);
    wx.hideLoading();
  })
}

以上是关于小程序中表单提交功能的实现逻辑和代码说明。