发布消息 获取当前位置 + 可切换地理位置

src/pages/client/clientPackage/communityPublish.vue

@@ -1,258 +1,260 @@
 <template>
-  <view class="container">
-    <view class="top-box">
-      <u--textarea
-        border="none"
-        v-model="textContent"
-        count
-        placeholder="写下自己的感受分享给更多人"
-      ></u--textarea>
-      <view class="upload-box">
-        <image
-          class="upd-img"
-          :key="index"
-          v-for="(item, index) of fileList"
-          :src="item"
-          mode="aspectFill"
-        ></image>
-        <view class="upload-item" @click="handlerUploadImg" v-if="fileList.length < 9">
-          <image class="img" src="@/static/QR57a.jpg" mode=""></image>
-        </view>
-      </view>
-    </view>
-    <view class="item-box" @click="handlerGetLocation">
-      <view class="item-left">
-        <u-icon name="map" size="22"></u-icon>
-        <span class="fs-bold">你在哪里</span>
-        <span class="left-text">(越详细越容易被推荐噢)</span>
-      </view>
-      <view class="item-right">
-        <u-icon name="arrow-right"></u-icon>
-      </view>
-    </view>
-    <view class="btn-box">
-      <button class="btn" @click="handlerPublishBtn">发布</button>
-    </view>
-  </view>
+	<view class="container">
+		<view class="top-box">
+			<u--textarea border="none" v-model="textContent" count placeholder="写下自己的感受分享给更多人"></u--textarea>
+			<view class="upload-box">
+				<image class="upd-img" :key="index" v-for="(item, index) of fileList" :src="item" mode="aspectFill">
+				</image>
+				<view class="upload-item" @click="handlerUploadImg" v-if="fileList.length < 9">
+					<image class="img" src="@/static/QR57a.jpg" mode=""></image>
+				</view>
+			</view>
+		</view>
+		<view class="item-box" @click="handlerGetLocation">
+			<view class="item-left">
+				<u-icon name="map" size="22"></u-icon>
+				<span class="fs-bold">你在哪里</span>
+				<span class="left-text">{{ address }}</span>
+			</view>
+			<view class="item-right">
+				<u-icon name="arrow-right"></u-icon>
+			</view>
+		</view>
+		<view class="btn-box">
+			<button class="btn" @click="handlerPublishBtn">发布</button>
+		</view>
+	</view>
 </template>
-
 <script>
