Переглянути джерело

Merge branch 'deploy' of http://git.chelingzhu.com/chelingzhu-web/qhsxKx-mini-html into deploy

lilei 4 роки тому
батько
коміт
e4ba434f4c
1 змінених файлів з 225 додано та 0 видалено
  1. 225 0
      pages/store/storeList.vue

+ 225 - 0
pages/store/storeList.vue

@@ -0,0 +1,225 @@
+<template>
+	<view class="content">
+		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom" @scroll="scroll">
+			<view class="list" @click="intoDetail" v-for="item in storeList" :key="item.id">
+				<u-image width="160rpx" height="160rpx" :border-radius="10" :src="item.icon?item.icon:'/static/img/mddef.jpg'"></u-image>
+				<view class="store-info">
+					<view class="name">
+						{{item.name}}
+					</view>
+					<view class="address">
+						{{item.addrDetail}}
+					</view>
+					<view class="location">
+						<view class="left">
+							<uni-icons class="icon" size="16" type="paperplane"></uni-icons>
+							<text>{{item.distance}} km</text>
+						</view>
+						<view class="right">
+							<u-icon class="icon" size="32" name="clock"></u-icon>
+							<text>{{item.time}} 营业</text>
+						</view>
+					</view>
+				</view>
+				<view class="list-right">
+					<u-image width="160rpx" height="160rpx" :border-radius="10" :src="getStoreStatus(item)"></u-image>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import uniIcons from "@/components/uni-icons/uni-icons.vue"
+	export default {
+		components: {
+			uniIcons
+		},
+		data() {
+			return {
+				storeList: [{
+						id: 1,
+						icon: '',
+						addrDetail: '陕西省西安市未央区北二环贞观路',
+						name: '贞观路站',
+						distance: 0.1,
+						time: '8:00-22:00',
+						status: 1
+					},
+					{
+						id: 10,
+						icon: '',
+						addrDetail: '陕西省西安市未央区北二环贞观路二环贞观路',
+						name: '贞观路站',
+						distance: 0.1,
+						time: '8:00-22:00',
+						status: 0
+					},
+					{
+						id: 11,
+						icon: '',
+						addrDetail: '陕西省西安市未央区北二环贞观路',
+						name: '贞观路站',
+						distance: 0.1,
+						time: '8:00-22:00',
+						status: 2
+					}
+				],
+				currentPosition: {
+					lat: '0',
+					lng: '0'
+				},
+				pageNo: 1,
+				pageSize: 10
+			}
+		},
+		onShow() {
+
+		},
+		onLoad() {
+			// 获取当前经纬度
+			let _this = this
+			uni.getLocation({
+				type: 'wgs84', // 默认wgs84
+				success: function(res) {
+					_this.currentPosition.lat = res.latitude;
+					_this.currentPosition.lng = res.longitude;
+					_this.gpsCompletion = true;
+					// 查询门店信息
+					// _this.getStoresList()
+				},
+				fail: function(res) {
+					console.log(res)
+					// 查询门店信息
+					// _this.getStoresList()
+				},
+			});
+		},
+
+		computed: {},
+		methods: {
+			getStoresList() {
+				uni.showLoading({
+					title: '正在加载...'
+				})
+				let lat = this.currentPosition.lat
+				let lng = this.currentPosition.lng
+				getStoresList({
+					pageNo: this.pageNo,
+					pageSize: this.pageSize,
+					lat: lat,
+					lng: lng
+				}).then(res => {
+					console.log(res)
+					if (res.status == 200) {
+						let list = res.data.list
+						if (list && list.length) {
+							list.map(item => {
+								if (item.addrDetail.indexOf("省") > 0 && item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") >
+									0) {
+									item.addrDetail = item.addrDetail
+								} else {
+									if (item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") > 0) {
+										item.addrDetail = item.addrProvinceName + item.addrDetail
+									} else if (item.addrDetail.indexOf("区") > 0) {
+										item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDetail
+									} else {
+										item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail
+									}
+								}
+								item.distance = item.distance ? Math.round(item.distance / 1000) : ''
+								item.star = getStarNum(item.level)
+							})
+							this.storeList = this.storeList.concat(list)
+						} else {
+							if (this.pageNo != 1) {
+								uni.showToast({
+									title: '已经是最后一页'
+								})
+								this.isLastPage = true
+							}
+						}
+					}
+					uni.hideLoading()
+				})
+			},
+			// 获取网点营业状态
+			getStoreStatus(item) {
+				switch (item.status) {
+					case 0:
+						return '/static/img/ygb.png'
+						break;
+					case 1:
+						return '/static/img/yyz.png'
+						break;
+					case 2:
+						return '/static/img/dky.png'
+						break;
+					default:
+						break;
+				}
+			},
+			// 进入网点详情
+			intoDetail (item) {
+				uni.navigateTo({
+					url: `/pages/store/storeDetail?id=${item.id}`
+				})
+			},
+			// 到达底部
+			reachBottom() {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		padding: 0 20rpx;
+
+		.scroll-Y {
+			width: 100%;
+			height: 100%;
+
+			.list {
+				padding: 20rpx 0;
+				display: flex;
+				border-bottom: 1px solid #eee;
+				.store-info {
+					display: flex;
+					flex: 1;
+					flex-direction: column;
+					justify-content: space-between;
+					padding: 0 20rpx;
+					.name {
+						font-size: 32rpx;
+						color: #000;
+					}
+					.address{
+						font-size: 26rpx;
+						padding: 10rpx 0;
+					}
+					.location {
+						display: flex;
+						align-items: center;
+						font-size: 24rpx;
+						.left {
+							margin-right: 20rpx;
+						}
+						.icon {
+							color: #999;
+							margin-right: 5rpx;
+						}
+					}
+				}
+
+				.list-right {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+		}
+	}
+</style>