jiansheng/pages/mendainlist/mendainlist.vue

<template>
	<view>
		<image src="@/static/bg.png" mode="widthFix" class="bg"  style="width: 100%;height: 928rpx;"></image>
		<view class="top" @click="previous" :style="{'padding-top': top+'px'}">
			<view class="xuzou">
				<uni-icons type="left" size="24" style="margin-left: 25rpx;"></uni-icons>
				<text class="title">门店列表</text>
			</view>
			<image src="@/static/bg.png" mode="widthFix" class="hs"></image>
		</view>
		<view class="content" :style="{'top': (top+44)+'px'}">
			<view class="mendian">
				<view class="mddz" v-for="(item,index) in mendainlist" :key="index">
					<view class="mddz1" @click="xzmd(item)">
						<image class="mddz1img" :src="item.image.url" mode=""></image>
						<view class="mddz1wz">{{item.name}}</view>
					</view>
					<view class="mddz2">
						<view class="mdleft" @click.stop="handleNavigation(item)">
							<image class="mddz1img1" src="@/static/定位1.png" mode=""></image>
							<text class="dz">地址：{{item.address}}</text>
						</view>

						<image class="mddz1img2" src="@/static/电话o.png" mode="" @click.stop="makePhoneCall(item.mobile)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mendainlist: [],
				iswanjie:false,
				page:1,
				isshouye:'',
				top: 0,
				id: ""
			}
		},
		onLoad(e) {
			this.top = uni.getSystemInfoSync().statusBarHeight
			this.isshouye=e.item
			this.id = e.id
			console.log(e)
		},
		onShow() {
			this.mendainlist=[]
			this.storeList(this.page)
		},
		onReachBottom(){
			if(!this.iswanjie){
				this.storeList(this.page+1)
			}
		},
		methods: {
			handleNavigation(i) {
				uni.openLocation({
					longitude:Number(i.longitude),
					latitude:Number(i.latitude),
					name:i.name,
					address: i.address, 
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			makePhoneCall(e){
				uni.makePhoneCall({
					phoneNumber: e //仅为示例
				});
			},
			xzmd(item){
				if(this.isshouye!='shouye'){
					var item=JSON.stringify(item)
					uni.setStorageSync('xzmd','')
					uni.setStorageSync('xzmd',item)
					uni.navigateBack()
				}else{
					uni.$emit("changeStoreInfo",item)
					uni.navigateBack()
				}
			},
			previous() {
				uni.navigateBack()
			},
			storeList(page) {
				this.$api.storeList({
					page: page
				}).then(res => {
					let arr = res.data.list
					this.mendainlist = [...this.mendainlist, ...arr]
					if(res.data.total >=1){
						this.mendainlist.map(a=>a.id = a.store_id)
					}
					if(this.mendainlist.length>=res.data.total){
						this.iswanjie=true
					}
				})
			},
		}
	}
</script>

<style scoped>
	.mdleft{
		width: 620rpx;
	}
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		background: #f5f5f5;
	}
	.content{
		width: 100%;
		position: relative;
		left: 0;
		top: 0;
		z-index: 2;
	}
	.top {
		width: 100%;
		left: 0;
		z-index: 22;
		height: 88rpx;
		overflow: hidden;
		position: fixed;
	}
	.top .xuzou{
		width: 100%;
		height: 88rpx;
		display: flex;
		position: fixed;
		align-items: center;
		position: relative;
		z-index: 23;
	}
	.top .hs{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	.title {
		padding-left: 14rpx;
	}

	.mddz1img2 {
		width: 44rpx;
		height: 44rpx;
	}

	.mddz2 {
		margin-top: 25rpx;
		display: flex;
		justify-content: space-between;
	}

	.dz {
		margin-left: 17rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
	}

	.mddz1img1 {
		width: 22rpx;
		height: 27rpx;
	}

	.mddz1 {
		display: flex;
	}

	.mddz1img {
		width: 60rpx;
		border-radius: 10rpx;
		height: 60rpx;
	}

	.mddz1wz {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #222222;
		margin-left: 21rpx;
		margin-top: 12rpx;
	}

	.mddz {
		width: 680rpx;
		/* height: 152rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(19, 14, 4, 0.08);
		border-radius: 20rpx;
		margin-top: 24rpx;
		padding: 20rpx 17rpx;
	}

	.mendian {
		padding: 0 25rpx 25rpx;
		overflow: hidden;
	}
</style>