tnblog
首页
视频
资源
登录

关注

3211人阅读 2021/6/13 22:14 总访问:14973 评论:0 收藏:0 手机
分类: vue
  1. <template>
  2. <view >
  3. <view class="flex-between user-info"  >
  4. <view class="flex-center-height user-info-info"  >
  5. <view class="flex-center user-info-avatar">
  6. <image :src="gzlist.head" mode="aspectFill">
  7. </image>
  8. </view>
  9. <view>
  10. <view >{{gzlist.blogName}}</view>
  11. <view class="flex-center-height desc-text line-clamp1">{{gzlist.motto}}</view>
  12. </view>
  13. </view>
  14. <view class="">
  15. <button class="flex-center-height bton" @click="con">+ 关注</button>
  16. </view> 
  17. </view>
  18. <view id="top">
  19. <view>
  20. <view data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
  21. <view>
  22. <view class="am-g am-list-item-desced pet_list_one_block" v-for="item in lists">
  23. <view>
  24. <view @click="concern(item.userName)">
  25. <view><img :src="gzlist.head" alt=""></view>
  26. <view>{{gzlist.blogName}}</view>
  27. </view>
  28. <view>
  29. <a href="/aojiancc2/article/UserCategory/8">
  30. <view class="pet_list_tag " :class="item.styletype">{{item.aClass}}</view>
  31. </a>
  32. </view>
  33. </view>
  34. <view class=" am-list-main" @click="getdetails(item.id,item.userName)">
  35. <h3 class="am-list-item-hd pet_list_one_bt"><a :href="item.link" class="">{{item.title}}</a>
  36. </h3>
  37. <view class="am-list-item-text pet_list_two_text">{{item.sContent}}</view>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. export default {
  48. data() {
  49. return {
  50. gzlist: [],
  51. lists:[],
  52. }
  53. },
  54. onLoad(username) {
  55. //请求个人公开信息
  56. this.getgzdata(username.username);
  57. // this.getdetails();
  58. this.getuserdata(username.username);
  59. },
  60. methods: {
  61. getgzdatafunction(username{
  62. //访问全局变量
  63. let v1 = getApp().globalData.api;
  64. uni.request({
  65. url: v1 + `/UserInfo/${username}`//仅为示例,并非真实接口地址。
  66. method: 'GET',
  67. header: {
  68. 'api-version''1.0' //自定义请求头信息
  69. },
  70. success(res) => {
  71. console.log(res.data.value);
  72. this.gzlist = res.data.value;
  73. }
  74. });
  75. // this.httpUtil.post(url, token, {
  76. //  'api-version': '2.0'
  77. // }, "正在加载...").then(res => {
  78. //  my.lists = res.value;
  79. //  console.log(res.value)
  80. // });
  81. },
  82. con:function(){
  83. let userid=getApp().globalData.concerng.userId;
  84. let v1 = getApp().globalData.api;
  85. console.log(userid)
  86. uni.request({
  87. url: v1 + '/MyFocus'//仅为示例,并非真实接口地址。
  88. method: 'POST',
  89. header: {
  90. 'Content-Type' : 'application/json',
  91. 'api-version''1.0' //自定义请求头信息
  92. },
  93. data:{
  94. destId:userid,
  95. token:getApp().globalData.token
  96. },
  97. success(res) => {
  98. if(res.data.code==200){
  99. this.pageUtil.tips("关注成功")
  100. console.log(res.vlaue);
  101. }else if(res.data.code==402){
  102. this.pageUtil.tips("已经关注过了")
  103. }else{
  104. this.pageUtil.tips("关注失败")
  105. }
  106. }
  107. });
  108. },
  109. getuserdatafunction(username{
  110. let page=1;
  111. let rows=16;
  112. //访问全局变量
  113. let url =getApp().globalData.api+ `/UserArticles/${username}/${page}/${rows}`;
  114. this.httpUtil.get(url, null, {
  115. 'api-version''1.0'
  116. }, "正在加载...").then(res => {
  117. this.lists = res.value;
  118. console.log(res.value)
  119. // getApp().globalData.detauserinfo=res.value;
  120. // setTimeout(function() {
  121. //  uni.stopPullDownRefresh();
  122. // }, 1000);
  123. });
  124. },
  125. // getdetails:function(id,userName){
  126. //  this.pageUtil.gotoPage('../details/details?id='+id+'&username='+userName)
  127. // },
  128. // concern:function(userName){
  129. //  // alert(userName)
  130. //  let ul=getApp().globalData.api;
  131. //  uni.request({
  132. //      url: ul+`/UserInfo/${userName}`, //仅为示例,并非真实接口地址。
  133. //  method:'GET',
  134. //      header: {
  135. //          'api-version': '1.0' //自定义请求头信息
  136. //      },
  137. //      success: (res) => {
  138. //          console.log(res.data.value);
  139. //          getApp().globalData.concerng= res.data.value;
  140. //      }
  141. //  });
  142. //  this.pageUtil.gotoPage('../concern/concer?username='+userName)
  143. // }
  144. }
  145. }
  146. </script>
  147.  <style>
  148. @import 'http://image.tnblog.net/amazeui.min.css';
  149. </style>
  150. <style>
  151. @import 'http://image.tnblog.net/wap.css';
  152. </style>
  153. <style scoped>
  154. page {
  155. background: #FFFFFF;
  156. width: 100%;
  157. height: 100%;
  158. }
  159. image {
  160. width: 100%;
  161. height: 100%;
  162. }
  163. .user-info {
  164. margin: 0rpx 0rpx 30rpx 0rpx;
  165. width: 750rpx;
  166. height: 200rpx;
  167. background: #FFFFFF;
  168. // background-color: red;
  169. position: fixed;
  170. // top:100rpx;
  171. z-index: 9;
  172. &-info {
  173. width: 80%;
  174. overflow: hidden;
  175. }
  176. &-avatar {
  177. flex: none;
  178. width: 128rpx;
  179. height: 128rpx;
  180. border-radius: 50%;
  181. overflow: hidden;
  182. }
  183. &-name {
  184. flex: 2;
  185. margin-left: 28rpx;
  186. width: 100%;
  187. .nickname {
  188. font-size: 40rpx;
  189. font-family: PingFangSC-Medium, PingFang SC;
  190. font-weight: 500;
  191. color: #131315;
  192. }
  193. .desc-text {
  194. font-size: 26rpx;
  195. font-family: PingFangSC-Regular, PingFang SC;
  196. font-weight: 400;
  197. margin: 12rpx 0;
  198. // width: 90%;
  199. }
  200. .edit-text {
  201. font-size: 26rpx;
  202. font-family: PingFangSC-Regular, PingFang SC;
  203. font-weight: 400;
  204. color: #999999;
  205. }
  206. }
  207. .bton{
  208. width:65px;
  209. height:35px;
  210. background-color:#999999;
  211. color: #FFFFFF;
  212. font-size: 24rpx;
  213. position: relative;
  214. right: 20px;
  215. }
  216. &-tips {
  217. width: 20%;
  218. &-image {
  219. width: 65rpx;
  220. height: 65rpx;
  221. margin-right: 24rpx;
  222. }
  223. }
  224. }
  225. .pet_list_one_block{
  226. margin-top: 170rpx;
  227. }
  228. .am-list-item-desced {
  229. padding-top: 1rem;
  230. border-bottom: 1px solid #f1f1f1;
  231. }
  232. .pet_list_two_text {
  233. margin-top: 5px;
  234. }
  235. .pet_list_one_bt {
  236. margin-top: -4px;
  237. line-height: 22px;
  238. }
  239. </style>


评价
三千世界
排名
73
文章
6
粉丝
4
评论
1
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术