chenrui 4 лет назад
Родитель
Сommit
68e7e12226
7 измененных файлов с 554 добавлено и 5 удалено
  1. 140 0
      components/uni-navbar/uni-navbar.vue
  2. 22 1
      libs/tools.js
  3. 12 0
      pages.json
  4. 235 0
      pages/cleared/chooseNetwork.vue
  5. 32 4
      pages/index/index.vue
  6. 113 0
      pages/index/map.vue
  7. BIN
      static/map-icon.png

+ 140 - 0
components/uni-navbar/uni-navbar.vue

@@ -0,0 +1,140 @@
+<template>
+	<view class="navbar custom-class" :style="{ 'height': navHeight+'px' }">
+	  <view class="navbar-action-wrap navbar-action-group row item-center" :style="{'top': navTop+'px'}">
+			<view v-if="isBack" class="navbar-action_item" @tap="navBack">
+				<u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
+			</view>
+			<view v-if="isMap" class="navbar-action_item last map-bar" @tap="toMap">
+				<u-image class="map-icon" width="30rpx" height="30rpx" src="/static/map-icon.png"></u-image>
+				<view class="item-label">配送地图</view>
+			</view>
+	  </view>
+	  <view class='navbar-title' :style="{'top': navTop+'px'}">
+	    {{pageName}}
+	  </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			pageName: String,
+			showNav:{
+			  type: Boolean,
+			  value: true
+			},
+			bgColor: {
+			  type: String,
+			  value: '#fff'
+			},
+			isBack: {
+				type: Boolean,
+				value: false
+			},
+			isMap: {
+				type: Boolean,
+				value: false
+			}
+		},
+		mounted() {
+			let menuButtonObject = wx.getMenuButtonBoundingClientRect()
+			const _this = this
+			wx.getSystemInfo({
+			  success (res) {
+			    console.log(res)
+				let statusBarHeight = res.statusBarHeight,
+				navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
+				navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
+				_this.navHeight = navHeight;
+				_this.navTop = navTop;
+				_this.windowHeight = res.windowHeight;
+			  }
+			})
+		},
+		data() {
+			return {
+				navHeight: '',
+				navTop: '',
+				windowHeight: ''
+			}
+		},
+		methods: {
+			//回退
+			navBack: function () {
+				uni.navigateBack({
+				  delta: 1
+				})      
+			},
+			//配送地图
+			toMap: function () {
+				uni.navigateTo({
+					url: '/pages/index/map'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.navbar {
+	  width: 100%;
+	  overflow: hidden;
+	  position: relative;
+	  top: 0;
+	  left: 0;
+	  z-index: 10;
+	  flex-shrink: 0;
+	  .navbar-action-wrap {
+	    display: -webkit-flex;
+	    display: flex;
+	    -webkit-box-align: center;
+	    -ms-flex-align: center;
+	    -webkit-align-items: center;
+	    align-items: center;
+	    position: absolute;
+	    left: 10px;
+	    z-index: 11;
+	    line-height: 1;
+	    padding-top: 4px;
+	    padding-bottom: 4px;
+	  }
+	  .navbar-action-group {
+	    overflow: hidden;
+		.navbar-action_item {
+		  border-right: 1px solid #f0f0f0;
+		  color: #333;
+		}
+		.last {
+		  border-right: none;
+		}
+		.map-bar{
+			text-align: center;
+			.map-icon{
+				display: inline-block;
+			}
+			.item-label{
+				font-size: 24rpx;
+				transform: scale(0.6);
+			}
+		}
+	  }
+	  .navbar-title {
+	    width: 100%;
+	    box-sizing: border-box;
+	    padding-left: 115px;
+	    padding-right: 115px;
+	    height: 32px;
+	    line-height: 32px;
+	    text-align: center;
+	    position: absolute;
+	    left: 0;
+	    z-index: 10;
+	    color: #333;
+	    font-size: 16px;
+	    font-weight: bold;
+	    text-overflow: ellipsis;
+	    overflow: hidden;
+	    white-space: nowrap;
+	  }
+	}
+</style>

+ 22 - 1
libs/tools.js

@@ -9,7 +9,28 @@ export function objToUrl(obj) {
 
   return uri;
 }
-
+//  微信扫码
+export function scanCode () {
+  return new Promise((resolve, reject) => {
+    wx.scanCode({
+      success: (res) => {
+        if (res.errMsg === 'scanCode:ok') {
+          resolve(res);
+        } else {
+          wx.showToast({
+            title: res.errMsg,
+            icon: 'none',
+            duration: 2500
+          });
+          reject(res);
+        }
+      },
+      fail: (err) => {
+        reject(err);
+      }
+    });
+  });
+}
 
 
   

+ 12 - 0
pages.json

@@ -3,6 +3,12 @@
 		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/cleared/chooseNetwork",
+			"style": {
+				"navigationBarTitleText": "待清运网点"
+			}
+		},
 		{
 			"path": "pages/index/index", // 待清运
 			"style": {
@@ -11,6 +17,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/index/map",
+			"style": {
+				"navigationBarTitleText": "配送地图"
+			}
+		},
 		{
 			"path": "pages/login/login",
 			"style": {

+ 235 - 0
pages/cleared/chooseNetwork.vue

@@ -0,0 +1,235 @@
+<template>
+	<view class="choose-network-container">
+		<view class="choose-network-header">
+			<view class="checked-all">
+				<u-checkbox 
+					@change="checkedAll" 
+					v-model="isCheckedAll" 
+					name="checkedAll"
+				>全选</u-checkbox>
+			</view>
+			<view class="">已选:<text>10</text></view>
+		</view>
+		<scroll-view class="scroll-con" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom">
+			<!-- 列表数据 -->
+			<u-checkbox-group class="cell-item-con" @change="checkboxGroupChange">
+				<u-checkbox
+					class="cell-item"
+					@change="checkboxChange" 
+					v-model="item.checked" 
+					v-for="(item, index) in listdata" :key="index" 
+					:name="item.name">
+					<view class="cell-item-c" @tap="goPage(item)">
+						<view class="cell-item-info">
+							<view class="cell-item-info-network">
+								咸阳市秦都区文彩舫东区
+								<u-badge type="success" :count="8" :offset="[-10,-32]" size="mini"></u-badge>
+							</view>
+							<view class="cell-item-info-weight">
+								<view class="cell-item-weight-bar">
+									15.25kg
+									<u-badge class="badge" type="primary" count="总" :offset="[0,0]"></u-badge>
+								</view>
+								<view class="cell-item-weight-bar">
+									15.25kg
+									<u-badge class="badge" type="warning" count="最大" :offset="[0,0]"></u-badge>
+								</view>
+							</view>
+						</view>
+						<u-icon name="arrow-right" class="arrow-right" :size="28" color="#999"></u-icon>
+					</view>
+				</u-checkbox>
+			</u-checkbox-group>
+			<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
+			<view class="loadmore">
+				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
+			</view>
+		</scroll-view>
+		<view class="footer-bar">
+			<u-button class="footer-handle-btn handle-btn" :custom-style="btnStyle" shape="circle" @click="openScan" size="medium" type="primary">
+				<text>加入待清运清单</text>
+			</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getGoldLogList, GoldLogCancel, GoldLogTotal } from '@/api/officialPartnerGoldLog.js'
+	export default{
+		data(){
+			return{
+				listdata: [],
+				pageNo: 1,  //  当前页码
+				pageSize: 40,  //  每页条数
+				total: 0,  //  数据总条数
+				noDataText: '暂无数据',  //  列表请求状态提示语
+				status: 'loadmore',  //  加载中状态
+				scrollTop: 0,  //  滚动条位置
+			}
+		},
+		onShow() {
+			this.refresh({})
+		},
+		methods: {
+			// 选中某个复选框时,由checkbox时触发
+			checkboxChange(e) {
+				console.log(e)
+			},
+			// 选中任一checkbox时,由checkbox-group触发
+			checkboxGroupChange(e) {
+				console.log(e)
+			},
+			// 全选
+			checkedAll() {
+				this.listdata.map(val => {
+					val.checked = true
+				})
+			},
+			// 获取查询参数 刷新列表
+			refresh(params){
+				this.listdata = []
+				this.total = 0
+				this.searchHandle(1)
+			},
+			// 搜索查询
+			searchHandle (pageNo) {
+				this.status = "loading"
+				pageNo ? this.pageNo = pageNo : null
+				getGoldLogList({
+					pageNo: this.pageNo,
+					pageSize: this.pageSize
+				}).then(res => {
+					if (res.status == 200) {
+						if(this.pageNo>1){
+							this.listdata = this.listdata.concat(res.data.list || [])
+						}else{
+							this.listdata = res.data.list || []
+							this.scrollTop = 0
+						}
+						this.total = res.data.count || 0
+						this.noDataText = '暂无数据'
+					} else {
+						this.noDataText = res.message
+						this.listdata = []
+						this.total = 0
+					}
+					this.listdata.map(item => {
+						item.checked = false
+					})
+					this.status = "loadmore"
+				})
+			},
+			//  查看详情
+			goPage(row){
+				uni.navigateTo({
+				    url: '/pages/cleared/details'
+				})
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				if(this.listdata.length < this.total){
+					this.pageNo += 1
+					this.searchHandle()
+				}else{
+					uni.showToast({ title: '已经到底了', icon: 'none' })
+					this.status = "nomore"
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		height: 100%;
+	}
+	.choose-network-container {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		padding-top: 100rpx;
+		padding-bottom: 102rpx;
+		position: relative;
+		.choose-network-header{
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+		}
+		//  列表
+		.scroll-con{
+			flex: 1;
+			overflow: auto;
+		}
+		//  列表样式
+		.cell-item-con{
+			.cell-item{
+				margin: $uni-spacing-col-base $uni-spacing-row-base;
+				background-color: #fff;
+				border-radius: $uni-border-radius-base;
+				color: $uni-text-color;
+				font-size: $uni-font-size-base;
+				box-shadow: 3rpx 3rpx 5rpx #eee;
+				display: flex;
+				align-items: center;
+				padding: $uni-spacing-col-base $uni-spacing-row-base;
+				position: relative;
+				.cell-item-c{
+					// flex-grow: 1;
+					display: flex;
+					justify-content: space-around;
+					align-items: center;
+					display: block;
+					width: 100%;
+					.cell-item-info{
+						flex-grow: 1;
+						.cell-item-info-network{
+							word-break: break-all;
+							margin-bottom: $uni-spacing-col-base;
+							display: inline-block;
+							position: relative;
+						}
+						.cell-item-info-weight{
+							font-size: 24rpx;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							.cell-item-weight-bar{
+								position: relative;
+								display: inline-block;
+								padding-right: 50rpx;
+								&:nth-child(2){
+									padding-right: 76rpx;
+								}
+							}
+						}
+					}
+					.arrow-right{
+						flex-shrink: 0;
+						margin-left: 64rpx;
+					}
+				}
+			}
+		}
+		.footer-bar{
+			width: 100%;
+			height: 102rpx;
+			padding: 0 10%;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			text-align: center;
+			.footer-handle-btn{
+				display: block;
+				.btn-icon{
+					margin-right: 10rpx;
+				}
+			}
+			.handle-btn{
+				margin-top: 18rpx;
+				margin-bottom: 20rpx;
+			}
+		}
+	}
+</style>

+ 32 - 4
pages/index/index.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="unclear-container">
+		<uni-navbar pageName="待清运" :isBack="false" :isMap="true"></uni-navbar>
 		<scroll-view class="scroll-con" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom">
 			<!-- 列表数据 -->
 			<view class="cell-item-con">
@@ -34,7 +35,7 @@
 		</scroll-view>
 		
 		<view class="footer-bar">
-			<u-button class="footer-handle-btn scan-btn" :custom-style="btnStyle" shape="circle" @click="openQuery" size="medium" type="primary">
+			<u-button class="footer-handle-btn scan-btn" :custom-style="btnStyle" shape="circle" @click="openScan" size="medium" type="primary">
 				<u-icon name="scan" class="btn-icon" :size="28" color="#fff"></u-icon>
 				<text>扫码清运</text>
 			</u-button>
@@ -47,12 +48,13 @@
 </template>
 <script>
 	import { getGoldLogList, GoldLogCancel, GoldLogTotal } from '@/api/officialPartnerGoldLog.js'
+	import { scanCode } from '@/libs/tools.js'
 	export default {
 		data() {
 			return {
-				listdata: [{},{}],
+				listdata: [],
 				pageNo: 1,  //  当前页码
-				pageSize: 10,  //  每页条数
+				pageSize: 40,  //  每页条数
 				total: 0,  //  数据总条数
 				noDataText: '暂无数据',  //  列表请求状态提示语
 				status: 'loadmore',  //  加载中状态
@@ -69,9 +71,35 @@
 		},
 		onShow() {
 			this.refresh({})
-			console.log(wx.getMenuButtonBoundingClientRect())
 		},
 		methods:{
+			//  扫码清运
+			openScan(){
+				//  调起微信扫码
+				scanCode().then(res => {
+				  this.code = res.result
+				  //  请求接口
+				  // return verShow(res.result)
+				}).then(res => {
+				  if (res.status == 200) {
+				    this.info = res.data
+				    this.showInfo = true
+				    this.carNum = ''
+				  } else {
+				    wx.showToast({
+				      title: res.message,
+				      icon: 'none',
+				      duration: 2500
+				    })
+				  }
+				})
+			},
+			//  增加清运网点
+			openQuery(){
+				uni.navigateTo({
+				    url: '/pages/cleared/chooseNetwork'
+				})
+			},
 			// 获取查询参数 刷新列表
 			refresh(params){
 				this.listdata = []

+ 113 - 0
pages/index/map.vue

@@ -0,0 +1,113 @@
+<template>
+	<view class="map-container">
+		<map
+			id="map" 
+			:latitude="latitude" 
+			:longitude="longitude" 
+			scale="12" 
+			show-compass 
+			show-location 
+			:markers="covers"
+			:polyline="polyline"
+			style="width: 100%; height:100%;">
+		</map>
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				latitude: null,  //  纬度
+				longitude: null,  //  经度
+				covers: [
+					{
+						latitude: 34.211901,  // 雁塔区
+						longitude: 108.995039,
+						width: '72rpx',
+						height: '72rpx',
+						title: '21',
+						iconPath: '/static/logo.jpg'
+					}, {
+						latitude: 34.296789,
+						longitude: 108.971456,
+						width: '72rpx',
+						height: '72rpx',
+						title: '22',
+						label: {content:'文本1', color: '#ff0000'},
+						iconPath: '/static/logo.jpg'
+					}, {
+						latitude: 34.293145,  //  未央区政府
+						longitude: 108.946715,
+						width: '72rpx',
+						height: '72rpx',
+						title: '23',
+						iconPath: '/static/logo.jpg'
+					}, {
+						latitude: 34.313445,  //  灞桥区
+						longitude: 109.018233,
+						width: '72rpx',
+						height: '72rpx',
+						title: '24',
+						iconPath: '/static/logo.jpg'
+					}
+				],
+				polyline: null  //  路线
+			}
+		},
+		onShow() {
+			this.getLocation()
+		},
+		methods: {
+			//  获取当前位置
+			getLocation(){
+				const _this = this
+				uni.getLocation({
+				    type: 'gcj02',
+				    success: function (res) {
+						console.log(res.latitude,res.longitude)
+						_this.latitude = res.latitude  //  纬度
+						_this.longitude = res.longitude  //  经度
+						_this.onPolyline()
+				    }
+				})
+			},
+			//  连线
+			onPolyline(){
+				const _this = this
+				//  连线需至少两个点
+				if(_this.covers.length>0){
+					_this.polyline = []
+					_this.covers.map((item,index) => {
+						_this.polyline.push({
+							points: [
+								{latitude: null, longitude: null},
+								{latitude: null, longitude: null}
+							],
+							width: 4,
+							color: '#'+(~~(Math.random()*(1<<24))).toString(16)
+						})
+						if(index==0){
+							_this.polyline[index].points[0].latitude = _this.latitude
+							_this.polyline[index].points[0].longitude = _this.longitude
+							_this.polyline[index].points[1].latitude = item.latitude
+							_this.polyline[index].points[1].longitude = item.longitude
+						}else{
+							_this.polyline[index].points[0].latitude = _this.covers[index-1].latitude
+							_this.polyline[index].points[0].longitude = _this.covers[index-1].longitude
+							_this.polyline[index].points[1].latitude = item.latitude
+							_this.polyline[index].points[1].longitude = item.longitude
+						}
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.map-container {
+		width: 100%;
+		height: 100vh;
+	}
+</style>

BIN
static/map-icon.png