收藏
回答

如何把components组件中的picker值保存到数据库中?

在components组件中定义了picker,在pages页面中,如何把picker中的值保存到数据库中?

图片

代码:
components中:
selector代码:
<view class="section">
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="section-picker">
      <view class="picker">
        {{arrays}}
      </view>
      <icon class="icon"></icon>
    </view>
  </picker>
</view>
js代码:
Component({
   /**
    * 组件的属性列表
    */
   properties: {
    array:{
      type:Array,
      value:[]
    },
    arrays:{
      type:String,
      value:''
    }
   },
   /**
    * 组件的初始数据
    */
   data: {
     index:0
   },
   /**
    * 组件的方法列表
    */
   methods: {
    bindPickerChange(event){
      console.log('picker发送选择改变,携带值为', event.detail.value)
      var that = this;
      var index = event.detail.value;
      var array = that.properties.array;
      that.setData({
        arrays:array[index],
        // index: index
      })
      var detail = {'index':index};
      var options = {};
      that.triggerEvent('carporate',detail,options)
    }
   }
})
pickerday代码:
<picker mode="date" fields="day" value="{{date}}" start="{{start}}" end="{{end}}" bindchange="onbindDataChange">
  <view class="section-picker">
    <view class="picker">
      {{date}}
    </view>
    <icon class="icon"></icon>
  </view>
</picker>
js代码:
var util = require('../../utils/util.js');  
var minday = util.formatTime(new Date()).split(' ')[0];
var maxday =  util.formatTime(new Date((new Date()).getTime()+(1000*60*60*24*62))).split(' ')[0];
Component({
   /**
    * 组件的属性列表
    */
   properties: {
    date:{
      type:String,
      value:''
    }
   },
   /**
    * 组件的初始数据
    */
   data: {
    // date:today,
    start: minday,
    end:maxday,
   },
   /**
    * 组件的方法列表
    */
   methods: {
    onbindDataChange(event){
      console.log(event);
      var value = event.detail.value;
      this.setData({
        date:value
      })
    },
   }
})
pages页面代码:
<form bindsubmit="onReleaseEvent">
  <view class="carpool-group">
    <view class="carpool-title">拼车类型</view>
    <selector name="carpool" array="{{carpool}}" arrays="{{carpools}}" bindcarporate="onCarporateEvent"></selector>
  </view>
  <view class="carpool-group">
    <view class="carpool-title">出发日期</view>
    <pickerday name="day" date="{{day}}"></pickerday>
  </view>
  <view class="carpool-group">
    <view class="carpool-title">出发时间</view>
    <pickertime name="times" time="{{times}}"></pickertime>
  </view>
  <button class="btn" formType="submit">提交</button>
</form>
js代码:
const db = wx.cloud.database()
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    carpool:['我要找车','我要找人','我找货车','我要找货'],
    carpools:'请选择拼车类型',
    day:'请选择出发日期',
    times:'请选择出发时间'
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  onCarporateEvent(event){
    console.log(event);
    var that = this;
    var index = event.detail.index;
    that.setData({
     index:index
    })
  },
  
  /**
   * 发布信息
   */
  onReleaseEvent(event){
    console.log(event);
    const that = this;
    const carpool = that.data.carpool[0]; // 如何获取拼车类型
    const day = that.data.day; // 如何获取出发日期
    const times = that.data.times; // 然后获取出发时间
    const start = event.detail.value.start;
    const goal = event.detail.value.goal;
    const car = event.detail.value.car;
    const peopleNumber = event.detail.value.peopleNumber;
    const phone = event.detail.value.phone;
    const content = event.detail.value.content;
    const author = app.globalData.userInfo;
    db.collection("wehicle").add({
      data:{
        carpool:carpool,
        day:day,
        times:times,
        start:start,
        goal:goal,
        car:car,
        peopleNumber:peopleNumber,
        phone:phone,
        content:content,
        author:author
      }
    })
  },
})


回答关注问题邀请回答
收藏

1 个回答

  • H1HAO 🇨🇳
    H1HAO 🇨🇳
    06-29

    不是很理解你的意思,当使用picker选择后会返回对应选择的下标(时间和地区是直接返回选择的内容),你只需要循环下这个数组把对应下标的内容拿出来不就行了

    06-29
    有用
    回复 7
    • 蓝天☁
      蓝天☁
      06-29
      图片中的这个不就是拼车类型的下标值吗?这个是在components组件里面,怎么在pages页面中拿到呢?
      06-29
      回复
    • 蓝天☁
      蓝天☁
      06-29
      这个是pages页面中代码
      06-29
      回复
    • 蓝天☁
      蓝天☁
      06-29
      const carpool = that.data.index;这个下标值是拿到了,但是数据库显示的如图,是数字而不是文字 carpool:[我要找车,我要找人,我找货车,我要找货],
      06-29
      回复
    • H1HAO 🇨🇳
      H1HAO 🇨🇳
      06-29回复蓝天☁
      你自己从carporate事件往父级里存入的index,你detail在放一个arrays不就行了
      06-29
      回复
    • 蓝天☁
      蓝天☁
      06-29
      额,我这样写的代码,虽然在数据库能够正常显示,但不知道行不行,你帮看下,代码太长了,发不完整,我截图
      06-29
      回复
    查看更多(2)
登录 后发表内容