yicangzongtai_app_240321/pages/nearbyShop/city.vue

<template>
  <view class="container">
    <navbar id="navbar" :config="config" backColor="#666666"></navbar>
    <view class="search-top" :style="{'top': sticky + 'px'}">
      <view class="city-text" @click="addressShow=true">
        <image mode="widthFix" src="/static/shop/location-icon.png"></image>
        <view>{{cityName}}</view>
      </view>
      <view class="searchBox">
        <u-search v-model="param.shop_name" shape="round" :clearabled="false" height="70" bg-color="#f7f7f7"
          border-color="#D9D9D9" laceholder-color="#CCCCCC" search-icon="/static/shop/search-icon.png"
          @search="$u.throttle(search, 1000)" @custom="$u.throttle(search, 1000)"></u-search>
      </view>
    </view>
    <view style="height: 110rpx;"></view>
	<view class="u-skeleton">
    <view class="banner" v-if="bannerList.length > 0||skeletonShow">
      <!-- <image src="/static/shop/banner.png" mode="aspectFill"></image> -->
      <u-swiper class="u-skeleton-fillet" :list="bannerList" name="cover" height="360" :mode="bannerList.length>1?'round':'none'"
        bg-color="transparent" @click="bannerClick"></u-swiper>
    </view>
    <view class="menu" v-if="typeList.length > 0 || iconList.length > 0||skeletonShow">
      <swiper class="swiper u-skeleton-fillet" :indicator-dots="true" :autoplay="false" :current="current"
        :style="{'height':((iconList[current]&&iconList[current].length)>5?'350rpx':'150rpx')}" @change="swiperChange">
        <swiper-item class="swiper-item" v-for="(el, k) in iconList">
          <view class="item" v-for="(v,i) in (skeletonShow?5:el)" :key="i" @click="goShop(v)">
            <view class="img">
              <image class="u-skeleton-fillet" :src="v.icon" mode="widthFix"></image>
            </view>
            <text class="u-skeleton-fillet">{{v.name||'加载中'}}</text>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="con-box">
      <u-section class="u-skeleton-fillet" title="附近门店" font-size="36" :bold="true" color="#333333" :show-line="false" sub-title="查看更多"
        sub-color="#333333" @click="goShop()">
      </u-section>
      <view class="items">
        <view class="item " v-for="(v, index) in (skeletonShow?10:listData)" :key="index" @click="goDetails(v)">
          <view class="shop-img">
            <image class="u-skeleton-fillet" :src="v.logo" mode="aspectFill"></image>
          </view>
          <view class="right">
            <view class="title u-skeleton-fillet">{{v.shop_name||'加载中'}}</view>
            <view class="score-box u-skeleton-fillet">
              <view class="score ">
                <rate :value="Math.round(v.average||0)"></rate>
              </view>
              <text class="score-text ">{{v.average?v.average.toFixed(2):''}}分</text>
              <text class="ju">距离：{{Math.round(v.distance/1000*100)/100}}KM</text>
            </view>
            <view class="address-box u-skeleton-fillet">
              <view class="left">
                <image class="location1" src="/static/shop/location-icon.png" mode="widthFix">
                </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" mode="widthFix">
              </image>
              <view>{{v.map_punctuation}}&gt;</view>
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <view>
      <noData v-if="listData.length<=0"></noData>
    </view>
    <!-- <u-loadmore :status="loadStatus" /> -->
	<u-skeleton :loading="skeletonShow" :animation="true" bgColor="#FFF"></u-skeleton>
  </view>
  <!-- 选择地区 -->
  <u-select v-model="addressShow" mode="mutil-column-auto" :list="cityTree" @confirm="addressConfirm">
  </u-select>
  <entrepreneurship-zone-tabbar :current="2"></entrepreneurship-zone-tabbar>
  </view>
</template>

