BD-LDBD-UNI/pages/preCarWash/chooseShop/index.vue

<template>
	<view class="">
		<view class="search">
			<view class="searchCard">
				<view class="input">
					<view style="min-width: 120rpx;">
						<text class="iconfont icon-sousuo2"></text>
					</view>
					<!-- <form @submit.prevent="submit"></form> -->
					<input style="margin-left: -34rpx;" type="text" placeholder="搜索店内服务" v-model="search"
						placeholder-class="co" />
					<view class="bnt" @click="submit">搜索</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="shopBody" v-for="(item, index) in shopList" :key="index" @tap="goBack(item)">
				<view class="classBody" style="margin-left: 30rpx;">
					<image class="classImg" :src="baseImagePath+item.logoUrl">
					<view style="padding: 0 0 0 22rpx;display: flex;flex-direction: column;justify-content: center;">
						<view class="classBodyHead">
							{{item.name}}
						</view>
						<view class="classBodyContent">
							{{item.address}}
						</view>
					</view>
					<view class="viewRight">
						<image class="location" :src="require('../../../static/address.png')">
						<view class="locationNum">
							{{item.distance}}km
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSelectStore
	} from "@/api/shop.js"
	const app = getApp();
	export default {
		data: function() {
			return {
				baseImagePath: this.baseImagePath,
				longitude: app.globalData.longitude,
				latitude: app.globalData.latitude,
				shopList: [],
				pageNo: 1,
				pageSize: 20,
				search:"",
				page:'',
				pageType : ''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log('option',option);
			this.page = option.page
			this.pageType = option.type
			this.getPage()
					
		},
		onReachBottom() {
			this.getPage()
		},
		methods: {
			submit(){
				let that = this;
				that.pageNo = 1;
				that.shopList = [];
				let data = {
					pageNo: that.pageNo,
					pageSize: that.pageSize,
					type : 2,
					longitude: that.longitude,
					latitude: that.latitude,
					name:that.search,
					isRepair:null,
					isCarwash:null,
				}
				console.log(this.pageType === "washCar",'this.pageType === "washCar"');
				if(this.pageType === "washCar"){
					data.isCarwash = 1
				}else{
					data.isRepair = 1
				}
				getSelectStore(data).then(res => {
					that.shopList = that.shopList.concat(res.data.rows)
					that.pageNo++
				})
			},
			getPage(){
				let that = this;
				let data = {
					pageNo: that.pageNo,
					pageSize: that.pageSize,
					isRepair:null,
					isCarwash:null,
					type : 2,
					longitude: that.longitude,
					latitude: that.latitude
				}
				console.log(this.pageType === "washCar",'this.pageType === "washCar"');
				if(this.pageType === "washCar"){
					data.isCarwash = 1
				}else{
					data.isRepair = 1
				}
				getSelectStore(data).then(res => {
					that.shopList = that.shopList.concat(res.data.rows)
					that.pageNo++
				})
			},
			/* routerTo(item) {
				this.$yrouter.push({
					path: "/pages/shop/shopDetail/index?id=" + item.id
				});
			} */
			goBack(datas) {
				console.log(datas);
				if(this.page === 'index'){
					this.$yrouter.push({
						path: "/pages/shop/shopDetail/index?id=" + datas.id
					});
				}else{
					uni.setStorageSync('chooseShop',datas)
					uni.$emit('chooseShop',datas)
					uni.navigateBack({
						delta: 1
					})
				}
			},
		}
	}
</script>

<style>
	page {
		background: #EDEDED;
	}

	.classBodyHead {
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 31rpx;
		margin-bottom: 32rpx;
	}

	.classBodyContent {
		width: 370rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 31rpx;
	}

	.viewRight {
		height: calc(100% - 56rpx);
		display: flex;
		align-items: center;
		position: absolute;
		right: 30rpx;
		bottom: 0;
	}

	.location {
		width: 23rpx;
		height: 23rpx;
	}

	.locationNum {
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		line-height: 31rpx;
		margin-left: 6rpx;
	}

	.classImg {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #D10498 0%, #D21728 100%);
		border-radius: 8rpx;
	}

	.classBody {
		display: flex;
		align-items: center;
	}

	.search {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 0px 0px rgba(55, 55, 55, 0.1);
	}

	.searchCard {
		width: 710rpx;
		height: 70rpx;
		background: #ECECEC;
		border: 1px solid #FFFFFF;
		border-radius: 34rpx;
		margin-left: 20rpx;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 35rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		background: #ECECEC;
		padding-left: 37rpx;
		line-height: 70rpx;
		border-radius: 34rpx;
	}

	.acea-row {
		display: flex;
		flex-wrap: wrap;
	}

	.co {
		background: #ECECEC;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bnt {
		width: 130rpx;
		height: 58rpx;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 29rpx;
		line-height: 58rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: relative;
		right: 8rpx;
	}

	.shopBody {
		width: 710rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		position: relative;
		display: flex;
		align-items: center;
	}
</style>