jsm-mall-h5-front/src/packageAttachment/pages/applicationParts/index.vue

<template>
  <view class="s_page">
    <!-- <map
      class="myMap"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      style="width: 750rpx; flex: 1"
      scale="11"
    ></map> -->
    <!-- 左上角返回按钮 -->
    <image
      @tap.stop="navBack"
      class="map-back"
      src="/static/images/map_back.png"
      mode=""
      :style="{ top: StatusBar + 'px' }"
    ></image>
    <!-- 申请记录按钮 -->
    <view class="record-application" @tap.stop="toNavigate" :style="{ top: StatusBar + 'px' }">
      <text class="record-application-text">申请记录</text>
    </view>
    <!-- 列表 -->
    <view class="bottom-con">
      <zj-page-fill
        @scrolltolower="loadMore"
        :scrollAttribute="{
          'refresher-enabled': false
        }"
      >
        <view class="list_view_lay">
          <view class="box" v-for="item in websitList" :key="item.websitId">
            <view class="mb20 flex_abs mt20">
              <text class="fw600 f32_302">{{ item.websitName }}</text>
              <text class="f24_999">距离{{ item.distance }}km</text>
            </view>
            <view class="flex_abs">
              <text class="f28_666" style="width: 520rpx">地址：{{ item.address }}</text>
              <tag
                style="
                  width: 150rpx;
                  height: 50rpx;
                  background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
                  border-radius: 30rpx;
                "
              >
                <text @tap.stop="toApplicationPartsForm(item)" class="f24_FFF">申请</text>
              </tag>
            </view>
          </view>
        </view>
      </zj-page-fill>

      <!-- <list @loadmore="loadMore" loadmoreoffset="20" show-scrollbar>
        <cell class="item" v-for="item in websitList" :key="item.websitId">
          <view class="mb20 flex_abs mt20">
            <text class="fw600 f32_302">{{ item.websitName }}</text>
            <text class="f24_999">距离{{ item.distance }}km</text>
          </view>
          <view class="flex_abs">
            <text class="f28_666" style="width: 520rpx">地址：{{ item.address }}</text>
            <tag
              style="
                width: 150rpx;
                height: 50rpx;
                background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
                border-radius: 30rpx;
              "
            >
              <text @tap.stop="toApplicationPartsForm(item)" class="f24_FFF">申请</text>
            </tag>
          </view>
        </cell>
      </list> -->
    </view>
  </view>
</template>

<script>
const sysInfo = uni.getSystemInfoSync()
import api from '@/common/http/'
import tag from '@/components/tag.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
import wx from 'weixin-js-sdk'
export default {
  components: {
    tag,
    zjPageFill
  },
  data() {
    return {
      StatusBar: sysInfo.statusBarHeight,
      latitude: '',
      longitude: '',
      markers: [
        {
          id: 'm_1',
          latitude: 23.183466,
          longitude: 113.35709,
          iconPath: '/static/images/order_call.png'
        }
      ],
      websitList: [],
      page: 1,
      pageSize: 3,
      websit_number: ''
    }
  },
  async onLoad() {
    const getWebsit_number = uni.getStorageSync('userInfo')
    this.websit_number = getWebsit_number.websit_number
    await this.getCurrentWebsit()
    await this.getWebsitList()
  },
  methods: {
    navBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    toNavigate() {
      this.$navToPage({
        url: `/packageAttachment/pages/orderOfSales/index`
      })
    },
    toApplicationPartsForm(item) {
      var { websitId, websitName, partsWebsitId } = item
      this.$navToPage({
        url: `/packageAttachment/pages/applicationParts/applicationPartsForm?websitId=${websitId}&websitName=${websitName}&partsWebsitId=${partsWebsitId}`
      })
    },
    loadMore() {
      this.page++
      this.getWebsitList()
    },
    getWebsitList() {
      let params = {
        latitude: this.latitude,
        longitude: this.longitude,
        pageNo: this.page,
        pageSize: this.pageSize,
        websitNumber: this.websit_number
      }
      api.post('/app/buy/websit/list', params).then(res => {
        this.websitList = this.websitList.concat(res.data.records).filter(item => item.partsWebsitId)
        // if (this.websitList.length != 0) {
        //   this.markers = this.websitList.map(item => {
        //     return {
        //       id: item.websitId,
        //       latitude: item.latitude,
        //       longitude: item.longitude,
        //       width: 28,
        //       height: 28,
        //       fontSize: 16,
        //       iconPath: '',
        //       callout: {
        //         content: item.websitName,
        //         padding: 5,
        //         display: 'ALWAYS',
        //         borderRadius: 5,
        //         color: '#E95505'
        //       }
        //     }
        //   })
        // }
      })
    },
    async getCurrentWebsit() {
      try {
        const addressInfo = await new Promise((resolve, reject) => {
          wx.getLocation({
            type: 'gcj02',
            isHighAccuracy: true,
            geocode: true,
            success: res => {
              resolve({
                lat: res.latitude,
                lng: res.longitude,
                address: res.address
              })
            },
            fail: err => {
              reject(err)
            }
          })
        })
        console.log(addressInfo, '-------------------')
        let { lat, lng } = addressInfo
        this.latitude = lat
        this.longitude = lng
      } catch (error) {
        console.log(error, '======================')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.confirm-btn {
  background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
}

.map-back {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  overflow: hidden;
}

.record-application {
  position: absolute;
  right: 30rpx;
  width: auto;
  height: 60rpx;
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: #6da7ff;
}

.record-application-text {
  font-size: 28rpx;
  font-weight: 500;
  text-align: center;
  color: #ffffff !important;
  line-height: 60rpx;
}

.bottom-con {
  width: 750rpx;
  padding-top: 25rpx;
  padding-left: 25rpx;
  padding-bottom: 30rpx;
  padding-right: 25rpx;
  // border-radius: 40rpx;
  border-top-right-radius: 40rpx;
  border-top-left-radius: 40rpx;
  // box-shadow: 0px -10rpx 40rpx 0px rgba(0, 0, 0, 0.05);
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 100;
  // overflow:hidden;
  height: 500rpx;
}

.item {
  background-color: #ffffff;
  overflow: hidden;
  border-bottom: 2rpx solid #f7f7f7;
  padding-bottom: 20rpx;
}

.flex_abs {
  flex-direction: row;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.closes {
  flex-direction: row;
  justify-content: flex-end;
}

.closes-img {
  height: 40rpx;
  width: 40rpx;
}

.phone-con {
  width: 540rpx;
  border-radius: 20rpx;
  background-color: #ffffff;
  text-align: center;
  padding: 10rpx 30rpx 40rpx 30rpx;
  position: relative;

  .confirm-btn {
    font-size: 32rpx;
    color: #ffffff;
  }

  .iconfont {
    color: #e5e5e5;
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    color: #333333;
  }
}
</style>