城市

api/index.js

@@ -35,6 +35,15 @@ export function logAccess(data) {
 	return http.request({ url: `/system/accessLog/logAccess`, method: 'POST', data })
 }
 
+// search  文档https://docs.mapbox.com/api/search/search-box  参考https://www.aistro.io/en/chat
+export function search(data) {
+	return http.request({
+		url: `https://api.mapbox.com/search/searchbox/v1/suggest${tr(data)}`,
+		method: 'GET',
+		interceptorResponse: true
+	})
+}
+
 /**
  * @todo 把请求对象，转为url参数
  * @param {Object} obj 请求对象

api/request.js

@@ -8,13 +8,14 @@ class Request {
 	}
 
 	request(options = {}) {
-		if (this.interceptor.request && typeof this.interceptor.request === 'function') {
-			let tmpConfig = {};
-			let interceptorRequest = this.interceptor.request(options);
-			if (interceptorRequest === false) {
+		const interceptorRequest = options.interceptorRequest || this.interceptor.request
+		const interceptorResponse = options.interceptorResponse || this.interceptor.response
+		if (interceptorRequest && typeof interceptorRequest === 'function') {
+			let tmpConfig = interceptorRequest(options);
+			if (tmpConfig === false) {
 				return new Promise(() => {});
 			}
-			this.options = interceptorRequest;
+			this.options = tmpConfig;
 		}
 		options.dataType = options.dataType || this.config.dataType;
 		options.responseType = options.responseType || this.config.responseType;
@@ -29,8 +30,8 @@ class Request {
 				this.config.timer = null;
 				if (response.statusCode == 200) {
 					const res = this.config.originalData ? response : response.data;
-					if (this.interceptor.response && typeof this.interceptor.response === 'function') {
-						let resInterceptors = this.interceptor.response(res);
+					if (interceptorResponse && typeof interceptorResponse === 'function') {
+						let resInterceptors = interceptorResponse(res);
 						resolve(resInterceptors);
 					} else {
 						resolve(res);

i18n/cn.json

@@ -50,5 +50,8 @@
 	"Save": "保存",
 	"No Empty": "不能为空",
 	"Save Success": "保存成功",
-	"Fail Upload": "上传失败"
+	"Upload Fail": "上传失败",
+	"Search Fail": "查询失败",
+	"Place Tips": "请输入一个地址并从下拉列表中选择一个",
+	"Please Choose City": "请选择一个城市"
 }
\ No newline at end of file

i18n/en.json

@@ -34,7 +34,7 @@
 	"Nickname": "Nickname",
 	"Sex": "Sex",
 	"Birthday": "Birthday",
-	"Birth Place": "Birth Place",
+	"Birth Place": "Place of Birth",
 	"Language": "Language",
 	"Constellation Selection": "Constellation Selection",
 	"Cancel": "Cancel",
@@ -49,6 +49,9 @@
 	"Nickname Tips": "Please enter a nickname, with a maximum of 20 characters",
 	"Save": "Save",
 	"No Empty": "can not be empty",
-	"Save Success": "save successfully",
-	"Fail Upload": "fail to upload"
+	"Save Success": "successfully",
+	"Upload Fail": "upload failed",
+	"Search Fail": "query failed",
+	"Place Tips": "Please enter an address and select one from the drop-down list",
+	"Please Choose City": "Please choose a city"
 }
\ No newline at end of file

i18n/tc.json

@@ -50,5 +50,8 @@
 	"Save": "保存",
 	"No Empty": "不能為空",
 	"Save Success": "保存成功",
-	"Fail Upload": "上傳失敗"
+	"Upload Fail": "上傳失敗",
+	"Search Fail": "查詢失敗",
+	"Place Tips": "請輸入一個地址並從下拉列表中選擇一個",
+	"Please Choose City": "請選擇一個城市"
 }
\ No newline at end of file

pages.json

@@ -34,6 +34,13 @@
 				"navigationStyle": "custom",
 				"enablePullDownRefresh": false
 			}
+		},
+		{
+			"path": "pages/user/setPlace",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false
+			}
 		}
 	],
 	"globalStyle": {

pages/user/setNickname.vue

 <template>
 	<view class="page bg3" :style="{ paddingTop: `${x_sys.statusBarHeight + 44}px` }">
-		<uv-navbar :title="`${$t('Change')}${$t('Nickname')}`" bgColor="transparent" leftIconColor="#FFFFFF"
+		<uv-navbar :title="`${$t('Change')} ${$t('Nickname')}`" bgColor="transparent" leftIconColor="#FFFFFF"
 			titleStyle="color: #FFFFFF;" @leftClick="back"></uv-navbar>
 
 		<view class="body">

pages/user/setPlace.vue

+<template>
+	<view class="page bg3" :style="{ paddingTop: `${x_sys.statusBarHeight + 44}px` }">
+		<uv-navbar :title="`${$t('Change')} ${$t('Birth Place')}`" bgColor="transparent" leftIconColor="#FFFFFF"
+			titleStyle="color: #FFFFFF;" @leftClick="back"></uv-navbar>
+
+		<view class="body">
+			<input v-model="inputText" class="input" :placeholder="$t('Please Enter')" @input="onInput" />
+			<view class="tips">{{ $t('Place Tips') }}</view>
+			<scroll-view v-show="cityList.length" scroll-y class="list">
+				<view v-for="(item,index) in cityList" :key="index" class="item" @click="chooseCity(item)">
+					<view class="txt1">{{ item.name }}</view>
+					<view class="txt2">{{ item.place_formatted }}</view>
+				</view>
+			</scroll-view>
+		</view>
+
+		<view class="g-btn" @click="save">{{ $t('Save') }}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				inputText: '',
+				cityList: [],
+				city: null, // 用户选择的城市
+			}
+		},
+		onLoad() {
+			this.inputText = this.x_user.city || ''
+		},
+		methods: {
+			async onInput() {
+				this.city = null // 每次搜索都清空选择
+				const txt = this.inputText.trim()
+				if (!txt) return
+				const res = await this.$api.search({
+					q: txt,
+					types: 'city',
+					language: 'en',
+					access_token: this.$g.mapboxToken,
+					session_token: this.$g.mapboxToken
+				})
+				if (!res?.suggestions) return uni.showToast({ title: this.$t('Search Fail'), icon: 'none' })
+				this.cityList = res.suggestions
+			},
+			chooseCity(city) {
+				this.city = city
+				this.inputText = city.name
+			},
+			async save() {
+				if (!this.city) return uni.showToast({ title: this.$t('Please Choose City'), icon: 'none' })
+				const res = await this.$api.userEdit(Object.assign({}, this.x_user, { city: this.city.name }))
+				if (!res) return
+				this.$util.getUserInfo()
+				uni.showToast({ title: this.$t('Save Success') })
+				setTimeout(() => {
+					this.back()
+				}, 1000)
+			},
+			back() {
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.page {
+		.body {
+			padding: 0 36rpx;
+
+			.input {
+				color: #FFFFFF;
+				border-bottom: 1rpx solid #666;
+				margin-bottom: 16rpx;
+			}
+
+			.tips {
+				font-size: 28rpx;
+				color: #EEEEEE;
+				margin-bottom: 30rpx;
+			}
+
+			.list {
+				width: 696rpx;
+				max-height: 50vh;
+				background-color: rgba(255, 255, 255, 0.2);
+				border-radius: 20rpx;
+				margin: 0 auto;
+				padding: 10rpx 16rpx;
+
+				.item {
+					color: #EEEEEE;
+					border-bottom: 1rpx solid rgba(255, 255, 255, 0.23);
+					padding: 20rpx 0;
+
+					.txt1 {
+						font-size: 30rpx;
+						margin-bottom: 16rpx;
+					}
+
+					.txt2 {
+						font-size: 26rpx;
+					}
+				}
+
+				.item:last-of-type {
+					border-bottom: none;
+				}
+			}
+		}
+
+		.g-btn {
+			position: fixed;
+			left: 0;
+			right: 0;
+			bottom: 300rpx;
+			margin: 0 auto;
+		}
+	}
+</style>
\ No newline at end of file

pages/user/user.vue

@@ -31,8 +31,8 @@
 					<image class="icon" src="@/static/birth.png"></image>
 					<view class="txt">{{ $t('Birthday') }}</view>
 				</view>
-				<view class="right">
-					<view class="txt" @click="openBirth">{{ x_user.birthday }}</view>
+				<view class="right" @click="openBirth">
+					<view class="txt">{{ x_user.birthday }}</view>
 					<uv-icon class="icon" size="30rpx" color="#FFFFFF" name="arrow-right" />
 				</view>
 			</view>
@@ -41,7 +41,7 @@
 					<image class="icon" src="@/static/city.png"></image>
 					<view class="txt">{{ $t('Birth Place') }}</view>
 				</view>
-				<view class="right">
+				<view class="right" @click="go('/pages/user/setPlace')">
 					<view class="txt">{{ x_user.city }}</view>
 					<uv-icon class="icon" size="30rpx" color="#FFFFFF" name="arrow-right" />
 				</view>
@@ -164,7 +164,7 @@
 									const val = res.data.fileUrl
 									this.save(Object.assign({}, this.x_user, { avatar: val }))
 								} else {
-									uni.showToast({ title: this.$t('Fail Upload'), icon: 'none' })
+									uni.showToast({ title: this.$t('Upload Fail'), icon: 'none' })
 								}
 							}
 						});

utils/const.js

@@ -28,4 +28,6 @@ export default {
 		Male: "男",
 		Female: "女",
 	},
+	// mapbox的token
+	mapboxToken: 'pk.eyJ1IjoiYXJjYmxvY2siLCJhIjoiY2xvd2RkY2RyMGhkZDJxcW1rbW52cDFiaSJ9.Q1toKeWpNlhKQllsscB1Ag',
 }
\ No newline at end of file