zsw-farm-bxg/pages/shop/GoodSearch/index.vue

<template>
  <view>
    <view class="searchGood">
			<cu-custom :isBack="true">
				<block slot="backText">
					<image class="backImg" src="../../../static/images/back-btn.png" mode=""></image>
				</block>
			  <block slot="content">
					<view class="search acea-row row-between-wrapper" :style="'width:calc('+CustomBarLeft+'px - 57px);'">
						<input type="text" placeholder="眼贴" placeholder-style="color: #999999;" v-model="search" confirm-type="搜索" @confirm="submit">
						<!-- <image src="../../../static/images/scan.png" /> -->
						<view class="btn" @click="submit">搜索</view>
					</view>
			  </block>
			</cu-custom>
      <!-- <view class="search acea-row row-between-wrapper">
        <view class="input acea-row row-between-wrapper">
          <text class="iconfont icon-sousuo2"></text>
          <form @submit.prevent="submit"></form>？？
          <input type="text" placeholder="点击搜索商品" v-model="search" />
        </view>
        <view class="bnt" @click="submit">搜索</view>
      </view> -->
      <!-- <view v-if="keywords.length">
        <view class="title">热门搜索</view>
        <view class="list acea-row">
          <view
            class="item"
            v-for="keywordsKey of keywords"
            :key="keywordsKey"
            @click="toSearch(keywordsKey)"
          >{{ keywordsKey }}</view>
        </view>
      </view> -->
      <!-- <view class="line"></view> -->
      <!--      <GoodList></GoodList>-->
    </view>
		<view class="searchGood-content" :style="'height:calc(100vh - '+CustomBar+'px);'">
			<view class="searchGood-keywords">
				<view class="title">热门搜索</view>
				<view class="list acea-row">
					<view
						class="item"
						v-for="keywordsKey of keywords"
						:key="keywordsKey"
						@click="toSearch(keywordsKey)"
					>{{ keywordsKey }}</view>
				</view>
			</view>
		</view>
		
    <!--<view class="noCommodity">-->
    <!--<view class="noPictrue">-->
    <!--<image :src="`${$VUE_APP_RESOURCES_URL}/images/noSearch.png`" class="image" />-->
    <!--</view>-->
    <!--<recommend></recommend>-->
    <!--</view>-->
  </view>
</template>
<script>
// import GoodList from "@/components/GoodList";
import { getSearchKeyword } from "@/api/store";
import { trim } from "@/utils";
// import Recommend from "@/components/Recommend";
export default {
  name: "GoodSearch",
  components: {
    // Recommend,
    // GoodList
  },
  props: {},
  data: function() {
    return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			CustomBarLeft: this.CustomBarLeft,
      keywords: [],
      search: ""
    };
  },
  mounted: function() {
    this.getData();
  },
  methods: {
    submit() {
      let search = trim(this.search) || "";
      if (!search) return;
			// if (!search) {
			// 	search = '肌';
			// };
      this.toSearch(search);
    },
    toSearch(s) {
      this.$yrouter.push({ path: "/pages/shop/GoodsList/index", query: { s } });
    },
    getData() {
      getSearchKeyword().then(res => {
        this.keywords = res.data;
      });
    }
  }
};
</script>
<style lang="less" scoped>
// .noCommodity {
//   border-top: 0.05*100rpx solid #f5f5f5;
// }

.searchGood {
	.backImg {
		height: 62rpx;
		width: 62rpx;
		margin-left: 26rpx;
	}
	.search {
		input {
			width: 280rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			// line-height: 38rpx;
		}
		image {
			width: 48rpx;
			height: 48rpx;
		}
		.btn {
			width: 96rpx;
			height: 50rpx;
			background: linear-gradient(135deg, #39D396 0%, #1B8DCC 100%);
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
		}
	}
}

.searchGood-content {
	width: 100vw;
	padding-top: 4rpx;
	.searchGood-keywords {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 20rpx 32rpx;
		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 42rpx;
			padding: 16rpx 0rpx;
		}
		.item {
			padding: 0rpx 16rpx;
			height: 56rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			margin-right: 20rpx;
			margin-bottom: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 56rpx;
		}
	}
}

</style>