注册

components/mi-map/mi-map.vue

@@ -0,0 +1,313 @@
+<template>
+	<view class="server-place">
+		<map
+			id='map'
+			ref='map'
+			v-bind:style="{height: mapH + 'px'}"
+			style="width: 100%;" 
+			:latitude="latitude" 
+			:longitude="longitude"
+			:controls='controls'
+			scale="18"
+			@regionchange='mapChange'>
+		</map>
+		<view class="map-tools">
+			<view class="my-location" @tap="toMyLocation">
+				<image class="left" :src="myPositionIcon" mode=""></image>
+				<view class="right">
+					<text class="title">我的位置</text>
+					<text class="text">{{myAddress}}</text>
+				</view>
+			</view>
+			
+			<view class="start-place">
+				<view class="place">
+					<text class="text">{{addressObj.address}}</text>
+				</view>
+				<view class="tip">{{descText}}</view>
+				<button @tap="submitAdress" class="sure" type="primary">确认选择</button>
+			</view>
+		</view>
+	</view>
+	
+</template>
+
+<script>
+	const app = getApp()
+	var QQMapWX = require('./qqmap-wx-jssdk.min.js')
+	var qqmapsdk = new QQMapWX({
+	  key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
+	})
+	export default {
+		props: {
+			tipText: {
+				type: String,
+				default: '选择位置'
+			},
+			descText: {
+				type: String,
+				default: '使用当前定位或在地图上标记位置'
+			},
+			positionIcon: {
+				type: String,
+				default: 'https://s2.ax1x.com/2020/03/10/8CvKmt.png'
+			},
+			myPositionIcon: {
+				type: String,
+				default: 'https://s2.ax1x.com/2020/03/10/8CjxSJ.png'
+			}
+		},
+		data() {
+			return {
+				mapH: 0,             // 地图高度，可在initMapH()中设置高度
+				longitude: 0,        // 初始经度
+				latitude: 0,         // 初始纬度
+				myAddress: '',   	 // 初始地址信息
+				addressObj: {        // 地图选点信息
+					longitude: '',
+					latitude: '',
+					address: '请选择集合地点'
+				},
+				controls: [],  // 地图中心点图标, 可更换iconPath, 详情见官方文档关于map组件的介绍
+				
+			};
+		},
+		mounted() {
+			this.getLocation()
+			this.initMapH()
+			this.initPositionIcon()
+		},
+		methods:{
+			// 初始化地图中心位置的定位图片
+			initPositionIcon() {
+				setTimeout(() => {
+					this.controls = [
+						{
+							iconPath: this.positionIcon,
+							position: { 
+								left: 185,
+								top: 265,
+								width: 30, 
+								height: 30,
+							},
+							clickable: false
+						}
+					]
+				}, 100)
+			},
+			// 查询现在的位置
+			getLocation() {
+				let this_ = this
+				uni.getLocation({
+					// type: 'gcj02', // 返回国测局坐标
+					geocode: true,
+					success: function(res) {
+						this_.initMap(res)
+						console.log(res);
+					},
+					fail: function(e) {
+						uni.showToast({
+							icon: 'none',
+							title: '获取地址失败, 请检查是否开启定位权限~~'
+						})
+					}
+				})
+			},
+			
+			// 初始化我的位置
+			async initMap(res) {
+				this.longitude = res.longitude;
+				this.latitude = res.latitude;
+				this.myAddress = await this.getAddressName(res);
+				
+				this.addressObj = Object.assign({}, this.addressObj,{
+					longitude: res.longitude,
+					latitude: res.latitude,
+					address: this.myAddress
+				})
+			},
+			
+			// 地图选择位置后 查询地点名称
+			async checkMap(res) {
+				this.addressObj = Object.assign({}, this.addressObj,{
+					longitude: res.longitude,
+					latitude: res.latitude,
+					address: await this.getAddressName(res)
+				})
+				console.log('当前位置:' + res.latitude + '|' + res.longitude);
+			},
+			
+			// 监听地图位置变化
+			mapChange(e) {
+				let that = this
+				clearTimeout(this.timer)
+				this.timer = setTimeout(() => {
+					if (e.type == 'regionchange' || e.type == 'end') {
+						that.mapCtx = uni.createMapContext('map', this)
+						that.mapCtx.getCenterLocation({
+							success: res => {
+								this.checkMap(res)
+								console.log(res);
+							},
+							fail: err => {
+								console.log(err);
+							}
+						})
+					}
+				}, 200)
+			},
+			// 查询地图中心点的名称
+			getAddressName(addressObj) {
+				
+				return new Promise((res) => {
+					// #ifdef APP-PLUS
+						qqmapsdk.reverseGeocoder({
+							location: {
+								latitude: addressObj.latitude,
+								longitude: addressObj.longitude
+							},
+							get_poi: 1,
+							poi_options: "page_size=1;page_index=1",
+							output: 'jsonp',
+							success: (e) => {
+								res(e.result.formatted_addresses.recommend);
+							},
+							fail: err => {
+								res(err);
+							}
+						})
+					// #endif
+					
+					// #ifndef APP-PLUS
+						// ======================== jsonp跨域 ======================== 
+						const KEY = 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
+						let locationObj = addressObj.latitude+','+addressObj.longitude
+						let url = 'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
+						this.$jsonp(url,{
+						  key: KEY,
+						  location: locationObj
+						}).then(e => {
+							res(e.result.formatted_addresses.recommend);
+						})
+						.catch(err => {
+							res(err);
+						})
+					// #endif
+					
+					
+				})
+				
+			},
+			// 计算地图的高度
+			initMapH() {
+				// #ifdef APP-PLUS
+					this.mapH = uni.getSystemInfoSync().windowHeight - 210;
+				// #endif
+				// #ifndef APP-PLUS
+					this.mapH = uni.getSystemInfoSync().windowHeight - 170;
+				// #endif
+			},
+			// 移动到我的位置
+			toMyLocation() {
+				this.getLocation()
+			},
+			// 提交
+			submitAdress() {
+				this.controls = []
+				setTimeout(() => {
+					this.$emit('updateAddress', this.addressObj)
+				}, 100)
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.server-place{
+		position: fixed;
+		left: 0;
+		top: 0;
+		height: 100vh;
+		width: 100%;
+		z-index: 999;
+		.map-tools{
+			width: 750rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+			.my-location{
+				width: 700rpx;
+				height: 100rpx;
+				box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.2);
+				background: #fff;
+				border-radius: 10rpx;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				overflow: hidden;
+				.left{
+					background: #3384ff;
+					// flex: 20%;
+					width: 100rpx;
+					height: 100%;
+				}
+				.right{
+					font-size: 0.57rem;
+					margin-left: .5rem;
+					color: #111;
+					// flex: 80%;
+					display: flex;
+					justify-content: center;
+					align-items: flex-start;
+					flex-direction: column;
+					.text{
+						width: 12rem;
+						overflow: hidden;
+						white-space:nowrap;
+						text-overflow: ellipsis;
+						color: #3384FF;
+						margin-top: .3rem;
+					}
+				}
+			}
+			
+			.start-place{
+				width: 85%;
+				margin: 0 auto;
+				height: 5.5rem;
+				margin: 0 auto;
+				margin-top: .6rem;
+				box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
+				background: #fff;
+				border-radius: 0.5rem;
+				.place{
+					.title{
+						font-size: 20rpx;
+						font-weight: bold;
+						color: #111;
+					}
+					.text{
+						font-size:16rpx;
+						color: #3384FF;
+						font-weight: bold;
+						width: 700rpx;
+						vertical-align: middle;
+						display: inline-block;
+						overflow: hidden;
+						white-space:nowrap;
+						text-overflow: ellipsis;
+					}
+				}
+				.tip{
+					font-size: 0.57rem;
+					color: #666;
+				}
+				.sure{
+					font-weight: 600;
+				}
+				
+			}
+		}
+	}
+</style>

pages.json

@@ -135,13 +135,13 @@
 					"navigationStyle": "custom", // 隐藏系统导航栏
 					"navigationBarTextStyle": "white"
 				}
-			}
-		    ,{
-                "path" : "monthly-policy/monthly-policy",
-                "style" : {
+			}, {
+				"path": "monthly-policy/monthly-policy",
+				"style": {
 					"navigationBarTitleText": "月度政策"
 				}
-            }]
+			}
+		]
 	}, {
 		"root": "pages/msg",
 		"pages": [{
@@ -308,19 +308,10 @@
 
 		}, {
 			"path": "register_map",
-              "style": {
-				"navigationBarTitleText": "地图",
-				"app-plus": {
-					"titleNView": {
-						"buttons": [{
-							"text": "确认",
-							"fontSize": "16"
-						}]
-					}
-				}
-            }
-                
-        }]
+			"style": {
+				"navigationBarTitleText": "地图"
+			}
+		}]
 	}],
 	"preloadRule": {},
 	"globalStyle": {

pages/login/register_2.vue

@@ -144,9 +144,8 @@
 				this.form.name = data.person.words
 			})
 			uni.$on('addressData', (data) => {
-				console.log(data)
-				this.form.latitude = data.coord.latitude
-				this.form.longitude = data.coord.longitude
+				this.form.latitude = data.latitude
+				this.form.longitude = data.longitude
 				this.form.addressInfo = data.address
 			})
 			let that = this

