yshi/fuintUniapp/pages/companyInformation/companyInformation.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) {
      this.$navTo(`pages/companyDetil/companyDetil`, { 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: $fuint-theme;
  }
}

// 店铺列表
.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>