yicangzongtai_app_240321/pages/nearbyShop/list.vue

<template>
  <view>
    <navbar :config="config" backColor="#666"></navbar>
    <view class="top-box" :style="{'top': sticky + 'px'}">
      <view class="top-nav">
        <view class="city-text" @click="addressShow=true">
          <image mode="aspectFit" src="/static/shop/location-icon.png"></image>
          <view>{{cityName}}</view>
        </view>
        <view class="searchBox">
          <image src="/static/shop/search-icon.png" mode="widthFix"></image>
          <input v-model="param.shop_name" type="text" @confirm="getShopList()" placeholder-style="color:#B3B3B3"
            placeholder="请输入关键字" @input="search()" />
        </view>
      </view>
      <view class="tabsBox">
        <view class="type-box">
          <view class="item" @click="show = true">
            <view>{{selectIndex === null ? '全部分类' : selector[selectIndex].name}}</view>
            <image mode="aspectFit" src="/static/convenienceService/drop-arrow.png"></image>
          </view>
          <view class="item" v-for="(v,i) in typeList" :key="i" :class="{activeCls:tabCurrent==i}"
            @click="tabsChange2(i)">
            <view>{{v.name}}</view>
          </view>
        </view>
      </view>
    </view>
    <view :style="{'height': placeholderH + 'px'}"></view>
    <!-- selector -->
    <!-- <view :style="{height: (statusBarHeight) + 'px'}"></view> -->
    <view class="shopListBox" v-if="list.length>0">
      <!-- 附近门店 -->
      <view class="item" v-for="(v, index) in list" :key="index" @click="goShopDetails(v)">
        <view class="shop-img">
          <image :src="v.logo" mode="aspectFill"></image>
        </view>
        <view class="right">
          <view class="title">{{v.shop_name}}</view>
          <view class="score-box">
            <view class="score">
              <rate :value="Math.round(v.average)"></rate>
            </view>
            <text class="score-text">{{v.average.toFixed(2)}}分</text>
            <text class="ju">距离：{{Math.round(v.distance/1000*100)/100}}KM</text>
          </view>
          <view class="address-box">
            <view class="left">
              <image class="location1" src="/static/shop/location-icon.png">
              </image>
              <view class="district">{{v.map_punctuation || '商户暂无地理位置'}}</view>
            </view>
            <view class="goShopping">
              <text class="iconfont3">&#xe787;</text>
              <text class="text">去逛逛</text>
            </view>
          </view>
          <!-- <view class="location2-box">
              <image class="location2" src="/static/convenienceService/location2.png">
              </image>
              <view>{{v.map_punctuation}}&gt;</view>
            </view> -->
        </view>
      </view>
    </view>
    <view>
      <noData v-if="list.length<=0"></noData>
    </view>
    <!-- 选择地区 -->
    <u-select v-model="addressShow" mode="mutil-column-auto" :list="cityTree" @confirm="addressConfirm">
    </u-select>
    <u-picker mode="selector" v-model="show" :range="selector" range-key="name" :default-selector="[sIndex]"
      @confirm="confirmSelect"></u-picker>
  </view>
</template>

