yanzong_qianduan/pages/shop/extract.vue

<template>
  <view class="container b-f">
    <!-- 门店列表 -->
    <view class="shop-list">
      <view v-for="(item, index) in shopList" :key="index" @click="onSelectedShop(item.shop_id)" class="shop-item dis-flex flex-y-center">
        <view class="shop-item__content flex-box">
          <view class="shop-item__title">
            <text>{{ item.shop_name }}</text>
          </view>
          <view class="shop-item__address">
            <text>地址：{{ item.region.province }}{{ item.region.city }}{{ item.region.region }}{{ item.address }}</text>
          </view>
          <view class="shop-item__phone">
            <text>联系电话：{{ item.phone }}</text>
          </view>
          <view v-if="item.distance" class="shop-item__distance">
            <text class="iconfont icon-dingwei"></text>
            <text class="f-24">{{ item.distance_unit }}</text>
          </view>
        </view>
        <!-- 选中状态 -->
        <view v-if="item.shop_id == selectedId" class="shop-item__right">
          <text class="iconfont icon-check1"></text>
        </view>
      </view>
    </view>
    <!-- 定位按钮 -->
    <view v-if="!isAuthor" class="widget-location dis-flex flex-x-center flex-y-center" @click="onAuthorize()">
      <text class="iconfont icon-locate"></text>
    </view>
    <empty v-if="!shopList.length" :isLoading="isLoading" tips="亲，暂无自提门店哦" />
  </view>
</template>

<script>
  import * as ShopApi from '@/api/shop'
  import Empty from '@/components/empty'

  export default {
    components: {
      Empty
    },
    data() {
      return {
        // 正在加载中
        isLoading: true,
        // 是否授权了定位权限
        isAuthor: true,
        // 当前选择的门店ID
        selectedId: null,
        // 门店列表
        shopList: []
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad({ selectedId }) {
      const app = this
      // 记录当前选择的门店ID
      app.selectedId = selectedId ? selectedId : null
      // 获取默认门店列表
      app.getShopList()
      // 获取用户坐标
      app.getLocation(res => {
        app.getShopList(res.longitude, res.latitude)
      })
    },

    methods: {

      // 获取门店列表
      getShopList(longitude, latitude) {
        const app = this
        app.isLoading = true
        ShopApi.list({
            isCheck: 1,
            longitude: longitude ? longitude : '',
            latitude: latitude ? latitude : ''
          })
          .then(result => app.shopList = result.data.list)
          .finally(() => app.isLoading = false)
      },

      // 获取用户坐标
      // 参考文档：https://uniapp.dcloud.io/api/location/location?id=getlocation
      getLocation(callback) {
        const app = this
        uni.getLocation({
          type: 'wgs84',
          success: callback,
          fail() {
            app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
            app.isAuthor = false
          }
        })
      },

      // 授权启用定位权限
      onAuthorize() {
        const app = this
        // #ifdef MP
        uni.openSetting({
          success(res) {
            if (res.authSetting['scope.userLocation']) {
              console.log('定位权限授权成功')
              app.isAuthor = true
              setTimeout(() => {
                // 获取用户坐标
                app.getLocation(res => {
                  app.getShopList(res.longitude, res.latitude)
                })
              }, 1000)
            }
          }
        })
        // #endif
        // #ifdef H5
        // 获取用户坐标
        app.getLocation(res => {
          app.getShopList(res.longitude, res.latitude)
        })
        // #endif
      },

      /**
       * 选择门店
       */
      onSelectedShop(selectedId) {
        const app = this
        // 设置选中的id
        app.selectedId = selectedId
        // 相应全局事件订阅: 选择自提门店
        uni.$emit('syncSelectedId', selectedId)
        // 返回上级页面
        uni.navigateBack({
          delta: 1
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .shop-list .shop-item {
    padding: 20rpx 30rpx;
    min-height: 180rpx;
    font-size: 26rpx;
    line-height: 1.5;
    border-bottom: 1px solid #eee;
  }

  .shop-item__title {
    font-size: 30rpx;
    color: #535353;
    margin-bottom: 10rpx;
  }

  .shop-item__address,
  .shop-item__phone {
    color: #919396;
  }

  .shop-item__distance {
    margin-top: 10rpx;
    color: #c1c1c1;
    height: 40rpx;
  }

  .shop-item__distance .iconfont {
    color: #81838e;
    margin-right: 5rpx;
  }

  // 选中图标
  .shop-item__right {
    margin-left: 20rpx;
    color: #535353;
    font-size: 38rpx;
  }

  // 定位图标
  .widget-location {
    position: fixed;
    right: calc(var(--window-right) + 40rpx);
    bottom: calc(var(--window-bottom) + 70rpx);
    width: 72rpx;
    height: 72rpx;
    z-index: 200;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
    color: #555;
    font-size: 40rpx;
  }
</style>