jiansheng/pages/mendainlist/mendainlist.vue

<template>
	<view>
		<image src="@/static/bg.png" mode="" style="width: 100%;height: 928rpx;"></image>
		<view class="top" @click="previous">
			<view class="xuzou">
				<uni-icons type="left" size="18"></uni-icons>
				<text class="title">门店列表</text>
			</view>
		</view>
		<view class="mendian">
			<view class="mddz" v-for="(item,index) in mendainlist" :key="index" @click="xzmd(item)">
				<view class="mddz1">
					<image class="mddz1img" :src="item.image.url" mode=""></image>
					<view class="mddz1wz">{{item.name}}</view>
				</view>
				<view class="mddz2">
					<view class="" @click="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="makePhoneCall(item.mobile)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mendainlist: [],
				iswanjie:false,
				page:1,
				isshouye:''
			}
		},
		onLoad(e) {
			console.log(123,e);
			this.isshouye=e.item
		},
		onShow() {
			this.storeList(this.page)
		},
		onReachBottom(){
			if(!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()
				}
			},
			previous() {
				uni.navigateBack()
			},
			storeList(page) {
				this.mendainlist=[]
				this.$api.storeList({
					page: page
				}).then(res => {
					let arr = res.data.list
					if(arr.length<res.data.total){
						this.iswanjie=true
					}
					this.mendainlist = [...this.mendainlist, ...arr]
				})
			},
		}
	}
</script>

<style scoped>
	.top {
		display: flex;
		position: absolute;
		top: 96rpx;
		left: 20rpx;
	}

	.title {
		padding-left: 14rpx;
	}

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

	.mddz2 {
		margin-top: 32rpx;
		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;
		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 {
		position: absolute;
		top: 152rpx;
		left: 24rpx;
	}
</style>