|
@@ -15,8 +15,16 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="label">
|
|
|
- <u-tag v-for="(item, index) of search_list" :key="index" :text="item.name" plain closable :show="close2"
|
|
|
- @close="handlerCloseSearchItem(item, index)" @click="handlerSelctHistItem(item)" />
|
|
|
+ <u-tag
|
|
|
+ v-for="(item, index) of search_list"
|
|
|
+ :key="index"
|
|
|
+ :text="item.name"
|
|
|
+ plain
|
|
|
+ closable
|
|
|
+ :show="close2"
|
|
|
+ @close="handlerCloseSearchItem(item, index)"
|
|
|
+ @click="handlerSelctHistItem(item)"
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 热门搜索 -->
|
|
@@ -25,18 +33,26 @@
|
|
|
<text class="hotCom">热门搜索</text>
|
|
|
</view>
|
|
|
<view class="label">
|
|
|
- <u-tag v-for="(item, index) in favourite_list" :text="item.name" :key="index" class="label-item"
|
|
|
- @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)" />
|
|
|
+ <u-tag
|
|
|
+ v-for="(item, index) in popular_search_list"
|
|
|
+ :text="item.name"
|
|
|
+ :key="index"
|
|
|
+ class="label-item"
|
|
|
+ @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-divider text="猜你喜欢"></u-divider>
|
|
|
<!-- 列表 -->
|
|
|
<view class="popular-box">
|
|
|
<view class="popular-item">
|
|
|
- <view class="item-box layered" v-for="(item,index) of popular_search_list"
|
|
|
- @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)">
|
|
|
+ <view
|
|
|
+ class="item-box layered"
|
|
|
+ v-for="(item, index) of favourite_list"
|
|
|
+ @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
|
|
|
+ >
|
|
|
<view class="item-left">
|
|
|
- <image class="img" :src='item.logo'></image>
|
|
|
+ <image class="img" :src="item.logo"></image>
|
|
|
</view>
|
|
|
<view class="item-right">
|
|
|
<view class="item-title">{{ item.name }}</view>
|
|
@@ -48,200 +64,200 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- listHotMerchant,
|
|
|
- likeMerchant
|
|
|
- } from '@/api/client/home.js';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- count: 5,
|
|
|
- value: 4,
|
|
|
- close2: true,
|
|
|
- radios: [{
|
|
|
+import { listHotMerchant, likeMerchant } from '@/api/client/home.js';
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ count: 5,
|
|
|
+ value: 4,
|
|
|
+ close2: true,
|
|
|
+ radios: [
|
|
|
+ {
|
|
|
checked: true,
|
|
|
- }, ],
|
|
|
- checkboxs: [{
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ checkboxs: [
|
|
|
+ {
|
|
|
checked: true,
|
|
|
- }, ],
|
|
|
- search_text: '', // 搜索text
|
|
|
- search_list: [], // 搜索列表
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ search_text: '', // 搜索text
|
|
|
+ search_list: [], // 搜索列表
|
|
|
|
|
|
- popular_search_list: [], //热门搜索列表
|
|
|
- favourite_list: [], // 猜你喜欢列表
|
|
|
+ popular_search_list: [], //热门搜索列表
|
|
|
+ favourite_list: [], // 猜你喜欢列表
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['location']),
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (uni.getStorageSync('searchItem')) {
|
|
|
+ this.search_list = uni.getStorageSync('searchItem');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.handlerInitList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化热门搜索 猜你喜欢列表
|
|
|
+ handlerInitList() {
|
|
|
+ listHotMerchant({...this.location}).then(res => {
|
|
|
+ this.popular_search_list = res.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 猜你喜欢列表
|
|
|
+ likeMerchant({ ...this.location }).then(res => {
|
|
|
+ this.favourite_list = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击搜索按钮
|
|
|
+ handlerSearchBtn() {
|
|
|
+ let params = {
|
|
|
+ name: this.search_text,
|
|
|
};
|
|
|
+ this.search_list.push(params);
|
|
|
+ uni.setStorageSync('searchItem', this.search_list);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/client/clientPackage/storeList?keyword=${this.search_text}`,
|
|
|
+ });
|
|
|
},
|
|
|
- onShow() {
|
|
|
- if (uni.getStorageSync('searchItem')) {
|
|
|
- this.search_list = uni.getStorageSync('searchItem');
|
|
|
- }
|
|
|
+ // 删除搜索记录按钮
|
|
|
+ handlerCloseSearchItem(item, index) {
|
|
|
+ this.search_list.splice(index, 1);
|
|
|
+ uni.setStorageSync('searchItem', this.search_list);
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.handlerInitList();
|
|
|
+ // 点击搜索历史按钮
|
|
|
+ handlerSelctHistItem(item) {
|
|
|
+ this.search_text = item.name;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/client/clientPackage/storeList?keyword=${this.search_text}`,
|
|
|
+ });
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 初始化热门搜索 猜你喜欢列表
|
|
|
- handlerInitList() {
|
|
|
- listHotMerchant().then(res => {
|
|
|
- this.popular_search_list = res.data;
|
|
|
- });
|
|
|
-
|
|
|
- // 猜你喜欢列表
|
|
|
- likeMerchant().then(res => {
|
|
|
- this.favourite_list = res.data;
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击搜索按钮
|
|
|
- handlerSearchBtn() {
|
|
|
- let params = {
|
|
|
- name: this.search_text,
|
|
|
- };
|
|
|
- this.search_list.push(params);
|
|
|
- uni.setStorageSync('searchItem', this.search_list);
|
|
|
- uni.navigateTo({
|
|
|
- url:`/pages/client/clientPackage/storeList?keyword=${this.search_text}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 删除搜索记录按钮
|
|
|
- handlerCloseSearchItem(item, index) {
|
|
|
- this.search_list.splice(index, 1);
|
|
|
- uni.setStorageSync('searchItem', this.search_list);
|
|
|
- },
|
|
|
- // 点击搜索历史按钮
|
|
|
- handlerSelctHistItem(item) {
|
|
|
- this.search_text = item.name
|
|
|
- uni.navigateTo({
|
|
|
- url:`/pages/client/clientPackage/storeList?keyword=${this.search_text}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 删除所有搜索记录按钮
|
|
|
- handlerAllSearchRecord() {
|
|
|
- uni.removeStorageSync('searchItem');
|
|
|
- this.search_list = [];
|
|
|
- },
|
|
|
+ // 删除所有搜索记录按钮
|
|
|
+ handlerAllSearchRecord() {
|
|
|
+ uni.removeStorageSync('searchItem');
|
|
|
+ this.search_list = [];
|
|
|
},
|
|
|
- };
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .search {
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #fff;
|
|
|
+.search {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索样式 */
|
|
|
+.search-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- /* 搜索样式 */
|
|
|
- .search-item {
|
|
|
+/* 搜索历史样式 */
|
|
|
+.history {
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .history-top {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 20rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-
|
|
|
- .search-btn {
|
|
|
- width: 160rpx;
|
|
|
- height: 70rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 搜索历史样式 */
|
|
|
- .history {
|
|
|
- padding: 30rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
|
- .history-top {
|
|
|
+ .history-right {
|
|
|
+ margin-top: 15rpx;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .history-right {
|
|
|
- margin-top: 15rpx;
|
|
|
- display: flex;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
|
|
|
- hotCom {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: bold;
|
|
|
- color: #404045;
|
|
|
- }
|
|
|
+ hotCom {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #404045;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .label {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
+.label {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
|
|
|
- .label-item {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
+.label-item {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.popular-box {
|
|
|
+ padding: 20rpx;
|
|
|
|
|
|
- .popular-box {
|
|
|
+ .item-box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
padding: 20rpx;
|
|
|
|
|
|
- .item-box {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- .item-left {
|
|
|
- margin-right: 20rpx;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .item-left {
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
|
- .item-right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
+ .img {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .item-title {
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
+ .item-right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .item-address {
|
|
|
- color: #a1a1a1;
|
|
|
- }
|
|
|
+ .item-title {
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .layered {
|
|
|
- box-shadow:
|
|
|
- 0 1px 1px hsla(0deg, 0%, 0%, 0.075),
|
|
|
- 0 5px 10px hsla(0deg, 0%, 0%, 0.075),
|
|
|
- 0 4px 4px hsla(0deg, 0%, 0%, 0.075),
|
|
|
- 0 -1px 0px hsla(0deg, 0%, 0%, 0.075),
|
|
|
- 0 6px 8px hsla(0deg, 0%, 0%, 0.025)
|
|
|
+ .item-address {
|
|
|
+ color: #a1a1a1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- ::v-deep view.data-v-1481d46d,
|
|
|
- scroll-view.data-v-1481d46d,
|
|
|
- swiper-item.data-v-1481d46d {
|
|
|
- margin: 0 4rpx;
|
|
|
+ .layered {
|
|
|
+ box-shadow: 0 1px 1px hsla(0deg, 0%, 0%, 0.075), 0 5px 10px hsla(0deg, 0%, 0%, 0.075),
|
|
|
+ 0 4px 4px hsla(0deg, 0%, 0%, 0.075), 0 -1px 0px hsla(0deg, 0%, 0%, 0.075),
|
|
|
+ 0 6px 8px hsla(0deg, 0%, 0%, 0.025);
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- ::v-deep view.data-v-39e33bf2,
|
|
|
- scroll-view.data-v-39e33bf2,
|
|
|
- swiper-item.data-v-39e33bf2 {
|
|
|
- margin-bottom: 10rpx !important;
|
|
|
- }
|
|
|
+::v-deep view.data-v-1481d46d,
|
|
|
+scroll-view.data-v-1481d46d,
|
|
|
+swiper-item.data-v-1481d46d {
|
|
|
+ margin: 0 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep view.data-v-39e33bf2,
|
|
|
+scroll-view.data-v-39e33bf2,
|
|
|
+swiper-item.data-v-39e33bf2 {
|
|
|
+ margin-bottom: 10rpx !important;
|
|
|
+}
|
|
|
</style>
|