hlm_pl_mall_h5/pages/home/chain/ChainNearby.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <home-base :show="false" style="position: absolute;top:0;right:0;left:0;bottom:0"><view style="height:100%" class="scroll-view-wrapper div container">
    <view class="div home-top">
      <view class="div header">
        <view class="div location" @click="goMap()">
          <text class="i icon-local iconfont">&#xe6ed;</text><text class="span location-content">{{locationName}}</text><text class="i icon-down iconfont">&#xe652;</text>
        </view>
        <view class="div search-ipt">
      <view class="div search-icon iconfont">&#xe67e;</view><input class="search-input" v-model="keyword" @confirm="reload()" placeholder="搜索附近门店" />
    </view>

      </view>
      <index-banner :full="true" v-if="banners && banners.length > 0" :items="banners"></index-banner>
    </view>
    <view class="scroll-view div index-con-shop" style="position:relative">
      <!-- 无限加载滚动列表 -->
      <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div" @scrolltolower="loadMore" scroll-y="true">
        <view class="div title"><text class="span">附近的门店</text></view>
        <view class="div" v-if="chainList">
          <view class="div" v-for='(item, index) in chainList'
          v-bind:key='index'
               @click="goDetail(item)"
          >
            <view class="div">

              <view class="div dp">
                <view class="div dp-box">
                  <view class="div dp-inner">
                    <view class="div dp-link">
            <text class="span clearfix a8o">
              <image mode="aspectFit" class="img d9" :src="item.chain_avatar">
            </text>
                    </view>
                    <view class="div dp-link-rt">
                      <view class="div dp-link-rt-a1">
                        <view class="div dp-title clearfix">
                          <text class="h2 ">{{item.chain_addressname}}</text>
                        </view>
                        <text class="span dp-txt2">
                距您{{item.distance}}km
              </text>
                      </view>
                      <view class="div dp-link-rtlist">
                      </view>

                      <view class="div dp-list-box">
                        <view class="div dp-a" v-for="(goods,i) in item.goods_list" :key="i">
                <text class="span dp-sapn">
                  <image mode="aspectFit" class="img" :src="goods.goods_image_url">
                </text>
                          <text class="span dp-sapn-price">￥{{goods.goods_price}}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>


              </view>

            </view>
          </view>
          <view class="div loading-wrapper" v-if="chainList.length > 0">
            <view  class="p common-no-more" v-if='!isMore'>没有更多了</view>
            <uni-load-more status="loading" color='#e93b3d' v-if='isMore'></uni-load-more>
          </view>
          <empty-record v-if='chainList.length <= 0 && !isMore'></empty-record>
        </view>

      </scroll-view>
    </view>
  </view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
  import { urlencode } from '@/util/common'
  import HomeBase from '../HomeBase'
  import { mapState, mapMutations } from 'vuex'
import EmptyRecord from '../../EmptyRecord'
import IndexBanner from '../../home/index/IndexBanner'
  import { getAddressByPoint, getPosition, getPointByIp } from '../../../util/bmap'
