MP-XiaoXing/components/three-sites.vue

<template>
  <!-- 三个最近的油站弹窗 -->
  <view>
    <view class="cu-modal" :class="showThreeSites ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">选择油站</view>
          <view class="action" @tap="hideModal('sites')">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl bg-white">
          <view class="" v-if="siteList.length > 0">
            <three-item
              v-for="(item, index) in siteList"
              :key="item.id"
              :site-item="item"
              :first="index == 0"
              class="cu-list menu-avatar cu-item"
              @tap="toDetail(item)"
            >
            </three-item>
          </view>
          <view class="" v-else>
            <my-empty></my-empty>
          </view>
          <view class="btn-box padding-top">
            <button
              @tap="toSitePage"
              class="cu-tn bg-red round margin-bottom lg"
              color="#3982F6"
              size="large"
            >
              前往油站列表查找
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import oilSiteApi from "@/api/oil-site.js";
import threeItem from "./three-item.vue";
export default {
  components: {
    threeItem,
  },
  props: {
    showThreeSites: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      siteList: [],
      imgURL: this.global.baseURL,
    };
  },
  created() {
    this.getSiteList();
  },
  methods: {
    toSitePage() {
      // uni.setStorageSync('activeCur','station')
      uni.switchTab({
        url: "/pages/tabbar/station/stationList",
      });
    },
    refreshLocation() {
      uni.getLocation({
        type: "wgs84",
        success: function (res) {
          uni.setStorageSync("location", res);
        },
      });
    },
    getSiteList() {
      this.refreshLocation();
      let data1 = {
        currentPage: 1,
        pageSize: 3,
        params: {
          //类型：Object  必有字段  备注：// 筛选对象
          sort: "juli", //类型：String  必有字段  备注：// 智能排序 ( price：价格最低 juli：距离最近 ) 默认距离排序
          ...uni.getStorageSync("location"),
          ...this.filterData,
          clientBelong: "BAICHUAN",
          bcDisable: "ENABLE",
          // siteBrand: "", //   备注：// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
          // channelCode: "", //   备注：// 渠道编码 ( OIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
          // oilProductCode: "" //   备注：// 油号选择 ( 0# 92# 92#)
        },
      };
      oilSiteApi.findKASiteInfoByPage(data1).then((res) => {
        if (res.code == 20000) {
          this.siteList = res.data.list;
        }
      });
    },
    toDetail(item) {
      let itemS = JSON.stringify(item);
      console.log(itemS);
      uni.navigateTo({
        url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
        fail: (err) => {
          // console.log(err)
        },
        success: () => {
          // console.log('err')
        },
      });
    },
    callShipper() {
      uni.makePhoneCall({
        phoneNumber: this.waybillData.shippePhone,
      });
    },
    hideModal(name) {
      this.$emit("hideOneModal", name);
    },
    registerContracts() {
      this.$emit("registerContracts");
    },
    toSetLocation() {
      this.$emit("toSetLocation");
    },
    toAuth() {
      uni.navigateTo({
        url: "认证路径",
      });
    },
  },
};
</script>

<style scoped>
.cu-list.menu-avatar > .cu-item .action {
  width: 130rpx;
}

.ro-right {
  max-width: 100upx;
  /* position: absolute; */
}

.position-re {
  position: relative;
}

.postion-ab {
  position: absolute;
  top: -0.8rem;
  left: 0.2rem;
  min-width: 100%;
}
</style>