basket_traced_h5/src/view/transaction/index.vue

<template>
  <div class="body-transaction" v-infinite-scroll="scroll" infinite-scroll-immediate="false">
    <main-title>购买方式及经销商</main-title>
    <div class="list">
      <a v-for="(x, key) in shop" :key="key" :href="x.url | httpUrl" target="_blank">
        <el-image :src="x.icon">
          <div slot="placeholder" class="img-loading">
            <i class="el-icon-loading"></i>
          </div>
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <h4>{{ x.name }}</h4>
      </a>
    </div>
    <div class="map-box">
      <h6>
        <i class="el-icon-map-location"></i>
        附近经销商
      </h6>
      <ul class="map-box-list">
        <li v-for="(x, key) in dealerList" :key="key">
          <div style="flex:1">
            <h4>
              <i class="el-icon-location"></i>
              {{ x.dealerName || '' }}
            </h4>
            <p>{{ x.dealerAddress || '' }}</p>
            <p>
              <span>(0851)84399589</span>
              <span>直线距离{{ x.distance }}KM</span>
            </p>
          </div>
          <div class="map-go" @click="go(x)">
            <i class="iconfont iconche"></i>
            去这里
          </div>
        </li>
        <div class="list-loading" v-if="listLoading || noMore">
          <i class="el-icon-loading" v-if="!noMore"></i>
          {{loadText}}
        </div>
      </ul>
    </div>
    <bottom>订购电话：{{ info.tel || '' }}</bottom>
  </div>
</template>

<script>
import bottom from '../../components/bottom.vue';
import wx from '../../script/wxApi/index.js';

export default {
  components: {
    bottom
  },
  data() {
    const size = 20;
    return {
      timeFun: this.$timeFun(),
      list: [],
      pageNo: 1,
      pageSize: size,
      total: size,
      listLoading: false
    };
  },
  filters: {
    httpUrl(src) {
      src += '';
      const x = src.slice(0, 2);
      switch (src.slice(0, 7)) {
        case 'http://':
        case 'https:/':
          return src;
          break;
        default:
          return `${x == '//' ? '' : '//'}${src}`;
          break;
      }
    }
  },
  created() { },
  watch: {
    fkOrgGuid: {
      handler() {
        this.get();
      }
    },
    pageNo: {
      handler() {
        this.get();
      },
      // 代表在wacth里声明了pageNo这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  computed: {
    noMore() {
      return this.list.length >= this.total;
    },
    loadText() {
      return !this.noMore ? "加载中……" : "没有数据了";
    },
    fkOrgGuid() {
      return this.info.fkOrgGuid;
    },
    info() {
      return this.$store.state.info;
    },
    shop() {
      let arr = [];
      this.info.jdUrl &&
        arr.push({
          url: this.info.jdUrl,
          icon: require('./jd.png'),
          name: '京东'
        });
      this.info.tmallUrl &&
        arr.push({
          url: this.info.tmallUrl,
          icon: require('./tm.png'),
          name: '天猫'
        });
      this.info.companyUrl &&
        arr.push({
          url: this.info.companyUrl,
          icon: require('./qt.png'),
          name: '官网'
        });
      return arr;
    },
    //经过换算的列表
    dealerList() {
      const EARTH_RADIUS = 6378137.0, //单位M
        Rad = d => {
          return (d * Math.PI) / 180.0;
        },
        { latitude: lat2, longitude: lng2 } = this.$store.state.location; //第二点纬度，经度
      let list = this.list.map((x, i) => {
        // 第一点的纬度，经度
        const [lng1, lat1] = (x.latitudeLongitude + '').split(','),
          radLat1 = Rad(lat1),
          radLat2 = Rad(lat2),
          a = radLat1 - radLat2,
          b = Rad(lng1) - Rad(lng2);
        let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137; // EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000; //输出为公里
        s = s.toFixed(2);
        return {
          ...x,
          distance: isNaN(s) ? '--' : s
        };
      });
      return list;
    }
  },
  methods: {
    go(e) {
      const { dealerName, latitudeLongitude, dealerAddress } = e,
        l = (latitudeLongitude + '').split(',');
      wx.openLocation({
        longitude: l[0], // 经度，浮点数，范围为180 ~ -180。
        latitude: l[1], // 纬度，浮点数，范围为90 ~ -90
        name: dealerName, // 位置名
        address: dealerAddress, // 地址详情说明
        scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    scroll(e) {
      if (!this.listLoading) {
        this.pageNo += 1;
      }
    },
    get() {
      const { fkOrgGuid, pageNo, pageSize, noMore } = this;
      if (!noMore && fkOrgGuid && pageNo) {
        this.listLoading = true;
        this.timeFun(e => {
          this.$http
            .selectGoodsDealer({
              fkOrgGuid,
              pageNo,
              pageSize
            })
            .then(res => {
              this.listLoading = false;
              this.list = [...this.list, ...(res.list)];
              this.total = res.total;
            });
        });
      }
    }
  }
};
</script>

<style lang="less" scoped="scoped">
.body-transaction {
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.6rem 0.4rem;
    > a {
      > .el-image {
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.1rem;
        box-shadow: 1px 1px 0.2rem 1px rgba(0, 0, 0, 0.2);
        img {
          width: 100%;
          height: 100%;
        }
      }
      > h4 {
        font-size: 0.26rem;
        color: #20374d;
        text-align: center;
        margin: 0.2rem 0;
      }
    }
  }
  .map-box {
    background: #f6f6f7;
    border-radius: 0.1rem;
    padding: 0.2rem;
    font-size: 0.3rem;
    > h6 {
      display: flex;
      align-items: center;
      margin: 0.2rem;
      > i {
        font-size: 1.6em;
        margin-right: 0.2em;
      }
    }
    &-list {
      > li {
        background: #fff;
        border-radius: 0.1rem;
        box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
        padding: 0.2rem 0.2rem 0.2rem 0.6rem;
        font-size: 0.2rem;
        margin: 0.2rem 0;
        display: flex;
        justify-content: space-between;
        h4 {
          display: flex;
          align-items: center;
          > i {
            margin-left: -0.3rem;
            transform: translateY(0.01rem) translateX(-0.02rem);
            font-size: 1.6em;
          }
        }
        p {
          font-size: 0.8em;
          margin: 0.1rem 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          padding-right: 0.2rem;
        }
        > .map-go {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          > i {
            background: #20374d;
            color: #fff;
            border-radius: 50%;
            font-size: 0.4rem;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
            padding: 0.2rem;
            line-height: 1em;
            margin-bottom: 0.05rem;
          }
        }
      }
      .list-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        font-size: 10px;
        color: #000;
        opacity: 0.5;
        > i {
          font-size: 1.3em;
        }
      }
    }
  }
}
</style>