|
@@ -1,17 +1,155 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="seacrh-record-index">
|
|
|
|
|
|
|
+ <view class="seacrh-record-index iPhone-bottom flex-common-css box-border-box">
|
|
|
|
|
+ <view class="seacrh-bg"></view>
|
|
|
<Nav title='搜索' bgckgroundBox='transparent'></Nav>
|
|
<Nav title='搜索' bgckgroundBox='transparent'></Nav>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="s-input">
|
|
|
|
|
+ <view class="input-icon">
|
|
|
|
|
+ <uni-icons type="search" size="18" color="#999"></uni-icons>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <input v-model="search" type="text" placeholder="店铺名称或者商品名称">
|
|
|
|
|
+ <view class="input-buttom fs-28 fc-f fw-500" @click="toList()">搜索</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="scroll-view-css bgc-f seacrh-info box-border-box p-32">
|
|
|
|
|
+ <view class="flex-justify-space mb-32" v-if="list.length > 0">
|
|
|
|
|
+ <view class="fs-32 fw-600 fc-3">搜索历史</view>
|
|
|
|
|
+ <view class="align-items-center">
|
|
|
|
|
+ <view @click="isOpen=!isOpen" class="">{{isOpen?'收起':'展开'}}</view>
|
|
|
|
|
+ <view @click="isOpen=!isOpen" :class="isOpen?'down':'up'">
|
|
|
|
|
+ <uni-icons type="right" size="14" color="#999"></uni-icons>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="view-x"></view>
|
|
|
|
|
+ <uni-icons @click="list = []" type="trash" size="18" color="#999"></uni-icons>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view :class="!isOpen?'hide-h':''" class="flex-wrap-wrap mb-50" v-if="list.length > 0">
|
|
|
|
|
+ <view class="fs-28 list-item text-overflow-ellipsis-one" @click="toList(item.name)" v-for="(item,i) in list" :key="i">{{item.name}}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
export default {
|
|
export default {
|
|
|
-
|
|
|
|
|
|
|
+ data(){
|
|
|
|
|
+ return{
|
|
|
|
|
+ search:'',
|
|
|
|
|
+ isOpen:false,
|
|
|
|
|
+ list:[{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
|
|
|
|
|
+ {name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
|
|
|
|
|
+ {name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
|
|
|
|
|
+ {name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},],
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onShow() {
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ methods:{
|
|
|
|
|
+ toList(name){
|
|
|
|
|
+ let search = '';
|
|
|
|
|
+ if(name){
|
|
|
|
|
+ search = name;
|
|
|
|
|
+ }else{
|
|
|
|
|
+ search = this.search;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url:"pages/index/search-list?search=" + search
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.seacrh-record-index{
|
|
.seacrh-record-index{
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ .hide-h{
|
|
|
|
|
+ height: 232rpx !important;
|
|
|
|
|
+ overflow: hidden !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .down{
|
|
|
|
|
+ transform: rotate(-90deg);
|
|
|
|
|
+ transition: all 0.5s;
|
|
|
|
|
+ }
|
|
|
|
|
+ .up{
|
|
|
|
|
+ transform: rotate(90deg);
|
|
|
|
|
+ transition: all 0.5s;
|
|
|
|
|
+ }
|
|
|
|
|
+ .view-x{
|
|
|
|
|
+ width: 2rpx;
|
|
|
|
|
+ height: 20rpx;
|
|
|
|
|
+ background-color: #eee;
|
|
|
|
|
+ margin: 0 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .find-item{
|
|
|
|
|
+ width: 48%;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .list-item{
|
|
|
|
|
+ max-height: 688rpx;
|
|
|
|
|
+ min-width: 10rpx;
|
|
|
|
|
+ height: 56rpx;
|
|
|
|
|
+ line-height: 56rpx;
|
|
|
|
|
+ background: #F7F8FC;
|
|
|
|
|
+ border-radius: 200rpx;
|
|
|
|
|
+ margin: 0 8rpx 32rpx 0;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ .seacrh-bg{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 376rpx;
|
|
|
|
|
+ background-image: linear-gradient(to right, #C9F7FC,#F9F6E0,#F6F5F3);
|
|
|
|
|
+ z-index: -1;
|
|
|
|
|
+ }
|
|
|
|
|
+ .s-input{
|
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 72rpx;
|
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ .input-icon{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 48rpx;
|
|
|
|
|
+ top: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ input{
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 72rpx;
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border-radius: 200rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ padding: 0 126rpx 0 78rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ .input-buttom{
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ background: linear-gradient( 90deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
|
|
+ border-radius: 200rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 30rpx;
|
|
|
|
|
+ top: 6rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .seacrh-info{
|
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|