yicangzongtai_app_240321/pages/user/shop/shopList.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="top u-plr30">
			<view class="bg-color">

			</view>
			<view class="zdtopbox">
				<view>
					<text class="iconfont position-ab u-mt20 u-ml30 u-D1D9D4">&#xe650;</text>
					<input placeholder="请输入店铺名字" placeholder-class="pc" v-model="param.shop_name" @keyup.enter.native="loadShopList"
					 @blur="loadShopList" />
				</view>
				<view class="br-rd20  u-bg-fff u-text-center mt52 userInfo  u-1A1A1A position-re">
					<image class="u-avatar83 head" :src="currShop.logo"></image>
					<view class="join-btn enter" v-if="notCurr ==true" @click="goShop(currShop)">进入店铺</view>
					<view class="u-font28">推荐店长：<text class="u-999">{{currShop.loser}}</text> </view>
					<view class="u-font36 u-bold">{{currShop.shop_name}}</view>
					
					<view class="u-font24 u-mt10"><text class="iconfont u-font30 u-193E2C u-mt5 u-mr15">&#xe68d;</text>
						{{currShop.address}}</view>
				</view>
			</view>
			<view>
				<view class="u-font34 u-181818 u-bold u-mt25">附近店铺</view>
				<view class="shop-list">
					<view class="shop-item u-bg-fff br-rd20" v-for="(v,i) in shopList" :key="i">
						<view class="u-font30 u-1A1A1A u-bold">店长：{{v.loser}}</view>
						<view class="join-btn curr" v-if="v.id==storageId">当前店铺</view>
						<view class="u-flex-center u-mt15">
							<view>
								<image class="u-avatar104" :src="v.logo"></image>
							</view>
							<view class="u-ml20">
								<view class="u-font28 u-1A1A1A">{{v.shop_name}}</view>
								<!-- {{v.province_name}}{{v.city_name}}{{v.area_name}} -->
								<view class="u-font24 u-999"> <text class="u-FF0000 u-mr5">{{v.distance | distance}} </text>| {{v.address}}</view>
							</view>
						</view>
						<view class="u-mt20 wt444 ml100">
							<button class="u-btn-two" @click="goShop(v)">进入店铺</button>
						</view>
					</view>
				</view>
			</view>
			<!--页面加载动画-->
			<ldLoading isFullScreen :active="loading"></ldLoading>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '店铺',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A'
				},
				shopList: [],
				loading: false,
				currShop: {},
				notCurr: null,
				storageId:null,
				param: {
					shop_name: '',
					shop_id: null,
					lon: null,
					lat: null
				}

			}
		},
		created() {
			this.loading = true;
			this.getIndexList()
			let shop = uni.getStorageSync('shop')
			if(shop){
				this.storageId = shop.id
			}
		},
		filters: {
		  distance: function (value) {
			  let res = null;
			  if(value){
				  if(value>1000){
				  	res = (value*0.001).toFixed(4) +'km'
				  }else{
				  	res = value.toFixed(4)+'m'
				  }
			  }else{
				  res = '暂无距离'
			  }
			  return res;
		  }
		},
		methods: {
			// 获取主页数据
			getIndexList() {
				this.$http.get('/yxt/shop/getShop')
					.then(res => {
						uni.stopPullDownRefresh()
						this.loading = false;
						if (res.data && res.code == 200) {
							this.currShop = res.data;
							this.storageId = res.data.id;
							this.loadShopList();
						}
					})
			},
			goShop(e) {
				uni.setStorageSync('shop', e);
				let prevPage = this.$mUtil.getPrevPage();
				prevPage.onLoad();
				uni.navigateBack({
					delta: 1
				})
			},
			//查看店铺列表
			loadShopList() {
				let location = uni.getStorageSync('LOCATION');
				
				if (this.currShop) {
					this.param.shop_id = this.storageId;
					this.param.lon = location.longitude;
					this.param.lat = location.latitude;
					this.$http.get('/yxt/shop/nearbyShop', this.param)
						.then(res => {
							if (res && res.code == 200) {
								this.shopList = res.list;
								for (let item of res.list) {
									if (item.id == this.storageId) {
										this.notCurr = true;
										break;
									}
								}
							}
							this.loading = false;
						}).then(res => {
							this.loading = false;
						})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.position-ab {
		position: absolute;
	}

	.u-193E2C {
		color: #193E2C;
	}

	.mt52 {
		margin-top: 52rpx;
	}

	.top {
		position: relative;
		overflow: hidden;
	}

	.br-rd20 {
		border-radius: 20rpx;
	}

	.wt444 {
		width: 444rpx;
	}

	.ml100 {
		margin-left: 100rpx;
	}

	.bg-color {
		position: absolute;
		top: 0;
		left: -13%;
		width: 126%;
		height: 280rpx;
		text-align: center;
		background: -webkit-linear-gradient(to bottom, #0B844A, #284534);
		background: linear-gradient(180deg, #0B844A, #284534);
		border-radius: 0 0 50% 50%;
		z-index: 1;
	}

	.zdtopbox {
		position: relative;
		z-index: 1;

		input {
			width: 100%;
			height: 74rpx;
			line-height: 74rpx;
			border-radius: 50rpx;
			opacity: 0.4;
			background-color: #ABC5B5;
			padding-left: 78rpx;
			box-sizing: border-box;
		}

		.pc {
			font-size: 22rpx;
			color: #193E2C !important;
		}

		.userInfo {
			padding-bottom: 38rpx;
		}

		.head {
			margin-top: -42rpx;
		}

	}

	.shop-list {
		padding-bottom: 48rpx;

		.shop-item {
			padding: 28rpx 20rpx;
			margin-top: 20rpx;
			position: relative;
		}
	}

	.join-btn {
		position: absolute;
		right: 2%;
		padding: 3rpx 15rpx;
		border-radius: 2px;
		color: 26rpx;
		color: white;
	}

	.curr {
		background-color: #FFB100;
		top: 27rpx;
	}

	.enter {
		background-color: #00A246;
		// top: 60%;

	}
</style>