<template> <view class="siteInspection-wrap"> <!-- 搜索框 --> <view class="search-con"> <u-search placeholder="查找全部门店" v-model="queryValue" @custom="queryHandle" @search="queryHandle" bg-color="#fff" :action-style="{background: '#2979ff',color: '#fff', borderRadius: '6upx',padding: '6upx 0', fontSize: '26upx'}"></u-search> </view> <!-- 定位 --> <view class="location-con" ref="location"> <text class="location-tit">当前位置:</text> <view class="location-main" @click="getLocation"> <text class="location-addr">{{location}}</text> <u-icon name="map" color="#2979ff" size="34" class="location-icon"></u-icon> </view> </view> <!-- 附近的门店 --> <view class="store-con"> <text class="store-tit">附近的门店:</text> <scroll-view class="scroll-con" scroll-y :style="{'height': 'calc(100vh - ' + Height + 'px)'}"> <!-- 列表数据 --> <view class="list-con"> <view class="list-item" v-for="(item,index) in listdata" :key="index" @click="chooseStore(item)"> <view class="item-main"> <u-icon class="company-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon> <text>{{item.name}}</text> </view> <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon> </view> </view> <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty> </scroll-view> </view> </view> </template> <script> import { clzConfirm } from '@/libs/tools.js' import { findStoreList } from '@/api/store.js' import { queryCurrentTaskUsing } from '@/api/task.js' export default{ data(){ return{ queryValue: '', // 查询门店 location: '', // 位置 noDataText: '未查找到附近门店', // 列表请求状态提示语 status: 'loadmore', // 加载中状态 listdata: [], // 列表数据 Height: 200, // 滚动区域 元素dom高度 lat: '', // 纬度 lng: '', // 经度 } }, onReady() { this.init() }, methods: { // 初始化 init(){ this.getLocation() }, // 获取当前位置 getLocation(){ const _this = this uni.getLocation({ type: 'gcj02', geocode: true, success: function (res) { console.log(res) _this.lng = res.longitude _this.lat = res.latitude _this.location = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum +'靠近' + res.address.poiName setTimeout(()=>{ // 按照经纬度查询 _this.searchHandle({lng:this.lng,lat:this.lat}) }, 500) }, fail: function(error){ console.log(error) _this.searchHandle({}) if(JSON.parse(error.errMsg.replace('getLocation:fail ','')).message){ uni.showToast({ icon: 'none', title: JSON.parse(error.errMsg.replace('getLocation:fail ','')).message }) } } }) }, // 按名称查询 queryHandle(){ this.searchHandle({ name: this.queryValue }) }, //查询门店列表 searchHandle(params){ this.status = "loading" findStoreList(params).then(res => { console.log(res) if (res.status == 200) { this.listdata = res.data || [] this.noDataText = this.listdata.length == 0 && this.queryValue != '' ? '没有搜索到相关结果' : '未查找到附近门店' } else { this.listdata = [] this.noDataText = res.message } this.status = "loadmore" }) }, // 选择门店 chooseStore(item){ // 校验是否有历史巡店记录 // type VIDEO_INSPECTION:视频巡店、SPOT_INSPECTION:现场巡店、POINT_INSPECTION:点检任务 queryCurrentTaskUsing({ storeId: item.id, type: 'SPOT_INSPECTION' }).then(res => { console.log(res,'----') if(res.status == 200){ if(res.data){ // 为true有历史巡店记录 clzConfirm({ title: '提示', content: '有进行中的巡店任务,是否继续?', confirmText: '继续巡店', cancelText: '重新开始', buttons: ['继续巡店','重新开始'], success: function (result) { if (result.confirm || result.index==0) { // 继续巡店 uni.navigateTo({ url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=0&types=scene' }) }else if(result.cancel || result.index==1){ // 重新开始 uni.navigateTo({ url:"/pages/signIn/signIn?item=" + encodeURIComponent(JSON.stringify({id:item.id,name:item.name,taskId:res.data,restart:1})) }) } } }) }else{ uni.navigateTo({ url:"/pages/signIn/signIn?item=" + encodeURIComponent(JSON.stringify({id:item.id,name:item.name})) }) } }else{ uni.showToast({icon: 'none', title: res.message}) } }) } } } </script> <style lang="scss" scoped> .siteInspection-wrap{ background-color: #f8f8f8; .search-con{ padding: 30upx 30upx; } // 定位 .location-con{ padding: 0 30upx; .location-main{ margin-top: 14upx; padding: 20upx; border-radius: 12upx; background-color: #fff; .location-icon{ padding-left: 10upx; vertical-align: bottom; } } } // 附近的门店 .store-con{ .store-tit{ display: block; padding: 30upx 30upx 20upx; } // 列表 44 62 .scroll-con{ height: calc(100vh - 215px); width: 100%; overflow: auto; .list-con{ padding: 0 30upx; .list-item{ background-color: #fff; padding: 20upx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #F8F8F8; .item-main{ font-size: 15px; color: rgb(48, 49, 51); display: flex; align-items: center; .company-icon{ margin-right: 6upx; } } } } } } } </style>