aiot-app/components/TurnSendInfo.vue

<template>
  <view class="cell-list">
    <view class="input-search">
      <input
        type="text"
        value=""
        @confirm="searchConfirm"
        placeholder="请搜索"
      />
    </view>
    <view class="input-bottom"></view>
    <radio-group @change="radioChange">
      <template v-for="(item, index) in list">
        <label class="category_list">
          <view class="category_title">
            <view>
              <radio :value="index + ''" :checked="index == current" />
            </view>
            <view class="lable-title">
              <label>{{ item.name }}</label>
            </view>
          </view>
        </label>
      </template>
    </radio-group>
    <view class="list-none" v-if="list.length === 0">
      暂无信息，请重新搜索
    </view>
  </view>
</template>

<script>
import { postJ } from '@/utils/api.js'
export default {
  name: 'TurnSendInfo',
  data () {
    return {
      current: -1
    }
  },
  props: {
    //列表数据
    list: {
      type: Array,
      default: []
    }
  },

  methods: {
    searchConfirm (e) {
      let name = e.detail.value
      let data = {
        name: name
      }
      this.$emit('inputChange', data)
    },
    //获取人员信息
    radioChange (e) {
      let value = Number(e.detail.value)
      let employeeList = this.list
      let executorId = employeeList[value].id
      let executorName = employeeList[value].name
      //人员id 姓名
      let data = {
        executorId,
        executorName
      }
      this.$emit('radioChange', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.input-search {
  position: fixed;
  width: 100%;
  padding: 10rpx 20rpx;
  height: 80rpx;
  z-index: 99;
  background-color: #ffffff;
  box-sizing: border-box;
  input {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: $uni-font-size-base;
    background-color: $page-bg;
    border-radius: 30rpx;
  }
}
.input-bottom {
  padding-bottom: 90rpx;
}
.category_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #eeecec;
  .category_title {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: flex-start;
    .lable-title {
      margin-left: 10rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20rpx;
      font-size: 32rpx;
      color: $uni-text-color;
    }
  }
}
</style>