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

<template>
  <view style="width: 100%; height: 100vh">
    <zj-page-container>
      <view>
        <!-- 左上角返回按钮 -->
        <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>
      <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>
    </zj-page-container>
  </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,
    View
  },
  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 onShow() {
    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)
      })
    },
    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)
            }
          })
        })
        let { lat, lng } = addressInfo
        this.latitude = lat
        this.longitude = lng
      } catch (error) {}
    }
  }
}
</script>

<style scoped lang="scss">
.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;
}

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

.flex_abs {
  flex-direction: row;
}
</style>