feat: 搜索主页

src/pages.json

@@ -45,6 +45,29 @@
 				}
 			]
 		},
+		{
+			"root": "pages/search",
+			"pages": [
+				{
+					"path": "index",
+					"name": "searchIndex",
+					"style": {
+						"navigationBarTitleText": "搜索",
+						"navigationStyle": "custom",
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "detail",
+					"name": "searchDetail",
+					"style": {
+						"navigationBarTitleText": "搜索结果",
+						"navigationStyle": "custom",
+						"disableScroll": true
+					}
+				}
+			]
+		},
 		{
 			"root": "pages/learn",
 			"pages": [

src/pages/search/detail.vue

+<template>
+  <view class="search">
+    
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keyword: ''
+    }
+  },
+  computed: {
+  },
+  methods: {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.search {
+  height: 100vh;
+  flex-direction: column;
+  background-color: #f8fafd;
+  background-image: linear-gradient(to top, #f8fafd 0%, #e9f3ff 50%);
+  background-size: 100% 520rpx;
+  background-repeat: no-repeat;
+  padding: 0 20rpx;
+}
+</style>

src/pages/search/index.vue

+<template>
+  <view class="search">
+    <u-navbar
+      back-icon-color="#333333"
+      background="transparent"
+      title="搜索"
+      titleColor="#191C27"
+      :border-bottom="false"
+      title-bold
+    ></u-navbar>
+
+    <view class="search-bar">
+      <u-search
+        :clearabled="true"
+        :action-style="searchStyle"
+        bg-color="#fff"
+        v-model="keyword"
+        @custom="search"
+        @search="search"
+      ></u-search>
+    </view>
+
+    <view class="title">搜索历史</view>
+
+    <view class="u-flex history">
+      <view
+        class="history-list"
+        v-for="(item, index) in history"
+        :key="index"
+        @click="toSearchDetail(item)"
+        >{{ item }}</view
+      >
+    </view>
+
+    <view class="u-flex clear" @click="removeHistory">
+      <image :src="deleteImg"></image>
+      <view>清空搜索历史记录</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keyword: '',
+      history: [],
+    }
+  },
+  computed: {
+    searchStyle() {
+      return {
+        color: '#2272FF',
+      }
+    },
+    deleteImg() {
+      return process.uniEnv.qn_base_url + 'delete.png'
+    },
+  },
+  created() {
+    this.history = this.searchHistory
+  },
+  methods: {
+    search(val) {
+      this.keyword = val
+      this.history.push(val)
+      this.$u.vuex('searchHistory', this.history)
+      this.toSearchDetail(val)
+    },
+    toSearchDetail(keyword) {
+      this.$u.route({
+        url: 'pages/search/detail',
+        params: {
+          keyword: keyword
+        }
+      })
+    },
+    removeHistory() {
+      uni.showModal({
+        title: '提示',
+        content: '确认要清空搜索历史记录？',
+        success: (res) => {
+          if (res.confirm) {
+            this.history = []
+            this.$u.vuex('searchHistory', [])
+          }
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.search {
+  height: 100vh;
+  flex-direction: column;
+  background-color: #f8fafd;
+  background-image: linear-gradient(to top, #f8fafd 0%, #e9f3ff 50%);
+  background-size: 100% 520rpx;
+  background-repeat: no-repeat;
+  padding: 0 20rpx;
+  .title {
+    color: #191c27;
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-top: 30rpx;
+  }
+  .history {
+    margin-top: 20rpx;
+    flex-wrap: wrap;
+    .history-list {
+      padding: 20rpx 25rpx;
+      background: #fff;
+      color: #5a6073;
+      margin: 10rpx 20rpx 10rpx 0;
+      font-size: 26rpx;
+      border-radius: 10rpx;
+    }
+  }
+  .clear {
+    margin-top: 30rpx;
+    justify-content: center;
+    image {
+      width: 28rpx;
+      height: 32rpx;
+      padding-right: 10rpx;
+    }
+  }
+}
+</style>

src/store/index.js

@@ -12,7 +12,7 @@ try{
 }
 
 // 需要永久存储，且下次APP启动需要取出的，在state中的变量名
-let saveStateKeys = ['userInfo', 'vuex_token', 'openId'];
+let saveStateKeys = ['userInfo', 'vuex_token', 'openId', 'searchHistory'];
 
 // 保存变量到本地存储中
 const saveLifeData = function(key, value){
@@ -35,6 +35,7 @@ const store = new Vuex.Store({
 		userInfo: lifeData.userInfo ? lifeData.userInfo : {},
 		vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
 		openId: lifeData.openId ? lifeData.openId : '',
+		searchHistory: lifeData.searchHistory ? lifeData.searchHistory : [],
 		// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
 		vuex_version: '1.0.1',
 	},