jsh_erp_app/components/ble-pop/ble-pop.vue

<template>
  <view>
    <u-popup
      :show="show"
      mode="center"
      @open="handleOpen"
      :round="10"
      :closeable="false"
      :closeOnClickOverlay="false"
    >
      <view class="pop-content">
        <view class="top-box">
          <view class="flex-box flex-justify-sb flex-row-center">
            <view class="pop-name">选择设备</view>
            <image
              src="@/static/image/refresh-icon.png"
              class="refresh-btn"
              @click="handleRefresh"
            ></image>
          </view>
          <u-icon
            name="close"
            color="#666"
            size="20"
            @click="handleClose"
          ></u-icon>
        </view>
        <view class="ble-box">
          <scroll-view
            scroll-y
            :style="{
              height: '100%',
            }"
          >
            <block v-for="(item, index) in list" :key="index">
              <view class="ble-item">
                <image
                  src="@/static/image/shebei-icon.png"
                  class="shebei-icon"
                ></image>
                <view class="ble-name">{{ item.name }}</view>
                <view class="action-btn" @click="clickItem(item)">选择</view>
              </view>
            </block>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    list() {
      return this.$store.state.ble.discoveredDevices;
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClose() {
      this.$emit("update:show", false);
      this.$emit("close");
    },
    handleOpen() {
      this.$emit("open");
    },
    handleRefresh() {
      this.$emit("refresh");
    },
    clickItem(item) {
      this.$emit("selectItem", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.pop-content {
  width: 590rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 10rpx;

  .pop-name {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 1;
    color: rgba(29, 33, 42, 1);
  }

  .ble-box {
    height: 600rpx;
  }
}
.flex-box {
  display: flex;
}
.flex-justify-sb {
  justify-content: space-between;
}
.flex-row-center {
  align-items: center;
}
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;

  .refresh-btn {
    width: 40rpx;
    height: 40rpx;
    margin-left: 10rpx;
  }

  .shebei-icon {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }
}
.ble-item {
  display: grid;
  grid-template-columns: 80rpx 300rpx 120rpx;
  align-items: center;
  margin-bottom: 20rpx;
  width: 100%;

  .shebei-icon {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .action-btn {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    width: 120rpx;
    height: 44rpx;
    border-radius: 40rpx;
    text-align: center;
    line-height: 44rpx;
    background-color: rgba(2, 86, 255, 0.1);
    color: rgba(2, 86, 255, 1);
    margin-left: 20rpx;
  }

  .ble-name {
    overflow: hidden;
    white-space: no-wrap;
    text-overflow: ellipsis;
  }
}
</style>