pages/login/register_3.vue

@@ -13,16 +13,16 @@
 						<view style="margin-right: 10rpx;">
 							<u-icon name="order" size="36"></u-icon>
 						</view>
-						<u-input placeholder="点击选择合作品牌" :disabled="true" @click="show = true;" v-model="form.cooperation"></u-input>
+						<u-input placeholder="点击选择合作品牌" :disabled="true" @click="brandShow = true;" v-model="form.cooperation"></u-input>
 						<view class="" slot="right">
 							<u-icon name="arrow-right" color="#666666" size="36"></u-icon>
 						</view>
 					</u-form-item>
 				</view>
 			</u-card>
-			<u-popup mode="bottom" v-model="show">
+			<u-popup mode="bottom" v-model="brandShow">
 				<view class="u-flex u-row-between u-padding-left-40 u-padding-right-40" style="height: 90rpx;" @click="show = false;">
-					<view style="padding: 16rpx;font-size:30rpx">
+					<view style="padding: 16rpx;font-size:30rpx" @click="brandShow=false">
 						取消
 					</view>
 					<view style="padding: 16rpx;color:#0095FF;font-size:30rpx" @click="getCooperation">
@@ -33,8 +33,12 @@
 				<view class="content">
 					<scroll-view scroll-y="true" style="height: 300rpx;">
 						<view class="u-flex u-row-center">
