myfollow.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <view class="myfollow">
  3. <navbar ref="navbar" :config="config"></navbar>
  4. <view class="follow">
  5. <view v-if="myfollow.length>0">
  6. <view class="item" v-for="(item,index) in myfollow" :key="index" @click="goToDetail(item)">
  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 class="cancel" @click.stop="cancelfollow(item)">
  18. 取消关注
  19. </view>
  20. </view>
  21. <loadMore v-if="myfollow.length>0" :status="status"></loadMore>
  22. </view>
  23. <nodata v-else :config="{top:20,content:'暂无关注~'}"></nodata>
  24. </view>
  25. <ldLoading isFullScreen :active="loading"></ldLoading>
  26. </view>
  27. </template>
  28. <script>
  29. import {myConcerns} from "@/api/userInfo.js"
  30. export default{
  31. data(){
  32. return{
  33. config: {
  34. back: true, //false是tolbar页面 是则不写
  35. title: '我的关注',
  36. color: '#1A1A1A',
  37. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  38. backgroundColor: [1, "#FFFFFF"],
  39. statusBarFontColor: '#1A1A1A',
  40. },
  41. myfollow:[] ,//我的关注列表
  42. params:{
  43. page:1,
  44. limit:10,
  45. },
  46. totalPage:null,
  47. currPage:1,
  48. status:"more",
  49. noData: false,
  50. loading: true,
  51. imgUrl: this.$mConfig.staticUrl
  52. }
  53. },
  54. onLoad(options) {
  55. console.log(options)
  56. this.params.userId = options.user_id
  57. this.getData()
  58. },
  59. //下拉刷新
  60. onPullDownRefresh(){
  61. this.params.page=1
  62. this.myfollow=[]
  63. this.getData()
  64. },
  65. //上拉加载
  66. onReachBottom(e){
  67. if(this.totalPage<=this.currPage){
  68. this.status = "noMore"
  69. }else{
  70. this.status="more"
  71. this.params.page++
  72. this.getData()
  73. }
  74. },
  75. methods:{
  76. goToDetail(item){
  77. console.log(item.user_id)
  78. uni.navigateTo({
  79. url:"../community/homepage?user_id="+item.user_id
  80. })
  81. },
  82. getData(){
  83. this.$http.get(myConcerns,this.params)
  84. .then(res=>{
  85. if(res&&res.code==200){
  86. this.loading = false
  87. uni.stopPullDownRefresh()
  88. this.myfollow = this.myfollow.concat(res.page.list)
  89. if(this.myfollow.length==0){
  90. this.noData = true
  91. }else{
  92. this.noData = false
  93. }
  94. this.totalPage = res.page.totalPage
  95. this.currPage = res.page.currPage
  96. if(res.page.totalPage<=res.page.currPage){
  97. this.status = "noMore";
  98. }else{
  99. this.status= "more"
  100. }
  101. }
  102. })
  103. },
  104. cancelfollow(e){
  105. let that = this;
  106. uni.showModal({
  107. title: '提示',
  108. content: `您确认要取消关注${e.nickname}吗?`,
  109. success: async function (res) {
  110. if (res.confirm) {
  111. let concerned_user_id =e.user_id
  112. that.$http.post("/concerns/cancel-concern",{
  113. concerned_user_id:concerned_user_id
  114. }).then(res=>{
  115. if(res&&res.code==200){
  116. that.$mUtil.toast("取消成功")
  117. that.myfollow.forEach((item,index) => {
  118. if(item.user_id == e.user_id) {
  119. that.myfollow.splice(index,1)
  120. }
  121. })
  122. }
  123. })
  124. }
  125. }
  126. })
  127. }
  128. },
  129. }
  130. </script>
  131. <style lang="scss" scoped>
  132. .item{
  133. margin: 30rpx 30rpx 40rpx 30rpx;
  134. display: flex;
  135. padding-bottom:40rpx;
  136. align-items: center;
  137. border-bottom: 1rpx solid #E6E6E6;
  138. image{
  139. width: 100rpx;
  140. height: 100rpx;
  141. }
  142. .name-and-time{
  143. flex: 1;
  144. margin-left: 28rpx;
  145. .name{
  146. color: #1A1A1A;
  147. font-size: 28rpx;
  148. font-weight: Regular;
  149. }
  150. .time{
  151. color: #999999;
  152. font-size: 24rpx;
  153. font-weight: Regular;
  154. margin-top: 10rpx;
  155. }
  156. }
  157. .cancel{
  158. padding: 12rpx 34rpx;
  159. color: #ffffff;
  160. font-size: 28rpx;
  161. font-weight: Medium;
  162. background-color: #0B844A;
  163. border-radius: 32rpx;
  164. }
  165. }
  166. </style>