MP_XOIL_company_new/pages/tabbar/station/stationList.vue

<template>
	<view style="height: 100vh;" class="my-bg flex_column">
		<cu-custom class="main-totextbar bg-main-oil" bgColor="bg-main-oil">
			<block slot="content">附近油站</block>
		</cu-custom>
		<view style="flex: 1;" class="flex_column">
			<view class="headList">
				<view class="headList_head" v-for="(list,i) in tabHeadS" :class="[TabHead == i? 'ativeHead':'']"
					:key='i' @tap='changeHaed(list.value)'>
					{{list.title}}
				</view>
			</view>
			<!-- fixed-top-site -->
			<view class="">
				<view class="cu-bar   search bg-white">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input @focus="InputFocus" confirm-type="search" @confirm="onSearch" @blur="InputBlur"
							v-model="siteAddress" :adjust-position="false" type="text" placeholder="请输入搜索站点名称" />
					</view>
					<view class="action" @tap="toMap">
						<image class="icon shadow-blur round icon-gasstation"
							src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 筛选开始 -->
			<scroll-view style="flex: 1;" class="screentop  bg-white">
				<view @click="reunrnFn" class="">
					<sl-filter reflexTitle ref="slFilter" v-if="TabHead == 0" :productCodeList="productCodeList"
						:areaCodeList="areaCodeList" @result="filterRes" :menuList="menuList"></sl-filter>
					<sl-filter reflexTitle ref="slFilter" @result="filterRes" :menuList="ureaMenuList"
						v-if="TabHead == 1 && changeHs == true"></sl-filter>
					<sl-filter reflexTitle ref="slFilter" @result="filterRes" :menuList="productTypes"
						v-if="changeHs == false && TabHead == 1 "></sl-filter>
				</view>
				<view class="bg-white min-height-50 padding-top" v-if="siteList.length>0">
					<site-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)" v-if="TabHead == 0">
					</site-item>
					<ureaItem v-for="(list,index) in siteList" :key="list.id" :site-item="list" :first="index==0"
						class="cu-list menu-avatar cu-item" @tap="ureaToDetail(list)" v-if="TabHead == 1">
					</ureaItem>
					<view class="placeholder-hidden"></view>
				</view>
				<view style="min-height: 100vh;" class="" v-else>
					<my-empty></my-empty>
				</view>
			</scroll-view>
		</view>
		<view class="bg-white">
			<uni-load-more :status="loadText"></uni-load-more>
		</view>
		<!-- <tabbar :current-page="1"/> -->
	</view>
</template>