<script>
  import rate from "@/components/rate.vue"
  import noData from "@/components/noData/nodata.vue"
  import {
    number
  } from "mathjs";
  export default {
    components: {
      rate,
      noData
    },
    data() {
      return {
        config: {
          back: true,
          title: '附近门店',
          color: '#1A1A1A',
          backgroundColor: [1, "#fff"],
          // statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        //手机状态栏高度
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
        sticky: uni.getSystemInfoSync().statusBarHeight + 44,
        // loadStatus: 'loadmore', //loading / nomore
        pageParams: {
          page: 1,
          limit: 10,
          city_code: 420100, //武汉市
        },
        listData: [],
        loading: false,
        cityName: '洪山区',
        addressShow: false,
        param: {
          union_business: true
        },
        cityTree: [],
        typeList: [],
        iconList: [],
        bannerList: [],
        current: 0,
		skeletonShow:true
      }
    },
    onLoad() {
      this.getCitys();
      this.getLoca();
      this.getTypeList();
	  this.getBanner()
      // this.getList();
    },
    onPullDownRefresh() {
      this.getList();
      this.getTypeList();
	  this.getBanner();
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    methods: {
      goShop(item = {}) {
        uni.navigateTo({
          url: '/pages/nearbyShop/list?id=' + (item.id || '') + '&cityName=' + this.cityName + '&address=' + (this
            .param.address || '') + '&area_code=' + (this.param.area_code || '')
        })
      },
      getBanner() {
        this.$http.get('/ad/ad/getByCode/localMerchant-banner')
          .then(res => {
            if (res.code == 200) {
              this.bannerList = res.list;
            }
          })
      },
      bannerClick(e) {
        let item = this.bannerList[e]
        this.$mUtil.imgLink(item.model_type, item.model_id, item.url, item.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 = [{}]
              }
            })
			this.skeletonShow=false;
          }
        })
      },
      getLoca() {
        let that = this
        // #ifdef APP-PLUS
        uni.getLocation({
          type: 'gcj02',
          geocode: true,
          success: function(res) {
            that.cityName = res.address ? res.address.district : '';
            that.param.address = res.address.province + res.address.city + res.address.district
            that.param.lon = res.longitude;
            that.param.lat = res.latitude;
            that.getList()
            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)
          }
        });
        // #endif

        // #ifdef H5
        this.getList()
        // #endif
      },
      // 获取便民服务分类列表
      getTypeList() {
        this.$http.get('/union/business/classify/list').then(res => {
          if (res && res.code == 200) {
            this.typeList = res.list
            let list = []
            let typePage = Math.ceil(res.list.length / 10)
            for (let i = 0; i < typePage; i++) {
              list[i] = this.typeList.splice(0, 10)
            }
            this.iconList = list
          }
        })
      },
      swiperChange(e) {
        if (e) {
          this.current = e.detail.current
        }
      },
      // 选择地区
      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;
        delete this.param.address
        // this.param.lon = e[1].data.longitude || e[0].data.longitude;
        // this.param.lat = e[1].data.latitude || e[0].data.latitude;
        console.log(e)
        this.getList()
      },
      // service/goods/nearby  /convenience/service/classify/list
      getList() {
        let that = this;

        uni.showLoading({
          title: '努力加载中...',
          mask: true
        });
        // this.loadStatus = 'loading';
        this.$http.get('/service/goods/nearby', that.param)
          .then(res => {
            if (res.code == 200) {
              that.listData = res.list;
              // that.loadStatus = that.listData.length > 0 ? 'loadmore' : 'nomore';
            }
          })
          .finally(() => {
            uni.hideLoading();
          })
      },
      // 跳转商品详情
      goDetails(v) {
        uni.navigateTo({
          url: "/pages/nearbyShop/shopDetail?shopId=" + v.shop_id
        })
      },
      search() {
        this.getList()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .search-top {
      position: fixed;
      width: 100%;
      height: 110rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      background-color: #fff;
      z-index: 3;
    }

    .city-text {
      margin-right: 12rpx;
      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 {
      position: relative;
      flex: 1;
      // width: 580rpx;
      height: 70rpx;

      image {
        width: 35rpx;
        height: 35rpx;
      }

      /deep/ .u-content {
        padding-left: 27rpx;
        border-radius: 36rpx !important;

        .u-input {
          margin-left: 22rpx;
          margin-right: 124rpx;
        }
      }

      /deep/ .u-action-active {
        position: absolute;
        top: 0;
        right: 0;
        width: 124rpx;
        height: 70rpx;
        margin-left: 0;
        background: linear-gradient(98deg,#fa673e 5%, #fdac69 94%);
        border-radius: 35rpx;
        font-size: 30rpx;
        line-height: 70rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
    }
  }

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    z-index: 9;
    background-color: #fff;

    .title {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #1a1a1a;
    }

    .left {
      position: absolute;
      top: 50%;
      left: 30rpx;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #1a1a1a;
      transform: translateY(-50%);

      .city-icon {
        width: 19rpx;
        height: 12rpx;
        margin-left: 5rpx;
      }
    }
  }

  .banner {
    width: 100%;
    height: 350rpx;
    padding: 0rpx 30rpx 0;
    margin-bottom: 20rpx;

    image {
      width: 100%;
      height: 100%;
    }
    
    /deep/ uni-swiper {
      height: 350rpx !important;
    }
  }

  .menu {
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    flex-wrap: wrap;
    padding: 0 30rpx;
    margin-bottom: 22rpx;

    .swiper {
      width: 100%;
      height: auto;
      transition: all .3s;

      /deep/ .uni-swiper-dots-horizontal {
        bottom: 0;

        .uni-swiper-dot-active {
          background-color: #FA6138;
        }
      }
    }

    .swiper-item {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      margin-bottom: 30rpx;

      .img {
        width: 70rpx;
        height: 70rpx;
        margin-bottom: 13rpx;
        // border-radius: 50%;
        overflow: hidden;

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

      text {
        width: 100%;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #1a1a1a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    // .item:nth-child(5n) {
    //   margin-right: 0;
    // }
  }

  .con-box {
    padding: 0 30rpx;

    .u-section {
      margin-bottom: 27rpx;

      /deep/ .uicon-arrow-right:before {
        color: #666;
      }
    }

    .items {
      .item {
        display: flex;
        align-items: center;
        padding: 25rpx 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;
          }

          .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 {
            display: flex;
            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;
            }

            .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;
              }
            }

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

          }

          .location2-box {
            color: #333333;

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