-							<u-checkbox-group :wrap="true" @change="checkboxGroupChange">
-								<u-checkbox v-model="item.checked" v-for="(item, index) in brandList" :key="index" :name="item.name" shape="circle">{{item.name}}</u-checkbox>
+							<u-checkbox-group :wrap="true" @change="checkboxGroupChange" style="display: flex;justify-content: center">
+								<u-checkbox v-model="item.checked" v-for="(item, index) in agentList" :key="index" :name="item.brand" shape="circle">
+									<view class="u-flex u-row-left" style="width: 150rpx;">
+										{{item.brand}}
+									</view>
+								</u-checkbox>
 							</u-checkbox-group>
 						</view>
 					</scroll-view>
@@ -56,11 +60,12 @@
 					</view>
 				</view>
 			</u-card>
-			<u-card :border="false" padding="30" box-shadow="0px 1px 10px rgba(0,0,0,0.2)" border-radius="20" :show-foot="false">
+			<u-card :border="false" padding="30" box-shadow="0px 1px 10px rgba(0,0,0,0.2)" border-radius="20" :show-foot="false"
+			 v-for="(item, index) in checkedAgentlist" :key="index">
 				<view slot="head">
 					<view class="u-flex">
 						<view style="width: 8rpx;height: 34rpx;background: #0292FD;margin-right:20rpx;"></view>
