wx-qhb/pageD/orderInformation/component/fill.vue

<template>
  <view>
    <u-popup :show="show" @close="$emit('close')" :round="10" closeable>
      <view class="title"> 填写快递信息 </view>
      <view class="content">
        <view class="_label" @click="openSelect">
          <view class="name">快递公司</view>
          <u--input
            placeholder="请选择快递公司"
            border="none"
            v-model="expressName"
            inputAlign="right"
            @change="searchExpress"
          ></u--input>
        </view>
        <view class="_label">
          <view class="name">快递单号</view>
          <u--input
            placeholder="请填写快递单号"
            border="none"
            v-model="expressNum"
            inputAlign="right"
          ></u--input>
        </view>

        <SelectExpress
          :show="nameShow"
          :filterList="filterList"
          @selected="selected"
          className="select-list"
        />
      </view>
      <button
        class="btn"
        @click="
          $emit('close', {
            expressCode,
            expressNum,
          })
        "
      >
        立即保存
      </button>
    </u-popup>
  </view>
</template>
<script>
import SelectExpress from "../../components/selectExpress.vue";
export default {
  components: { SelectExpress },
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
  },
  name: "fill",
  data() {
    return {
      expressName: "",
      expressNum: "",
      expressCode: "",
      expressNameList: [], //快递公司
      nameShow: false,
      filterList: [],
    };
  },
  methods: {
    //过滤搜索结果
    searchExpress(e) {
      this.nameShow = true;
      this.filterList = this.expressNameList
        .filter((item) => item.name.includes(e))
        .map((item) => item);
    },

    //获取选中的快递公司
    selected(value) {
      this.expressName = value.name;
      this.expressCode = value.code;
      this.nameShow = false;
    },

    //打开下拉
    openSelect() {
      this.nameShow = true;
    },
    getExpressNameList() {
      uni.$u.http.get(`/api/express-company`).then((res) => {
        this.expressNameList = res;
        this.filterList = res;
      });
    },
  },
  mounted() {
    this.getExpressNameList();
  },
};
</script>
<style lang="scss" scoped>
.title {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 36rpx;
  color: rgba(34, 34, 34, 1);
  font-weight: 600;
}
.content {
  padding: 0 32rpx;
  margin-bottom: 126rpx;
  position: relative;
  ._label {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100rpx;
    margin-top: 16rpx 24rpx;
    border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
    .name {
      color: rgba(85, 85, 85, 1);
      font-size: 30rpx;
    }
  }
}
.btn {
  background-color: #f83224;
  color: #fff;
  border-radius: 44rpx;
  margin: 0 auto 50rpx;
  width: 90%;
}
</style>