mrr.sj.front/pages/search/components/search_box_result.vue

<template>
  <view class="search"  :style="{background:bgClor}">
    <view
      class="search-right"
      :style="{ width: width, height: height, border: border}"
    >
      <input
        type="text"
        class="search-inp"
        :placeholder="placeholder"
        :value="value"
		placeholder-class="inputPlaceholder"
        @input="onInput"
        @confirm="onConfirm"
        confirm-type="search"
        placeholder-style="color: #CCCCCC;"
      />
      <view class="btn_search" @click.stop="onSearch">搜索</view>
      <image
        class="search-icon"
        src="/static/images/search.png"
        @click.stop="onSearch"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  name: "search-box",
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "请输入搜索内容",
    },
    showBack: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
    },
    height: {
      type: String,
    },
    border: {
      type: String,
    },
	bgClor: {
      type: String,
	   default: "linear-gradient(134deg, #f52540 0%, #e8101e 100%)",
    },
  },
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  computed: {
    searchStyle() {
      // #ifdef APP-PLUS || H5
      return {};
      // #endif
      // #ifdef MP-WEIXIN
      return {};
      // #endif
    },
  },
  created() {
    // #ifdef APP-PLUS || H5
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    // #endif
  },
  methods: {
    goBack() {
      // #ifdef APP-PLUS
      uni.navigateBack();
      // #endif

      // #ifdef MP-WEIXIN || H5
      uni.navigateBack({
        delta: 1,
      });
      // #endif
    },
    onSearch(e) {
      // App阻止冒泡
      // #ifdef APP-NVUE
      e.stopPropagation();
      // #endif
      this.$emit("search");
    },
    onInput(e) {
      // #ifdef APP-PLUS || H5
      this.$emit("input", e.detail.value || e.target.value);
      // #endif

      // #ifdef MP-WEIXIN
      this.$emit("input", e.detail.value);
      // #endif
    },
    onConfirm(e) {
      // #ifdef APP-PLUS || H5
      this.$emit("confirm", e.detail.value || e.target.value);
      // #endif

      // #ifdef MP-WEIXIN
      this.$emit("confirm", e.detail.value);
      // #endif
    },
  },
};
</script>

<style scoped>
.search {
  padding: 20rpx 30rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  background: linear-gradient(134deg, #f52540 0%, #e8101e 100%);
  transform: translateY(0rpx);
}

.back {
  width: 16rpx;
  height: 32rpx;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
  margin-right: 20rpx;
}

.search-right {
  width: 100%;
  height: 66rpx;
  background-color: #fff;
  border-radius: 32rpx;
  position: relative;
  /* #ifdef H5 */
  display: flex;
  align-items: center;
  /* #endif */
}

.search-inp {
  flex: 1;
  height: 66rpx;
  font-size: 26rpx;
  color: #000000;
  border-width: 0;
  padding: 0 136rpx 0 72rpx;
  /* #ifdef H5 */
  outline: none;
  background-color: transparent;
  /* #endif */
}

.search-icon {
  width: 34rpx;
  height: 34rpx;
  position: absolute;
  left: 20rpx;
  top: 16rpx;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

/* #ifdef H5 */
.search-inp::-webkit-input-placeholder {
  color: #999999;
}

.search-inp::-moz-placeholder {
  color: #999999;
}

.search-inp:-ms-input-placeholder {
  color: #999999;
}

/* #endif */

.btn_search {
  width: 112rpx;
  height: 58rpx;
  border-radius: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(306deg, #e8101e 0%, #fc563b 100%);
  background-size: cover;
  color: #fff;
  font-size: 26rpx;
  position: absolute;
  right: 4rpx;
  top: 4rpx;
}

.inputPlaceholder{
	font-weight: 400;
	font-size: 30rpx;
	color: #CCCCCC;
	line-height: 34rpx;
	text-align: left;
	font-style: normal;
}
</style>