-						赛轮合作品牌签约任务
+						{{item.brand}}合作品牌签约任务
 					</view>
 				</view>
 				<view slot="body">
@@ -69,20 +74,28 @@
 							<u-icon name="account" size="36"></u-icon>
 						</view>
 						<view class="">
-							某某代理商
+							{{item.name}}
 						</view>
 					</u-form-item>
-					<u-form-item prop="lists">
+					<u-form-item prop="tasklist">
 						<view style="margin-right: 10rpx;">
 							<u-icon name="order" size="36"></u-icon>
 						</view>
-						<u-input placeholder="点击选择签约任务" :disabled="true" @click="show = true;"></u-input>
+						<u-radio-group v-model="item.taskNum" @change="radioGroupChange">
+							<u-radio v-for="(i, index) in item.tasknameList" :key="index" :name="i.task" :disabled="i.taskdisabled">
+								{{i.task}}
+							</u-radio>
+						</u-radio-group>
+						<!-- <u-input placeholder="点击选择签约任务" :disabled="true" @click="item.taskShow = true" v-model="form.tasklist"></u-input>
 						<view class="" slot="right">
 							<u-icon name="arrow-right" color="#666666" size="36"></u-icon>
-						</view>
+						</view> -->
 					</u-form-item>
+					<!-- <u-select v-model="item.taskShow" :list="item.taskList" value-name="numTask" label-name="signLv" @confirm="getTaskconfirm"></u-select> -->
 				</view>
+
 			</u-card>
+
 			<u-form-item prop="protocol" :border-bottom="false">
 				<view style="margin:0 30rpx;">
 					<u-checkbox-group>
@@ -106,18 +119,19 @@
 	export default {
 		data() {
 			return {
-				show: false,
+				brandShow: false,
 				loading: false,
 				form: {
 					cooperation: '',
-					protocol: false
+					protocol: false,
 				},
 				form2: {},
 				formData: [],
 				dataUrl: [],
-				agentList: [],
-				brandList: [], //品牌
-				nameList:""
+				agentList: [], //经销商信息
+				checkedAgentlist: [],
+				taskList: [],
+				tasknameList: []
 			}
 		},
 		created() {
@@ -128,6 +142,7 @@
 				this.dataUrl = data
 			})
 			this.getAgentArea()
