移动端页面提交
This commit is contained in:
linfeng
parent
3669d616f7
commit
2f36d725b7
@ -37,6 +37,12 @@ public class AppLoginController {
|
||||
@Autowired
|
||||
private RedisUtils redisUtils;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 手机验证码登录
|
||||
*/
|
||||
|
||||
@ -2,10 +2,15 @@
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
|
||||
"version": "0.0",
|
||||
"configurations": [{
|
||||
"type": "uniCloud",
|
||||
"default": {
|
||||
"launchtype": "local"
|
||||
}
|
||||
}
|
||||
"default" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view>
|
||||
<view @click="goPostAdd" class="add-post">
|
||||
<u-icon name="edit-pen" color="#ffffff" size="50"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goPostAdd() {
|
||||
uni.navigateTo({
|
||||
url:'/pages/post/add'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.add-post{
|
||||
position: fixed;
|
||||
right: 20rpx;
|
||||
bottom: 180rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #333333;
|
||||
box-shadow: 0 0 20rpx #999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-for="(item, index) in list" :key="item.id">
|
||||
<view @click="jump(item)">
|
||||
<view class="post-item">
|
||||
<view class="post-list-item">
|
||||
<view @click.stop="toUser(item.uid)">
|
||||
<u-avatar class="avatar" :src="item.userInfo.avatar" :show-level='item.userInfo.type == 1' level-bg-color="#000000"></u-avatar>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view style="display: flex;align-items: center;">
|
||||
<text v-if="item.userInfo.type == 1" class="official">官方</text>
|
||||
<text class="username">{{ item.userInfo.username.substring(0, 10) }}</text>
|
||||
<text v-if="item.postTop>0" class="officials">置顶</text>
|
||||
<text v-if="item.status==1" class="officials">审核中</text>
|
||||
<text v-if="item.status==2" class="officials">已下架</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="time">{{ item.createTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="post-content">
|
||||
<rich-text class="post-text" :nodes="item.content"></rich-text>
|
||||
<!-- 帖子类型 -->
|
||||
<block v-if="item.type == 1">
|
||||
<!--一张图片-->
|
||||
<block v-if="item.media.length == 1">
|
||||
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="item.media[0]"
|
||||
@tap.stop="previewImage(item.media[0], item.media)"></image>
|
||||
</block>
|
||||
<!--二张图片-->
|
||||
<block v-if="item.media.length == 2">
|
||||
<view class="img-style-2">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in item.media" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, item.media)" mode="aspectFill"
|
||||
:src="mediaItem"></image>
|
||||
</view>
|
||||
</block>
|
||||
<!--三张图片-->
|
||||
<block v-if="item.media.length == 3">
|
||||
<view class="img-style-3">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in item.media" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, item.media)" mode="aspectFill"
|
||||
:src="mediaItem"></image>
|
||||
</view>
|
||||
</block>
|
||||
<!--四张图片-->
|
||||
<block v-if="item.media.length == 4">
|
||||
<view class="img-style-4">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in item.media" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, item.media)" mode="aspectFill"
|
||||
:src="mediaItem"></image>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 位置 -->
|
||||
<view class="address" v-if="item.address">
|
||||
<u-icon class="icon" name="map-fill"></u-icon>
|
||||
<text>{{ item.address }}</text>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<view class="post-list-bottom">
|
||||
<view class="p-item margin50">
|
||||
<text class="iconfont icon-quanzi"></text>
|
||||
<text class="count">{{ item.readCount }}</text>
|
||||
</view>
|
||||
<view v-show="item.isCollection" class="p-item" @click.stop="cancelCollection(item.id,index)">
|
||||
<u-icon name="heart-fill" color="#cc0000"></u-icon>
|
||||
<text class="count">{{ item.collectionCount }}</text>
|
||||
</view>
|
||||
<view v-show="!item.isCollection" class="p-item" @click.stop="addCollection(item.id,index)">
|
||||
<u-icon name="heart"></u-icon>
|
||||
<text class="count">{{ item.collectionCount }}</text>
|
||||
</view>
|
||||
|
||||
<view class="p-item margin50">
|
||||
<text class="iconfont icon-pinglun"></text>
|
||||
<text class="count">{{ item.commentCount }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<block v-if="list.length === 0 && loadStatus == 'nomore'">
|
||||
<u-empty margin-top="100" text="暂无内容" mode="favor"></u-empty>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view style="margin: 30rpx 0;">
|
||||
<u-loadmore :status="loadStatus" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'post-list',
|
||||
props: {
|
||||
list: Array,
|
||||
loadStatus: String,
|
||||
handle: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
showTopic: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
uid: Number,
|
||||
admin: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAction: false,
|
||||
|
||||
choosePost: '',
|
||||
chooseIndex: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
copyPageUrl(id) {
|
||||
let that = this;
|
||||
uni.setClipboardData({
|
||||
data: this.$c.shareH5Url+'pages/post/post?id=' + id,
|
||||
success: function() {
|
||||
uni.hideToast();
|
||||
that.$q.toast('复制成功', 'success');
|
||||
that.showShare = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
onActive(postInfo, index) {
|
||||
this.showAction = true;
|
||||
this.choosePost = postInfo;
|
||||
this.chooseIndex = index;
|
||||
},
|
||||
|
||||
cancelCollection(id, index) {
|
||||
this.$H
|
||||
.post('post/cancelCollection', {
|
||||
id: id
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list[index].isCollection = false;
|
||||
this.list[index].collectionCount--;
|
||||
}
|
||||
});
|
||||
},
|
||||
addCollection(id, index) {
|
||||
this.$H
|
||||
.post('post/addCollection', {
|
||||
id: id,
|
||||
uid: this.list[index].uid
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list[index].isCollection = true;
|
||||
this.list[index].collectionCount++;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
follow() {
|
||||
this.$H
|
||||
.post('user/addFollow', {
|
||||
id: this.choosePost.uid
|
||||
})
|
||||
.then(res => {
|
||||
this.$u.toast(res.msg);
|
||||
});
|
||||
},
|
||||
previewImage(url, urls) {
|
||||
uni.previewImage({
|
||||
current: url, // 当前显示图片的http链接
|
||||
urls: urls // 需要预览的图片http链接列表
|
||||
});
|
||||
},
|
||||
|
||||
jump(e) {
|
||||
let url;
|
||||
|
||||
// 图文
|
||||
if (e.type == 1 || e.type == 4) {
|
||||
url = '/pages/post/post?id=' + e.id;
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
|
||||
toUser(uid) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/home?uid=' + uid
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.post-item {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.post-content {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.img-style-1 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.img-style-2 {
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
margin: 5rpx;
|
||||
|
||||
width: 100%;
|
||||
height: 305rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.img-style-3 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
image {
|
||||
width: 31.3%;
|
||||
height: 200rpx;
|
||||
margin: 0.6%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.img-style-4 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
image {
|
||||
width: 48%;
|
||||
height: 320rpx;
|
||||
margin: 0.5%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
display: flex;
|
||||
font-size: 20rpx;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 20rpx;
|
||||
display: inline-block;
|
||||
padding: 5rpx 20rpx;
|
||||
margin: 20rpx 0;
|
||||
|
||||
.icon {
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar {
|
||||
width: 85rpx;
|
||||
height: 85rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.center{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
.username{
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.official{
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
background-color: #333333;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.officials{
|
||||
display: inline-block;
|
||||
font-size: 25rpx;
|
||||
color: #ffffff;
|
||||
background-color: #ff0000;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
height: 85rpx;
|
||||
.arrow-down{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-text {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 10;
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-list-bottom {
|
||||
display: flex;
|
||||
margin: 20rpx 0;
|
||||
|
||||
.p-item {
|
||||
margin: 0 auto;
|
||||
color: #616161;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.count {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.p-item[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-for="(item, index) in userList" :key="index">
|
||||
<navigator :url="'/pages/user/home?uid=' + item.uid" class="user-list-item">
|
||||
<u-avatar class="avatar" :src="item.avatar"></u-avatar>
|
||||
<view class="user">
|
||||
<text class="name">{{ item.username }}</text>
|
||||
<text v-if="item.gender == 1" class="iconfont icon-nan"></text>
|
||||
<text v-if="item.gender == 2" class="iconfont icon-nv"></text>
|
||||
</view>
|
||||
<u-button @click="follow(index, item.uid)" v-if="item.hasFollow === 0" class="btn-gz" type="default" size="mini">关注</u-button>
|
||||
<u-button @click="cancelFollow(index, item.uid)" v-if="item.hasFollow === 1" class="btn-gz" type="default" size="mini" plain>互相关注</u-button>
|
||||
<u-button @click="cancelFollow(index, item.uid)" v-if="item.hasFollow === 2" class="btn-gz" type="default" size="mini" plain>已关注</u-button>
|
||||
</navigator>
|
||||
</block>
|
||||
<!-- 加载状态 -->
|
||||
<block v-if="loadStatus != 'none'">
|
||||
<block v-if="list.length === 0 && loadStatus == 'nomore'"><u-empty margin-top="100" text="暂无用户" mode="favor"></u-empty></block>
|
||||
<block v-else><u-loadmore margin-bottom="50" margin-top="50" :status="loadStatus" /></block>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: Array,
|
||||
loadStatus: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
list() {
|
||||
this.userList = this.list;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
follow(index, uid) {
|
||||
this.$H
|
||||
.post('user/addFollow', {
|
||||
id: uid
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.userList[index].hasFollow = 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelFollow(index, uid) {
|
||||
this.$H
|
||||
.post('user/cancelFollow', {
|
||||
id: uid
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.userList[index].hasFollow = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
background-color: #ffffff;
|
||||
&:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-list-item .icon-nv {
|
||||
color: #ff4d94;
|
||||
}
|
||||
|
||||
.user-list-item .icon-nan {
|
||||
color: #0091ff;
|
||||
}
|
||||
|
||||
.user-list-item .avatar {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.user-list-item .user .name {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.user-list-item .user .iconfont {
|
||||
font-size: 12px;
|
||||
}
|
||||
/* #ifdef H5 */
|
||||
.user-list-item .btn-gz {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef MP */
|
||||
.user-list-item .btn-gz {
|
||||
margin-left: auto;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
@ -17,7 +17,8 @@ import Vue from 'vue'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
...App,
|
||||
store
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
@ -50,11 +50,18 @@
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"appid" : "wx8068e1172da3e9d5",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
"urlCheck" : false,
|
||||
"es6" : true,
|
||||
"minified" : true
|
||||
},
|
||||
"usingComponents" : true
|
||||
"usingComponents" : true,
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "获取用户位置信息"
|
||||
}
|
||||
}
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
|
||||
@ -6,11 +6,46 @@
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app"
|
||||
"navigationBarTitleText": "主页",
|
||||
"backgroundColor": "#fff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/user/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/message/message",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "消息"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/message/message",
|
||||
"path" : "pages/post/post",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/login/login",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
,{
|
||||
"path" : "pages/my/post",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
@ -19,7 +54,43 @@
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/user",
|
||||
"path" : "pages/my/user",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/post/add",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/edit",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/home",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人主页",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/login/weixin",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
@ -59,5 +130,4 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,25 +1,166 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<u-icon name="photo"></u-icon>
|
||||
<u-navbar :is-back="false" z-index="99999">
|
||||
<u-tabs :list="tabList" font-size="35" name="cateName" bg-color="#fff" :current="current"
|
||||
@change="tabChange"></u-tabs>
|
||||
</u-navbar>
|
||||
<!-- 最新 -->
|
||||
<view v-if="current === 1">
|
||||
<post-list :list="lastPost" :loadStatus="loadStatus2"></post-list>
|
||||
</view>
|
||||
<!-- 关注 -->
|
||||
<view v-if="current === 0">
|
||||
<post-list :list="followUserPost" :loadStatus="loadStatus1"></post-list>
|
||||
</view>
|
||||
<!-- 发贴入口 -->
|
||||
<add-post-tag></add-post-tag>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import postList from '../../components/post-list/post-list.vue';
|
||||
import addPostTag from '../../components/add-post-tag/add-post-tag.vue';
|
||||
export default {
|
||||
components: {
|
||||
postList,
|
||||
addPostTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sessionUid: uni.getStorageSync('userInfo').uid,
|
||||
loadStatus1: 'loadmore',
|
||||
loadStatus2: 'loadmore',
|
||||
page1: 1,
|
||||
page2: 1,
|
||||
shareCover: '',
|
||||
followUserPost: [],
|
||||
lastPost: [],
|
||||
tabList: [{
|
||||
name: '关注'
|
||||
},
|
||||
{
|
||||
name: '最新'
|
||||
}
|
||||
],
|
||||
current: 1,
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
msgCount() {
|
||||
return this.$store.state.messegeNum
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
return {
|
||||
title: this.$c.miniappName,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: this.shareCover
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getLastPost();
|
||||
},
|
||||
onShow() {
|
||||
this.getMsgNum();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.current === 0) {
|
||||
this.page1++;
|
||||
this.getFollowUserPost();
|
||||
}
|
||||
|
||||
if (this.current === 1) {
|
||||
this.page2++;
|
||||
this.getLastPost();
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
if (this.current === 0) {
|
||||
this.page1 = 1;
|
||||
this.followUserPost = [];
|
||||
this.getFollowUserPost();
|
||||
this.getMsgNum();
|
||||
}
|
||||
if (this.current === 1) {
|
||||
this.page2 = 1;
|
||||
this.lastPost = [];
|
||||
this.getLastPost();
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
methods: {
|
||||
|
||||
getMsgNum() {
|
||||
this.$H.post('message/num').then(res => {
|
||||
this.$store.state.messegeNum = [0, 0, 0, res.result.allCount, 0];
|
||||
});
|
||||
},
|
||||
tabChange(index) {
|
||||
this.current = index;
|
||||
this.followUserPost=[];
|
||||
this.lastPost=[];
|
||||
|
||||
if(index===0){
|
||||
this.page1 = 1;
|
||||
this.getFollowUserPost();
|
||||
this.getMsgNum();
|
||||
}
|
||||
if(index===1){
|
||||
this.page2 = 1;
|
||||
this.getLastPost();
|
||||
}
|
||||
},
|
||||
getSysInfo() {
|
||||
this.$H.get('system/miniConfig').then(res => {
|
||||
this.shareCover = res.result.intro;
|
||||
});
|
||||
},
|
||||
// 获取关注用户帖子
|
||||
getFollowUserPost() {
|
||||
this.loadStatus1 = 'loading';
|
||||
this.$H
|
||||
.get('post/followUserPost', {
|
||||
page: this.page1
|
||||
})
|
||||
.then(res => {
|
||||
if(res.code==0&&res.result){
|
||||
this.followUserPost = this.followUserPost.concat(res.result.data);
|
||||
if (res.result.current_page >= res.result.total || res.result.last_page === 0) {
|
||||
this.loadStatus1 = 'nomore';
|
||||
} else {
|
||||
this.loadStatus1 = 'loadmore';
|
||||
}
|
||||
}else{
|
||||
this.loadStatus1 = 'nomore';
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
//获取最新帖子
|
||||
getLastPost() {
|
||||
this.loadStatus2 = 'loading';
|
||||
this.$H
|
||||
.get('post/lastPost', {
|
||||
page: this.page2
|
||||
})
|
||||
.then(res => {
|
||||
this.lastPost = this.lastPost.concat(res.result.data);
|
||||
if (res.result.current_page >= res.result.total || res.result.last_page === 0) {
|
||||
this.loadStatus2 = 'nomore';
|
||||
} else {
|
||||
this.loadStatus2 = 'loadmore';
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<view class="login-register">
|
||||
<view class="title">请先登录/注册</view>
|
||||
<u-form :model="form" ref="uForm">
|
||||
<u-form-item>
|
||||
<u-input v-model="form.mobile" placeholder="请输入手机号" />
|
||||
</u-form-item>
|
||||
<u-form-item>
|
||||
<u-input v-model="form.code" placeholder="请输入验证码" />
|
||||
<u-button slot="right" size="mini" @click="getCode">{{tips}}</u-button>
|
||||
<u-verification-code :seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange">
|
||||
</u-verification-code>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<view class="button-login">
|
||||
<u-button v-show="form.mobile && form.code" type="success" @click="phoneLogin" shape="circle">登录</u-button>
|
||||
<u-button v-show="!form.mobile || !form.code" type="default" shape="circle">登录</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
mobile: "",
|
||||
code: ""
|
||||
},
|
||||
tips: '验证码'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
phoneLogin() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '登录中'
|
||||
});
|
||||
this.$H.post("user/smsLogin", this.form).then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.setStorageSync("hasLogin", true);
|
||||
uni.setStorageSync("token", res.token);
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
// this.getUserInfo();
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
})
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
let phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
|
||||
if(this.form.mobile==''){
|
||||
this.$u.toast('请输入手机号');
|
||||
}else if(!phoneCodeVerification.test(this.form.mobile)){
|
||||
this.$u.toast('请输入规范的手机号');
|
||||
}else{
|
||||
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
|
||||
this.$H.post("user/sendSmsCode", {
|
||||
mobile: this.form.mobile
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.hideLoading();
|
||||
this.$refs.uCode.start();
|
||||
this.$u.toast(res.msg);
|
||||
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
}
|
||||
},
|
||||
end() {
|
||||
},
|
||||
start() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-register{
|
||||
padding: 20rpx 50rpx;
|
||||
}
|
||||
|
||||
.button-login{
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view class="login">
|
||||
<image class="logo" :src="logo"></image>
|
||||
<text class="txt1">申请获取以下权限</text>
|
||||
<text class="txt2">获取你的公开信息（昵称、头像等）</text>
|
||||
<u-button @click="login" :custom-style="btnStyle">授权登录</u-button>
|
||||
<text class="txt3" @click="goBack">暂不登录</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnStyle: {
|
||||
color: "#fff",
|
||||
backgroundColor: '#333333'
|
||||
},
|
||||
logo: ""
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getSysInfo();
|
||||
},
|
||||
methods: {
|
||||
goBack(){
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
getSysInfo() {
|
||||
this.$H.get("system/miniConfig").then(res => {
|
||||
this.logo = res.result.intro;
|
||||
})
|
||||
},
|
||||
async login() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '登录中'
|
||||
});
|
||||
|
||||
let that = this;
|
||||
|
||||
let userInfo = await this.getUserProfile();
|
||||
let loginCode = await this.getLoginCode();
|
||||
// console.log('========>', JSON.stringify(userInfo))
|
||||
that.$H.post('user/miniWxLogin', {
|
||||
code: loginCode,
|
||||
username: userInfo.nickName,
|
||||
avatar: userInfo.avatarUrl,
|
||||
province: userInfo.province,
|
||||
city: userInfo.city,
|
||||
gender: userInfo.gender
|
||||
}).then(res2 => {
|
||||
if (res2.code === 0) {
|
||||
uni.setStorageSync("hasLogin", true);
|
||||
uni.setStorageSync("token", res2.token);
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
that.getUserInfo();
|
||||
|
||||
uni.hideLoading();
|
||||
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
},
|
||||
getUserInfo() {
|
||||
this.$H.get("user/userInfo").then(res => {
|
||||
uni.setStorageSync("userInfo", res.result)
|
||||
})
|
||||
},
|
||||
getLoginCode() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(loginRes) {
|
||||
resolve(loginRes.code);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
getUserProfile() {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.getUserProfile({
|
||||
lang: 'zh_CN',
|
||||
desc: '用于完善会员资料',
|
||||
success: res => {
|
||||
resolve(res.userInfo);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 100rpx;
|
||||
}
|
||||
|
||||
.login .logo {
|
||||
width: 230rpx;
|
||||
height: 230rpx;
|
||||
margin: 50rpx auto;
|
||||
}
|
||||
|
||||
.login .txt1 {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.login .txt2 {
|
||||
color: #999;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.login .txt3 {
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 90rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
消息页
|
||||
消息
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view>
|
||||
<post-list :list="postList" :loadStatus="loadStatus"></post-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import postList from '../../components/post-list/post-list.vue';
|
||||
export default {
|
||||
components: {
|
||||
postList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
postList: [],
|
||||
loadStatus: "loading",
|
||||
page: 1,
|
||||
type: 1,//1 点赞帖子 2 我的帖子
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.type=options.type
|
||||
if(options.type==1){
|
||||
this.getCollectPostList();
|
||||
}else if(options.type==2){
|
||||
this.getMyPostList();
|
||||
}
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.type==1){
|
||||
this.page++;
|
||||
this.getCollectPostList();
|
||||
}else if(this.type==2){
|
||||
this.page++;
|
||||
this.getMyPostList();
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getCollectPostList() {
|
||||
this.loadStatus = "loading";
|
||||
this.$H.get('post/myCollectPost', {
|
||||
page: this.page
|
||||
}).then(res => {
|
||||
if(res.result.data){
|
||||
this.postList = this.postList.concat(res.result.data);
|
||||
if (res.result.current_page >= res.result.total || res.result.last_page === 0) {
|
||||
this.loadStatus = "nomore";
|
||||
} else {
|
||||
this.loadStatus = "loadmore"
|
||||
}
|
||||
}else{
|
||||
this.loadStatus = "nomore";
|
||||
}
|
||||
})
|
||||
},
|
||||
getMyPostList() {
|
||||
this.loadStatus = "loading";
|
||||
this.$H.get('post/myPost', {
|
||||
page: this.page
|
||||
}).then(res => {
|
||||
this.postList = this.postList.concat(res.result.data);
|
||||
if (res.result.current_page >= res.result.total || res.result.last_page === 0) {
|
||||
this.loadStatus = "nomore";
|
||||
} else {
|
||||
this.loadStatus = "loadmore"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view>
|
||||
<user-list :list="userList" :loadStatus="loadStatus"></user-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userList from '../../components/user-list/user-list.vue';
|
||||
export default {
|
||||
components: {
|
||||
userList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userList: [],
|
||||
loadStatus: "loadmore",
|
||||
page: 1,
|
||||
type: 1, //1 关注 2 粉丝
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.type = options.type
|
||||
if (options.type == 1) {
|
||||
this.getUserFollowList();
|
||||
} else if (options.type == 2) {
|
||||
this.getUserFansList();
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.type == 1) {
|
||||
this.page++;
|
||||
this.getUserFollowList();
|
||||
} else if (this.type == 2) {
|
||||
this.page++;
|
||||
this.getUserFansList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserFollowList() {
|
||||
this.loadStatus = "loading";
|
||||
this.$H.get('user/follow', {
|
||||
page: this.page
|
||||
}).then(res => {
|
||||
if (res.result.data) {
|
||||
this.userList = this.userList.concat(res.result.data);
|
||||
if (res.result.current_page >= res.result.total || res.result.last_page === 0) {
|
||||
this.loadStatus = "nomore";
|
||||
} else {
|
||||
this.loadStatus = "loadmore"
|
||||
}
|
||||
} else {
|
||||
this.loadStatus = "loadmore"
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
getUserFansList() {
|
||||
this.loadStatus = "loading";
|
||||
this.$H.get('user/userFans', {
|
||||
page: this.page
|
||||
}).then(res => {
|
||||
if (res.result.data) {
|
||||
this.userList = this.userList.concat(res.result.data);
|
||||
if (res.result.current_page >= res.result.total || res.result.last_page === 0) {
|
||||
this.loadStatus = "nomore";
|
||||
} else {
|
||||
this.loadStatus = "loadmore"
|
||||
}
|
||||
} else {
|
||||
this.loadStatus = "loadmore"
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<input v-model="form.title" class="title-input" placeholder="标题" />
|
||||
<textarea placeholder="说些什么叭..." :auto-height="true" maxlength="-1" v-model="form.content" class="content-display"></textarea>
|
||||
<!-- 上传图片 -->
|
||||
<block v-if="form.type == 1">
|
||||
<u-upload
|
||||
ref="uUpload"
|
||||
:size-type="['original']"
|
||||
name="Image"
|
||||
:max-count="4"
|
||||
:header="header"
|
||||
:action="uploadImgUrl"
|
||||
@on-uploaded="submit"
|
||||
:auto-upload="false"
|
||||
></u-upload>
|
||||
</block>
|
||||
<!-- 所在位置 -->
|
||||
<view @click="chooseLocation" class="choose-item">
|
||||
<u-icon class="icon add-icon" name="map" color="#999" size="40"></u-icon>
|
||||
<text class="txt">{{ form.address || '所在位置' }}</text>
|
||||
<u-icon class="u-icon" name="arrow-right"></u-icon>
|
||||
</view>
|
||||
<view class="button-style">
|
||||
<u-button v-if="form.type == 1" :custom-style="btnStyle" @click="uploadImg" shape="circle">发布</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnStyle: {
|
||||
color: "#fff",
|
||||
backgroundColor: '#333333'
|
||||
},
|
||||
uploadImgUrl: this.$c.domain + 'common/upload',
|
||||
form: {
|
||||
title: '',
|
||||
type: 1,
|
||||
topicId: 2,
|
||||
discussId: '',
|
||||
content: '',
|
||||
media: [],
|
||||
longitude: 0,
|
||||
latitude: 0,
|
||||
address: '',
|
||||
cut: 0,
|
||||
pay: '',
|
||||
},
|
||||
header: {
|
||||
token: uni.getStorageSync('token')
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.form.longitude = location.longitude;
|
||||
this.form.latitude = location.latitude;
|
||||
},
|
||||
methods: {
|
||||
|
||||
uploadImg() {
|
||||
|
||||
if (!this.form.content) {
|
||||
this.$u.toast('内容不能为空');
|
||||
return;
|
||||
}
|
||||
if (!this.form.title) {
|
||||
this.$u.toast('标题不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '发布中'
|
||||
});
|
||||
this.$refs.uUpload.upload();
|
||||
},
|
||||
chooseLocation() {
|
||||
let that = this;
|
||||
uni.chooseLocation({
|
||||
success: function(res) {
|
||||
that.form.address = res.name;
|
||||
that.form.latitude = res.latitude;
|
||||
that.form.longitude = res.longitude;
|
||||
}
|
||||
});
|
||||
},
|
||||
submit(e) {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '发布中'
|
||||
});
|
||||
|
||||
let mediaList = [];
|
||||
e.forEach(function(item, index) {
|
||||
mediaList.push(item.response.result);
|
||||
});
|
||||
|
||||
this.form.media = mediaList;
|
||||
|
||||
this.$H.post('post/addPost', this.form).then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/post/post?id=' + res.result
|
||||
});
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-input{
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
margin: 20rpx 0;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.content-display {
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
min-height: 300rpx;
|
||||
}
|
||||
.choose-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
&:last-child{
|
||||
border: 0;
|
||||
}
|
||||
.txt{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.sw{
|
||||
margin-left: 300rpx;
|
||||
}
|
||||
.inputStyle{
|
||||
margin-left: 60rpx;
|
||||
width: 400rpx;
|
||||
}
|
||||
.radio{
|
||||
margin-left: 320rpx;
|
||||
}
|
||||
.icon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.u-icon{
|
||||
margin-left: auto;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.add-icon{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.button-style{
|
||||
margin-top: 50rpx;
|
||||
color: #F4F4F5;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,752 @@
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<view class="detail-container">
|
||||
<view class="user-item">
|
||||
<image @click="jumpUser(postDetail.uid)" :src="postDetail.userInfo.avatar"></image>
|
||||
<view class="user-item-user">
|
||||
<text class="user-name">{{ postDetail.userInfo.username }}</text>
|
||||
<view class="userIntro">{{ postDetail.userInfo.intro }}</view>
|
||||
</view>
|
||||
<u-button v-show="postDetail.isFollow" size="mini" style="float:right;font-size: 14px;"
|
||||
@click="cancelFollow">已关注</u-button>
|
||||
<u-button v-show="!postDetail.isFollow" size="mini" style="float:right;font-size: 14px;"
|
||||
@click="follow">关注</u-button>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<text>{{ postDetail.createTime }}</text>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="post-title">{{ postDetail.title }}</view>
|
||||
<rich-text class="post-text" :nodes="postDetail.content"></rich-text>
|
||||
<!-- 图片 -->
|
||||
<block v-if="postDetail.type == 1">
|
||||
<!--一张图片-->
|
||||
<block v-if="postDetail.media.length == 1">
|
||||
<image class="img-style-1" @tap.stop="previewImage" mode="aspectFill"
|
||||
:data-current="postDetail.media[0]" :data-image="postDetail.media"
|
||||
:src="postDetail.media[0]">
|
||||
</image>
|
||||
</block>
|
||||
<!--二张图片-->
|
||||
<block v-if="postDetail.media.length == 2">
|
||||
<view class="img-style-2">
|
||||
<image v-for="(mediaItem, index2) in postDetail.media" :key="index2"
|
||||
@tap.stop="previewImage" mode="aspectFill" :data-current="mediaItem"
|
||||
:data-image="postDetail.media" :src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
<!--三张图片-->
|
||||
<block v-if="postDetail.media.length ==3">
|
||||
<view class="img-style-3">
|
||||
<image v-for="(mediaItem, index2) in postDetail.media" :key="index2"
|
||||
@tap.stop="previewImage" mode="aspectFill" :data-current="mediaItem"
|
||||
:data-image="postDetail.media" :src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
<!--四张图片-->
|
||||
<block v-if="postDetail.media.length == 4">
|
||||
<view class="img-style-4">
|
||||
<image v-for="(mediaItem, index2) in postDetail.media" :key="index2"
|
||||
@tap.stop="previewImage" mode="aspectFill" :data-current="mediaItem"
|
||||
:data-image="postDetail.media" :src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!--点赞、分享、评论-->
|
||||
<view class="menu-container">
|
||||
<block v-if="postDetail.isCollection">
|
||||
<view class="p-item" @click="cancelCollection">
|
||||
<text class="iconfont icon-lujing" style="color: #d81e06;"></text>
|
||||
<text>{{ postDetail.collectionCount }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="p-item" @click="addCollection">
|
||||
<text class="iconfont icon-shoucang"></text>
|
||||
<text>{{ postDetail.collectionCount }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<view class="p-item" @click="focus = true">
|
||||
<text class="iconfont icon-pinglun"></text>
|
||||
<text>{{ postDetail.commentCount }}</text>
|
||||
</view>
|
||||
<view class="p-item" @click="showShare = true">
|
||||
<text class="iconfont icon-forward"></text>
|
||||
<text>分享</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-box">
|
||||
<view class="title">评论（{{ postDetail.commentCount }}）</view>
|
||||
<view style="margin-bottom: 40rpx;" v-for="(item, index) in commentList" :key="index">
|
||||
<view class="comment-item">
|
||||
<image @click="jumpUser(item.userInfo.uid)" class="avatar" :src="item.userInfo.avatar"></image>
|
||||
<view class="c-content">
|
||||
<view class="user">
|
||||
<text>{{ item.userInfo.username }}</text>
|
||||
<block v-if="item.isThumbs">
|
||||
<view @click.stop="cancelThumbs(item.id, index)" class="thumbs">
|
||||
<text class="num">{{ item.thumbs }}</text>
|
||||
<u-icon class="icon" size="40" name="heart-fill" color="#e62e00"></u-icon>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view @click.stop="onThumbs(item.id, index)" class="thumbs">
|
||||
<text class="num">{{ item.thumbs }}</text>
|
||||
<u-icon class="icon" size="40" name="heart-fill" color="#bfbfbf"></u-icon>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<text class="c-txt">{{ item.content }}</text>
|
||||
<text class="time">{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 加载状态 -->
|
||||
<block v-if="commentList.length > 0">
|
||||
<view style="margin: 30rpx;">
|
||||
<u-loadmore :status="loadStatus" />
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<u-empty text="暂无评论" mode="message"></u-empty>
|
||||
</block>
|
||||
</view>
|
||||
<view style="height: 100rpx;"></view>
|
||||
<!-- 评论输入框 -->
|
||||
<view class="comment-input">
|
||||
<textarea :placeholder="placeholder" @blur="onBlur" :focus="focus" fixed="true" cursor-spacing="10"
|
||||
v-model="form.content" auto-height="true" placeholder-class="txt-placeholder" confirm-type="send"
|
||||
@confirm="addComment"></textarea>
|
||||
<u-button @click="addComment" :disabled="canSunbmit" :custom-style="btnStyle" style="border-radius: 0;">发布
|
||||
</u-button>
|
||||
</view>
|
||||
<!-- 分享选择弹窗 -->
|
||||
<u-popup v-model="showShare" mode="bottom" height="240rpx">
|
||||
<view class="post-share-container" @click="showShare = false">
|
||||
<!-- #ifdef MP -->
|
||||
<button open-type="share" class="share-item u-reset-button">
|
||||
<image src="/static/img/wechat.png"></image>
|
||||
<text>微信好友</text>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="share-item2" @click="copyPageUrl">
|
||||
<image src="/static/img/share.png"></image>
|
||||
<text>分享链接</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnStyle: {
|
||||
color: "#fff",
|
||||
backgroundColor: '#55aaff'
|
||||
},
|
||||
postId: 0,
|
||||
postDetail: {
|
||||
comment: [],
|
||||
media: [],
|
||||
commentList: {
|
||||
data: []
|
||||
},
|
||||
topicInfo: {
|
||||
topicName: ''
|
||||
}
|
||||
},
|
||||
focus: false,
|
||||
canSunbmit: false,
|
||||
commentList: [],
|
||||
placeholder: '文明发言哦',
|
||||
form: {
|
||||
pid: 0,
|
||||
type: 1,
|
||||
toUid: '',
|
||||
postId: '',
|
||||
content: ''
|
||||
},
|
||||
showShare: false,
|
||||
shareBtnStyle: {
|
||||
backgroundColor: '#333'
|
||||
},
|
||||
page: 1,
|
||||
loadStatus: 'loadmore',
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.postId = options.id;
|
||||
|
||||
if (options.scene) {
|
||||
this.postId = options.scene;
|
||||
}
|
||||
if (options.mid) {
|
||||
this.messageRead(options.mid);
|
||||
}
|
||||
|
||||
this.form.postId = this.postId;
|
||||
this.getPostDetail();
|
||||
this.getCommentList();
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
});
|
||||
//#endif
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.getCommentList();
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
let imgURL;
|
||||
if (this.postDetail.media.length > 0) {
|
||||
imgURL = this.postDetail.media[0];
|
||||
}
|
||||
return {
|
||||
title: this.postDetail.content,
|
||||
path: '/pages/post/post?id=' + this.postId,
|
||||
imageUrl: imgURL
|
||||
};
|
||||
},
|
||||
onShareTimeline() {
|
||||
let imgURL = (imgURL = this.postDetail.media[0]);
|
||||
return {
|
||||
title: this.postDetail.content,
|
||||
imageUrl: imgURL,
|
||||
query: 'id=' + this.postId
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
messageRead(mid) {
|
||||
this.$H
|
||||
.post('message/readMessage', {
|
||||
postId: this.postId,
|
||||
mid: mid
|
||||
})
|
||||
.then(res => {
|
||||
|
||||
});
|
||||
},
|
||||
copyPageUrl() {
|
||||
let that = this;
|
||||
uni.setClipboardData({
|
||||
data: this.$c.shareH5Url + 'pages/post/detail?id=' + this.postId,
|
||||
success: function() {
|
||||
uni.hideToast();
|
||||
uni.showToast({
|
||||
title: '复制成功快分享给好友叭~' ,
|
||||
icon: 'success',
|
||||
duration: 2000,
|
||||
})
|
||||
that.showShare = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点赞
|
||||
onThumbs(id, index, index2) {
|
||||
this.$H
|
||||
.post('comment/thumbs', {
|
||||
id: id
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
if (index2 || index2 == 0) {
|
||||
this.commentList[index].children[index2].isThumbs = true;
|
||||
this.commentList[index].children[index2].thumbs++;
|
||||
} else {
|
||||
this.commentList[index].isThumbs = true;
|
||||
this.commentList[index].thumbs++;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取消点赞
|
||||
cancelThumbs(id, index, index2) {
|
||||
this.$H
|
||||
.post('comment/cancelThumbs', {
|
||||
id: id
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
if (index2 || index2 == 0) {
|
||||
this.commentList[index].children[index2].isThumbs = false;
|
||||
this.commentList[index].children[index2].thumbs--;
|
||||
} else {
|
||||
this.commentList[index].isThumbs = false;
|
||||
this.commentList[index].thumbs--;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 输入框失去焦点时
|
||||
onBlur() {
|
||||
this.placeholder = '留下你的精彩评论...';
|
||||
this.focus = false;
|
||||
// #ifdef MP
|
||||
this.form.pid = 0;
|
||||
// #endif
|
||||
},
|
||||
// 获取评论列表
|
||||
getCommentList() {
|
||||
this.loadStatus = 'loading';
|
||||
this.$H
|
||||
.get('comment/list', {
|
||||
postId: this.postId,
|
||||
page: this.page
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.commentList = this.commentList.concat(res.result.data);
|
||||
|
||||
if (res.result.current_page >= res.result.total || res.result.last_page === 0) {
|
||||
this.loadStatus = 'nomore';
|
||||
} else {
|
||||
this.loadStatus = 'loadmore';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
jumpUser(uid) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/home?uid=' + uid
|
||||
});
|
||||
},
|
||||
addComment() {
|
||||
this.canSunbmit = true;
|
||||
if (this.form.content == '') {
|
||||
this.$u.toast('评论不能为空');
|
||||
this.canSunbmit = false;
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '发布中'
|
||||
});
|
||||
this.$H.post('post/addComment', this.form).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.form.content = '';
|
||||
this.$u.toast('评论成功');
|
||||
this.page = 1;
|
||||
this.commentList = [];
|
||||
this.form.pid = 0;
|
||||
this.getCommentList();
|
||||
}
|
||||
this.canSunbmit = false;
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
getPostDetail() {
|
||||
this.$H
|
||||
.get('post/detail', {
|
||||
id: this.postId
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 500) {
|
||||
this.$u.toast(res.msg);
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
this.postDetail = res.result;
|
||||
});
|
||||
},
|
||||
cancelCollection() {
|
||||
this.$H
|
||||
.post('post/cancelCollection', {
|
||||
id: this.postId
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.postDetail.isCollection = false;
|
||||
this.postDetail.collectionCount--;
|
||||
}
|
||||
});
|
||||
},
|
||||
addCollection() {
|
||||
this.$H
|
||||
.post('post/addCollection', {
|
||||
id: this.postId,
|
||||
uid: this.postDetail.uid
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.postDetail.isCollection = true;
|
||||
this.postDetail.collectionCount++;
|
||||
}
|
||||
});
|
||||
},
|
||||
addThumb() {
|
||||
this.$H
|
||||
.post('post/addThumb', {
|
||||
id: this.postId
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.postDetail.isThumb = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelThumb() {
|
||||
this.$H
|
||||
.post('post/cancelThumb', {
|
||||
id: this.postId,
|
||||
uid: this.postDetail.uid
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.postDetail.isThumb = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
follow() {
|
||||
this.$H
|
||||
.post('user/addFollow', {
|
||||
id: this.postDetail.uid
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.postDetail.isFollow = true;
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
title: res.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelFollow() {
|
||||
this.$H
|
||||
.post('user/cancelFollow', {
|
||||
id: this.postDetail.uid
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
this.postDetail.isFollow = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
previewImage(e) {
|
||||
uni.previewImage({
|
||||
current: e.currentTarget.dataset.current, // 当前显示图片的http链接
|
||||
urls: e.currentTarget.dataset.image // 需要预览的图片http链接列表
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.post-title {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
padding: 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.icon text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
/*关注*/
|
||||
|
||||
.user-item {
|
||||
display: flex;
|
||||
|
||||
.user-item-user {
|
||||
flex: 1;
|
||||
|
||||
.userIntro {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
float: left;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
margin: 30rpx;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
color: #616161;
|
||||
|
||||
.p-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*评论列表*/
|
||||
.comment-box {
|
||||
background-color: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.comment-box>.title {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.c-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.time {
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
|
||||
.thumbs {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #bfbfbf;
|
||||
|
||||
.num {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-comment-item {
|
||||
margin-left: 100rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.u-head {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.thumbs {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #bfbfbf;
|
||||
|
||||
.num {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
.time {
|
||||
margin-left: auto;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
color: #55aaff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-input {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.comment-input textarea {
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
|
||||
.comment-input .u-btn {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
.img-style-1 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 600rpx;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.img-style-2 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.img-style-2 image {
|
||||
margin: 5rpx;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
height: 294rpx;
|
||||
}
|
||||
|
||||
.img-style-3 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.img-style-3 image {
|
||||
width: 31.3%;
|
||||
height: 200rpx;
|
||||
margin: 1%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.img-style-4 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.img-style-4 image {
|
||||
width: 48%;
|
||||
height: 320rpx;
|
||||
margin: 0.5%;
|
||||
}
|
||||
|
||||
|
||||
// 分享弹窗
|
||||
.post-share-container {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
|
||||
.share-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.share-item2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="info-container">
|
||||
<u-form ref="uForm" label-width="auto">
|
||||
<u-form-item label="头像">
|
||||
<u-avatar @click="onAvatar" mode="square" slot="right" :src="userInfo.avatar" size="100"></u-avatar>
|
||||
</u-form-item>
|
||||
<u-form-item label="昵称" right-icon="arrow-right">
|
||||
<u-input @click="jump(userInfo.username,'username')" :placeholder="userInfo.username"
|
||||
:disabled="true" input-align="right" />
|
||||
</u-form-item>
|
||||
<u-form-item label="性别" right-icon="arrow-right">
|
||||
<u-input @click="showGender = true" :placeholder="userInfo.gender"
|
||||
:disabled="true" input-align="right" />
|
||||
</u-form-item>
|
||||
<u-form-item label="个性签名" right-icon="arrow-right">
|
||||
<u-input @click="jump(userInfo.intro,'intro')" :placeholder="userInfo.intro" :disabled="true"
|
||||
input-align="right" />
|
||||
</u-form-item>
|
||||
|
||||
</u-form>
|
||||
</view>
|
||||
<view>
|
||||
<u-button :custom-style="btnStyle" @click="outlogin">退出登录</u-button>
|
||||
</view>
|
||||
<!-- 性别选择 -->
|
||||
<u-select v-model="showGender" :list="gender" @confirm="saveGender"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnStyle: {
|
||||
color: "#fff",
|
||||
backgroundColor: '#333333'
|
||||
},
|
||||
form: {},
|
||||
userInfo: {},
|
||||
showGender:false,
|
||||
gender:[
|
||||
{
|
||||
value:1,
|
||||
lable:"男"
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
lable:"女"
|
||||
},
|
||||
{
|
||||
value:0,
|
||||
lable:"保密"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onShow(options) {
|
||||
this.getUserInfo();
|
||||
},
|
||||
methods: {
|
||||
// 修改性别
|
||||
saveGender(index){
|
||||
let gender = this.gender[index[0]].value;
|
||||
|
||||
this.$H.post("user/userInfoEdit", {
|
||||
gender:gender
|
||||
}).then(res => {
|
||||
if(res.code == 0){
|
||||
this.userInfo.gender = this.gender[index[0]].lable
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserInfo() {
|
||||
this.$H.get("user/userInfo").then(res => {
|
||||
this.userInfo = res.result
|
||||
if(res.result.gender===1){
|
||||
this.userInfo.gender='男'
|
||||
}else if(res.result.gender===2){
|
||||
this.userInfo.gender='女'
|
||||
}else{
|
||||
this.userInfo.gender='保密'
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
jump(value, type) {
|
||||
uni.navigateTo({
|
||||
url: "submit?value=" + JSON.stringify(value) + "&type=" + type
|
||||
})
|
||||
},
|
||||
outlogin() {
|
||||
uni.removeStorageSync("hasLogin");
|
||||
uni.removeStorageSync("token");
|
||||
uni.removeStorageSync("userInfo");
|
||||
uni.switchTab({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
},
|
||||
onAvatar() {
|
||||
let that = this;
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album'],
|
||||
success: function(res) {
|
||||
uni.showLoading({
|
||||
mask:true,
|
||||
title:"上传头像中"
|
||||
})
|
||||
uni.uploadFile({
|
||||
url: that.$c.domain + 'common/upload',
|
||||
filePath: res.tempFilePaths[0],
|
||||
name: 'Image',
|
||||
header: {
|
||||
token: uni.getStorageSync("token")
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let data = JSON.parse(uploadFileRes.data)
|
||||
if (data.code == 0) {
|
||||
that.updateAvatar(data.result)
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
updateAvatar(avatar){
|
||||
this.$H.post("user/userInfoEdit", {
|
||||
avatar:avatar
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.userInfo.avatar = avatar;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.info-container {
|
||||
padding: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view>
|
||||
<view style="position: absolute;">
|
||||
<u-navbar :custom-back="onBack" back-icon-color="#0c0000" :background="background" :border-bottom="false">
|
||||
</u-navbar>
|
||||
</view>
|
||||
<view class="container">
|
||||
<view class="info-wrap">
|
||||
<u-avatar class="avatar" :src="userInfo.avatar" :show-level='userInfo.type == 1'
|
||||
level-bg-color="#8072f3" size="130"></u-avatar>
|
||||
<view class="user-style">
|
||||
<view class="username">{{userInfo.username}}
|
||||
<text class="iconfont icon-nan kong" v-if="userInfo.gender=='男'"></text>
|
||||
<text class="iconfont icon-nv kong" v-else-if="userInfo.gender=='女'"></text>
|
||||
</view>
|
||||
|
||||
<text class="desc">{{userInfo.intro}}</text>
|
||||
<text class="desc" v-if="userInfo.city">IP:{{userInfo.city}}</text>
|
||||
|
||||
<view class="btn-box" v-if="currUid!=uid">
|
||||
<u-button v-show="!userInfo.isFollow" @click="follow" :custom-style="btnStyle" class="btn"
|
||||
shape="circle" size="mini">
|
||||
<u-icon name="plus"></u-icon>
|
||||
<text>关注</text>
|
||||
</u-button>
|
||||
<u-button v-show="userInfo.isFollow" @click="cancelFollow" :custom-style="btnStyle2" class="btn"
|
||||
shape="circle" size="mini">
|
||||
<text>已关注</text>
|
||||
</u-button>
|
||||
<u-button @click="jump('/pages/chat/chat?user='+userJson)" :custom-style="btnStyle2"
|
||||
shape="circle" size="mini">
|
||||
<text style="margin: 0 15rpx;">私信</text>
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 帖子 -->
|
||||
<view>
|
||||
<post-list :list="postList" :loadStatus="loadStatus"></post-list>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import postList from '../../components/post-list/post-list.vue';
|
||||
export default {
|
||||
components: {
|
||||
postList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
btnStyle: {
|
||||
color: "#fff",
|
||||
backgroundColor: '#000000'
|
||||
},
|
||||
btnStyle2: {
|
||||
border: '1px solid #000000',
|
||||
color: "#000000"
|
||||
},
|
||||
background: {
|
||||
backgroundColor: 'unset'
|
||||
},
|
||||
tabs: [{
|
||||
tab_name: '帖子'
|
||||
}],
|
||||
current: 1,
|
||||
uid: 0,
|
||||
postList: [],
|
||||
topicList: [],
|
||||
userInfo: {},
|
||||
userJson: "",
|
||||
loadStatus: "loading",
|
||||
page: 1,
|
||||
currUid: 0
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.uid = options.uid;
|
||||
this.getUserInfo();
|
||||
this.getPostList();
|
||||
if (uni.getStorageSync('userInfo').uid) {
|
||||
this.currUid = uni.getStorageSync('userInfo').uid;
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.getPostList();
|
||||
},
|
||||
methods: {
|
||||
onBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
follow() {
|
||||
this.$H.post('user/addFollow', {
|
||||
id: this.userInfo.uid
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.userInfo.isFollow = true;
|
||||
} else {
|
||||
this.$u.toast(res.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
cancelFollow() {
|
||||
this.$H.post('user/cancelFollow', {
|
||||
id: this.userInfo.uid
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.userInfo.isFollow = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getPostList() {
|
||||
this.loadStatus = "loading";
|
||||
this.$H.post('post/list', {
|
||||
page: this.page,
|
||||
uid: this.uid
|
||||
}).then(res => {
|
||||
this.postList = this.postList.concat(res.result.data);
|
||||
if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
|
||||
this.loadStatus = "nomore";
|
||||
} else {
|
||||
this.loadStatus = "loadmore"
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getUserInfo() {
|
||||
this.$H.post('user/userInfoById', {
|
||||
uid: this.uid
|
||||
}).then(res => {
|
||||
this.userInfo = res.result;
|
||||
if (res.result.gender === 1) {
|
||||
this.userInfo.gender = '男'
|
||||
} else if (res.result.gender === 2) {
|
||||
this.userInfo.gender = '女'
|
||||
} else {
|
||||
this.userInfo.gender = '保密'
|
||||
}
|
||||
|
||||
let user = {
|
||||
uid: res.result.uid,
|
||||
username: res.result.username,
|
||||
avatar: res.result.avatar,
|
||||
}
|
||||
this.userJson = JSON.stringify(user)
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.userInfo.username
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.container {
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
top: 100rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 100rpx !important;
|
||||
z-index: 999;
|
||||
margin: 150rpx 550rpx 100rpx 50rpx;
|
||||
}
|
||||
|
||||
.info-wrap .user-style {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
position: absolute;
|
||||
top: 85rpx;
|
||||
width: 100%;
|
||||
box-shadow: 5rpx 10rpx 20rpx #e6e6e6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-wrap .user-style .username {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
margin: 10rpx 10rpx 10rpx 90rpx;
|
||||
|
||||
.kong {
|
||||
margin-left: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap .user-style .num-box {
|
||||
font-size: 24rpx;
|
||||
margin: 20rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-wrap .user-style .num-box .txt {
|
||||
color: #999;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.info-wrap .user-style .num-box text {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.info-wrap .user-style .desc {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin: 1rpx 20rpx 20rpx 140rpx;
|
||||
}
|
||||
|
||||
.info-wrap .user-style .btn-box {
|
||||
margin: 0rpx 30rpx 10rpx 90rpx;
|
||||
}
|
||||
|
||||
.info-wrap .user-style .btn-box .btn {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.tab-box {
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.info-c {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-c>text {
|
||||
margin-bottom: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-c .level-box {
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
|
||||
.level {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
padding: 5rpx 10rpx;
|
||||
background-color: #333333;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,22 +1,262 @@
|
||||
<template>
|
||||
<view>
|
||||
我的
|
||||
<view class="head">
|
||||
<block v-if="hasLogin">
|
||||
<view class="userinfo" @click="goUser">
|
||||
<u-avatar :src="userInfo.avatar"></u-avatar>
|
||||
<view class="username">
|
||||
<text>{{ userInfo.username }}</text>
|
||||
<text class="sub-txt">{{ userInfo.intro }}</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" class="arrow-right"></u-icon>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="btn-login">
|
||||
<!-- #ifdef H5 -->
|
||||
<u-button type="default" shape="circle" @click="phoneLogin" plain>登录</u-button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-button type="default" shape="circle" @click="wxLogin" plain>登录</u-button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</block>
|
||||
<u-grid :col="4" :border="false" style="margin: 20rpx 0;" @click="toNav">
|
||||
<u-grid-item index="/pages/my/user?type=2">
|
||||
<text>{{ userInfo.fans }}</text>
|
||||
<view class="grid-text">粉丝</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item index="/pages/my/user?type=1">
|
||||
<text>{{ userInfo.follow }}</text>
|
||||
<view class="grid-text">关注</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item index="/pages/my/post?type=2">
|
||||
<text>{{ userInfo.postNum }}</text>
|
||||
<view class="grid-text">帖子</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item index="">
|
||||
<text>{{ userInfo.integral }}</text>
|
||||
<view class="grid-text">积分</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<!-- 我的服务 -->
|
||||
<view class="block-wrap">
|
||||
<view class="block-title">我的服务</view>
|
||||
<u-grid :col="4" :border="false" style="margin: 20rpx 0;" @click="toNav">
|
||||
|
||||
<u-grid-item index="/pages/my/post?type=2">
|
||||
<image class="gn-icon" src="/static/img/post.png"></image>
|
||||
<view class="grid-text">我的帖子</view>
|
||||
</u-grid-item>
|
||||
|
||||
<u-grid-item index="/pages/my/post?type=1">
|
||||
<image class="gn-icon" src="/static/img/star.png"></image>
|
||||
<view class="grid-text">我的点赞</view>
|
||||
</u-grid-item>
|
||||
|
||||
<u-grid-item index="/pages/my/user?type=1">
|
||||
<image class="gn-icon" src="/static/img/watch.png"></image>
|
||||
<view class="grid-text">我的关注</view>
|
||||
</u-grid-item>
|
||||
|
||||
<u-grid-item index="/pages/my/user?type=2">
|
||||
<image class="gn-icon" src="/static/img/fans.png"></image>
|
||||
<view class="grid-text">我的粉丝</view>
|
||||
</u-grid-item>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-grid-item>
|
||||
<button open-type="contact" class="u-reset-button">
|
||||
<image class="gn-icon" style="margin-bottom: unset;" src="/static/m_8.png"></image>
|
||||
<view class="grid-text">客服</view>
|
||||
</button>
|
||||
</u-grid-item>
|
||||
<!-- #endif -->
|
||||
</u-grid>
|
||||
</view>
|
||||
<!-- 发贴入口 -->
|
||||
<add-post-tag></add-post-tag>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addPostTag from '../../components/add-post-tag/add-post-tag.vue';
|
||||
export default {
|
||||
components: {
|
||||
addPostTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
userInfo: '',
|
||||
hasLogin: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
msgCount() {
|
||||
return this.$store.state.messegeNum
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
//#ifdef MP-WEIXIN
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
});
|
||||
//#endif
|
||||
},
|
||||
onShow() {
|
||||
if (uni.getStorageSync('hasLogin')) {
|
||||
this.getUserInfo();
|
||||
this.hasLogin = true;
|
||||
} else {
|
||||
this.hasLogin = false;
|
||||
}
|
||||
this.getMsgNum();
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
let imgURL = 'http://pic.linfeng.tech/logo.png';
|
||||
return {
|
||||
title: this.$c.miniappName,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: imgURL
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
getMsgNum() {
|
||||
this.$H.post('message/num').then(res => {
|
||||
this.$store.state.messegeNum = [0, 0, 0, res.result.allCount, 0];
|
||||
});
|
||||
},
|
||||
phoneLogin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
},
|
||||
wxLogin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/weixin'
|
||||
});
|
||||
},
|
||||
getUserInfo() {
|
||||
this.$H.get('user/userInfo').then(res => {
|
||||
this.userInfo = res.result;
|
||||
});
|
||||
},
|
||||
goUser() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/edit'
|
||||
});
|
||||
},
|
||||
toNav(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.head {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.sub-txt {
|
||||
font-size: 24rpx;
|
||||
color: #616161;
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.userinfo .username {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.grid-text {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.userinfo u-avatar {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.userinfo .arrow-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.gn-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/*服务按钮*/
|
||||
.btn-wrap {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.btn-wrap .btn-contact {
|
||||
background-color: #fff;
|
||||
margin-left: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
padding: 20rpx;
|
||||
line-height: unset;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.btn-wrap .btn-contact:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.btn-wrap .btn-contact .txt {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.btn-wrap .btn-contact::after {
|
||||
border: unset;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.icon-size {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.block-wrap {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.block-title {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Loading…
x
Reference in New Issue
Block a user