index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  1. <template>
  2. <view class="my-box">
  3. <my-nav @navHeight="setNavHeight"></my-nav>
  4. <view class="my-data" :style="{'height':'calc(100vh - '+navHeight+'rpx)'}">
  5. <scroll-view :scroll-y="true" :style="{'height':'calc(100vh - '+navHeight+'rpx)'}" @scrolltolower="scrolltolower">
  6. <view class="my-item">
  7. <view class="my-content">
  8. <view class="content-basic">
  9. <view class="basic-left" @click="goToUrl(1)">
  10. <image class="basic-img" :src="memberInfo.avatar" mode="aspectFill"></image>
  11. </view>
  12. <view class="basic-right">
  13. <view @click="goToUrl(1)" class="basic-name">
  14. <view class="name-text sys-color-black-0 sys-weight-600">{{memberInfo.nickname}}</view>
  15. <view class="name-vip" v-show="memberInfo.vipLevel" >
  16. <image class="name-img" v-if="memberInfo.vipLevel==='VIP1'" src="/static/img/my/vip.png" mode="heightFix"></image>
  17. <image class="name-img" v-else src="/static/img/my/svip.png" mode="heightFix"></image>
  18. </view>
  19. <view class="name-ok " :class="{'name-no':memberInfo.verified===false}">
  20. <image class="name-img" src="/static/img/my/open.png" mode="heightFix"></image>
  21. </view>
  22. </view>
  23. <view @click="goToUrl(1)" class="basic-signature sys-color-gray-9">
  24. {{memberInfo.slogan}}
  25. </view>
  26. <view class="basic-wallet">
  27. <view class="wallet-item" @click="goToUrl(2)">
  28. <image class="wallet-img" src="/static/img/my/wallet.png" mode="aspectFill"></image>
  29. <view class="wallet-text sys-color-gray-6">钱包</view>
  30. </view>
  31. <view class="wallet-item" @click="goToUrl(3)">
  32. <view class="wallet-text sys-color-gray-6">波点兑换</view>
  33. <image class="exchange-img" src="/static/img/my/right.png" mode="aspectFill"></image>
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. <view class="content-statistics">
  39. <view class="statistics-item" @click="goToUrl(4)" v-if="false">
  40. <view class="statistics-num sys-color-black sys-weight-600">{{memberInfo.mylikeCount}}
  41. <view class="statistics-dot sys-color-white" v-show="memberInfo.newMylikeCount>0">{{memberInfo.newMylikeCount>99?'..':memberInfo.newMylikeCount}}</view>
  42. </view>
  43. <view class="statistics-text sys-color-gray-9 sys-weight-400">礼物墙</view>
  44. </view>
  45. <view class="statistics-item" @click="goToUrl(5)">
  46. <view class="statistics-num sys-color-black sys-weight-600">{{memberInfo.mylikeCount}}
  47. <view class="statistics-dot sys-color-white" v-show="memberInfo.newMylikeCount>0">{{memberInfo.newMylikeCount>99?'..':memberInfo.newMylikeCount}}</view>
  48. </view>
  49. <view class="statistics-text sys-color-gray-9 sys-weight-400">心动足迹</view>
  50. </view>
  51. <view class="statistics-item" @click="goToUrl(6)">
  52. <view class="statistics-num sys-color-black sys-weight-600">{{memberInfo.guestCount}}
  53. <view class="statistics-dot sys-color-white" v-show="memberInfo.newGuestCount>0">{{memberInfo.newGuestCount>99?'..':memberInfo.newGuestCount}}</view>
  54. </view>
  55. <view class="statistics-text sys-color-gray-9 sys-weight-400">访客</view>
  56. </view>
  57. <view class="statistics-item" @click="goToUrl(7)">
  58. <view class="statistics-num sys-color-black sys-weight-600">
  59. {{memberInfo.admireCount}}
  60. <view class="statistics-dot sys-color-white" v-show="memberInfo.newAdmireCount>0">{{memberInfo.newAdmireCount>99?'..':memberInfo.newAdmireCount}}</view>
  61. </view>
  62. <view class="statistics-text sys-color-gray-9 sys-weight-400">谁喜欢我</view>
  63. </view>
  64. </view>
  65. </view>
  66. <view class="vip-content">
  67. <view class="vip-data">
  68. <view class="vip-left">
  69. <view class="vip-left-one">
  70. <image class="vip-left-img" src="/static/img/my/crown.png" mode="aspectFill"></image>
  71. <view class="vip-left-vip sys-weight-600">VIP</view>
  72. <view class="vip-left-text sys-weight-500">首季195元</view>
  73. </view>
  74. <view class="vip-left-two">
  75. 22.7元/月解锁9项高级特权
  76. </view>
  77. </view>
  78. <view class="vip-right">
  79. 立即开通
  80. </view>
  81. </view>
  82. <view class="vip-discounts sys-color-white sys-weight-600">
  83. 立减99元
  84. </view>
  85. </view>
  86. <view class="subscription sys-color-gray-9">
  87. 自动订阅,随时取消;付款费用将记入itunes账户;到期前24小时会自动扣费并续订
  88. 服务,购买后可随时前往iTunse商店设置页面取消订 阅。点击购买即表示同意《用
  89. 户服务协议》《连续包月协议》 《用户隐私政策》
  90. </view>
  91. <view class="my-tag">
  92. <view class="tag-item" @click="setTagNum(0)" :class="{'tag-pitch':tagNum===0}">动态</view>
  93. <view class="tag-item" @click="setTagNum(1)" :class="{'tag-pitch':tagNum===1}">赞过</view>
  94. <!-- <view class="tag-item" @click="setTagNum(2)" :class="{'tag-pitch':tagNum===2}">活动</view>-->
  95. </view>
  96. </view>
  97. <view class="halving-line"></view>
  98. <view class="my-item">
  99. <view class="my-dynamic" v-if="tagNum===0">
  100. <dynamic-items :type="2" text-color="#141414" operate-color="#999999" tag-color="#999999" tag-bg="#F2F2F2" division-color="#F2F2F2" :show-add="true" ref="dynamicObj"></dynamic-items>
  101. </view>
  102. <view class="my-praise" v-else>
  103. <my-praise ref="praiseObj"></my-praise>
  104. </view>
  105. </view>
  106. </scroll-view>
  107. </view>
  108. </view>
  109. </template>
  110. <script>
  111. import MyNav from "@/pages/my/model/my-nav";
  112. import DynamicItems from "@/pages/common/dynamic/dynamic-items";
  113. import MyPraise from "@/pages/my/model/my-praise";
  114. import {getMemberInfo} from "@/api/my";
  115. export default {
  116. components: {MyPraise, DynamicItems, MyNav},
  117. data() {
  118. return {
  119. navHeight:0,
  120. tagNum:0,
  121. memberInfo:{
  122. admireCount:'',
  123. nickname:'',
  124. }
  125. }
  126. },
  127. onLoad(query) {
  128. this.getMemberInfo()
  129. },
  130. methods: {
  131. scrolltolower(){
  132. if(this.tagNum===0){
  133. this.$refs.dynamicObj.getMyMoments()
  134. }else {
  135. this.$refs.praiseObj.getMyLikeMoments()
  136. }
  137. },
  138. getMemberInfo(){
  139. getMemberInfo().then((res)=>{
  140. console.log(res)
  141. if(res.code===0){
  142. this.memberInfo=res.data
  143. }else {
  144. uni.reLaunch({
  145. 'url':'/pages/login/index'
  146. })
  147. }
  148. })
  149. },
  150. setNavHeight(navHeight){
  151. this.navHeight=navHeight
  152. },
  153. setTagNum(tagNum){
  154. if(this.tagNum!==tagNum){
  155. this.tagNum=tagNum
  156. }
  157. },
  158. goToUrl(type){
  159. if(type===1){
  160. uni.navigateTo({
  161. 'url':'./editInformation'
  162. })
  163. }else if(type === 2){
  164. // 钱包
  165. uni.navigateTo({
  166. 'url':'/pages/wallet/wallet'
  167. })
  168. }else if(type === 3){
  169. // 波点兑换
  170. uni.navigateTo({
  171. 'url':'/pages/wallet/wave-point'
  172. })
  173. }else if(type === 4){
  174. // 礼物墙
  175. uni.navigateTo({
  176. 'url':'/pages/wallet/gift-wall'
  177. })
  178. }else if(type === 5){
  179. // 喜欢的人
  180. uni.navigateTo({
  181. 'url':'/pages/wallet/like-user?isUrlType=1'
  182. })
  183. }else if(type === 6){
  184. // 喜欢的人
  185. uni.navigateTo({
  186. 'url':'/pages/wallet/visitor'
  187. })
  188. }else if(type === 7){
  189. // 喜欢我的人
  190. uni.navigateTo({
  191. 'url':'/pages/wallet/like-me'
  192. })
  193. }
  194. }
  195. }
  196. }
  197. </script>
  198. <style scoped lang="scss">
  199. .my-box{
  200. background-image: url("/static/img/my/bg.png");
  201. background-repeat: no-repeat;//不平铺
  202. background-position: top center;//居中
  203. background-size: contain;//随容器大小
  204. height: calc(100vh - 50px - env(safe-area-inset-bottom));
  205. .my-data{
  206. background-color: #fff;
  207. border-radius: 30rpx 30rpx 0 0;
  208. padding: 40rpx 0 10rpx 0;
  209. .my-item{
  210. padding: 0 32rpx ;
  211. }
  212. .halving-line{
  213. background-color: #F2F2F2;
  214. height: 1rpx;
  215. }
  216. .my-content{
  217. .content-basic{
  218. display: flex;
  219. justify-content: space-between;
  220. height: 168rpx;
  221. .basic-left{
  222. .basic-img{
  223. border-radius: 50%;
  224. width: 168rpx;
  225. height: 168rpx;
  226. }
  227. }
  228. .basic-right{
  229. width: calc(100% - 168rpx);
  230. padding-left: 24rpx;
  231. .basic-name{
  232. display: flex;
  233. justify-content: flex-start;
  234. height: 56rpx;
  235. align-items: center;
  236. .name-text{
  237. font-size: 40rpx;
  238. line-height: 56rpx;
  239. }
  240. .name-img{
  241. height: 28rpx;
  242. }
  243. .name-vip{
  244. margin-left: 8rpx;
  245. }
  246. .name-ok{
  247. margin-left: 8rpx;
  248. }
  249. .name-no{
  250. filter: grayscale(100%);
  251. }
  252. }
  253. .basic-signature{
  254. width: 100%;
  255. display: -webkit-box;
  256. -webkit-line-clamp: 1;
  257. -webkit-box-orient: vertical;
  258. overflow: hidden;
  259. font-size: 28rpx;
  260. height: 40rpx;
  261. line-height: 40rpx;
  262. }
  263. .basic-wallet{
  264. display: flex;
  265. justify-content: flex-start;
  266. margin-top: 24rpx;
  267. .wallet-item{
  268. padding: 0 16rpx;
  269. height: 40rpx;
  270. background: #F2F2F2;
  271. border-radius: 200rpx;
  272. display: flex;
  273. justify-content: center;
  274. align-items: center;
  275. margin-right: 20rpx;
  276. .wallet-text{
  277. height: 40rpx;
  278. line-height: 40rpx;
  279. font-size: 26rpx;
  280. }
  281. .wallet-img{
  282. width: 40rpx;
  283. height: 40rpx;
  284. margin-right: 4rpx;
  285. }
  286. .exchange-img{
  287. width: 24rpx;
  288. height: 24rpx;
  289. margin-left: 4rpx;
  290. }
  291. }
  292. }
  293. }
  294. }
  295. .content-statistics{
  296. margin-top: 24rpx;
  297. padding: 16rpx 40rpx 0 40rpx;
  298. display: flex;
  299. justify-content: space-between;
  300. .statistics-item{
  301. .statistics-num{
  302. position: relative;
  303. display: flex;
  304. justify-content: center;
  305. font-size: 40rpx;
  306. .statistics-dot{
  307. position: absolute;
  308. top: -16rpx;
  309. right: -12rpx;
  310. border-radius: 200rpx;
  311. width: 24rpx;
  312. height: 24rpx;
  313. line-height: 24rpx;
  314. text-align: center;
  315. font-size: 18rpx;
  316. background-color: #ED301D;
  317. }
  318. }
  319. .statistics-text{
  320. margin-top: 8rpx;
  321. font-size: 26rpx;
  322. }
  323. }
  324. }
  325. }
  326. .vip-content{
  327. margin-top: 66rpx;
  328. border-radius: 20rpx;
  329. background: linear-gradient(137deg, #FED18E 0%, #FFDFA4 100%);
  330. //height: 118rpx;
  331. padding: 34rpx 30rpx 40rpx 28rpx;
  332. position: relative;
  333. .vip-data{
  334. display: flex;
  335. justify-content: space-between;
  336. align-items: center;
  337. .vip-left{
  338. .vip-left-one{
  339. display: flex;
  340. justify-content: flex-start;
  341. align-items: center;
  342. height: 64rpx;
  343. .vip-left-img{
  344. width: 64rpx;
  345. height: 64rpx;
  346. margin-right: 10rpx;
  347. }
  348. .vip-left-vip{
  349. font-size: 44rpx;
  350. background: linear-gradient(355deg, #6A4420 0%, #94673D 100%);
  351. -webkit-text-fill-color: transparent;
  352. -webkit-background-clip: text;
  353. margin-right: 12rpx;
  354. height: 64rpx;
  355. line-height: 64rpx;
  356. }
  357. .vip-left-text{
  358. font-size: 36rpx;
  359. height: 64rpx;
  360. line-height: 64rpx;
  361. color: #6A4420;
  362. }
  363. }
  364. .vip-left-two{
  365. margin-top: 10rpx;
  366. height: 44rpx;
  367. line-height: 44rpx;
  368. font-size: 28rpx;
  369. color: #925C29;
  370. font-weight: 400;
  371. }
  372. }
  373. .vip-right{
  374. border-radius: 200rpx;
  375. padding: 10rpx 24rpx;
  376. background: #6A4420;
  377. height: 40rpx;
  378. line-height: 40rpx;
  379. font-size: 28rpx;
  380. font-weight: 600;
  381. color: #FFDDA1;
  382. }
  383. }
  384. .vip-discounts{
  385. background: linear-gradient(270deg, #FE2315 0%, #FE6915 100%);
  386. border-radius: 0 20rpx 0 20rpx;
  387. height: 40rpx;
  388. line-height: 40rpx;
  389. padding: 0 16rpx;
  390. font-size: 24rpx;
  391. position:absolute;
  392. top: 0;
  393. right: 0;
  394. }
  395. }
  396. .subscription{
  397. margin-top: 36rpx;
  398. font-size: 18rpx;
  399. }
  400. .my-tag{
  401. margin-top: 36rpx;
  402. padding-bottom: 30rpx;
  403. display: flex;
  404. justify-content: space-around;
  405. .tag-item{
  406. height: 44rpx;
  407. line-height: 44rpx;
  408. font-size: 32rpx;
  409. color: #999;
  410. font-weight: 500;
  411. transition: .5s ease;
  412. }
  413. .tag-pitch{
  414. color: #141414;
  415. font-weight: 600;
  416. transition: .5s ease;
  417. }
  418. }
  419. }
  420. }
  421. </style>