471 lines
11 KiB
Vue
471 lines
11 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :is-back="false" title="我的" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
|
|
height='46' id="navbar">
|
|
</u-navbar>
|
|
<view class="info">
|
|
<view class="top" style="display: flex;justify-content: space-between;">
|
|
<view class="" style="display: flex;align-items: center;">
|
|
<view class="toux">
|
|
<button style="width: 100rpx;height: 100rpx;position: relative;" type="primary reverse" open-type="chooseAvatar" @chooseavatar="getimage">
|
|
<image style="width: 92rpx;height: 92rpx;position: absolute;top: 0;left: 0;z-index: 99;" :src="user.avatar" mode=""></image>
|
|
</button>
|
|
</view>
|
|
<view class="xx">
|
|
<view class="name" @click="editName">
|
|
{{user.nickName == null ? '--' : user.nickName}} <image src="https://api.ccttiot.com/Z6ejpkZQ4OC81a3b6bc24fd747f11fa76d676e1dfba1.png" mode=""></image>
|
|
</view>
|
|
<view class="tel">
|
|
{{user.phonenumber == null ? '--' : user.phonenumber}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" v-if="logoflag" @click="btndl" style="border: 1px solid #1EC28B;border-radius: 50rpx;padding:10rpx 20rpx;color: #1EC28B;box-sizing: border-box;margin-right: 30rpx;">
|
|
立即登录
|
|
</view>
|
|
</view>
|
|
<view class="fensilist">
|
|
<view class="">
|
|
<view class="number">
|
|
{{user.focusCount == null ? 0 : user.focusCount}}
|
|
</view>
|
|
<view class="wz">
|
|
关注
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="number">
|
|
{{user.fansCount == null ? 0 : user.fansCount}}
|
|
</view>
|
|
<view class="wz">
|
|
粉丝
|
|
</view>
|
|
</view>
|
|
<view class="" @click="btnpage(1)">
|
|
<view class="number">
|
|
{{user.collectCount == null ? 0 : user.collectCount}}
|
|
</view>
|
|
<view class="wz">
|
|
收藏
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="jilu">
|
|
<view class="jilult">
|
|
<view class="dawz">
|
|
发布动态
|
|
</view>
|
|
<view class="xiaowz">
|
|
分享你的专属动态记录
|
|
</view>
|
|
</view>
|
|
<view class="jilurt" @click="btnfadt">
|
|
立即发布
|
|
</view>
|
|
</view>
|
|
<view class="gongneng">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ulbpJ1XVBcsaEJ1D1R0h" mode="" @click="btnkefu"></image>
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uNu8UOz7JS4WcUe08a71" mode="" @click="btnwenti"></image>
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ud4y0UeC8rxdeIEkeypk" mode="" @click="btntousu"></image>
|
|
</view>
|
|
</view>
|
|
<view class="boxlist">
|
|
<view class="" style="width: 100%;text-align: center;font-size: 36rpx;font-weight: 600;margin-bottom: 30rpx;">
|
|
我的动态
|
|
</view>
|
|
<view v-if="adlist.length > 0" class="boxitem" v-for="(item,index) in adlist" :key="index" @click="btnitem(item)">
|
|
<view class="img">
|
|
<image :src="item.picture[0]" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="wz">
|
|
{{item.content.length > 10 ? item.content.slice(0,10) + '...' : item.content}}
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 400rpx;height: 400rpx;margin: auto;" v-if="adlist.length == 0">
|
|
<image style="width: 400rpx;height: 400rpx;filter: hue-rotate(450deg)" src="https://api.ccttiot.com/n0ySWwewVU674d243df448743e3becae030d6474eabd.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<tab-bar :indexs='4'></tab-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#EAFFFE",
|
|
},
|
|
user:{},
|
|
token:'',
|
|
imglist:'',
|
|
pagenum:1,
|
|
pageSize:20,
|
|
total:'',
|
|
adlist:[],
|
|
logoflag:false
|
|
}
|
|
},
|
|
onShow() {
|
|
this.pagenum = 1;
|
|
// this.adlist = [];
|
|
this.hasMore = true;
|
|
this.getinfo();
|
|
this.getqiniuyun();
|
|
},
|
|
// 小程序端加载更多的生命周期
|
|
onReachBottom() {
|
|
console.log(11);
|
|
if (!this.loading && this.hasMore) {
|
|
this.pagenum++;
|
|
this.getdtlist();
|
|
}
|
|
},
|
|
methods: {
|
|
// 点击跳转去登录
|
|
btndl(){
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
},
|
|
// 点击昵称修改名称
|
|
editName(){
|
|
const currentName = this.user.nickName || ''
|
|
uni.showModal({
|
|
title: '修改昵称',
|
|
editable: true,
|
|
placeholderText: '请输入昵称',
|
|
content: currentName,
|
|
confirmText: '保存',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
const newName = (res.content || '').trim()
|
|
if (newName.length > 10) {
|
|
uni.showToast({
|
|
title: '名称已超过限制',
|
|
icon: 'none',
|
|
duration: 3000
|
|
})
|
|
}else{
|
|
if (!newName || newName === currentName) return
|
|
this.$u.put(`/app/user/basicInfo`, { nickName: newName }).then((r) => {
|
|
if (r.code === 200) {
|
|
this.getinfo()
|
|
uni.showToast({ title: '已更新', icon: 'success',duration:3000})
|
|
}else if(res.code == 401){
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 3000
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 点击跳转到常见问题
|
|
btnwenti(){
|
|
uni.navigateTo({
|
|
url:'/page_user/caozuo/wenti'
|
|
})
|
|
},
|
|
// 点击跳转到投诉建议
|
|
btntousu(){
|
|
if(this.logoflag == true){
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/page_user/caozuo/tousu'
|
|
})
|
|
}
|
|
},
|
|
// 点击跳转到客服列表
|
|
btnkefu(){
|
|
uni.navigateTo({
|
|
url:'/page_user/caozuo/kefu'
|
|
})
|
|
},
|
|
// 点击跳转到发布动态
|
|
btnfadt(){
|
|
if(this.logoflag == true){
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/page_user/caozuo/fadongtai'
|
|
})
|
|
}
|
|
},
|
|
// 获取七牛云上传token
|
|
getqiniuyun(){
|
|
this.$u.get("/common/qiniuToken").then((res) => {
|
|
if (res.code == 200) {
|
|
this.token = res.data
|
|
}
|
|
})
|
|
},
|
|
// 点击上传头像
|
|
getimage(e){
|
|
console.log(e);
|
|
let that = this
|
|
wx.uploadFile({
|
|
url: 'https://up-z2.qiniup.com',
|
|
name: 'file',
|
|
filePath: e.detail.avatarUrl,
|
|
formData: {
|
|
token: that.token, //后端返回的token
|
|
},
|
|
success: function(res) {
|
|
let str = JSON.parse(res.data)
|
|
that.imglist = 'https://api.ccttiot.com/' + str.key
|
|
console.log(that.imglist);
|
|
let data = {
|
|
avatar:that.imglist
|
|
}
|
|
that.$u.put(`/app/user/basicInfo`,data).then(res =>{
|
|
if(res.code == 200){
|
|
that.getinfo()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 点击进行页面跳转
|
|
btnpage(num){
|
|
if(num == 1){ //跳转我的收藏
|
|
if(this.logoflag == true){
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/page_user/muyemian/shoucang?userId=' + this.user.userId
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 请求我的个人信息
|
|
getinfo(){
|
|
this.$u.get(`/getInfo`).then(res =>{
|
|
if(res.code == 200){
|
|
this.user = res.user
|
|
this.getdtlist()
|
|
}else if(res.code == 401){
|
|
this.logoflag = true
|
|
}
|
|
})
|
|
},
|
|
handqixing(){
|
|
console.log(1);
|
|
},
|
|
btnitem(item){
|
|
uni.navigateTo({
|
|
url:'/page_fenbao/guangchang/dongtaixq?id=' + item.id
|
|
})
|
|
},
|
|
// 请求个人动态列表
|
|
getdtlist(){
|
|
this.loading = true;
|
|
this.$u.get(`/app/feed/myFeed?pageNum=${this.pagenum}&pageSize=${this.pageSize}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.total = res.total;
|
|
if (this.pagenum == 1) {
|
|
this.adlist = res.rows;
|
|
} else {
|
|
this.adlist = this.adlist.concat(res.rows);
|
|
}
|
|
this.hasMore = res.rows && res.rows.length === this.pageSize;
|
|
} else {
|
|
this.hasMore = false;
|
|
}
|
|
this.loading = false;
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
this.hasMore = false;
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #EAFFFE;
|
|
}
|
|
::v-deep .u-title{
|
|
padding-bottom: 22rpx !important;
|
|
}
|
|
.boxlist{
|
|
width: 750rpx;
|
|
min-height: 46vh;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
|
border-radius: 30rpx 30rpx 0 0;
|
|
margin-top: 640rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 36rpx 34rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
padding-bottom: 200rpx;
|
|
.boxitem{
|
|
.wz{
|
|
width: 334rpx;
|
|
}
|
|
image{
|
|
width: 334rpx;
|
|
height: 334rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
width: 334rpx;
|
|
height: 400rpx;
|
|
}
|
|
}
|
|
.info{
|
|
margin-top: 32rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
.gongneng{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 24rpx;
|
|
image{
|
|
width: 230rpx;
|
|
height: 140rpx;
|
|
}
|
|
}
|
|
.jilu{
|
|
width: 682rpx;
|
|
height: 160rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.15);
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 34rpx;
|
|
margin: auto;
|
|
margin-top: 28rpx;
|
|
.jilurt{
|
|
width: 192rpx;
|
|
height: 58rpx;
|
|
background: #1EC28B;
|
|
border-radius: 37rpx 37rpx 37rpx 37rpx;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 58rpx;
|
|
}
|
|
.jilult{
|
|
.dawz{
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.xiaowz{
|
|
font-size: 28rpx;
|
|
color: #808080;
|
|
margin-top: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
.fensilist{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 28rpx;
|
|
justify-content: space-between;
|
|
padding-right: 150rpx;
|
|
padding-left: 150rpx;
|
|
view{
|
|
text-align: center;
|
|
.number{
|
|
font-weight: 500;
|
|
font-size: 52rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.wz{
|
|
font-size: 32rpx;
|
|
color: #606060;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
.top{
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 62rpx;
|
|
.toux{
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border-radius: 50%;
|
|
margin-right: 36rpx;
|
|
overflow: hidden;
|
|
}
|
|
.xx{
|
|
.name{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
image{
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.tel{
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nodata,
|
|
.nomore {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #888;
|
|
font-size: 28rpx;
|
|
padding: 48rpx 0 16rpx 0;
|
|
}
|
|
.loading {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #EE3D6C;
|
|
font-size: 28rpx;
|
|
padding: 24rpx 0 8rpx 0;
|
|
}
|
|
.publish-btn {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
bottom: 60rpx;
|
|
width: 90vw;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
border-radius: 44rpx;
|
|
background-image: linear-gradient(90deg, #131313 0%, #EE3D6C 100%);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
font-size: 34rpx;
|
|
box-shadow: 0 8rpx 30rpx rgba(238,61,108,.15);
|
|
}
|
|
</style> |