|
@@ -1,193 +1,249 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="top-box">
|
|
|
- <u--textarea border='none' v-model="textContent" count placeholder="写下自己的感受分享给更多人"></u--textarea>
|
|
|
- <view class="upload-box">
|
|
|
- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
|
|
- :maxCount="9"></u-upload>
|
|
|
- </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" v-for="item 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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { addClientContent } from '@/api/client/community.js';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- textContent: '',
|
|
|
- fileList1: [],
|
|
|
- userId:null
|
|
|
- }
|
|
|
- },
|
|
|
- mounted(){
|
|
|
+ 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);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
+ methods: {
|
|
|
+ // 获取当前定位
|
|
|
+ handlerGetLocation() {
|
|
|
+ wx.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ success(res) {
|
|
|
+ console.log("@@@@res", res);
|
|
|
+ },
|
|
|
+ fail(error) {
|
|
|
+ console.log("error", error);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 点击发布按钮
|
|
|
- handlerPublishBtn(){
|
|
|
+ handlerPublishBtn() {
|
|
|
let params = {
|
|
|
- textContent:this.textContent,
|
|
|
- status:0, // 状态:0-正常;1-屏蔽
|
|
|
- type:'PURE_TEXT', // 动态类型:1-纯文字;2-图片;3-视频 允许值: PURE_TEXT, PHOTO, VIDEO
|
|
|
- location:'山东潍坊', // 定位
|
|
|
- userId:this.userId,
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
- console.log("@@@@params",params);
|
|
|
- addClientContent(params).then(res=>{
|
|
|
- console.log("addClientContent",res);
|
|
|
- // if(res.code == 200){
|
|
|
- // uni.showToast({
|
|
|
- // title:'发布成功',
|
|
|
- // icon:'none'
|
|
|
- // })
|
|
|
- // this.textContent = ''
|
|
|
- // setTimeout(()=>{
|
|
|
- // uni.navigateBack(-1)
|
|
|
- // },1500)
|
|
|
- // }else{
|
|
|
- // uni.showToast({
|
|
|
- // title:res.msg,
|
|
|
- // icon:'none'
|
|
|
- // })
|
|
|
- // return
|
|
|
- // }
|
|
|
+ addClientContent(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '发布成功',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ this.textContent = ''
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack(-1)
|
|
|
+ }, 1500)
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
- // 删除图片
|
|
|
- deletePic(event) {
|
|
|
- this[`fileList${event.name}`].splice(event.index, 1)
|
|
|
- },
|
|
|
- // 新增图片
|
|
|
- async afterRead(event) {
|
|
|
- // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
|
|
|
- let lists = [].concat(event.file)
|
|
|
- let fileListLen = this[`fileList${event.name}`].length
|
|
|
- lists.map((item) => {
|
|
|
- this[`fileList${event.name}`].push({
|
|
|
- ...item,
|
|
|
- status: 'uploading',
|
|
|
- message: '上传中'
|
|
|
- })
|
|
|
- })
|
|
|
- for (let i = 0; i < lists.length; i++) {
|
|
|
- const result = await this.uploadFilePromise(lists[i].url)
|
|
|
- let item = this[`fileList${event.name}`][fileListLen]
|
|
|
- this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
|
- status: 'success',
|
|
|
- message: '',
|
|
|
- url: result
|
|
|
- }))
|
|
|
- fileListLen++
|
|
|
- }
|
|
|
- },
|
|
|
- uploadFilePromise(url) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- let a = uni.uploadFile({
|
|
|
- url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址
|
|
|
- filePath: url,
|
|
|
- name: 'file',
|
|
|
- formData: {
|
|
|
- user: 'test'
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- setTimeout(() => {
|
|
|
- resolve(res.data.data)
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
+ // 上传头像
|
|
|
+ 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(); // 手动触发组件的重新渲染
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
</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;
|
|
|
- }
|
|
|
- }
|
|
|
+ .upload-box {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ .left-text {
|
|
|
+ color: #a6a7a8;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|