import { getChainList } from '../../../api/homesearch'
import { getAppadList } from '../../../api/homeindex'
export default {
  name: 'ChainList',
  components:{
    HomeBase,
    EmptyRecord,
    IndexBanner
  },
  data(){
    return {
      dialog:{},
      lng:0,
      lat:0,
      locationName: '请选择...',
      keyword:'',
      banners:false,
      chainList: false,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多

    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      member_point: state => state.member.point
    })
  },
  created: function () {
    if (!this.member_point.lng || !this.member_point.lat || !this.member_point.address) {
      // uni.navigateTo({ url: '/pages/home/map/Map' })
      let _this = this
      getPosition(function (res) {
        if (res.code === 10000) {
          _this.lat = res.result.lat
          _this.lng = res.result.lng
          _this.getAddressByPoint()
        } else {
          // uni.showToast({icon:'none',title: res.message})
          // 使用ip定位
          getPointByIp().then(res => {
            if (res.status == 0) {
              _this.lat = res.content.point.y
              _this.lng = res.content.point.x
              _this.getAddressByPoint()
            } else {
              uni.showToast({icon:'none',title: res.message})
            }
          }).catch(function (error) {
            uni.showToast({icon:'none',title: error.message})
          })
        }
      }, true)
    } else {
      this.locationName = this.member_point.address
      this.lat = this.member_point.lat
      this.lng = this.member_point.lng
    }
    getAppadList(1).then(res=>{
      this.banners=res.result.ad_list
    })
    this.loadMore()
  },
  methods:{
    closeDialog(){
      uni.navigateTo({ url: '/pages/home/map/Map' })
    },
    confirmDialog(value){
      this.reload()
    },
    ...mapMutations({
      memberPoint: 'memberPoint'
    }),
    getAddressByPoint () {
      let _this = this
      getAddressByPoint(this.lat + ',' + this.lng).then(res => {
        if (res.status == 0) {
          this.memberPoint({ point: { lng: this.lng, lat: this.lat, address: res.result.formatted_address, cityCode: res.result.cityCode } })
          this.locationName = res.result.formatted_address
          this.dialog={content:'我们为您定位到' + res.result.formatted_address + '，是否使用该地址？',cancelButtonText: '不，我想选择其他地址', confirmButtonText: '使用该地址'}
          this.$refs.confirm.open()
          
        } else {
          uni.showToast({icon:'none',title: res.message})
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })

    },
    goMap () {
      uni.navigateTo({ url: '/pages/home/map/Map' })
    },
    loadMore () {
      if (this.loading) {
        return
      }
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.getChainList(true)
      }
    },
    reload () {
      // 重新加载数据
      this.params.page = 0
      this.isMore = true
      this.loading = false
      this.chainList = false
      this.loadMore()
    },
    getChainList () {
      this.loading = true
      getChainList({keyword:this.keyword,longitude:this.lng,latitude:this.lat},this.params).then(res => {
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }
        if (this.chainList) {
          this.chainList = this.chainList.concat(res.result.chain_list)
        } else {
          this.chainList = res.result.chain_list
        }
        this.loading = false
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
        this.loading = false
      })
    },
    goDetail (item) {
      uni.navigateTo({ url: '/pages/home/storedetail/Storedetail'+'?'+urlencode( { 'id': item.store_id } )})
    },
  }
}
</script>

