123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <template>
- <view class="searchPage-wrap">
- <!-- 搜索 -->
- <u-search shape="square" placeholder="请输入门店名称搜索" v-model="keyword" action-text="取消" @change="change" @search="search" @custom="custom"></u-search>
- <!-- 列表数据 -->
- <view class="listData-con">
- <view class="listData-item" v-for="(item, index) in list" :key="index" @click="goPage(item)">
- <view class="listData-item-l">
- <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
- <text class="listData-item-l-name">{{item.name}}</text>
- </view>
- <view class="listData-item-r">
- <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
- </view>
- </view>
- <u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" :margin-top="80" mode="list"></u-empty>
- </view>
- </view>
- </template>
- <script>
- export default{
- data(){
- return{
- keyword: '', // 关键字
- list: [ // 数据列表
- { name: '常青二路店' },
- { name: '常青二路店常青青二路店常路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- ],
- noDataText: '暂无数据', // 数据异常提示
- }
- },
- methods: {
- // 用户点击右侧控件时触发
- custom(val){
-
- },
- // 输入框内容发生变化时触发
- change(val){
- let i = this.throttle(this.handle(), 1000)
- // console.log(i)
- },
- // 用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发
- search(val){
-
- },
- // 节流throttle代码(时间戳+定时器)
- throttle(fn,delay){
- let valid = true
- return function() {
- if(!valid){
- //休息时间 暂不接客
- return false
- }
- // 工作时间,执行函数并且在间隔期内把状态位设为无效
- valid = false
- setTimeout(() => {
- fn()
- valid = true;
- }, delay)
- }
- },
- handle(){
- console.log(12)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- page {
- background-color: #f8f8f8;
- height: calc(100vh - 44px);
- }
- .searchPage-wrap{
- padding: 20upx 30upx 0;
- .listData-con{
- .listData-item{
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20upx 0;
- border-bottom: 1upx dashed #f8f8f8;
- &-l{
- flex-grow: 1;
- padding-right: 10upx;
- position: relative;
- padding-left: 50upx;
- &-icon{
- vertical-align: sub;
- padding-right: 8upx;
- position: absolute;
- left: 0;
- top: -4upx;
- }
- }
- &-r{
- flex-shrink: 0;
- }
- }
- }
- }
- </style>
|