-import { addClientContent } from '@/api/client/community.js';
-export default {
-  data() {
-    return {
-      textContent: '',
-      fileList: [],
-      userId: null,
-      uploadCount: 0,
-    };
-  },
-  mounted() {
-    this.userId = this.$store.state.user.userMessage.id;
-  },
-  methods: {
-    // 获取当前定位
-    handlerGetLocation() {
-      wx.getLocation({
-        type: 'gcj02',
-        success(res) {
-          console.log('@@@@res', res);
-        },
-        fail(error) {
-          console.log('error', error);
-        },
-      });
-    },
-    // 点击发布按钮
-    handlerPublishBtn() {
-      let params = {
-        textContent: this.textContent,
-        status: 0, // 状态：0-正常；1-屏蔽
-        type: 'PURE_TEXT', // 动态类型:1-纯文字；2-图片；3-视频 允许值: PURE_TEXT, PHOTO, VIDEO
-        location: '山东潍坊', // 定位
-        userId: this.userId,
-      };
-      if (this.fileList.length != 0) {
-        params.type = 'PHOTO';
-        params.list = [];
-        this.fileList.map((rs, idx) => {
-          params.list.push({
-            resourceKey: rs,
-            sort: idx,
-          });
-        });
-      }
-      addClientContent(params).then(res => {
-        if (res.code === 'OK') {
-          uni.showToast({
-            title: '发布成功',
-            icon: 'none',
-          });
-          this.textContent = '';
-          setTimeout(() => {
-            uni.navigateBack(-1);
-          }, 1500);
-        } else {
-          uni.showToast({
-            title: res.msg,
-            icon: 'none',
-          });
-          return;
-        }
-      });
-    },
-    // 上传头像
-    async handlerUploadImg() {
-      try {
-        const res = await uni.showActionSheet({
-          itemList: ['拍照', '从相册选择'],
-        });
+	import { addClientContent } from '@/api/client/community.js';
+	import { getCurrentLocation } from '@/api/client/home';
+	import { mapGetters } from "vuex"
+	export default {
+		data() {
+			return {
+				textContent: '',
+				fileList: [],
+				uploadCount: 0,
+				address:'' ,//当前位置
+			};
+		},
+		mounted() {
+			let { latitude , longitude } = this.location
+			this.handlerInitLocation(latitude , longitude)
+		},
+		computed:{
+			...mapGetters(['location','userId'])
+		},
+		methods: {
+			// 初始化当前位置
+			handlerInitLocation(latitude , longitude){
+				let point = `${latitude},${longitude}`
+				getCurrentLocation({ point }).then(res=>{
+					this.address = res.data.name	
+				})
+			},
+			// 手动选择城市	获取位置
+			handlerGetLocation() {
+				uni.chooseLocation({
+				  success: res => {
+					this.address = res.name
+				  },
+				  fail: function(err) {
+				    console.log('取消按钮', err)
+				  }
+				});
+			},
+			// 点击发布按钮
+			handlerPublishBtn() {
+				return 
+				let params = {
+					textContent: this.textContent,
+					status: 0, // 状态：0-正常；1-屏蔽
+					type: 'PURE_TEXT', // 动态类型:1-纯文字；2-图片；3-视频 允许值: PURE_TEXT, PHOTO, VIDEO
+					location: this.address, // 定位
+					userId: this.userId,
+				};
+				if (this.fileList.length != 0) {
+					params.type = 'PHOTO';
+					params.list = [];
+					this.fileList.map((rs, idx) => {
+						params.list.push({
+							resourceKey: rs,
+							sort: idx,
+						});
+					});
+				}
+				addClientContent(params).then(res => {
+					if (res.code === 'OK') {
+						uni.showToast({
+							title: '发布成功',
+							icon: 'none',
+						});
+						this.textContent = '';
+						setTimeout(() => {
+							uni.navigateBack(-1);
+						}, 1500);
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+						});
+						return;
+					}
+				});
+			},
+			// 上传头像
+			async handlerUploadImg() {
+				try {
+					const res = await uni.showActionSheet({
+						itemList: ['拍照', '从相册选择'],
+					});
 
-        if (res.tapIndex === 0) {
-          // 用户选择拍照
-          this.takePhoto();
-        } else if (res.tapIndex === 1) {
-          // 用户选择从相册选择
-          this.chooseImage();
-        }
-      } catch (error) {
-        console.error(error);
-      }
-    },
-    // 拍照
-    takePhoto() {
-      uni.chooseImage({
-        sourceType: ['camera'],
-        count: 9 - this.uploadCount,
-        success: res => {
-          const tempFilePaths = res.tempFilePaths;
-          // 调用上传图片的方法
-          tempFilePaths.map(rs => {
-            this.uploadAvatar(rs);
-          });
-        },
-        fail: error => {
-          console.error(error);
-        },
-      });
-    },
-    //从相册中选择
-    chooseImage() {
-      uni.chooseImage({
-        sourceType: ['album'],
-        count: 9 - this.uploadCount,
-        success: res => {
-          const tempFilePaths = res.tempFilePaths;
-          tempFilePaths.map(rs => {
-            this.uploadAvatar(rs);
-          });
-          // 调用上传图片的方法
-        },
-        fail: error => {
-          console.error(error);
-        },
-      });
-    },
-    // 上传头像
-    uploadAvatar(filePath) {
-      // 在这里实现上传头像的逻辑，将filePath作为参数传入
-      this.fileList.push(filePath);
-      this.uploadCount = this.fileList.length;
-      console.log('@@@filePath', this.fileList);
-      // this.queryParams.avatar = filePath;
-      this.$forceUpdate(); // 手动触发组件的重新渲染
-    },
-  },
-};
+					if (res.tapIndex === 0) {
+						// 用户选择拍照
+						this.takePhoto();
+					} else if (res.tapIndex === 1) {
+						// 用户选择从相册选择
+						this.chooseImage();
+					}
+				} catch (error) {
+					console.error(error);
+				}
+			},
+			// 拍照
+			takePhoto() {
+				uni.chooseImage({
+					sourceType: ['camera'],
+					count: 9 - this.uploadCount,
+					success: res => {
+						const tempFilePaths = res.tempFilePaths;
+						// 调用上传图片的方法
+						tempFilePaths.map(rs => {
+							this.uploadAvatar(rs);
+						});
+					},
+					fail: error => {
+						console.error(error);
+					},
+				});
+			},
+			//从相册中选择
+			chooseImage() {
+				uni.chooseImage({
+					sourceType: ['album'],
+					count: 9 - this.uploadCount,
+					success: res => {
+						const tempFilePaths = res.tempFilePaths;
+						tempFilePaths.map(rs => {
+							this.uploadAvatar(rs);
+						});
+						// 调用上传图片的方法
+					},
+					fail: error => {
+						console.error(error);
+					},
+				});
+			},
+			// 上传头像
+			uploadAvatar(filePath) {
+				// 在这里实现上传头像的逻辑，将filePath作为参数传入
+				this.fileList.push(filePath);
+				this.uploadCount = this.fileList.length;
+				console.log('@@@filePath', this.fileList);
+				// this.queryParams.avatar = filePath;
+				this.$forceUpdate(); // 手动触发组件的重新渲染
+			},
+		},
+	};
 </script>
 
 <style lang="scss" scoped>
