微信小程序：选择页面单选实现（多页面均可选择）

一、效果展示

1、主页面

展示了两个选择行

2、选择页面

根据传递的参数决定员工展示的数据，并且单选，可将数据传递给主页面

二、主页面实现

1、视图层

写入了采购员和库管员的行选择信息

<view class="item flex flex-between">
  <view class="item_title">采购员：</view>
  <view class="item_info">
    <view class="pickertext" bind:tap="select_poperson">
      <text style="color: {
  {!poperson_sel ? '#8d8d8d' : ''}}">{
  {poperson_sel?poperson_sel.employee_name:'请选择'}}<text class="sel_btn">></text></text>
    </view>
  </view>
</view>
<view class="item flex flex-between">
  <view class="item_title">库管员：</view>
  <view class="item_info">
    <view class="pickertext" bind:tap="select_warseperson">
      <text style="color: {
  {!warehouse_sel ? '#8d8d8d' : ''}}">{
  {warehouse_sel?warehouse_sel.employee_name:'请选择'}}<text class="sel_btn">></text></text>
    </view>
  </view>
</view>

2、逻辑层

(1)参数定义

在data中写入必要的参数(对应到视图层的数据)

data: {
    poperson_sel: '', //选择的采购员
    warehouse_sel: '', //选择的库管员
},

(2)处理选择页面返回的数据

执行方法，可得到返回的数据，并且根据数据进行赋值

//员工选择的数据展示
setSelectedEmployee(employee, field, source) {
    console.log('接收到字段:', field, '来源:', source, '员工信息:', employee);
    this.setData({
      [field]: employee
    });
    console.log(this.data.poperson_sel)
},

(3)处理视图层的点击事件

定义点击事件，如果有已经选择的需要获取其工号，并一并传递给选择页面

传递的参数：

        sel_em_old：之前选择的数据

        field：规定需要定义的字段(该字段决定视图层展示的内容)

        source：规定传递的名称（其实不用可以省略，主要是区别不同的字段）

        pageinfo：这个用于定义不同的请求数据，例如A查询的是员工1，员工2，员工3；但是B查询的数据是员工4，员工5，员工6。那么就需要用这个，主要写入后端

        itemid：也是用于后端，主要是在有父级层面使用的

//选择采购员
select_poperson() {
    const poperson_sel = this.data.poperson_sel;
    const employee_num = poperson_sel?.employee_num;
    wx.navigateTo({
      url: `/pages/commonpage/sel_employee_param_radio/sel_employee?sel_em_old=${encodeURIComponent(JSON.stringify([employee_num]))}&field=poperson_sel&source=popersond`
    });
},

//选择库管员
select_warseperson() {
    const warehouse_sel = this.data.warehouse_sel;
    const employee_num = warehouse_sel?.employee_num;
    wx.navigateTo({
      url: `/pages/commonpage/sel_employee_param_radio/sel_employee?sel_em_old=${encodeURIComponent(JSON.stringify([employee_num]))}&field=warehouse_sel&source=stock&pageinfo=add_emgroup&itemid=1`
    });
},

三、选择页面

1、视图层

(1)搜索栏

搜索栏使用input事件执行提交

<view class="top">
  <view class="search">
    <view class="search_in">
      <!-- 使用代码请更改图片路径 -->
      <image src="{
  {search}}"></image>
      <input type="text" placeholder="请输入工号" placeholder-style="color:#CCCCCC" bindinput="search" />
    </view>
  </view>
</view>

(2)主要内容

如果行中checked为true，需要有一个选中效果：checked_parameter

<view class="center">
  <view class="pages_name">
    <view class="li"></view>
    <view class="li2">员工信息</view>
  </view>
</view>
<view class="all">
  <view class="item_all" data-id="{
  {item.id}}" wx:for="{
  {info}}" wx:key="index">
    <view class='position parameter-info text-over {
  {item.checked?"checked_parameter":""}}' data-id="{
  {item.id}}" bindtap='select_single'>
      <view class="content">
        <view class="vv_1">
          工号：
          <text>{
  {item.employee_num}}</text>
        </view>
        <view class="vv_1">
         姓名：
          <text>{
  {item.employee_name}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

(3)翻页功能

如果数据过多需要用到翻页

<view class="pagination">
  <view class="page-button" bindtap="prevPage">上一页</view>
  <view class="page-info">{
  { page }}</view>
  <view class="page-info">/</view>
  <view class="page-info">{
  { totalPage }}</view>
  <view class="page-button" bindtap="nextPage">下一页</view>
</view>

(4)确认按钮

<view class="button_sure" bindtap=