userCenter.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <!--
  2. * @Description:
  3. * @Author: 欧阳承珺
  4. * @LastEditors: 欧阳承珺
  5. * @Date: 2022-11-01 20:18:40
  6. * @LastEditTime: 2022-11-16 10:16:06
  7. -->
  8. <template>
  9. <div class="font-primary min-w-1200px">
  10. <Navbar></Navbar>
  11. <div class="min-h-1572px">
  12. <div class="flex mt-50px px-[10%] mb-30px justify-between">
  13. <div class="w-[27%] min-w-260px px-24px pb-80px mb-20px bg-[#fafafa]">
  14. <div class="person">
  15. <div>
  16. <a href="/members/me/expenses" class="members">
  17. <img :src="userInfo.avatarUrl" class="userCenterAvatarUrl">
  18. </a>
  19. <br>
  20. <p class="username">{{userInfo?.name}}</p>
  21. <p class="user-showname block mt-16px">{{userInfo?.email || userInfo?.phone}}</p>
  22. </div>
  23. <div class="flex py-14px mt-20px justify-between text-left">
  24. <div>
  25. <p v-if="userInfo?.subscriberType === 1" class="user-vip text-18px mb-6px text-[#333] font-500 leading-24px">17会员</p>
  26. <p v-else class="text-18px text-[#333] font-500 leading-24px mb-6px">免费用户</p>
  27. <p v-if="userInfo?.subscriberType === 1" class="text-12px text-[#999] pl-28px mb-6px leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.day}}</span>天到期</p>
  28. <p v-else class="text-12px text-[#999] leading-17px">订阅会员免费格式转换</p>
  29. </div>
  30. <button class="btn-renew" @click="handlerBuy('vip')">
  31. {{userInfo?.subscriberType === 1 ? '续费' : '订阅会员'}}
  32. </button>
  33. </div>
  34. <div class="flex py-14px my-8px justify-between text-left">
  35. <div class="user-ticket">
  36. <p class="text-18px text-[#333] leading-24px mb-6px">
  37. <span class="font-500 text-bg-$btn-color-primary text-18px leading-24px tracking-1px">
  38. {{userInfo?.points}}
  39. </span>
  40. <span class="text-bg-$btn-color-primary text-14px leading-18px">
  41. </span>
  42. <span class="text-14px text-[rgba(0,0,0,0.8)] leading-18px">
  43. /{{userInfo?.totalPoints}}张
  44. </span>
  45. </p>
  46. <p class="text-12px text-[#999] leading-17px">转换券</p>
  47. </div>
  48. <button class="btn-recharge" @click="handlerBuy('ticket')">充值</button>
  49. </div>
  50. </div>
  51. <ul class="menus-ul">
  52. <li class="my_convert" :class="{active: $route.path === '/members/me/expenses'}">
  53. <nuxt-link to="/members/me/expenses" class='myexpenses'>我的转档</nuxt-link>
  54. </li>
  55. <li class='my_pricing' :class="{active: showBuy || $route.path === '/members/me/points' || $route.path === '/members/me/vip'}">
  56. <a @click="showBuy = !showBuy">消费记录</a>
  57. <ul :class="{active: showBuy || $route.path === '/members/me/points' || $route.path === '/members/me/vip'}">
  58. <li >
  59. <nuxt-link :class="{active: $route.path === '/members/me/vip'}" to="/members/me/vip" class='mypoints text-[16px]'>
  60. 会员购买
  61. </nuxt-link>
  62. </li>
  63. <li >
  64. <nuxt-link :class="{active: $route.path === '/members/me/points'}" to="/members/me/points" class='mypoints'>
  65. 转换券购买
  66. </nuxt-link>
  67. </li>
  68. </ul>
  69. </li>
  70. </ul>
  71. </div>
  72. <Nuxt class="w-[70%]"></Nuxt>
  73. </div>
  74. </div>
  75. <FooterBar></FooterBar>
  76. </div>
  77. </template>
  78. <script>
  79. import { mapState } from 'vuex'
  80. import Navbar from './components/NavBar.vue'
  81. import FooterBar from './components/FooterBar.vue'
  82. export default {
  83. components: {
  84. Navbar,
  85. FooterBar,
  86. },
  87. data() {
  88. return {
  89. showBuy: false
  90. }
  91. },
  92. computed: {
  93. ...mapState([
  94. 'userInfo',
  95. ]),
  96. },
  97. methods: {
  98. handlerBuy(type) {
  99. this.$store.commit('OPEN_LOGIN', true)
  100. this.$store.commit('SET_INTERFACE', type)
  101. },
  102. },
  103. mounted() {
  104. this.$axios.get('members/getMemberInfo').then((res)=> {
  105. if(res.code === 200) {
  106. this.$store.commit('setUser',res.result.memberInfo)
  107. }
  108. })
  109. },
  110. }
  111. </script>
  112. <style lang="scss" scoped>
  113. .person{
  114. width: 100%;
  115. text-align: center;
  116. padding: 30px 0px 8px;
  117. border-bottom: 1px solid rgb(218,218,218);
  118. a.members {
  119. width: 80px;
  120. height: 80px;
  121. border-radius: 100%;
  122. box-shadow: rgba(0,0,0,0.2);
  123. display: inline-block;
  124. overflow: hidden;
  125. box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
  126. img{
  127. width: 100%;
  128. height: 100%;
  129. }
  130. }
  131. .userCenterAvatarUrl{
  132. object-fit: cover;
  133. display: inline-block;
  134. border: none;
  135. // border-radius: 10px;
  136. }
  137. .username{
  138. height: 30px;
  139. font-size: 20px;
  140. color: rgb(51,51,51);
  141. }
  142. .user-showname{
  143. height: 21px;
  144. font-size: 14px;
  145. color: rgb(153,153,153);
  146. }
  147. }
  148. .user-vip{
  149. background: url('~assets/images/common/ic_member.svg') no-repeat;
  150. background-size: 24px;
  151. padding-left: 28px;
  152. }
  153. .user-ticket {
  154. padding-left: 28px;
  155. background: url('~assets/images/common/ic_coupon.svg') no-repeat;
  156. background-size: 24px;
  157. }
  158. .menus-ul {
  159. list-style: none;
  160. font-size: 18px;
  161. padding-left: 0px;
  162. width: 100%;
  163. max-width: 250px;
  164. margin-top: 24px;
  165. li {
  166. margin-bottom: 8px;
  167. cursor: pointer;
  168. a {
  169. color: rgb(51, 51, 51);
  170. display: block;
  171. width: 100%;
  172. height: 48px;
  173. line-height: 48px;
  174. }
  175. ul {
  176. list-style: none;
  177. padding-left: 0px;
  178. display: none;
  179. &.active {
  180. display: block;
  181. }
  182. li {
  183. font-size: 16px;
  184. margin-bottom: 0px;
  185. border: 0px !important;
  186. &:hover{
  187. a{
  188. color: rgb(255, 79, 79);
  189. }
  190. }
  191. a {
  192. color: rgb(153, 153, 153);
  193. &.active{
  194. color: rgb(255, 79, 79);
  195. }
  196. }
  197. }
  198. }
  199. }
  200. }
  201. .my_pricing{
  202. padding: 0px 32px;
  203. background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px;
  204. &:hover{
  205. background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_elect.png) no-repeat left 12px;
  206. & > a{
  207. color: #ff4f4f;
  208. }
  209. }
  210. &.active:hover{
  211. background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px;
  212. & > a{
  213. color: rgb(51, 51, 51);
  214. }
  215. }
  216. & > a{
  217. background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian.png) no-repeat right 14px;
  218. }
  219. &.active > a{
  220. background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian_normal.png) no-repeat right 14px;
  221. }
  222. }
  223. .my_convert{
  224. padding: 0px 32px;
  225. background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_nor.png) no-repeat left 12px;
  226. &:hover{
  227. background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_elect.png) no-repeat left 12px;
  228. & > a{
  229. color: #ff4f4f;
  230. }
  231. }
  232. &.active{
  233. background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_elect.png) no-repeat left 12px;
  234. a{
  235. color: rgb(255, 79, 79);
  236. }
  237. }
  238. }
  239. .mypoints {
  240. &.active {
  241. a {
  242. color: rgb(255, 79, 79);
  243. }
  244. }
  245. }
  246. </style>