wxapp/pages/location/index.vue

<template>
  <view class="container">
    <view class="search-wrapper">
      <view class="search-input">
        <view class="search-input-wrapper">
          <view class="left">
            <text class="search-icon iconfont icon-sousuo"></text>
          </view>
          <view class="right">
            <input v-model="searchValue" class="input" placeholder="请输入店铺关键字" type="text"></input>
          </view>
        </view>
      </view>
      <view class="search-button">
        <button class="button" @click="doSearch" type="warn"> 搜索 </button>
      </view>
    </view>
    <view class="store-list">
      <view class="store-info" v-for="(item, index) in storeList" :key="index" @click="handleQuick(item.id)">
          <view class="base-info">
              <view class="name">{{ item.name }}</view>
              <view class="hours">营业时间：{{ item.hours }}</view>
              <view class="address"><text class="location-icon iconfont icon-dingwei"></text>{{ item.address }}</view>
              <view class="tel">联系电话：{{ item.phone }}</view>
          </view>
          <view class="loc-info">
                <text class="dis"><text class="distance">{{ parseFloat(item.distance).toFixed(1) }}</text>公里</text>
          </view>
      </view>
    </view>
    <empty v-if="!storeList.length" :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无店铺~">
    </empty>
  </view>
</template>

<script>
  import * as settingApi from '@/api/setting'
  import * as userApi from '@/api/user'
  import Empty from '@/components/empty'
  export default {
    components: {
      Empty
    },
    data() {
      return {
        storeId: 0,
        searchValue: '',
        storeList: []
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.storeId = this.getStoreId()
        this.getStoreList()
    },

    methods: {
        
      /**
       * 获取店铺列表
       * */
       getStoreList() {
           const app = this
           settingApi.storeList(app.searchValue)
             .then(result => {
                app.storeList = result.data.data
           })
       },
       
      /**
       * 获取历史店铺
       */
      getStoreId() {
        return uni.getStorageSync("storeId")
      },

      /**
       * 搜索提交
       */
      doSearch() {
        this.getStoreList()
      },

      /**
       * 跳转回去
       */
      handleQuick(storeId) {
        const app = this
        userApi.defaultStore(storeId)
          .then(result => {
            uni.setStorageSync("storeId", storeId);
            // 刷新相关页面数据
            uni.setStorageSync("reflashHomeData", true);
            uni.navigateBack();
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    min-height: 100vh;
    background: #f7f7f7;
  }

  .search-wrapper {
    display: flex;
    height: 78rpx;
  }

  // 搜索输入框
  .search-input {
    width: 80%;
    background: #fff;
    border-radius: 50rpx 0 0 50rpx;
    box-sizing: border-box;
    overflow: hidden;
    border: solid 1px #cccccc;
    .search-input-wrapper {
      display: flex;
      .left {
        display: flex;
        width: 60rpx;
        justify-content: center;
        align-items: center;
        .search-icon {
          display: block;
          color: #666666;
          font-size: 30rpx;
          font-weight: bold;
        }
      }

      .right {
        flex: 1;

        input {
          font-size: 28rpx;
          height: 78rpx;
          line-height: 78rpx;
          .input-placeholder {
            color: #aba9a9;
          }
        }

      }
    }
  }

  // 搜索按钮
  .search-button {
    width: 20%;
    box-sizing: border-box;

    .button {
      line-height: 78rpx;
      height: 78rpx;
      font-size: 28rpx;
      border-radius: 0 20px 20px 0;
      background: #00acac;
    }
  }

  // 店铺列表
  .store-list {
    .store-info {
      padding: 10px 0;
      overflow: hidden;
      border: 2rpx solid #cccccc;
      min-height: 240rpx;
      border-radius: 5rpx;
      margin-top: 10rpx;
      margin-bottom: 10rpx;
      padding: 30rpx;
      background: #FFFFFF;
      .base-info {
          float: left;
          width: 70%;
          .name {
              font-size: 34rpx;
              font-weight: bold;
              margin-top: 15rpx;
              margin-bottom: 12rpx;
              color: #666;
          }
          .location-icon {
              color: #f03c3c;
              font-weight: bold;
          }
      }
      .loc-info {
        color: #666666;
        dispaly:flex;
        line-height: 240rpx;
        float: left;
        overflow: hidden;
        width: 30%;
        text-align: right;
        .distance {
            font-weight: bold;
            color: #f03c3c;
        }
      }
    }
  }
</style>