pco/app-ui/pages/business-entering/item-select.vue

<template>
  <view>
    <view class="input-box">
      <view class="uni-input">
        <input class="input" confirm-type="search" @input="getBaseGoods()" v-model="p.name"
               @confirm="getBaseGoods()" placeholder="输入关键字搜索"/>
        <view class="clear" @click="clear()">
          <u-icon name="close-circle-fill" color="#ccc" size="38"></u-icon>
        </view>
      </view>
      <view class="btn" @click="getBaseGoods()">搜索</view>
    </view>
    <view class="box pay-way">

      <view class="pay-way-box" style="height: auto;">
        <radio-group @change="radioChange">
          <view class="item" v-for="(item,index) in goodsList" :key="item.id">
            <label>
              <image class="icon" :src="item.avatar"></image>
              <view class="text">
                <text class="title">{{ item.name }}</text>
                <text class="p">编号：{{ item.code }}</text>
              </view>
              <radio class="pay-radio" :value="item.id"/>
            </label>
          </view>
        </radio-group>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      p: { // 查询参数
        status: '1', // 描述
        pageNo: 1, // 当前页
        pageSize: 10, // 页大小
        sortType: 0, // 排序方式
        dataCount: 0,// 排序方式
        name: ''
      },
      goodsList: []
    }
  },
  onLoad() {

  },
  onShow() {
    this.getBaseGoods();
  },
  methods: {
    isInput() {

    }, clear() {

    },
    getBaseGoods() {
      this.$api.getBaseGoods(this.p).then(resp => {
        this.goodsList = resp.data;
        this.p.dataCount = resp.dataCount;
      })
    },
    radioChange(event) {
      let that = this;
      uni.navigateBack({
        data: 1,
        url: '/pages/business-entering/business-entering',
        success: function (resp) {
          uni.$emit('getGoods', {goodsId: event.detail.value}) //触发事件
        }
      })
    }
  }
}
</script>

<style lang="scss">
.input-box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20rpx 30rpx;
  padding-right: 0;
  box-sizing: border-box;
  background-color: #fff;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  /*#ifdef H5*/
  top: 45px;

  /*#endif*/
  .uni-input {
    background-color: #f7f7f7;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 80rpx 0 30rpx;
    box-sizing: border-box;
    flex: 1;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    position: relative;

    .input {
      flex: 1;
      height: 100%;
    }

    .clear {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 0;
    }
  }

  .icon {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    background-color: #ddd;
    right: 210rpx;
    border-radius: 50%;
  }

  .btn {
    width: 130rpx;
    height: 80rpx;
    color: #191919;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 10rpx 10rpx 0;
    font-size: 32rpx;
  }
}

.box {
  display: flex;
  margin: 20rpx;
  border-radius: 20rpx;
  flex: 1;

  box-sizing: border-box;
  flex-wrap: wrap;
}

.pay-way {
  margin-bottom: 20rpx;
  margin-top: 130rpx;

  .top {
    display: flex;
    width: 100%;
    align-items: center;
    margin: 0 30rpx;
    padding: 30rpx 0;

    .title {
      font-size: 34rpx;
      font-weight: bold;
    }
  }

  .pay-way-box {
    width: 100%;
    overflow: hidden;
  }

  .s-H {
    height: 120rpx;
  }

  .e-H {
    height: auto;
  }

  .tab-show {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      font-size: 30rpx;
      color: #999;
      margin-right: 20rpx;
    }
  }

  radio-group {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .item {
    border-radius: 10rpx;
    margin-top: 5rpx;
    background-color: #fff;

    label {
      display: flex;
      flex: 1;
      align-items: center;
      margin: 0 30rpx;
      min-height: 120rpx;
    }

    .icon {
      width: 60rpx;
      height: 60rpx;
    }

    .text {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 30rpx;
        color: #191919;
      }

      .p {
        font-size: 24rpx;
        color: #999;
      }
    }

    .pay-radio {
      margin-left: auto;
    }
  }
}
</style>