收藏
回答

components组件中下拉菜单是值如何添加到数据库中?

在components中写了一段下拉菜单组件,要如何把下拉菜单中的值添加到数控中去,作为初学者,不知道其中原理,哪位大师给个案例研究下。

components中组件代码

wxml代码:

<view class='ms-content-box'>
  <view class='ms-content' bindtap='selectToggle'>
    <view class='ms-text'>{{selectText}}</view>
    <icon class="icon"></icon>
  </view>
  <view class='ms-options' wx:if="{{selectShow}}">
    <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='ms-option' bindtap='setText'>{{item.text
      || item.value || item}}</view>
  </view>
</view>
jsd代码:
// components/selectnature/selectnature.js
Component({
  /**
   * 组件的属性列表
  */
properties: {
  propArray: {
    typeArray,
    value:''
  },
},
  /**
   * 组件的初始数据
  */
data: {
  selectShow: false,//初始option不显示
  selectText: "请选择",//初始内容
},
  /**
   * 组件的方法列表
   */
methods: {
  //option的显示与否
  selectToggle: function () {
    var nowShow = this.data.selectShow;//获取当前option显示的状态
    this.setData({
      selectShow: !nowShow
    })
  },
  //设置内容
  setText: function (e) {
    var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
    var nowIdx = e.target.dataset.index;//当前点击的索引
    var nowText = nowData[nowIdx].text || nowData[nowIdx].value || nowData[nowIdx];//当前点击的内容
    //再次执行动画,注意这里一定,一定,一定是this.animation来使用动画
    this.setData({
      selectShow: false,
      selectText: nowText,
    })
    this.triggerEvent('select', nowData[nowIdx])
  }
}
})
pages页面中的代码
wxml代码:
<!--pages/release/release-recruit/release-recruit.wxml-->


<view class="container">
  <form bindsubmit="onSubmitEvent">
    <selecttwo wx:for-item="{{selecttwo}}" name="{{position}}"></selecttwo>
    <view class="weui-cell">
      <view class="weui-cell__hd">工作性质</view>
        <selectnature class="weui-cell__bd" prop-array='{{worknature}}' />
    </view>
    <view class="weui-cell">
      <view class="weui-cell__hd">学历要求</view>
        <selectnature class="weui-cell__bd" prop-array='{{educations}}' />
      </view>
    <view class="introduce-group">
      <view class="introduce">职位描述</view>
      <textarea name="content" class="textarea" placeholder="请输入您的招聘要求"></textarea>
    </view>
    <view class="location-group">
      <view class="location-title">工作地址</view>
      <view class="location-title-group" bind:tap="onLocationTap">
        <view class="location-name">{{location?location.address:"请填写您的工作地址"}}</view>
        <image class="arrow" src="../../../images/arrow.png"></image>
      </view>
    </view>
    <view class="input-group">
      <import src="../../input/input.wxml" />
      <view class="medata">
        <block wx:for="{{cccs}}" wx:key="ccc">
          <view data-index="{{index}}">
            <template is="medata" data="{{...item}}"></template>
          </view>
        </block>
      </view>
    </view>
    <button formType="submit">提交</button>
  </form>
</view>
js代码:
// pages/release/release-recruit/release-recruit.js
const db = wx.cloud.database();
const app = getApp();
Page({


  /**
   * 页面的初始数据
   */
  data: {
    worknature: [
      // "正式工","临时工","个人","团队"
      {"id""10","value""正式工"}, 
      {"id""21","value""临时工"},
      {"id""22","value""个人"},
      {'value': '团队'}
    ],
    educations:[
      {"id""1","value""不限"}, 
      {"id""1","value""初中"}, 
      {"id""1","value""中技/中专"}, 
      {"id""1","value""高中"}, 
      {"id""2","value""大专"},
      {"id""1","value""本科"},
      {"id""1","value""硕士"},
      {"id""1","value""博士"},
      {"id""1","value""MBA/EMBA"},
    ],
    cccs:[
      {'id':'手机号码','name':'varchar','value':'请输入您的手机号码'},
      {'id':'联系人','name':'firstName','value':'请输入您的真实姓名'},
      ],
     
      location:null,
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const type=options.type;
    this.setData({
      type:type
    })
    this.onLocationTap();
   
  },
  
  /**
   *  发布事件 
   */
  onSubmitEvent:function(event){
    console.log(event);
    const content = event.detail.value.content;
    const location=this.data.location;
    const author=app.globalData.userInfo;
    
    wx.showLoading({
      title:"正在发表中..."
    })
   
    // 特3456书yuuo莞6543李zxcz蒜7782法fgnv级
    wx.cloud.callFunction({
      name:"recruit",
      data:{
        content:content,
        author:author,
        location:location,
        varchar:event.detail.value.varchar,
        firstName:event.detail.value.firstName,
        work:this.data.worknature.work
      },
      success:res => {
        // console.log(res);
        const _id = res.result._id;
        if(_id){
          wx.hideLoading();
          wx.showToast({
            title:"恭喜!发送成功!"
          });
        }else{
          wx.showToast({
            title:res.result.errMsg,
          })
        }
      }
    })
  },
   /**
   * 打开位置页面
   */
  openLocationPage:function(){
    const that=this;
    wx.chooseLocation({
      success:res=>{
        if(res.address){
          delete res["errMsg"];
          that.setData({
          location:res
          })
        }
      }
    })
  },
  /**
   * 获取位置信息的事件
   */
  onLocationTap:function(){
    const that=this;
    wx.getSetting({
      success:res=>{
        console.log(res);
        const isLocation = res.authSetting['scope.address.userLocation'];
        if(isLocation){
          that.openLocationPage();
        }else{
          wx.authorize({
            scope:"scope.userLocation",
            success:res=>{
              that.openLocationPage();
            }
          })
        }
      }
    })
  },
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--Demons
    社区技术运营专员--Demons
    2022-08-18

    你好,为了保持社区良好的氛围,请勿重复发帖,此贴先隐藏,感谢配合。

    2022-08-18
    有用
    回复
登录 后发表内容