chenrui 4 년 전
부모
커밋
db6524f217
3개의 변경된 파일159개의 추가작업 그리고 82개의 파일을 삭제
  1. 24 0
      api/station.js
  2. 50 34
      pages/index/index.vue
  3. 85 48
      pages/store/store.vue

+ 24 - 0
api/station.js

@@ -0,0 +1,24 @@
+import axios from '@/libs/axios.js';
+
+// 获取首页网点列表
+export const stationList = params => {
+  return axios.request({
+    url: `station/query`,
+    method: 'post',
+	data: params
+  })
+}
+// 网点详情
+export const stationDetail = params => {
+  return axios.request({
+    url: `station/findById/${params.id}`,
+    method: 'get'
+  })
+}
+// 查询网点的设备列表
+export const stationDevice = params => {
+  return axios.request({
+    url: `device/findById/${params.stationNo}`,
+    method: 'get'
+  })
+}

+ 50 - 34
pages/index/index.vue

@@ -26,22 +26,28 @@
 		<view class="storeList">
 			 <u-section title="附近的网点" :right="false" line-color="#01c9b2"></u-section>
 			 <view class="stores-box">
-				 <view class="stores-item" v-for="item in 3" @click="viewStore(item)">
-					 <view class="s-name">
+				<view class="stores-item" v-for="item in stationDataList" @click="viewStore(item)">
+					<view class="s-name">
+						<view>{{ item.name }}</view>
+					</view>
+					<view class="s-address">
 						<view>
-							网点名称啊撒地方就拉萨附近士大夫
+							<text>{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.address }}</text>
 						</view>
-					 </view>
-					 <view class="s-address">
-						<view><text>陕西西安高新二路十字103号</text></view>
-						<view><u-icon name="map-fill" color="#01c9b2" size="30"></u-icon> 1.3KM</view>
-					 </view>
-					 <view class="s-time">
-						 <view>
-							 营业时间:<text>9:00 - 11:00 , 12:00 - 17:00</text>
-						 </view>
-					 </view>
-				 </view>
+						<view>
+							<u-icon name="map-fill" color="#01c9b2" size="30"></u-icon>
+							{{ item.distanct.distance ? (item.distanct.distance/1000).toFixed(1) : 0 }}KM
+						</view>
+					</view>
+					<view class="s-time">
+						<view>
+							营业时间:
+							<text v-for="(tItem, tInd) in item.deliveryTimeRuleItemList" :key="tInd">
+								{{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == item.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
+							</text>
+						</view>
+					</view>
+				</view>
 			 </view>
 		</view>
 	</view>
@@ -58,28 +64,12 @@
 	import {
 		getLookUpDatas
 	} from '@/api/data.js'
+	import { stationList } from '@/api/station.js'
 	export default {
 		data() {
 			return {
-				imageTopList:[
-					
-				],
-				goodsList:[
-					{
-						id: 21312312321,
-						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
-						src: '/static/goods.png',
-						price: 300,
-						status: 0
-					},
-					{
-						id: 6465465465,
-						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
-						src: '/static/goods.png',
-						price: 50,
-						status: 1
-					},
-				]
+				imageTopList: [],
+				stationDataList: [] //  附近网点列表
 			}
 		},
 		onLoad() {
@@ -87,6 +77,8 @@
 			this.getCodeList('RUBBISH_TYPE','vuex_rubbishType')
 			// 获取顶部轮播图
 			this.getbannerList()
+			//  获取经纬度
+			this.getLocation()
 			// 查询购物车列表
 			this.getCartList()
 			// 加入购物车
@@ -113,6 +105,30 @@
 					}
 				})
 			},
