引入日期组件

components/itmister-date-picker/itmister-date-picker.nvue

@@ -0,0 +1,389 @@
+<template>
+	<view v-if="isShow">
+		<view class="date-picker-mask" bubble='true' @click="hide" :class="[isOpen?'show-date-picker-mask':'hide-date-picekr-mask']"
+		 :style="{backgroundColor:maskColor}"></view>
+		<view class="date-picker-container" @click.stop="handleClick" :class="[isOpen?'show-date-picker':'hide-date-picekr']">
+
+			<!-- 操作 -->
+			<view class="date-picker-title row between-center">
+				<text class="date-picker-cancel" @click="hide">取消</text>
+				<text class="date-picker-confirm" @click="dateConfirm">确定</text>
+			</view>
+			<!-- 内容 -->
+			<picker-view class="date-picker-box" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
+				<picker-view-column class="center">
+					<view class="date-picker-item center" v-for="(item,index) in years" :key="index">
+						<text v-if='item!="长期"'>{{item}}年</text>
+						<text v-else>{{item}}</text>
+					</view>
+				</picker-view-column>
+				<picker-view-column>
+					<view class="date-picker-item center" v-for="(item,index) in months" :key="index">
+						<text v-if="item!=''">{{item}}月</text>
+						<text v-else>{{item}}</text>
+					</view>
+				</picker-view-column>
+				<picker-view-column>
+					<view class="date-picker-item center" v-for="(item,index) in days" :key="index">
+
+						<text v-if="item!=''">{{item}}日</text>
+						<text v-else>{{item}}</text>
+					</view>
+				</picker-view-column>
+			</picker-view>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "datePicker",
+		props: {
+			maskColor: { // 模态框背景色
+				type: String,
+				default: 'rgba(0,0,0,0.3)'
+			},
+			checkYear:{
+				type: [String,Number],
+				default: new Date().getFullYear()
+			},
+			checkMonth:{
+				type: [String,Number],
+				default: new Date().getMonth() + 1
+			},
+			checkDay:{
+				type: [String,Number],
+				default: new Date().getDate()
+			}
+		},
+		data() {
+			const date = new Date();
+			const years = ['长期'];
+			const months = [''];
+			// console.log(this.checkYear)
+			// const month = date.getMonth() + 1
+			// const day = date.getDate();
+			const year = this.checkYear
+			const month = this.checkMonth
+			const day = this.checkDay
+			console.log(year,month,day)
+			// 可在此设置起始年份和终止年份
+			for (let i = 1940; i <= date.getFullYear() + 10; i++) {
+				years.push(i);
+			}
+			for (let i = 1; i <= 12; i++) {
+				months.push(i);
+			}
+			console.log(months)
+			return {
+				isShow: false, // 是否弹出
+				isOpen: false,
+
+				years,
+				months,
+				days: [''],
+				year,
+				month,
+				day,
+				value: [year - 1940, month - 1, day - 1], // 默认选中当天
+				visible: true,
+				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
+			}
+		},
+		methods: {
+
+			// 选中日期
+			dateConfirm() {
+				let dateobj={
+					year:this.year,
+					month:this.month?this.month > 9 ? this.month : '0' + this.month:'',
+					day:this.day?this.day > 9 ? this.day :'0' + this.day:'',
+					date:''
+				}
+				if(this.year!='长期'){
+					var val=[]
+					for (let i = 0; i < this.years.length; i++) {
+						if(this.year==this.years[i]){
+							val[0]=i
+						}
+					}
+					for (let i = 0; i < this.months.length; i++) {
+						if(this.month==this.months[i]){
+							val[1]=i
+						}
+					}
+					for (let i = 0; i < this.days.length; i++) {
+						if(this.day==this.days[i]){
+							val[2]=i
+						}
+					}
+					this.value=val
+					 dateobj.date= this.year + '-' + (this.month > 9 ? this.month : '0' + this.month) + '-' + (this.day > 9 ? this.day :
+					'0' + this.day);
+				}else{
+					this.value=[0,0,0]
+					dateobj.date = this.year
+				}
+				
+				// 发送一个点击事件，并把当前选中的日期发送出去
+				
+				this.$emit('dateConfirm', dateobj);
+				this.hide();
+				
+			},
+
+			bindChange(e) {
+				// console.log(this.value,e)
+				const val = e.detail.value;
+				this.year = this.years[val[0]];
+				this.month = this.months[val[1]];
+				this.day = this.days[val[2]];
+				
+				// this.value=[this.year, this.month, this.day]
+			},
+
+			// 弹出
+			show() {
+				this.isShow = true;
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.isOpen = true;
+					}, 20);
+				});
+			},
+
+			// 关闭
+			hide() {
+				this.isOpen = false;
+				setTimeout(() => {
+					this.isShow = false;
+				}, 200);
+			},
+
+			// 阻止冒泡
+			handleClick(event) {
+				event.stopPropagation();
+			}
+		},
+		watch: {
+			"month": { // 监听月份变化，改变当前月份天数值 
+				handler(val) {
+					if (val < 8&&this.year!='长期') {
+						if (val % 2 !== 0) {
+							this.days = [''];
+							for (let i = 1; i <= 31; i++) {
+								this.days.push(i);
+							}
+						} else {
+							this.days = [''];
+							for (let i = 1; i <= 30; i++) {
+								this.days.push(i);
+							}
+						}
+					}
+					if (val > 7&&this.year!='长期') {
+						if (val % 2 === 0) {
+							this.days = [''];
+							for (let i = 1; i <= 31; i++) {
+								this.days.push(i);
+							}
+						} else {
+							this.days = [''];
+							for (let i = 1; i <= 30; i++) {
+								this.days.push(i);
+							}
+						}
+					}
+					if (val === 2&&this.year!='长期') {
+						if (this.year % 4 === 0) {
+							this.days = [''];
+							for (let i = 1; i <= 29; i++) {
+								this.days.push(i);
+							}
+						} else {
+							this.days = [''];
+							for (let i = 1; i <= 28; i++) {
+								this.days.push(i);
+							}
+						}
+					}
+				},
+				deep: true,
+				immediate: true
+			},
+			"year": { // 监听年份变化，处理2月份天数变化
+				handler(val) {
+					if(val=='长期'){
+						this.months=[''];
+						this.days = [''];
+					}else{
+						const months = [''];
+						for (let i = 1; i <= 12; i++) {
+							months.push(i);
+						}
+						this.months=months
+						if (val % 4 === 0) {
+							if (this.month === 2) {
+								this.days = [''];
+								for (let i = 1; i <= 29; i++) {
+									this.days.push(i);
+								}
+							}
+						} else {
+							if (this.month === 2) {
+								this.days = [''];
+								for (let i = 1; i <= 28; i++) {
+									this.days.push(i);
+								}
+							}
+						}
+					}
+					
+				}
+			},
+			deep: true,
+			immediate: true
+		}
+	}
+</script>
+
+<style lang="scss">
+	.date-picker-mask {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 99988;
+	}
+
+	.date-picker-container {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 99999;
+		background-color: #FFFFFF;
+	}
+
+	.show-date-picker-mask {
+		transition-property: opacity;
+		transition-duration: 0.2s;
+		transition-timing-function: ease;
+		opacity: 1;
+	}
+
+	.hide-date-picekr-mask {
+		transition-property: opacity;
+		transition-duration: 0.2s;
+		transition-timing-function: ease;
+		opacity: 0;
+	}
+
+	.show-date-picker {
+		transition-property: transform, opacity;
+		transition-duration: 0.2s;
+		transition-timing-function: ease;
+		transform: translateY(0);
+		opacity: 1;
+		/* #ifndef APP-PLUS-NVUE */
+		-moz-transition-property: transform, opacity;
+		-webkit-transition-property: transform, opacity;
+		-o-transition-property: transform, opacity;
+
+		-moz-transition-duration: 0.2s;
+		-webkit-transition-duration: 0.2s;
+		-webkit-transition-duration: 0.2s;
+
+		-moz-transition-timing-function: ease;
+		-webkit-transition-timing-function: ease;
+		-o-transition-timing-function: ease;
+
+		-moz-transform: translateY(0);
+		-webkit-transform: translateY(0);
+		-o-transform: translateY(0);
+		/* #endif */
+	}
+
+	.hide-date-picekr {
+		transition-property: transform, opacity;
+		transition-duration: 0.2s;
+		transition-timing-function: ease;
+		transform: translateY(500px);
+		opacity: 1;
+		/* #ifndef APP-PLUS-NVUE */
+		-moz-transition-property: transform, opacity;
+		-webkit-transition-property: transform, opacity;
+		-o-transition-property: transform, opacity;
+
+		-moz-transition-duration: 0.2s;
+		-webkit-transition-duration: 0.2s;
+		-webkit-transition-duration: 0.2s;
+
+		-moz-transition-timing-function: ease;
+		-webkit-transition-timing-function: ease;
+		-o-transition-timing-function: ease;
+
+		-moz-transform: translateY(500px);
+		-webkit-transform: translateY(500px);
+		-o-transform: translateY(500px);
+		/* #endif */
+	}
+
+	// 确定、取消
+	.date-picker-title {
+		height: 100rpx;
+		padding: 0 20rpx;
+		box-shadow: 0 1rpx 1rpx #e4e4e4;
+	}
+
+	.date-picker-confirm {
+		padding: 10rpx 30rpx;
+		font-size: 32rpx;
+		color: #007AFF;
+	}
+
+	.date-picker-cancel {
+		padding: 10rpx 30rpx;
+		font-size: 32rpx;
+		color: red;
+	}
+
+	// 内容
+	.date-picker-box {
+		width: 750rpx;
+		height: 500rpx;
+		padding: 0 20rpx;
+		/* #ifndef APP-PLUS-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		background-color: #FFF;
+	}
+
+	.date-picker-item {
+		height: 100rpx;
+	}
+
+	// flex
+	.row {
+		/* #ifndef APP-PLUS-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+
+	}
+
+	.center {
+		/* #ifndef APP-PLUS-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+	}
+
+	.between-center {
+		justify-content: space-between;
+		align-items: center;
+	}
+</style>

components/xbd-maptrack/xbd-maptrack.vue

@@ -0,0 +1,140 @@
+<template>
+	<view class="content">
+		<map
+			style="width: 100%; height: 100%;position: fixed;"
+			:markers="covers"
+			:polyline="polyline"
+			:include-points="covers"
+			@markertap="showRoute"
+			id="myMap"
+			show-location
+		></map>
+		<slider :value="progress" @change="sliderChange" @changing="trackState = 2" activeColor="#FFD090" block-color="#D65600" />
+		<view class="fn">
+			<button @tap="trackState = trackState == 1 ? 2 : 1">{{ ['开始', '暂停', '继续'][trackState] }}</button>
+			<button @tap="trackState = 0">终止</button>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'xbdMaptrack',
+	props: ['isauto', 'covers', 'polyline'], //是否自动播放和轨迹数据
+	data() {
+		return {
+			trackLength: 0, //轨迹长度
+			trackkey: 0, //轨迹点
+			progress: 0, // 进度条
+			mapContext: '',
+			terval: false, //计时器
+			trackState: 0 //轨迹播放状态 0未开始 1播放 2暂停
+		};
+	},
+	watch: {
+		trackState(k) {
+			//监听播放状态改变
+			if (k == 1 && !this.terval) return this.trackplay();
+			clearInterval(this.terval);
+			this.terval = false;
+			//进度停止时返回当前轨迹的key值与坐标值
+			this.$emit('getStopTrack',{key:this.trackkey,track:this.polyline[0].points[this.trackkey]})
+			if (k !== 0) return;
+			this.trackkey = 0;
+			this.progress = 0;
+			this.trackMove();
+		},
+	},
+	created() {
+		this.mapContext = uni.createMapContext('myMap', this);
+		setTimeout(() => {
+			//mapContext 创建后延时设置定位
+			this.trackLength = this.polyline[0].points.length - 1;
+			this.mapContext.moveToLocation(this.covers[0]);
+			if (this.isauto) this.trackState = 1;
+		}, 888);
+	},
+	methods: {
+		/**
+		 * 轨迹播放方法
+		 * @param {number} s = 10 控制移动速度
+		 *
+		 * */
+		trackplay(s = 10) {
+			this.terval = setInterval(() => {
+				this.trackkey++;
+				if (this.trackkey >= this.trackLength) {
+					clearInterval(this.terval);
+					this.trackState = 0;
+					this.trackkey = 0;
+					this.terval = false;
+				}
+				this.progress = ((this.trackkey * 100) / this.trackLength).toFixed(1);
+				this.trackMove();
+			}, s);
+		},
+		/**
+		 * 轨迹移动方法
+		 * @param {number} markerId = 2  指定 marker的id
+		 * @param {object} destination ={latitude,longitude} 指定 marker 移动到的目标点
+		 * @param {number} duration = 100 动画持续时长
+		 * @param {void} animationEnd = ()=>{} 轨迹动画完成后回调
+		 * @param {void} fail 轨迹回放失败回调
+		 *
+		 * */
+		trackMove(markerId = 2, destination = this.polyline[0].points[this.trackkey], duration = 100, animationEnd = () => {}, fail = e => console.log('轨迹回放失败', e)) {
+			this.mapContext.translateMarker({
+				markerId,
+				destination,
+				duration,
+				animationEnd,
+				fail
+			});
+		},
+		//进度条改变了调用方法
+		sliderChange(e) {
+			this.trackkey = ((e.detail.value / 100) * this.trackLength).toFixed(0);
+			//进度条改变时返回当前轨迹的key值与坐标值
+			this.$emit('getStopTrack',{key:this.trackkey,track:this.polyline[0].points[this.trackkey]})
+		}
+	}
+};
+</script>
+
+<style>
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.logo {
+	height: 200rpx;
+	width: 200rpx;
+	margin-top: 200rpx;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 50rpx;
+}
+
+.text-area {
+	display: flex;
+	justify-content: center;
+}
+.fn {
+	position: fixed;
+	bottom: 22%;
+	text-align: center;
+	z-index: 100;
+}
+.title {
+	font-size: 36rpx;
+	color: #8f8f94;
+}
+slider {
+	width: 88%;
+	height: 12px;
+	margin-left: 2.5%;
+}
+</style>