+			this.getTasknum()
 		},
 		methods: {
 			getAgentArea() {
@@ -148,21 +163,50 @@
 				}).then(res => {
 					if (res.data.code == 0) {
 						this.agentList = res.data.Data.data
-						// 从经销商里里面抽取品牌
-						const list = this.agentList.map((item, index) => {
-							return item.brandList;
-						}).join(",").split(',')
-						//去重
-						const list2 = [...new Set(list)]
-						//根据复选框的数据结构重组数组
-						this.brandList = list2.reduce((res, item) => {
+						console.log(this.agentList)
+						this.agentList = this.agentList.reduce((res, item, index, array) => {
+							for (let i = 0; i < array[index].brandList.length; i++) {
+								res.push({
+									brand: array[index].brandList[i],
+									brandCode: array[index].brandList[i],
+									name: item.name,
+									kunnr: item.kunnr,
+									agent_id: item.kunnr,
+									tasknameList:this.tasknameList,
+									taskNum:"",
+									checked: false,
+									disabled: false,
+								})
+							}
+							return res;
+						}, []);
+						console.log(this.agentList)
+					}
+					if (res.data.code == 500) {
+						this.$u.toast(res.data.msg);
+					}
+				}).catch(err => {
+					console.log(err)
+				}).finally(() => {
+
+				})
+			},
+			getTasknum() {
+				request({
+					url: '/sailun/appStoreBasicInfo/enum',
+					method: 'get',
+					data: {},
+				}).then(res => {
+					if (res.data.code == 0) {
+						this.taskList = res.data.data
+						this.tasknameList = this.taskList.reduce((res, item) => {
 							res.push({
-								name: item,
-								checked: false,
-								disabled: false
+								task: item.signLv,
+								taskdisabled: false,
 							})
 							return res;
 						}, []);
+						console.log(this.taskList)
 					}
 					if (res.data.code == 500) {
 						this.$u.toast(res.data.msg);
@@ -176,81 +220,76 @@
 			checkboxGroupChange(e) {
 				this.cooperations = e
 			},
+			radioGroupChange(e) {
+				console.log(e);
+			},
 			getCooperation() {
 				if (this.cooperations != null) {
 					this.form.cooperation = this.cooperations.toString();
-					let coopList = this.form.cooperation.split(",")
-					
-					let a=this.agentList.forEach((item,index, array)=>
-					{
-						for (let i = 0; i < array[index].brandList.length; i++) {
-					         for (let j = 0; j < coopList.length; j++) {
-					            if(coopList[j] == array[index].brandList[i]){						
-									this.nameList+=array[index].name+','
-					             }
-					         }
-					     }	
-					})
-					this.nameList=[...new Set(this.nameList.split(',').filter(item => item))]
-					this.show = false
+					this.checkedAgentlist = this.agentList.filter(item => this.cooperations.indexOf(item.brand) > -1)
+					this.brandShow = false
 				} else {
 					console.log("至少选择一项")
 				}
 
 			},
+			getTaskconfirm(e) {
+				console.log(e)
+				this.form.tasklist = e[0].label;
+				console.log(this.form.tasklist)
+			},
 			submit() {
-				let data = {
-					// "addressInfo": this.formData.addressInfo,
-					"brandAgentLvQueryList": [{
-						"agent_id": "string",
-						"brand": "string",
-						"brandCode": "string",
-						"kunnr": "string",
-						"lvCount": "string",
-						"showLv": "string",
-						"spart": "string",
-						"vkorg": "string",
-						"vtweg": "string"
-					}],
-					"city": "string",
-					"contactName": "string",
-					"district": "string",
-					"jd": "string",
-					"licenseUrl": "string",
-					"mobileCode": "string",
-					"province": "string",
-					"storeImageUrl": "string",
-					"storeName": "string",
-					"storePhone": "string",
-					"version": 0,
-					"wd": "string"
-				}
-				console.log(data)
-				request({
-					url: '/sailun/appStoreBasicInfo/storeReg',
-					method: 'post',
-					data: data
-				}).then(res => {
-
-					console.log(res)
-					if (res.data.code == 0) {
-						this.loading = true
-						setTimeout(() => {
-							this.$u.route({
-								url: 'pages/login/index',
-								type: "reLaunch"
-							})
-							this.loading = false
-						}, 2000)
-					}
-					if (res.data.code == 500) {
-						this.$u.toast(res.data.msg);
-					}
-				}).catch(err => {
-					console.log(err)
-				}).finally(() => {
+				// console.log(this.)
+				// let data = {
+				// 	"brandAgentLvQueryList": [{
+				// 		"agent_id": "string",
+				// 		"brand": "string",
+				// 		"brandCode": "string",
+				// 		"kunnr": "string",
+				// 		"lvCount": "string",
+				// 		"showLv": "string",
+				// 		"spart": "string",
+				// 		"vkorg": "string",
+				// 		"vtweg": "string"
+				// 	}],
+				// 	"city": "string",
+				// 	"contactName": "string",
+				// 	"district": "string",
+				// 	"jd": "string",
+				// 	"licenseUrl": "string",
+				// 	"mobileCode": "string",
+				// 	"province": "string",
+				// 	"storeImageUrl": "string",
+				// 	"storeName": "string",
+				// 	"storePhone": "string",
+				// 	"version": 0,
+				// 	"wd": "string"
+				// }
+				// console.log(data)
+				// request({
+				// 	url: '/sailun/appStoreBasicInfo/storeReg',
+				// 	method: 'post',
+				// 	data: data
+				// }).then(res => {
+				// 	console.log(res)
+				// 	if (res.data.code == 0) {
+				// 		this.loading = true
+				// 		setTimeout(() => {
+				// 			this.$u.route({
+				// 				url: 'pages/login/index',
+				// 				type: "reLaunch"
+				// 			})
+				// 			this.loading = false
+				// 		}, 2000)
+				// 	}
+				// 	if (res.data.code == 500) {
+				// 		this.$u.toast(res.data.msg);
+				// 	}
+				// }).catch(err => {
+				// 	console.log(err)
+				// }).finally(() => {
 
-				})
+				// })
 			},
 		}
 	}

pages/login/register_map.vue

@@ -1,25 +1,20 @@
 <template>
-	<view>
-		<map id="myMap" style="width: 750rpx;height: 80vh;" :markers="markers" :longitude="longitude" :latitude="latitude"
-		 @tap="onTap">
-		</map>
-		<view class="">
-			请双击定位<br>
-			{{addressData.address}}
-		</view>
+	<view class="content">
+		<mi-map ref="miMap" tipText="mi-Map" @updateAddress="updateAddress">
+		</mi-map>
 	</view>
 </template>
 
 <script>
+	import miMap from '../../components/mi-map/mi-map.vue'
 	export default {
+		components: {
+			miMap
+		},
 		data() {
 			return {
-				markers: [], //标记点
-				latitude: 0,
-				longitude: 0,
-				createMap: "",
-				touch: false,
-				addressData:''
+				// mapShow: false,
+				positionObj: {},
 			};
 		},
 		onNavigationBarButtonTap(e) {
@@ -27,72 +22,35 @@
 				this.inBack()
 			}
 		},
-		created() {
-			let that = this
-			uni.getLocation({
-				type: 'gcj02',
-				geocode: true,
-				success(res) {
-					that.latitude = res.latitude
-					that.longitude = res.longitude
-					let point = new plus.maps.Point(that.longitude, that.latitude);
-					plus.maps.Map.reverseGeocode(
-						point, {},
-						function(event) {
-							that.addressData= event;
-						},
-						function(e) {}
-					);
-					that.markers = [{
-						id: 1,
-						latitude: res.latitude,
-						longitude: res.longitude,
-						iconPath: '/static/sailun/gps-icon.png',
-					}]
-				}
-			});
-		},
-		onReady() {
-			this.createMap = uni.createMapContext('myMap', this);
-		},
 		methods: {
+
 			inBack() {
-				uni.$emit("addressData", this.addressData)
-				uni.navigateBack({})
+				
 			},
-			onTap(e) {
-				console.log(e)
-				if (e.type == 'click') {
-					let that = this;
-					this.createMap.getCenterLocation({
-						success(res) {
-							console.log(res)
-							that.latitude = res.latitude
-							that.longitude = res.longitude
-							that.markers = [{
-								id: 1,
-								latitude: that.latitude,
-								longitude: that.longitude,
-								iconPath: '/static/sailun/gps-icon.png',
-							}]
-							let point = new plus.maps.Point(res.longitude, res.latitude);
-							plus.maps.Map.reverseGeocode(
-								point, {},
-								function(event) {
-									that.addressData= event;
-								},
-								function(e) {}
-							);
-						}
-					})
-				}
+			// 打开地图
+			openMap() {
+				this.mapShow = true
+			},
+			// 更新地址并关闭地图
+			updateAddress(addressObj) {
+				this.positionObj = addressObj
+				uni.$emit("addressData", this.positionObj)
+				uni.navigateBack({})
 			},
-
 		},
 
 	}
 </script>
 
 <style lang="scss">
+.content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
 
+    .address{
+        // margin-top: 1rem;
+    }
 </style>