<script>
	import StationItem from '@/components/site-item/site-item.vue'
	import ureaItem from '@/components/site-item/urea-site-item.vue'
	import oilSiteApi from '@/api/oil-site.js'
	import slFilter from '@/components/sl-filter/sl-filter.vue'
	import oilMongoApi from '../../../api/oil-mongo.js'
	import ureaSiteApi from '../../../api/urea_site.js'
	export default {
		components: {
			StationItem,
			slFilter,
			ureaItem
		},

		data() {
			return {
				companyCard: uni.getStorageSync('companyCard'),
				getSiteListTimer: null,
				areaCodeList: [],
				loadText: 'more',
				changeHs: true,
				TabHead: 0,
				tabHeadS: [{
					title: '加油站',
					value: 0,
				}, {
					title: '尿素站',
					value: 1,
				}],
				productCodeList: null,
				filterDatas: {
					oilProductCode: '0#'
				},
				ureaFilterDatas: [],
				loadStatus: 'load',
				siteAddress: '',
				menuList: [{
						title: '距离优先',
						isMutiple: false,
						key: 'sort',
						detailList: [{
								title: "距离优先",
								value: 'juli'
							},
							{
								title: "价格优先",
								value: 'price'
							}
						]
					},
					{
						title: '距离',
						isMutiple: false,
						key: 'distance',
						detailList: [{
								title: "默认",
								value: ''
							},
							{
								title: "20Km",
								value: 20000
							},
							{
								title: "30Km",
								value: 30000
							},
							{
								title: "50Km",
								value: 50000
							},
							{
								title: "省市",
								value: 10
							}
						]
					},
	
					{
						title: '0#轻柴油',
						key: 'oilProductCode',
						isMutiple: false,
						detailList: [{
							title: "全部",
							value: ""
						}]
					},
					{
						title: '品牌',
						key: 'siteBrand',
						isSort: true,
						isMutiple: false,
						detailLists: [{
							title: "全部",
							value: ""
						}],
						detailList: [{
							title: "全部",
							value: ""
						}]
					}
				],
				ureaMenuList: [{
						title: '加注方式',
						isMutiple: false,
						key: 'formats',
						detailList: [{
							title: "全部",
							value: ""
						}, {
							title: "加注机",
							value: "1"
						}, {
							title: "桶装",
							value: "2"
						}, ]
					},
					{
						title: '桶装品牌',
						key: 'productType',
						isMutiple: false,
						detailList: [{
							title: "全部",
							value: ""
						}]
					},
				],
				productTypes: [{
					title: '加注方式',
					isMutiple: false,
					key: 'formats',
					detailList: [{
						title: "全部",
						value: ""
					}, {
						title: "加注机",
						value: "1"
					}, {
						title: "桶装",
						value: "2"
					}, ]
				}],
				siteList: [],
				InputBottom: 0,
				show: false,
				currentPage: 1,
				brandName: '',
				productType: '',
				isLoadMore: false, //是否加载中
			}
		},
		watch: {
			loadStatus: {
				deep: true,
				immediate: true,
				handler: function(val, oldVal) {
					if (val.status == 'load') {
						setTimeout(() => {
							this.getSiteList()
						}, 100)
					} else {
						uni.showToast({
							title: '到底啦',
							icon: 'none'
						})
					}
				}
			},
		},
		onTabItemTap(res) {
			this.showThreeSites = false
		},
		onShow() {
			this.refreshLocation()
			let storykey = uni.getStorageInfoSync()
			let nowCompanyCard = uni.getStorageSync('companyCard')
			if (this.companyCard && this.companyCard !== nowCompanyCard) {
				this.companyCard = uni.getStorageSync('companyCard');
				this.updateFn()
			}
		},
		onLoad() {
			if (!uni.getStorageSync('filterDatas')) {
				this.getFilterData()
			} else {}
			this.findPriceDetails()
			if (uni.getStorageSync('productCodeList')) {
				this.productCodeList = uni.getStorageSync('productCodeList')
			}
			this.getSiteList()
		},
		onPullDownRefresh() {
			this.updateFn()
		},
		onReachBottom() {
			if (this.loadStatus == 'load') {
				setTimeout(() => {
					if (this.TabHead == 0) {
						this.getSiteList()
					} else if (this.TabHead == 1) {
						this.getUreaList()
					}
				}, 100)
			} else {
				uni.showToast({
					title: '到底啦',
					icon: 'none'
				})
			}
		},
		methods: {
			updateFn() {
				this.filterRes(this.filterDatas)
				setTimeout(function() {
					uni.stopPullDownRefresh()
				}, 600);
			},
			reunrnFn() {

			},
			getUreaList() {
				let location = uni.getStorageSync('location')
				let data1 = {
					currentPage: this.currentPage,
					pageSize: 10,
					params: { //类型：Object  必有字段  备注：// 筛选对象  
						// siteNameOrId: this.siteName, //产品类型(加注方式)：
						address:this.siteAddress,
						productType: this.productType ? this.productType : '', //1-加注机； 2-桶装   
						brandName: this.brandName ? this.brandName : '', // 桶装品牌名称
						currentLongitude: location.longitude + '', // 当前经度
						currentLatitude: location.latitude + '', // 当前纬度 
					}
				}
				ureaSiteApi.getByPageMobile(data1).then(res => {
					if (res.code == 20000) {
						let objs = []
						res.data.list.forEach(ele => {
							let tag
							if (ele.productType == 1) {
								tag = '加注机'
							} else if (ele.productType == 2) {
								tag = '桶装'
							}
							let obj = {
								address: ele.address,
								id: ele.id,
								juli: ele.totalDistance,
								latitude: parseInt(ele.lat),
								listTag: tag,
								longitude: parseInt(ele.lng),
								siteCustomerMark: null,
								siteId: ele.siteId,
								siteName: ele.siteName,
								sitePrice: ele.price,
								formats: ele.formats,
								price: ele.price
							}
							objs.push(obj)
						})

						this.siteList = this.siteList.concat(objs)
						if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.loadStatus = 'nomore'
						} else {
							this.currentPage++
							this.loadStatus = 'load'
						}
					}
				})
			},
			changeHaed(code) {
				this.TabHead = code
				this.siteList = []
				this.siteAddress = ''
				this.currentPage = 1
				if (code == 1) {
					this.getUreaList()
				} else if (code == 0) {
					this.getSiteList()
				}
			},
			ureaToDetail(list) {

				let itemS = JSON.stringify(list)
				if (uni.getStorageSync('user')) {
					uni.navigateTo({
						url: `/BagStation/pages/ureaDetail/ureaDetail?item=${itemS}`
					})
				} else {
					uni.showModal({
						title: '请您登录',
						content: "登录小星加油才可以加油 |˛˙꒳​˙)♡",
						confirmText: '去登陆',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '../../../BagAuth/pages/login/login'
								})
							}
						}
					})
				}
			},
			filterRes(val) {
				console.log(val, '重置')
				if (this.TabHead == 0) {
					this.filterDatas = val
					this.currentPage = 1
					this.siteList = []
					this.getSiteList()
				} else {
					if (val.formats == 2) {
						this.changeHs = true
					} else {
						this.changeHs = false
					}
					this.filterDatas = val
					this.productType = val.formats
					this.brandName = val.productType
					this.currentPage = 1
					this.siteList = []
					this.getUreaList()
				}
			},
			getFilterData() {
				oilSiteApi.getCheckInfo().then(res => {
					if (res.code == 20000) {
						uni.setStorageSync('productCodeList', res.data.productCodeList)
						uni.setStorageSync('areaCodeList', res.data.areaCodeList)
						if (uni.getStorageSync('areaCodeList')) {
							this.areaCodeList = uni.getStorageSync('areaCodeList')
						} else {
							this.areaCodeList = res.data.areaCodeList
						}
						this.productCodeList = uni.getStorageSync('productCodeList')

						res.data.channelCodes.map(item => {

							// this.menuList[3].detailLists.push({
							// 	title: item.name,
							// 	value: item.id
							// })
						})
						res.data.productCodes.map(item => {
							this.menuList[2].detailList.push({
								title: item.name,
								value: item.id
							})
						})
						res.data.siteBrands.map(item => {
							this.menuList[3].detailList.push({
								title: item.name,
								value: item.id
							})
						})
						let data = [{
								title: '全部',
								value: ''
							},
							{
								title: '一级油站',
								value: 'A'
							}, {
								title: '二级油站',
								value: 'B'
							}, {
								title: '三级油站',
								value: 'C'
							}, {
								title: '四级油站',
								value: 'D'
							}, {
								title: '一级油站',
								value: 'E'
							},
						]
					}
					console.log(this.menuList, uni.getStorageSync('areaCodeList'), '----')
				})
			},
			onSelected(e) {
				// console.log(e)
			},
			findPriceDetails() {
				ureaSiteApi.findPriceDetails().then(res => {
					res.data.forEach(item => {
						let obj = {
							title: item,
							value: item
						}
						this.ureaMenuList[1].detailList.push(obj)
					})
					console.log(this.ureaMenuList)
					console.log(this.productTypes)
				})
			},
			refreshLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.setStorageSync('location', res)
					},
					complete(res) {
						console.log('定位', res)
						var msgTip = ''
						if (res.errMsg == 'getLocation:fail auth deny') {
							msgTip = '请允许小程序获取您的位置'
						} else if (res.errMsg == 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
							msgTip = '请您打开手机定位'
						}
						if (msgTip) {
							setTimeout(() => {
								uni.showToast({
									title: msgTip,
									icon: 'none'
								})
							}, 300)
						}

					}
				})
			},
			getSiteList() {
				this.refreshLocation()
				let location = uni.getStorageSync('location')
				let data1 = {
					currentPage: this.currentPage,
					pageSize: 10,
					params: {
						siteAddress: this.siteAddress,
						...uni.getStorageSync('location'),
						siteBrand: this.filterDatas
							.siteBrand, //   备注：// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
						channelCode: this.filterDatas
							.channelCode, //   备注：// 渠道编码 ( OIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
						oilProductCode: this.filterDatas
							.oilProductCode, //   备注：// 油号选择 ( 0# 92# 92#)
						siteLevel: this.filterDatas
							.siteLevel,
						sort: this.filterDatas.sort ? this.filterDatas.sort : 'juli',
						provinceCode: this.filterDatas.provinceCode,
						cityCode: this.filterDatas.cityCode,
						areaCode: this.filterDatas.areaCode,
						distance: this.filterDatas.distance
					}
				}
				if (!uni.getStorageSync('Authorization')) {
					data1.params.role = 1
					oilSiteApi.readOnlySites(data1).then(res => {
						if (res.code == 20000) {
							this.siteList = this.siteList.concat(res.data.list)
							if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.loadStatus = 'nomore'
							} else {
								this.currentPage++
								this.loadStatus = 'load'
							}
						}
					})
				} else {
					oilSiteApi.getSiteList(data1).then(res => {
						if (res.code == 20000) {
							console.log(res, '+++')
							this.siteList = this.siteList.concat(res.data.list)
							if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.loadStatus = 'nomore'
							} else {
								this.currentPage++
								this.loadStatus = 'load'
							}
						}
					})
				}

			},

			toDetail(item) {
				let itemS = JSON.stringify(item)

				if (uni.getStorageSync('user')) {
					if (item.channelCode === 'TY') {
						uni.setStorageSync('OtherSiteInfo', item)
						uni.navigateTo({
							url: `/BagStation/pages/stationDetail/stationDetail?channerCode=${item.channelCode}`
						})
						return
					}
					uni.navigateTo({
						url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`
					})
				} else {
					uni.showModal({
						title: '请您登录',
						content: "登录星油加油才可以加油 |˛˙꒳​˙)♡",
						confirmText: '去登陆',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '../../../BagAuth/pages/login/login'
								})
							}
						}
					})
				}
			},
			nameSelect(value, item) {
				this.title2 = item.text
			},
			typeSelect(value, item) {
				this.title1 = item.text
			},
			optionSelect(value, item) {
				this.title3 = item.text
			},
			toMap() {
				uni.navigateTo({
					url: '/BagStation/pages/stationMap/stationMap',
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0


			},
			onInput() {
				clearTimeout(this.getSiteListTimer);
				this.getSiteListTimer = setTimeout(() => {
					this.currentPage = 1
					this.siteList = []
					this.getSiteList()
				}, 500);
			},
			onSearch() {
				clearTimeout(this.getSiteListTimer);
				this.getSiteListTimer = setTimeout(() => {
					this.currentPage = 1
					this.siteList = []
					if (this.TabHead == 0) {
						this.getSiteList()
					} else if (this.TabHead == 1) {
						this.getUreaList()
					}
				}, 500)

			}
		}
	}
</script>

<style scoped>
	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.headList_head {
		padding: 2% 0;
		width: 16%;
		text-align: center;
		font-size: 36rpx;
		font-weight: 700;
		border-bottom: 2px solid #fff;
		margin: 0% 3%;
	}

	.headList {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		padding: 1% 3%;
	}

	.ativeHead {
		color: red;
		border-bottom: 2px solid red;
	}

	.icon-gasstation {
		width: 1.2rem;
		height: 1.2rem;
	}

	.placeholder-hidden {
		/* min-height: 95upx; */
	}

	.fixed-top-site {
		/* top: 120rpx; */
		z-index: 4;
		position: fixed;
		width: 750upx;
	}

	.min-height-50 {
		min-height: 50vh;
	}
</style>