config/index.js

@@ -1,7 +1,7 @@
 const dev = {
-	baseUrlNew: 'https://api.changyuntong56.com',
+	// baseUrlNew: 'https://api.changyuntong56.com',
 	// baseUrlNew: 'https://apitest.changyuntong56.com',
-	// baseUrlNew: 'http://192.168.110.9:8099',
+	baseUrlNew: 'http://192.168.110.9:8099',
 	// baseUrlNew: 'https://apitest.eliangeyun.com',
 	// baseUrlNew: 'http://192.168.110.67:8999/',
 	h5Appid: 'wxb66b599f7f61b46f',

package.json

@@ -1,11 +1,11 @@
 {
-    "id": "xbd-maptrack",
-    "name": "地图轨迹播放组件",
+    "id": "cuixinyu-trajectory",
+    "name": "高德轨迹回放nvue版本",
     "version": "1.0.0",
-    "description": "调用地图和滑动组件及uni.createMapContext(mapId,this)的简单地图轨迹播放组件",
+    "description": "高德轨迹回放nvue版本",
     "keywords": [
-        "地图",
-        "轨迹",
-        "地图轨迹播放"
+        "高德",
+        "轨迹回放",
+        "nvue"
     ]
 }

pages/mine/index.vue

@@ -166,7 +166,7 @@
 			return {
 				confirmText: '',
 				CargoOwner: {},
-				redDotPrompt:'',
+				redDotPrompt:1,
 				showCancelButton: true,
 				isShowAlert: false,
 				alertTitle: '',

pages/mine/settings/editPassword.vue

@@ -94,7 +94,7 @@
 						})
 						_this.$request.baseRequest('get', '/commonUser/sendVerifyCode', {
 								phone: this.registerData.phone,
-								identification:2
+								identification:2,flag:2
 							}).then(res => {
 								if(res.code==200){
 									uni.hideLoading();