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
						// siteBrand: "", //   备注：// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
						// channelCode: "", //   备注：// 渠道编码 ( OIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
						// oilProductCode: "" //   备注：// 油号选择 ( 0# 92# 92#)
					}
			
				}
				oilSiteApi.getSiteList(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>