<script>
  import rate from "@/components/rate.vue"
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      rate,
      noData
    },
    data() {
      return {
        //手机状态栏高度
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
        sticky: uni.getSystemInfoSync().statusBarHeight + 44,
        placeholderH: 0,
        config: {
          back: true,
          title: '同城商家',
          color: '#1a1a1a',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        cityName: '武汉市',
        sIndex: 0,
        param: {
          shop_name: '',
          order: 'distance',
          union_business: true
        },
        setTime: null,
        addressShow: false,
        tabCurrent: 0,
        cityTree: [],
        typeList: [{
            name: '距离优先',
            order: 'distance'
          },
          {
            name: '评分优先',
            order: 'average'
          }
        ],
        show: false,
        selector: [],
        selectIndex: null,
        list: [],
      }
    },
    onLoad(options) {
      if (options && options.id) {
        this.param.classify_id = options.id
      }
      if (options.cityName) {
        this.cityName = options.cityName
      }
      if (options.address) {
        this.param.address = options.address
      }
      if (options.area_code) {
        this.param.area_code = options.area_code
      }
      this.getCitys();
      this.getTppe(this.param.classify_id)
    },
    onShow() {
      this.$nextTick(() => {
        this.$u.getRect('.top-box').then(res => {
          console.log(res)
          this.placeholderH = res.height
        })
      })
    },
    onReady() {},
    onPullDownRefresh() {
      // this.getTppe()
    },
    methods: {
      tabsChange2(index) {
        this.tabCurrent = index;
        this.param.order = this.typeList[index].order
        this.getShopList()
      },
      confirmSelect(e) {
        this.selectIndex = e[0]
        this.sIndex = e[0]
        this.getShopList()
      },
      // 跳转 门店详情
      goShopDetails(item) {
        uni.navigateTo({
          url: "/pages/nearbyShop/shopDetail?shopId=" + item.shop_id
        })
      },
      // 跳转商品详情
      goDetails(v) {
        uni.navigateTo({
          url: "/pages/convenienceService/shopDetails?shopId=" + v.shop_id
        })
      },
      // 获取城市
      getCitys() {
        this.$http.get('/cnarea/tree-lbs').then(res => {
          if (res && res.code == 200) {
            this.cityTree = res.tree.children
            this.cityTree.forEach(v => {
              if (v.children.length <= 0) {
                v.children = [{}]
              }
            })
          }
        })
      },
      // 选择地区
      addressConfirm(e) {
        // this.param.city_code = e[2].value ? e[2].value : e[1].value ? e[1].value : e[0].value;
        this.cityName = e[2].label ? e[2].label : e[1].label ? e[1].label : e[0].label;
        this.param.area_code = e[2].value ? e[2].value : e[1].value ? e[1].value : e[0].value;
        this.getShopList()
      },
      // 便民服务分类
      getTppe(id) {
        let that = this
        this.$http.get('/union/business/classify/list')
          .then(res => {
            if (res.code == 200) {
              this.selector = [{
                name: "全部分类",
                id: ""
              }, ...res.list];
              if (id) {
                this.selector.forEach((v, i) => {
                  if (v.id == id) {
                    this.selectIndex = i
                  }
                })
              }
              // #ifdef H5
              this.getShopList()
              // #endif
			   console.log('666666666666')
              uni.getLocation({
                type: 'gcj02',
                geocode: true,
                success: function(res) {
                  // that.cityName = res.address ? res.address.district : '';
                  that.param.lon = res.longitude;
                  that.param.lat = res.latitude;
                  that.getShopList()
                  if (!that.cityName) {
                    uni.request({
                      url: `https://restapi.amap.com/v3/geocode/regeo?key=47798318a0d39673a1fb9729aa6a468a&location=${res.longitude+','+res.latitude}`, //仅为示例，并非真实接口地址。
                      method: "GET",
                      header: {
                        "content-type": "application/x-www-form-urlencoded"
                      },
                      success: (re) => {
                        console.log(re);
                        that.cityName = re.data.regeocode
                          .addressComponent.city;
                      }
                    });
                  }
                },
                complete(e) {
                  console.log(e)
                }
              });
            }
          })
          .finally(() => {

          })
      },
      // 门店列表
      getShopList() {
        let that = this
        if (this.selectIndex === null) {
          // this.param.category_id = null
        } else {
          this.param.classify_id = this.selector[this.selectIndex].id
        }
        console.log(this.param, 1111)
        this.$http.get('/service/goods/nearby', this.param).then(res => {
          uni.stopPullDownRefresh()
          if (res && res.code == 200) {
            this.list = res.list;

          }
        })
      },
      // 搜索防抖
      search() {
        clearTimeout(this.setTime)
        this.setTime = setTimeout(() => {
          this.getShopList()
        }, 1000)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .top-box {
    position: fixed;
    background-color: #fff;
    z-index: 3;
  }

  .top-nav {
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    background-color: #fff;
  }

  .city-text {
    margin-right: 20rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #666666;
    display: flex;
    align-items: center;

    view {
      max-width: 100rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    image {
      width: 26rpx;
      height: 36rpx;
      margin-right: 10rpx;
      vertical-align: middle;
    }
  }

  .searchBox {
    width: 560rpx;
    display: flex;
    padding: 10rpx 27rpx;
    border: 1rpx solid #CCCCCC;
    border-radius: 10rpx;
    display: flex;
    align-items: center;

    image {
      width: 35rpx;
      height: 35rpx;
      margin-right: 15rpx;
      flex-shrink: 0;
    }

    input {
      text-align: left;
    }
  }

  .tabsBox {
    width: 100%;
    background-color: #fff;

    .tabsBox_tabs {
      padding: 0 10rpx;

      /deep/ .u-tab-item {
        font-weight: 700;
      }
    }
  }

  .type-box {
    display: flex;
    align-items: center;
    padding: 0 40rpx 20rpx;
    justify-content: space-between;

    .item {
      display: flex;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #4d4d4d;
      align-items: center;
      color: #4D4D4D;

      &:first-child {
        min-width: 142rpx;
      }

      image {
        width: 14rpx;
        height: 10rpx;
        margin-left: 10rpx;
        vertical-align: middle;
      }
    }

    .activeCls {
      color: #FA6138;
    }


    .item2 {
      margin-left: 100rpx;
      padding-top: 20rpx;
    }
  }

  .content-box {
    padding: 0 30rpx;
  }

  .shopListBox {
    padding: 0 30rpx;

    .shopListBox_item {
      margin-top: 30rpx;
    }

    .shopItem {
      // border-bottom: 1rpx solid #E6E6E6;
      padding-bottom: 40rpx;
      margin-bottom: 40rpx;

      .shopItem_title {
        font-size: 34rpx;
        color: #1A1A1A;
        font-weight: 700;
        margin-bottom: 20rpx;
      }

      .shopItem_data {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 26rpx;

        image {
          width: 22rpx;
          height: 30rpx;
        }

        >view {
          display: flex;
          align-items: center;

          image {
            margin-right: 10rpx;
          }
        }

        .shopItem_data_distance {
          color: #666666;
        }
      }

      .gooodsBox {
        .gooods_item {
          display: flex;
          margin-top: 20rpx;

          image {
            width: 136rpx;
            height: 136rpx;
            margin-right: 35rpx;
            border-radius: 10rpx;
            flex-shrink: 0;
          }

          .gooods_item_r {
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            >view {
              display: flex;
              align-items: center;
            }

            .gooods_item_r_title {
              font-size: 26rpx;
              color: #1A1A1A;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .gooods_item_r_price {
              font-size: 36rpx;
              color: #00BF5A;
              font-weight: 600;

              text {
                font-size: 20rpx;
                display: inline-block;
                margin-right: 10rpx;
              }
            }

            .gooods_item_r_expense {
              font-size: 26rpx;
              color: #666666;
              margin-left: 52rpx;
            }
          }
        }
      }

      .lookOther {
        font-size: 24rpx;
        color: #333333;
        width: 288rpx;
        height: 59rpx;
        border-radius: 8rpx;
        background: #F2F2F2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20rpx auto 0;
      }
    }

    .item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      // border-bottom: 1rpx solid #e6e6e6;

      .shop-img {
        width: 162rpx;
        height: 158rpx;
        margin-right: 40rpx;
        border-radius: 10rpx;
        overflow: hidden;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        flex: 1;
        width: 0;

        .score-box,
        .address-box,
        .location2-box {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
        }

        .location1,
        .location2 {
          width: 20rpx;
          height: 27rpx;
          flex-shrink: 0;
          margin-right: 9rpx;
        }

        .location2 {
          width: 23rpx;
          height: 27rpx;
        }

        .light-start,
        .startt {
          width: 30rpx;
          height: 30rpx;
          margin-right: 12rpx;
        }

        .title {
          margin-bottom: 18rpx;
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          color: #1a1a1a;
        }

        .score-box {
          align-items: normal;
          margin-bottom: 10rpx;
          font-family: PingFang SC, PingFang SC-Semibold;
          color: #333333;

          .score {
            flex-shrink: 0;
          }

          .score-text {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            text-align: left;
            color: #333333;
            flex-shrink: 0;
          }

          .ju {
            margin-left: 23rpx;
            font-size: 24rpx;
            color: #808080;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .address-box {
          // margin-bottom: 10rpx;
          font-family: PingFang SC;
          color: #666666;
          justify-content: space-between;

          .left {
            flex: 1;
            width: 0;
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #333333;
          }

          .district {
            color: #1a1a1a;
            margin-right: 40rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .goShopping {
            display: flex;
            align-items: center;
            font-size: 40rpx;
            color: #FA6138;
            flex-shrink: 0;

            .text {
              font-size: 24rpx;
              font-family: PingFang SC, PingFang SC-Medium;
              font-weight: 500;
              text-align: left;
              color: #666666;
            }
          }
        }

        .location2-box {
          color: #333333;

          view {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
</style>