在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
}
})
},
})
不是很理解你的意思,当使用picker选择后会返回对应选择的下标(时间和地区是直接返回选择的内容),你只需要循环下这个数组把对应下标的内容拿出来不就行了
<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>
<view class="carpool-group">
<view class="carpool-title">拼车类型</view>
<selector name="carpool" array="{{carpool}}" arrays="{{carpools}}" bindcarporate="onCarporateEvent"></selector>
</view>