tjqPhone/pages/index/components/indexComponents.vue

<template>
	<view :style="colorStyle">
		<!-- 附近门店 -->
		<view class="nearby" v-if="header">
			<view class="store acea-row row-middle">
				<view class="btn" :class="{'activeColor':active==1}" @click="btnFn(1)">
					附近门店
				</view>
				<view class="btn" :class="{'activeColor':active==2}" @click="btnFn(2)">
					常用门店
				</view>
				<input type="text" placeholder="搜索门店" class="input" @input="setValue"
					v-model="content.keyword"></input>
				<view class="search" @click="searchMap()">
					<text class="iconfont icon-sousuo6" />
				</view>
			</view>
		</view>
		<!-- 门店列表 -->
		<view class="content" v-if="info.length>0">
			<view class="list acea-row row-between-wrapper" v-for="(item,index) in info" :key="index"
				 :class="{active:sortIndex==item.id}" @click="navTuShopIndex">
				 <view class="flex">
				 	<image :src="item.image" class="storeImg" mode="scaleToFill"></image>
				 	<view class="left">
				 		<view class="name line2">
				 			{{item.name}}
				 		</view>
				 		<view class="adress acea-row">
				 			
				 			<view class="con line2"><text class="iconfont icon-dingwei2" />{{item.detailed_address}}</view>
				 		</view>
				 		<view class="adress">
				 			<text class="iconfont icon-yingyeshijian2" />
				 			营业时间：{{item.day_time}}
				 		</view>
				 	</view>
				 </view>
				<!-- <text class="iconfont icon-xuanzhong6" v-if="sortIndex==item.id"></text> -->
				
				<view class="right flex">
					<view class="distance">
						距离{{item.range}}km
					</view>
					<view class="telephone">
						<view class="phone" @click.stop="callPhone(item)">
							<text class="iconfont icon-dianhua"></text>
						</view>
						<view class="phone" @click.stop="showMaoLocation(item)">
							<text class="iconfont icon-dingwei2"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 缺省页 -->
		<view class="default" v-if="info.length==0">
			<image :src="imgHost+'/statics/images/store-default.png'" mode="" class="img"></image>
			<view class="text">
				暂无门店信息，再去试试其他地址吧~
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import colors from "@/mixins/color";
	import {
		getList
	} from '@/api/new_store.js'
	export default {
		mixins: [colors],
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				sortIndex: 0,
				active: 1,
				content: {
					// 自己的位置
					latitude: uni.getStorageSync('user_latitude'),
					longitude: uni.getStorageSync('user_longitude'),
					store_type: 1,
					keyword: "",
					limit: 1000,
					page: 1
				},
				info: [],
				map: 1,
				header: 1,
				comeType: 0,
				// 门店位置
				latitudeStore: 0,
				longitudeStore: 0,
				covers: []
			};
		},
		methods: {
			// 跳转到门店详情页面
			navTuShopIndex(){
				uni.navigateTo({
					url: '/pages/store_cate/store_cate_index',
				});
			},
			// 门店列表
			getlist(address) {
				let cot = this.content;
				let content = {
						store_type:cot.store_type,
						keyword: cot.keyword,
						limit:cot.limit,
						page:cot.page,
				}
				console.log(address)
				if(address){
					// 自己的位置
					content.latitude=address.latitude;
					content.longitude=address.longitude
				}else{
					// 自己的位置
					content.latitude=uni.getStorageSync('user_latitude');
					content.longitude=uni.getStorageSync('user_longitude');
				}
				getList(content).then(res => {
					this.info = res.data
					res.data.forEach(item => {
						if (this.sortIndex == item.id) {
							this.latitudeStore = item.latitude;
							this.longitudeStore = item.longitude;
							this.covers.push({
								title: item.name,
								latitude: item.latitude,
								longitude: item.longitude,
								iconPath: item.image,
								width: 30,
								height: 30
							})
						}
					})
				})
			},
			// 输入关键字搜索门店
			setValue(e) {
				this.getlist()

			},
			// 点击高亮
			// activeFn(row) {
			// 	this.sortIndex = row.id
			// 	if (this.comeType) {
			// 		uni.$emit("handClick", {
			// 			latitude: row.latitude,
			// 			longitude: row.longitude,
			// 			store_id: row.id
			// 		});
			// 		uni.navigateBack();
			// 	}
			// },
			// 搜索门店
			searchMap() {
				// this.header = 0
			},
			// 收起地图
			putMap() {
				if (this.map == 1) {
					this.map = 0
				} else if (this.map == 0) {
					this.map = 1
				}

			},
			// 打电话
			callPhone(row) {
				uni.makePhoneCall({
					phoneNumber: row.phone //仅为示例
				});
			},
			btnFn(num) {
				switch (num) {
					case 1:
						this.active = 1
						this.content.store_type = 1
						break;
					case 2:
						this.active = 2
						this.content.store_type = 2
						break;
				}
				this.getlist()
			},
			showMaoLocation(e) {
				let self = this;
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.seeLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude),
						name: e.name,
						scale: 13,
						address: `${e.address}-${e.detailed_address}`,
					}).then(res => {})
				} else {
					// #endif	
					uni.openLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude),
						name: e.name,
						address: `${e.address}-${e.detailed_address}`,
						success: function() {
							Number
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
	}

	.active {
		position: relative;
		border: 1px solid var(--view-theme) !important;

		.icon-xuanzhong6 {
			font-size: 46rpx;
			position: absolute;
			bottom: -4rpx;
			right: -6rpx;
			color: var(--view-theme);
		}
	}

	.activeColor {
		background-color: var(--view-theme) !important;
		color: #fff !important;
	}

	.nearby {
		width: 100%;
		background-color: #fff;
		box-shadow: 0px -2px 22px 0px rgba(0, 0, 0, 0.0400);
		.store {
			height: 132rpx;
			padding: 0 30rpx;

			.input {
				padding-left: 30rpx;
				height: 60rpx;
				background: #F5F5F5;
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: 400;
			}

			.btn {
				margin-right: 16rpx;
				width: 160rpx;
				height: 56rpx;
				background: #F5F5F5;
				border-radius: 29rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
			}

			.put {
				color: #666666 !important;
				margin-left: 96rpx;
				background-color: #fff !important;

				.icon-xiangshang {
					margin-right: 10rpx;
					color: #666666;
					font-size: 24rpx;
				}

				.icon-xiangxia {
					margin-right: 10rpx;
					color: #666666;
					font-size: 24rpx;
				}

			}

			.search {
				position: absolute;
				right: 30rpx;
				text-align: center;
				line-height: 56rpx;
				width: 56rpx;
				height: 56rpx;
				background: #F5F5F5;
				border-radius: 50%;
			}
		}
	}

	.content {

		width: 100%;
		height: 100%;
		padding: 0 30rpx;

		.list {
			margin-top: 20rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 28rpx 30rpx;
			border: 1px solid #fff;
			.flex{
				flex-grow: 1;
			}
			.storeImg{
				width: 200rpx;
				height:200rpx;
			}
			.left {
				width: 300rpx;
				flex-grow: 1;
				padding: 0 20rpx;
				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				.adress {
					width: 100%;
					margin-top: 18rpx;
					word-wrap: break-word;
					font-size: 28rpx;
					font-weight: 400;
					color: #888888;

					.con {
						flex-shrink: 1;
					}

					.icon-dingwei2 {
						margin-right: 8rpx;
						font-size: 18rpx;
						color: #ccc;
						margin-top: 6rpx;
					}

					.icon-yingyeshijian2 {
						margin-right: 8rpx;
						font-size: 18rpx;
						color: #ccc;
					}
				}
			}

			.right {
				align-items: center;
				.gostore {
					font-size: 22rpx;
					font-weight: 400;
					color: var(--view-theme);
				}

				.distance {
					margin-top: 14rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #999999;
					flex-grow: 1;
				}

				.telephone {
					margin-top: 14rpx;
					display: flex;
					.phone:nth-child(2){
						margin-left: 30rpx;
					}
					.phone {
						position: relative;
						width: 60rpx;
						height: 60rpx;
						background: var(--view-minorColorT);
						border-radius: 50%;
						text-align: center;
						line-height: 60rpx;
						z-index: 10;

						.icon-dingwei2 {
							font-size: 32rpx;
							color: var(--view-theme) !important;
						}

						.icon-dianhua {
							font-size: 32rpx;
							color: var(--view-theme) !important;
						}
					}

				}
			}
		}
	}

	.lyric-enter,
	.lyric-leave-to {
		opacity: 0;
		transform: translateY(60px);
	}

	.lyric-enter-to,
	.lyric-leave {
		opacity: 1;

	}

	.lyric-enter-active,
	.lyric-leave-active {
		transition: all 0.3s;
	}

	.default {
		display: flex;
		flex-direction: column;
		align-items: center;

		.img {
			width: 414rpx;
			height: 256rpx;
		}

		.text {
			margin-top: 54rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
	}
</style>