-.container {
-  position: relative;
-  background-color: #f5f7f9;
-  height: 100vh;
+	.container {
+		position: relative;
+		background-color: #f5f7f9;
+		height: 100vh;
 
-  .top-box,
-  .item-box {
-    padding: 20rpx;
-    background-color: #fff;
-    border-radius: 20rpx;
+		.top-box,
+		.item-box {
+			padding: 20rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
 
-    .upload-box {
-      margin-top: 20rpx;
-      display: flex;
-      flex-wrap: wrap;
+			.upload-box {
+				margin-top: 20rpx;
+				display: flex;
+				flex-wrap: wrap;
 
-      .upd-img {
-        width: 140rpx;
-        height: 140rpx;
-        border-radius: 20rpx;
-        margin: 10rpx;
-      }
+				.upd-img {
+					width: 140rpx;
+					height: 140rpx;
+					border-radius: 20rpx;
+					margin: 10rpx;
+				}
 
-      .upload-item {
-        width: 140rpx;
-        height: 140rpx;
-        border: 2rpx solid #000;
-        border-radius: 20rpx;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 10rpx;
+				.upload-item {
+					width: 140rpx;
+					height: 140rpx;
+					border: 2rpx solid #000;
+					border-radius: 20rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					margin: 10rpx;
 
-        .img {
-          width: 80rpx;
-          height: 80rpx;
-          margin: 0 auto;
-        }
-      }
-    }
-  }
+					.img {
+						width: 80rpx;
+						height: 80rpx;
+						margin: 0 auto;
+					}
+				}
+			}
+		}
 
-  .item-box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 20rpx;
+		.item-box {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 20rpx;
 
-    .item-left {
-      display: flex;
-      align-items: center;
-    }
-  }
+			.item-left {
+				display: flex;
+				align-items: center;
+			}
+		}
 
-  .btn-box {
-    position: absolute;
-    bottom: 0;
-    background-color: #fff;
-    height: 100rpx;
-    padding: 20rpx;
-    width: 95%;
-    display: flex;
-    justify-content: center;
+		.btn-box {
+			position: absolute;
+			bottom: 0;
+			background-color: #fff;
+			height: 100rpx;
+			padding: 20rpx;
+			width: 95%;
+			display: flex;
+			justify-content: center;
 
-    .btn {
-      width: 80%;
-      border-radius: 20rpx;
-      font-size: 28rpx;
-      color: #000;
-      background-color: #fecf4c;
-      height: 80rpx;
-      line-height: 80rpx;
-    }
-  }
+			.btn {
+				width: 80%;
+				border-radius: 20rpx;
+				font-size: 28rpx;
+				color: #000;
+				background-color: #fecf4c;
+				height: 80rpx;
+				line-height: 80rpx;
+			}
+		}
 
-  .fs-bold {
-    font-weight: bold;
-    font-size: 28rpx;
-    color: #000;
-    margin-left: 10rpx;
-  }
+		.fs-bold {
+			font-weight: bold;
+			font-size: 28rpx;
+			color: #000;
+			margin-left: 10rpx;
+		}
 
-  .left-text {
-    color: #a6a7a8;
-    font-size: 28rpx;
-    margin-left: 10rpx;
-  }
-}
-</style>
+		.left-text {
+			color: #a6a7a8;
+			font-size: 28rpx;
+			margin-left: 10rpx;
+		}
+	}
+</style>