myfans.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <template>
  2. <view class="my-fans">
  3. <navbar ref="navbar" :config="config"></navbar>
  4. <view class="my-fans">
  5. <view v-if="myFans.length>0">
  6. <view @click="goToHomepage(item)" class="item" v-for="(item,index) in myFans" :key="index">
  7. <image v-if="item.head_photo" :src="item.head_photo" style="border-radius: 50%;" mode=""></image>
  8. <image v-else :src="imgUrl+'/head-on.png'"style="border-radius: 50%;" mode=""></image>
  9. <view class="name-and-time">
  10. <view class="name u-text-width">
  11. {{item.nickname}}
  12. </view>
  13. <view class="time">
  14. {{item.concern_time}}
  15. </view>
  16. </view>
  17. <view v-if="item.each_concern==1">
  18. <view class="cancel-one" @click.stop="follow(item)">
  19. 互相关注
  20. </view>
  21. </view>
  22. <view v-if="item.each_concern==0">
  23. <view class="cancel" @click.stop="follow(item)">
  24. 点击关注
  25. </view>
  26. </view>
  27. </view>
  28. <loadMore v-if="myFans.length>0" :status="status"></loadMore>
  29. </view>
  30. <nodata v-else :config="{top:20,content:'暂无粉丝~'}"></nodata>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. import {myFans} from "../../../api/userInfo.js"
  36. export default{
  37. data(){
  38. return{
  39. config: {
  40. back: true, //false是tolbar页面 是则不写
  41. title: '我的粉丝',
  42. color: '#1A1A1A',
  43. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  44. backgroundColor: [1, "#FFFFFF"],
  45. statusBarFontColor: '#1A1A1A',
  46. },
  47. myFans:[] ,//我的粉丝列表
  48. params:{
  49. page:1,
  50. limit:10,
  51. },
  52. status:"more",
  53. loading:true,
  54. noData:false,
  55. totalPage:null,
  56. currPage:1,
  57. fabulousNum:null,
  58. imgUrl: this.$mConfig.staticUrl
  59. }
  60. },
  61. // created() {
  62. // this.$http.get(myFans)
  63. // .then(res=>{
  64. // console.log(res)
  65. // })
  66. // },
  67. onLoad(options) {
  68. this.params.userId = options.user_id
  69. this.getList()
  70. },
  71. //下拉刷新
  72. onPullDownRefresh(){
  73. this.params.page=1
  74. this.myFans=[]
  75. this.getList()
  76. },
  77. //上拉加载
  78. onReachBottom(e){
  79. if(this.totalPage<=this.currPage){
  80. this.status="noMore"
  81. }else{
  82. this.status="more"
  83. this.params.page++
  84. this.getData()
  85. }
  86. },
  87. methods:{
  88. //跳转个人页面
  89. goToHomepage(item){
  90. uni.navigateTo({
  91. url:"./homepage?user_id="+item.user_id
  92. })
  93. },
  94. //获取数据
  95. getList(){
  96. this.$http.get(myFans,this.params).then(res=>{
  97. if(res&&res.code==200){
  98. uni.stopPullDownRefresh()
  99. this.loading=false;
  100. this.myFans=this.myFans.concat(res.page.list)
  101. if(this.myFans.length==0){
  102. this.noData = true
  103. }else{
  104. this.noData=false
  105. }
  106. this.totalPage = res.page.totalPage
  107. this.currPage = res.page.currPage
  108. if(this.totalPage<=this.currPage){
  109. this.status="noMore";
  110. }else{
  111. this.status="more"
  112. }
  113. }
  114. })
  115. },
  116. rest(){
  117. this.params.page=1
  118. this.myFans=[]
  119. },
  120. follow(item){
  121. let id = item.user_id
  122. if(item.each_concern==0){
  123. this.$http.post("/concerns/concern",{
  124. concerned_user_id:id
  125. }).then(res=>{
  126. if(res&&res.code==200){
  127. item.each_concern = 1
  128. this.$mUtil.toast("关注成功")
  129. }
  130. })
  131. }
  132. if(item.each_concern==1){
  133. this.$http.post("/concerns/cancel-concern",{
  134. concerned_user_id:id
  135. }).then(res=>{
  136. if(res&&res.code==200){
  137. item.each_concern=0
  138. this.$mUtil.toast("已取消关注")
  139. }
  140. })
  141. }
  142. },
  143. }
  144. }
  145. </script>
  146. <style lang="scss" scoped>
  147. .item{
  148. margin: 30rpx 30rpx 40rpx 30rpx;
  149. display: flex;
  150. padding-bottom:40rpx;
  151. align-items: center;
  152. border-bottom: 1rpx solid #E6E6E6;
  153. image{
  154. width: 100rpx;
  155. height: 100rpx;
  156. }
  157. .name-and-time{
  158. flex: 1;
  159. margin-left: 28rpx;
  160. .name{
  161. color: #1A1A1A;
  162. font-size: 28rpx;
  163. font-weight: Regular;
  164. }
  165. .time{
  166. color: #999999;
  167. font-size: 24rpx;
  168. font-weight: Regular;
  169. margin-top: 10rpx;
  170. }
  171. }
  172. .cancel{
  173. padding: 12rpx 34rpx;
  174. color: #D5C49B;
  175. font-size: 28rpx;
  176. font-weight: Medium;
  177. background-color: #0B844A;
  178. border-radius: 32rpx;
  179. }
  180. .cancel-one{
  181. padding: 12rpx 34rpx;
  182. color: #0B844A;
  183. font-size: 28rpx;
  184. font-weight: Medium;
  185. background-color: #FFFFFF;
  186. border: 2rpx solid #0B844A;
  187. border-radius: 32rpx;
  188. }
  189. }
  190. </style>