chanyiUniapp/pages/shop/StoreList/index.vue

<template>
  <view>
    <view class="storeBox" ref="container">
      <view
        class="storeBox-box"
        v-for="(item, index) in storeList"
        :key="index"
        @click="checked(item)"
      >
        <view class="store-img">
          <img :src="item.image" lazy-load="true" />
        </view>
        <view class="store-cent-left">
          <text class="store-name">{{ item.name }}</text>
          <text class="store-address line1">{{ item.address }}</text>
        </view>
        <view class="row-right">
          <view>
            <a class="store-phone" @click="telPhone(item.phone)">
              <text class="iconfont icon-dadianhua01"></text>
            </a>
          </view>
          <view class="store-distance" @click="showMaoLocation(item)">
            <text class="addressTxt" v-if="item.distance">距离{{ item.distance }}千米</text>
            <text class="addressTxt" v-else>查看地图</text>
            <text class="iconfont icon-youjian"></text>
          </view>
        </view>
      </view>
      <Loading :loaded="loaded" :loading="loading"></Loading>
    </view>
  </view>
</template>

<script>
import Loading from "@/components/Loading";
import { storeListApi } from "@/api/store";
import { isWeixin,tel } from "@/utils/index";
import { wechatEvevt, wxShowLocation } from "@/libs/wechat";
import { mapGetters } from "vuex";
import cookie from "@/utils/store/cookie";
const LONGITUDE = "user_longitude";
const LATITUDE = "user_latitude";
const MAPKEY = "mapKey";
export default {
  name: "storeList",
  components: { Loading },
  computed: mapGetters(["location", "goName"]),
  data() {
    return {
      page: 1,
      limit: 20,
      loaded: false,
      loading: false,
      storeList: [],
      mapShow: false,
      system_store: {},
      mapKey: cookie.get(MAPKEY),
      locationShow: false
    };
  },
  mounted() {
    this.getList();
  },
  onReachBottom() {
    !this.loading && this.getOrderList();
  },
  methods: {
    showMaoLocation(data) {
      this.$yrouter.push({
        path: "/pages/map/index",
        query: data
      });
    },
    // 选中门店
    checked(e) {
      if (this.goName === "orders") {
        this.$store.commit("get_store", e);
        this.$yrouter.back();
      }
    },
    //拨打电话
    telPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber,
        fail() {
          console.log("取消拨打");
        }
      });
    },
    // 获取门店列表数据
    getList: function() {
      if (this.loading || this.loaded) return;
      this.loading = true;
      let data = {
        latitude: this.location.latitude, //纬度
        longitude: this.location.longitude, //经度
        page: this.page,
        limit: this.limit
      };
      storeListApi(data)
        .then(res => {
          this.loading = false;
          this.loaded = res.data.list.length < this.limit;
          this.storeList.push.apply(this.storeList, res.data.list);
          this.page = this.page + 1;
          this.mapKey = res.data.mapKey;
        })
        .catch(err => {
          uni.showToast({
					title: err.msg,
					icon: "none",
					duration: 2000,
				});
        });
    }
  }
};
</script>

<style scoped lang="less">
.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}
.storeBox {
  background-color: #fff;
  padding: 0 0.3 * 100rpx;
}
.storeBox-box {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  padding: 0.23 * 100rpx 0;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}
.store-cent {
  display: flex;
  align-items: center;
  width: 80%;
}
.store-cent-left {
  width: 45%;
  text {
    display: block;
  }
}
.store-img {
  width: 1.2 * 100rpx;
  height: 1.2 * 100rpx;
  border-radius: 0.06 * 100rpx;
  margin-right: 0.22 * 100rpx;
}
.store-img img {
  width: 100%;
  height: 100%;
}
.store-name {
  color: #282828;
  font-size: 0.3 * 100rpx;
  margin-bottom: 0.22 * 100rpx;
  font-weight: 800;
}
.store-address {
  color: #666666;
  font-size: 0.24 * 100rpx;
}
.store-phone {
  width: 0.5 * 100rpx;
  height: 0.5 * 100rpx;
  color: #fff;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 0.5 * 100rpx;
  background-color: #e83323;
  margin-bottom: 0.22 * 100rpx;
}
.store-distance {
  font-size: 0.22 * 100rpx;
  color: #e83323;
}
.iconfont {
  font-size: 0.2 * 100rpx;
}
.row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 33.5%;
}
</style>