<style scoped lang='scss'>
  .scroll-view-wrapper{display: flex;flex-direction: column;}
  .scroll-view{flex:1}
  .home-top {background-color: #ffffff;display: block;min-height: 2.2rem;overflow: hidden;position: relative;z-index: 2;}
  .header{ border-bottom: 0; position:absolute;z-index:2;height: 56px;display: flex;display: -webkit-flex;display: -moz-flex;display: -o-flex;left:0;right:0;}
  .header .icon-local{font-size:$h2;}
  .location {width: 150px;vertical-align: top;height: 24px;border-radius: 23px;line-height: 24px;font-size:$subFontSize;color: #fff;margin-top: 10px;left: 0;text-align: left;padding-left:10px;display: flex}
  .location .location-content {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;vertical-align: top;flex:1;margin-right:5px;}
  .location .icon-down{ display: inline-block; width: 10px;height: 30px; font-size:$fontSize;margin-right:10px;}
  .search-ipt{background: rgba(255,255,255,0.35);height: 30px;top: 7px;margin-right: 10px;position: relative;border-radius: 20px;color: #fff;font-size:$subFontSize;display: flex;
    line-height: 30px;text-align: left;white-space: nowrap;flex:1}
  .search-ipt .search-icon {width:30px;text-align: center}
  .search-ipt .search-input{background: none;border: 0;color:#fff;width:100%;}
  .search-ipt .search-input::-webkit-input-placeholder {color: #fff;}
  .index-con-wrap{display: block;max-width: 640px;margin: 0 auto;position: relative;z-index: 0;}
  .index-con-shop .title{font-size:$subFontSize;line-height: 50px;height: 50px;text-overflow: ellipsis;white-space: nowrap;color: #70704e;text-align: center;
    position: relative;background-color: #FFF;}
  .index-con-shop .title:before {content: '';height: 1px;border-top: 1px solid #333;width: 228px;position: absolute;top: 50%;margin-top: -1px;left: 50%;transform: scaleY(0.5) translate(-50%, 0);
    -webkit-transform: scaleY(0.5) translate(-50%, 0);}
  .index-con-shop .title .span {position: relative;padding: 0 5px;background-color: #FFF;display: inline-block; height: 50px;line-height: 48px;font-size:$h1;font-weight: bold;color: #333;}
  .index-shop-ul .dp {position: relative;padding: 15px 10px;min-height: 70px;border-top: 1px solid #e7e9e4;background: #FFF; padding-bottom:20px;}
  .dp-box {position: relative;font-size: 0;min-height: 55px;background: #fff;padding:10px;}
  .dp-inner{ position: relative;}
  .dp-inner .dp-link { position: absolute;left: 0;top: 0;bottom: 0;float: none;}
  .dp-inner .dp-link .span{position: relative;display: block;  }
  .dp-inner .dp-link .span .img {float: left;width: 64px;height: 64px;border-radius: 4px;display: inline-block; margin-right: 8px;}
  .dp-link-rt{font-size:$fontSize;color: #999;margin-left: 76px;}
  .dp-link-rt .a.dp-link-rt-a1 {display: block;min-height: 66px;}
  .dp-title{	height: $h2;line-height: $h2;overflow: hidden;display: -webkit-box;display: -moz-box;display: -ms-box;display: flex;-moz-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;-webpack-box-orient:horizontal;
    -moz-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal;}
  .dp-title .h2 {	font-size:$h2;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;margin-top: 0;font-weight: bold;
    -webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex: 1}
  .dp-link-rt .dp-txt1{font-size: 0;padding-top: 10px;overflow: hidden;}
  .dp-txt1-st{display: inline-block; border: 1px solid #16A9ff;font-size: 0;border-radius: 2px;color: #16a9ff;line-height: 0;height: 15px; overflow: hidden; font-weight: normal;}
  .dp-txt1-st2 { display: inline-block;border: 1px solid #b6b6b6;border-radius: 2px;color: #999;height: 15px;overflow: hidden;font-weight: normal;}
  .dp-link-rt .dp-txt1 .dp-txt1-sp{display: inline-block;line-height: 1;padding: 2px;font-size:$h6;}
  .dp-link-rt .dp-txt1 .dp-txt1-sp2{line-height: 1;font-size:$h6;}
  .dp-link-rt .dp-txt1 .dp-txt1-sp3{display: inline-block;padding: 2px;line-height: 1;font-size:$h6;}
  .dp-link-rt .dp-txt2{display: block;margin-top: 8px;font-size:$fontSize;color: #999999;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  .dp-star {height: 14px; margin-top: 8px;overflow: hidden;font-size: 0;}
  .dp-star .dp-star-p1{height: 12px; padding-top: 2px;overflow: hidden;display: inline-block;position: relative;}
  .dp-star .dp-star-p2{font-size:$fontSize;line-height: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;display: inline-block;}
  .dp-star .dp-star-sp { display: inline-block;font-size: 0;}
  .dp-line{display: inline-block;width: 8px;height: 10px;}
  .tx {position: absolute;font-size:$h6;background-color: #ff5757;color: #fff;top: -7px;right: 1px;min-width: 18px;height: 18px;border-radius: 18px;line-height: 18px;text-align: center;border: 2px solid #ffffff;}
  .dp-list-box{font-size: 0;vertical-align: top;white-space: nowrap;padding-top: 12px;}
  .dp-list-box .dp-a{position: relative;display: inline-block;overflow: hidden;width: 25%;text-align: center;font-size: 0;vertical-align: top; max-height: 105px;}
  .dp-list-box .dp-a .dp-sapn{position: relative;display: block;width: 60px;height: 60px;border: 1px solid #f7f7f7;border-radius: 3px;}
  .dp-list-box .dp-a .dp-sapn .img {display: inline-block;width: 100%;border-radius:4px;}
  .dp-list-box .dp-a .dp-sapn .dp-sapn-txt{ position: absolute;left: 0;top: 0;padding: 1px 2px;font-size:$h6;color: #FFF;background-color: #fc2c50;}
  .dp-list-box .dp-sapn-price{  }
  .dp-sapn-price {color: #ff5757;margin-top: 3px;}
  .dp-sapn-price {font-size:$fontSize;color: #ff5757;height: 17px;line-height: 17px;vertical-align: top;display: block;width: 62px;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}

</style>