yicangzongtai_app_240321/components/shopList.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#999999">
			<template v-slot:left>
				<view class="city-text" @click="addressShow=true">
					<view>{{cityName}}</view>
					<image mode="aspectFit" src="/static/convenienceService/drop-arrow.png"></image>
				</view>
				<view class="searchBox">
					<image src="/static/convenienceService/search.png" mode=""></image>
					<input v-model="param.title" type="text" @confirm="getShopList()" placeholder-style="color:#B3B3B3"
						placeholder="请输入关键字" @input="search()" />
				</view>
			</template>
			<!-- <template v-slot:center maxSlot>
				<view class="searchBox">
					<image src="/static/convenienceService/search.png" mode=""></image>
					<input v-model="param.title" type="text" @confirm="sreach()" placeholder-style="color:#B3B3B3"
						placeholder="请输入关键字" />
				</view>
			</template> -->
		</navbar>

		<!-- <view class="tabBox">
			<view class="active">推荐</view>
			<view>商超</view>
			<view>茶舍</view>
			<view>美容</view>
			<view>商超</view>
			<view>茶舍</view>
			<view>美容</view>
			<view>商超</view>
			<view>茶舍</view>
			<view>美容</view>
			<view>商超</view>
			<view>茶舍</view>
			<view class="mr0">美容</view>
		</view> -->
		<view class="tabsBox">
			<u-tabs name="cate_name" :bar-width="60" active-color="#3775F6" inactive-color="#666666" :list="typeList"
				is-scroll :current="tabCurrent" @change="tabsChange"></u-tabs>
		</view>
		<view class="shopListBox" v-if="list.length>0">
			<view class="shopItem" v-for="(v,i) in list" :key="i" @click="goShopDetails(v)">
				<view class="shopItem_title">{{v.shop_name}}</view>
				<view class="shopItem_data">
					<view class="rateBox">
						<view>
							<rate :value="Math.round(v.average)"></rate>
						</view>
						<view>{{v.average}}分</view>
					</view>
					<view class="shopItem_data_addr">
						<image src="/static/convenienceService/location1.png" mode=""></image>
						{{v.city_name}}
					</view>
					<view class="shopItem_data_distance">距离：{{Math.round(v.distance/1000*100)/100}}KM</view>
				</view>

				<view class="gooodsBox" v-if="v.list&&v.list.length>0">
					<view class="gooods_item" v-for="(k,j) in v.list" :key="j">
						<image :src="k.cover" mode=""></image>
						<view class="gooods_item_r">
							<view class="gooods_item_r_title">{{k.title}}</view>
							<view>
								<view class="gooods_item_r_price" v-if="k.market_price">
									<text>¥</text>
									{{(k.market_price+'').split('.').length>=1?(k.market_price+'').split('.')[0]:0}}
									<text>.{{(k.market_price+'').split('.').length>=2?(k.market_price+'').split('.')[1]:'00'}}</text>
								</view>
								<view class="gooods_item_r_expense">消费 {{k.result_sale_num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="lookOther" v-if="v.service_goods_total>2">
					查看其他{{v.service_goods_total-2}}个商品
					<text class="iconfont2">&#xe65f;</text>
				</view>
			</view>
		</view>
		<view>
			<noData v-if="list.length<=0"></noData>
		</view>
		<view class="loadmoreBox" v-if="list.length>0">
			<u-loadmore :status="status" />
		</view>
		<!-- 选择地区 -->
		<u-select v-model="addressShow" mode="mutil-column-auto" :list="cityTree" @confirm="addressConfirm">
		</u-select>
	</view>
</template>

<script>
	import noData from "@/components/noData/nodata.vue"
	import rate from "@/components/rate.vue"
	export default {
		components: {
			rate,
			noData
		},
		data() {
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				config: {
					back: false,
					title: '',
					color: 'black',
					backgroundColor: [1, "#fff"],
					statusBarFontColor: 'black',
					leftSlot: true
				},
				value: "",
				status: "nomore",
				addressShow: false,
				cityTree: [],
				param: {},
				list: [],
				cityName: "长沙市",
				typeList: [],
				tabCurrent: 0,
				setTime: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.getCitys();
				this.getType()
			},
			tabsChange(index) {
				this.tabCurrent = index;
				this.getShopList()
			},
			// 获取类型
			getType() {
				let that = this;
				this.$http.get('/classify/all').then(res => {
					if (res && res.code == 200) {
						this.typeList=res.list;
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							success: function(res) {
								that.cityName = res.address ? res.address.city : '';
								that.param.lon = res.longitude;
								that.param.lat = res.latitude;
								that.getShopList()
								if (!that.cityName) {
									uni.request({
										url: `https://restapi.amap.com/v3/geocode/regeo?key=47798318a0d39673a1fb9729aa6a468a&location=${res.longitude+','+res.latitude}`, //仅为示例，并非真实接口地址。
										method: "GET",
										header: {
											"content-type": "application/x-www-form-urlencoded"
										},
										success: (re) => {
											console.log(re);
											that.cityName = re.data.regeocode
												.addressComponent.city;
										}
									});
								}
							},
							complete(e) {
								console.log(e)
							}
						});
						// #ifdef H5
						this.getShopList()
						// #endif
					}
				})
			},
			// 跳转 门店详情
			goShopDetails(item) {
				uni.navigateTo({
					url: "/pages/convenienceService/shopDetails?shopId=" + item.shop_id
				})
			},
			// 跳转 搜索
			// goSearch() {
			// 	uni.navigateTo({
			// 		url: "/pages/product/search/productList"
			// 	})
			// },
			// 获取城市
			getCitys() {
				this.$http.get('/cnarea/tree-lbs/city').then(res => {
					if (res && res.code == 200) {
						this.cityTree = res.tree.children
						this.cityTree.forEach(v => {
							if (v.children.length <= 0) {
								v.children = [{}]
							}
						})
					}
				})
			},
			// 选择地区
			addressConfirm(e) {
				this.param.city_code = e[1].value || e[0].value;
				this.cityName = e[1].label || e[0].label;
				// this.param.lon = e[1].data.longitude || e[0].data.longitude;
				// this.param.lat = e[1].data.latitude || e[0].data.latitude;
				console.log(e)
				this.getShopList()
			},
			// 门店列表
			getShopList() {
				this.param.category_id = this.typeList[this.tabCurrent].id;
				this.$http.get('/service/goods/nearby', this.param).then(res => {
					uni.stopPullDownRefresh()
					if (res && res.code == 200) {
						this.list = res.list;
					}
				})
			},
			// 搜索防抖
			search() {
				clearTimeout(this.setTime)
				this.setTime = setTimeout(() => {
					this.getShopList()
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.city-text {
		margin-left: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #1a1a1a;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		view {
			max-width: 100rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		image {
			width: 20rpx;
			height: 12rpx;
			margin-left: 5rpx;
			vertical-align: middle;
		}
	}

	.searchBox {
		width: 80%;
		display: flex;
		padding: 10rpx 35rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 36rpx;
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		margin-top: 10rpx;

		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 15rpx;
			flex-shrink: 0;
		}

		input {
			text-align: left;
		}
	}

	.tabsBox {
		padding-top: 20rpx;
		position: sticky;
		top: 88rpx;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		background: #ffffff;
		z-index: 1;
	}

	.tabBox {
		padding: 40rpx 40rpx 20rpx 40rpx;
		display: flex;
		overflow: auto;
		position: sticky;
		top: 88rpx;
		background: #ffffff;
		z-index: 1;

		>view {
			color: #666666;
			font-weight: 28rpx;
			margin-right: 50rpx;
			padding-bottom: 15rpx;
			flex-shrink: 0;
		}

		>.active {
			font-size: 30rpx;
			color: #2BB42D;
			position: relative;

			&::after {
				display: block;
				content: "";
				width: 100%;
				height: 4rpx;
				background: #2BB42D;
				border-radius: 2rpx;
				position: absolute;
				bottom: 0%;
				left: 0;
			}
		}
	}

	.shopListBox {
		padding: 30rpx 30rpx 0 30rpx;

		.shopItem {
			border-bottom: 1rpx solid #E6E6E6;
			padding-bottom: 40rpx;
			margin-bottom: 40rpx;

			.shopItem_title {
				font-size: 34rpx;
				color: #1A1A1A;
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			.shopItem_data {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;

				image {
					width: 22rpx;
					height: 30rpx;
				}

				>view {
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
					}
				}

				.shopItem_data_distance {
					color: #666666;
				}
			}

			.gooodsBox {
				.gooods_item {
					display: flex;
					margin-top: 20rpx;

					image {
						width: 136rpx;
						height: 136rpx;
						margin-right: 35rpx;
						border-radius: 10rpx;
						flex-shrink: 0;
					}

					.gooods_item_r {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						>view {
							display: flex;
							align-items: center;
						}

						.gooods_item_r_title {
							font-size: 26rpx;
							color: #1A1A1A;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.gooods_item_r_price {
							font-size: 36rpx;
							color: #FF6600;
							font-weight: 600;

							text {
								font-size: 20rpx;
								display: inline-block;
								margin-right: 10rpx;
							}
						}

						.gooods_item_r_expense {
							font-size: 26rpx;
							color: #666666;
							margin-left: 52rpx;
						}
					}
				}
			}

			.lookOther {
				font-size: 24rpx;
				color: #333333;
				width: 288rpx;
				height: 59rpx;
				border-radius: 8rpx;
				background: #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx auto 0;
			}
		}
	}

	.loadmoreBox {
		margin-bottom: 10rpx;
	}

	.mr0 {
		margin-right: 0 !important;
	}

	/deep/ .hx-navbar__content__main_center_flex:first-child {
		flex: 10;
	}

	/deep/ .hx-navbar__content__main_center_flex:last-child {
		display: none;
	}

	/deep/.hx-navbar__content__main_left {
		margin: 0 !important;
		width: 100%;
		justify-content: space-between;
	}
</style>