123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553 |
- <template>
- <view class="container" style="background-color: #F5F5F5;">
- <view class="navbar">
- <navbar ref="navbar" :config="config"></navbar>
- </view>
- <!-- <顶部> -->
- <view class="top">
- <!-- <背景图> -->
- <!-- <image :src="imgUrl+'/my-top-bgImg.png'"></image> -->
- <div class="bg"></div>
- <view class="head-login u-FFF">
- <!-- <view class="u-text-center u-font36 top-title">个人中心</view> -->
- <view class="item" style="margin-top: 50rpx;">
- <image v-if="myMsg.head_photo" class="image" :src="myMsg.head_photo" mode=""></image>
- <image v-else class="image" :src="imgUrl+'/head-on.png'" mode=""></image>
- <view class="name-box">
- <view style="display: flex;align-items: center;">
- <view class="name" align-items="center">
-
- {{myMsg.nickname}}
- </view>
- <view v-if="myMsg.is_celebrity==true">
- <image :src="imgUrl+'/delImg/celebrity.png'" style="width: 40rpx;height: 40rpx;margin-left: 14rpx;" mode=""></image>
- </view>
- </view>
-
- <view class="simple" style="display: flex;" >简介:{{myMsg.resume}}
- <image v-if="isme==true" @click="modifyItem" :src="imgUrl+'/pen.png'" style="width: 34rpx;margin-top: 6rpx;display: block; height: 28rpx; margin-left: 20rpx;" mode=""></image>
- </view>
- </view>
- </view>
- <uni-popup ref="popup" type="center">
- <view class="popup-msg">
- <view class="msg-top">
- 请修改你的简介
- </view>
- <textarea class="introduce-item"maxlength="30" :value="myMsg.resume" @input="getTextMsg" placeholder="" />
- <button class="introduce-button" type="default" @click="submit">确定</button>
- <text class="iconfont" @click="cancel"></text>
- </view>
- </uni-popup>
-
- </view>
- <view class="bgImg">
- <image :src="imgUrl+'/my-list-bgImg.png'"></image>
- <view class="position-ab">
- <view class="middle" >
- <view class="block" @click="goTodetail('/pages/research/community/myfollow?user_id='+params.userId)">
- <view v-if="isme==true">
- <view class="number">
- {{myCommunityMsg.concern_num}}
- </view>
- <view class="content">
- 我的关注
- </view>
- </view>
- <view v-if="isme==false">
- <view class="number">
- {{myCommunityMsg.concern_num}}
- </view>
- <view class="content">
- 关注
- </view>
- </view>
-
- </view>
- <view class="block">
- <view v-if="isme==true">
- <view class="number" @click="goTodetail('/pages/research/community/myfans?user_id='+params.userId)">
- {{myCommunityMsg.fans_num}}
- </view>
- <view class="content">
- 我的粉丝
- </view>
- </view>
- <view v-if="isme==false">
- <view class="number" @click="goTodetail('/pages/research/community/myfans?user_id='+params.userId)">
- {{myCommunityMsg.fans_num}}
- </view>
- <view class="content">
- 粉丝
- </view>
- </view>
-
- </view>
- <view class="block">
- <view v-if="isme==true">
- <view class="number" @click="goTodetail('/pages/research/community/myfabulous?user_id='+params.userId)">
- {{myCommunityMsg.like_sum}}
- </view>
- <view class="content">
- 我的点赞
- </view>
- </view>
- <view v-if="isme==false">
- <view class="number" @click="goTodetail('/pages/research/community/myfabulous?user_id='+params.userId)">
- {{myCommunityMsg.like_sum}}
- </view>
- <view class="content">
- 点赞
- </view>
- </view>
- </view>
- <view class="block">
- <view v-if="isme==true">
- <view class="number" @click="goTodetail('/pages/research/community/mycomment?user_id='+params.userId)">
- {{myCommunityMsg.comment_sum}}
- </view>
- <view class="content">
- 我的评论
- </view>
- </view>
- <view v-if="isme==false">
- <view class="number" @click="goTodetail('/pages/research/community/mycomment?user_id='+params.userId)">
- {{myCommunityMsg.comment_sum}}
- </view>
- <view class="content">
- 评论
- </view>
- </view>
- </view>
- <!-- <view class="block">
- <view class="number" @click="goTodetail('/pages/research/community/collection')">
- {{myCommunityMsg.collect_sum}}
- </view>
- <view class="content">
- 我的收藏
- </view>
- </view> -->
- </view>
-
- <waterfall
- ref="wfp"
- v-if="flowList.length>0"
- :colunmNumber="colunmNumber"
- :flowList="flowList"
- :columnGap="10"
- :status="status"></waterfall>
- <loadMore v-if="flowList.length>0" :status="status"></loadMore>
- <nodata v-else :config="{ top: 15, content: '暂无数据~' }"></nodata>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import waterfall from "../../../components/waterfall/shwaterfall.vue"
- import {myStatistics} from "@/api/userInfo.js"
- import {myInfo,getAccountInfo,updateResume} from "@/api/login.js"
- import loadMore from "../../../components/uni-load-more/uni-load-more.vue"
- export default {
- data() {
- return {
- config: {
- back: true, //false是tolbar页面 是则不写
- title: '个人主页',
- color: '#ffffff',
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [0, '#ffffff'],
- statusBarFontColor: '#ffffff',
- fixed:false,
- },
- colunmNumber: 2,
- index: 19,
- flowList: [],
- //微信小程序用户信息
-
- hiddenLink:true,
- loginNo:false,//判断显示邀请码
-
- //微信小程序用户信息
- userInfo:{
- head_photo:"",
- nickname:"登录/注册"
- },
- hiddenLink:true,
- loginNo:false,//判断显示邀请码
- myMsg:{}, //个人信息
- myCommunityMsg:{} ,//社区信息
- introduceItem:'',
- newIntroduceItem:'',
-
- status:"more",
- id:null,
- isme:false,
- params:{
- userId:null,
- page:1,
- limit:10,
- },
- imgUrl: this.$mConfig.staticUrl,
- }
- },
- onLoad(options){
- let shop = uni.getStorageSync("personal")
- this.params.userId = options.user_id
- if(this.params.userId ==shop.id){
- this.isme=true
- }else{
- this.isme=false
- }
- // this.getMsg()
- // this.getMyMsg()
- // this.getList()
- console.log('px:'+240/(uni.upx2px(100)/100))
- },
- onShow() {
- this.flowList = []
- this.getList()
- this.getMsg()
- this.getMyMsg()
- },
- //下拉加载
- onPullDownRefresh() {
- this.params.page=1;
- this.flowList=[],
- this.getList()
- this.getMyMsg()
- this.getMsg()
- },
- onReachBottom() {
- if(this.status=="more"){
- this.params.page++
- this.getList()
- }
- },
- methods:{
- //跳转修改信息
- goToEdit(){
- uni.navigateTo({
- url:"../setup/edit"
- })
- },
- getList(){
- this.$http.get("/opus/my-release",this.params).then(res=>{
- if(res&&res.code==200){
- uni.stopPullDownRefresh()
- this.flowList = this.flowList.concat(res.page.list)
- if(res.page.totalPage<=res.page.currPage){
- this.status="noMore"
- }else{
- this.status="more"
- }
- }
- })
- },
- //获取内容
- getTextMsg(e){
- this.newIntroduceItem=e.detail.value
- },
- //取消
- cancel(){
- this.$refs.popup.close()
- },
- //修改简介
- modifyItem(){
- this.$refs.popup.open()
- // console.log(666)
- },
- //跳转页面
- goTodetail(url){
- uni.navigateTo({
- url:url
- })
- },
- //获取个人信息
- getMsg(){
- this.$http.get(myInfo,this.params).then(res=>{
- if(res&&res.code==200){
- // console.log(res)
- this.myMsg=res.data
-
- }
- })
- },
- //获取社区信息
- getMyMsg(){
- this.$http.get(myStatistics,this.params).then(res=>{
- if(res&&res.code==200){
- this.myCommunityMsg=res.data
- // console.log(this.myCommunityMsg,"123123")
- }
- })
- },
- //提交信息
- submit(){
- if(this.newIntroduceItem==""){
- this.$mUtil.toast("请输入您想修改的内容")
- return false
- }
- let params={
- resume:this.newIntroduceItem
- }
- this.$http.put(updateResume,params).then(res=>{
- if(res&&res.code==200){
- this.myMsg.resume=this.newIntroduceItem
- this.$refs.popup.close()
- this.$mUtil.toast("修改成功")
- }
- })
- },
-
- },
- components:{
- waterfall
- }
- }
- </script>
- <style>
- page{
- background-color: #F5F5F5;
- }
- </style>
- <style lang="scss" scoped>
- .popup-msg{
- width: 600rpx;
- border-radius: 20rpx;
- background-color: #FFFFFF;
- overflow: hidden;
- position: relative;
- .iconfont{
- position: absolute;
- right: 20rpx;
- top: 20rpx;
- font-size: 40rpx;
- color: #000000;
- }
- .msg-top{
- color: #000000;
- text-align: center;
- font-size: 40rpx;
- font-weight: bold;
- margin-top: 20rpx;
- }
- .introduce-item{
- width: 95%;
- margin: 0 auto;
- background-color: #f3f3f3;
- margin-top: 20rpx;
- color: black;
- }
- .introduce-button{
- padding: 0 30rpx;
- margin: 20rpx;
- background-color: #0B844A;
- color: #FFFFFF;
- }
- }
- .navbar {
- position: absolute;
- top: 0;
- left: 0;
- }
- .top {
- position: relative;
- min-height: 100vh;
- background-color: #F5F5F5;
- // overflow: hidden;
- .bg {
- width: 100%;
- height: 436rpx;
- background-color: #0B844A;
- }
- .head-login {
- position: absolute;
- width: 100%;
- top: 128rpx;
- left: 0;
- .item{
- z-index: 10;
- padding: 0 30rpx;
- display: flex;
- // flex-wrap: wrap;
- .name-box{
- margin-left: 22rpx;
- flex: 1;
- .simple{
- height: 100rpx;
- text-overflow: -o-ellipsis-lastline;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- color: rgba(173,188,182,1);
- font-size: 28rpx;
- font-weight: 400;
- width: 100%;
- opacity: 1;
- }
- .name{
- color: rgba(255,255,255,1);
- font-size: 40rpx;
- // margin-left: 22rpx;
- line-height: 57rpx;
- font-size: 40rpx;
- color: #FFFFFF;
- font-weight: 400;
- width: 400rpx;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- .image{
-
- width: 114rpx;
- height: 114rpx;
- border-radius: 999rpx;
- // margin-left: 30rpx;
- }
- }
- .top-title {
- height: 88rpx;
- line-height: 88rpx;
- }
- .head image {
- width: 106rpx;
- height: 106rpx;
- }
- .login{
- line-height: 106rpx;
- }
- }
- }
- .order {
- position: absolute;
- top: 320rpx;
- width: 84%;
- margin-left: 30rpx;
- margin-right: 30rpx;
- padding: 18rpx 30rpx 40rpx;
- border-radius: 20rpx;
- background-color: #FFFFFF;
- z-index: 99999;
- .pd-bt18 {
- padding-bottom: 18rpx;
- }
- .u-icon-bg {
- font-size: 52rpx;
- background: linear-gradient(180deg, #78df6a, #11d688);
- -webkit-background-clip: text;
- color: transparent;
- }
- .u-icon-bg2 {
- font-size: 50rpx;
- background: linear-gradient(180deg, #dc9c56, #ff7303);
- -webkit-background-clip: text;
- color: transparent;
- }
- .u-icon-bg3 {
- font-size: 52rpx;
- background: linear-gradient(180deg, #05d3a9, #06b806);
- -webkit-background-clip: text;
- color: transparent;
- }
- .u-icon-bg4 {
- font-size: 52rpx;
- background: linear-gradient(180deg, #ff5475, #fd4303);
- -webkit-background-clip: text;
- color: transparent;
- }
- .u-icon-bg5 {
- font-size: 48rpx;
- background: linear-gradient(180deg, #b175f0, #3db3fd);
- -webkit-background-clip: text;
- color: transparent;
- }
- }
- .bgImg {
- position: absolute;
- top: 400rpx;
- width: 100%;
- }
- .bgImg image {
- width: 100%;
- height: 75vh;
- position: relative;
- }
- .position-ab {
- position: absolute;
- top: -90rpx;
- width: 100%;
-
- .middle{
- padding: 42rpx 30rpx;
- background-color: white;
- margin: 20rpx 30rpx 0 30rpx;
- border-radius: 20rpx;
- display: flex;
- justify-content: space-around;
- align-items: center;
- text-align: center;
- .block{
- .content{
- font-size: 26rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #1a1a1a;
- }
- .number{
- color: rgba(255,0,0,1);
- font-size: 36rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- margin-bottom: 18rpx;
- }
- }
- }
- .wallet-bg {
- position: relative;
- height: 138rpx;
- }
- .wallet-bg .bigBg {
- position: absolute;
- z-index: 0;
- padding: 0 15rpx;
- box-sizing: border-box;
- width: 100%;
- height: 138rpx;
- }
- .wallet image {
- width: 32rpx;
- height: 34rpx;
- }
- .my-wallet {
- position: relative;
- z-index: 1;
- height: 138rpx;
- }
- }
- </style>
|