+			//  获取经纬度
+			getLocation() {
+				const _this = this;
+				uni.getLocation({
+					type: 'wgs84',
+					success: function(res) {
+						_this.getStationList(res.longitude, res.latitude)
+					},
+					fail: function(error) {
+						console.log(error)
+						uni.showToast({ icon: 'none', title: '定位失败' })
+					}
+				});
+			},
+			//  获取网点列表
+			getStationList(lng, lat) {
+				stationList({ lng: lng, lat: lat }).then(res => {
+					if (res.status == 200) {
+						this.stationDataList = res.data
+					} else {
+						this.stationDataList = []
+					}
+				});
+			},
 			// 获取banner
 			getbannerList(){
 				bannerList({type:'banner',location:'MALL_TOP'}).then(res=>{
@@ -212,7 +228,7 @@
 			// 查看网点
 			viewStore(item){
 				uni.navigateTo({
-					url: "/pages/store/store"
+					url: '/pages/store/store?id=' + item.id + '&stationNo=' + item.stationNo
 				})
 			}
 		}

+ 85 - 48
pages/store/store.vue

@@ -11,82 +11,119 @@
 		style="width: 100%; height:30%;">
 		</map>
 		<!-- 网点信息及设备 -->
-		<view class="details">
+		<view class="details" v-if="stationData">
 			<view class="details-address">
-				<view>华金基座A座</view>
-				<view>西安市未央路北二环真光路A座12号</view>
-				<view>营业时间:9:00 - 12:00</view>
+				<view>{{ stationData.name }}</view>
+				<view>{{ stationData.provinceName }}{{ stationData.cityName }}{{ stationData.districtName }}{{ stationData.address }}</view>
+				<view>
+					营业时间:
+					<text v-for="(tItem, tInd) in stationData.deliveryTimeRuleItemList" :key="tInd">
+						{{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == stationData.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
+					</text>
+				</view>
 			</view>
 			<!-- 设备列表 -->
 			<view class="details-dev">
-				<view class="details-dev-box" v-for="item in 3">
-					<view class="details-dev-title">设备编号:<text>SDFLSJLSAFJLJSLFJLKF</text></view>
+				<view class="details-dev-box" v-for="item in deviceData">
+					<view class="details-dev-title">设备编号:<text>{{ item.srcDeviceCode }}</text></view>
 					<view class="details-dev-cons">
-						<view class="dev-item">
-							<view>
-								<u-image height="80" width="80" src="/static/yw.png"></u-image>
-							</view>
-							<view>
-								<view>废旧衣物</view>
-								<text>100g/1乐豆</text>
-							</view>
-						</view>
-						<view class="dev-item">
-							<view>
-								<u-image height="80" width="80" src="/static/zhizhang.png"></u-image>
-							</view>
-							<view>
-								<view>废旧纸张 <u-tag text="已满" size="mini" mode="dark" type="info" /></view>
-								<text>100g/1乐豆</text>
-							</view>
-						</view>
-						<view class="dev-item">
+						<view class="dev-item" v-for="boxItem in item.deviceTypeBoxList">
 							<view>
-								<u-image height="80" width="80" src="/static/jinshou.png"></u-image>
+								<u-image height="80" width="80" :src="`/static/${boxItem.rubbishType}.png`"></u-image>
 							</view>
 							<view>
-								<view>废旧金属</view>
-								<text>100g/1乐豆</text>
-							</view>
-						</view>
-						<view class="dev-item">
-							<view>
-								<u-image height="80" width="80" src="/static/dhai.png"></u-image>
-							</view>
-							<view>
-								<view>有害垃圾</view>
-								<text>100g/1乐豆</text>
+								<view>
+									{{ boxItem.rubbishTypeDictValue }}
+									<u-tag v-if="boxItem.flag==1" text="已满" size="mini" mode="dark" type="info" />
+								</view>
+								<text>{{ getRule(boxItem.rubbishType).rubbishWeight }}g/{{ getRule(boxItem.rubbishType).goleNum }}乐豆</text>
 							</view>
 						</view>
 					</view>
 				</view>
+				<u-empty v-if="deviceData.length==0" text="暂无设备" mode="list" margin-top="120"></u-empty>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	import { stationDetail, stationDevice } from '@/api/station.js'
 	export default {
 		data() {
 			return {
+				stationId: '',  //  网点id
+				stationNo: '',  //  网点编号
 				lat: '',
 				lng: '',
 				mapCtx: null, // 地图对象
 				markers: [], // 标注点
+				stationData: null,  //  网点信息
+				deviceData: [],  //  设备信息
 			};
 		},
-		onLoad() {
-			this.lng = '101.760521'
-			this.lat = '36.636193'
-			this.markers = [
-				{
-					latitude: this.lat,
-					longitude: this.lng,
-					width: 30,
-					height: 30,
-					iconPath: "/static/store.png"
+		onLoad(options) {
+			this.stationId = options.id
+			this.stationNo = options.stationNo
+			//  获取经纬度
+			this.getLocation()
+			this.getStation()  //  网点信息
+			this.getDevice()  //  设备信息
+		},
+		methods: {
+			//  获取经纬度
+			getLocation() {
+				const _this = this;
+				uni.getLocation({
+					type: 'wgs84',
+					success: function(res) {
+						_this.lng = res.longitude
+						_this.lat = res.latitude
+					},
+					fail: function(error) {
+						console.log(error)
+						uni.showToast({ icon: 'none', title: '定位失败' })
+					}
+				})
+			},
+			//  网点信息
+			getStation(){
+				stationDetail({ id: this.stationId }).then(res => {
+					if(res.status == 200){
+						this.stationData = res.data
+					}else{
+						this.stationData = null
+					}
+				})
+			},
+			//  设备信息
+			getDevice(){
+				stationDevice({ stationNo: this.stationNo }).then(res => {
+					if(res.status == 200){
+						this.deviceData = res.data
+						this.markers = []
+						for(let i=0; i<res.data.length; i++){
+							this.markers.push({
+								latitude: res.data[i].lat,
+								longitude: res.data[i].lng,
+								width: 30,
+								height: 30,
+								iconPath: "/static/store.png"
+							})
+						}
+					}else{
+						this.deviceData = []
+					}
+				})
+			},
+			//  根据垃圾类型获取兑换规则
+			getRule(type){
+				let row = null
+				if(this.stationData.goldExRuleItemList){
+					row = this.stationData.goldExRuleItemList.find(item => item.rubbishType == type)
 				}
-			]
+				return { rubbishWeight: row.rubbishWeight || 0, goleNum: row.goleNum || 0 }
+			}
 		}
 	}
 </script>