user-center.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <template>
  2. <view>
  3. <view class="head">
  4. <view class="portrait">
  5. <image class="image" src="../../static/images/login/logo.png" mode="scaleToFill"></image>
  6. </view>
  7. <view>
  8. <view class="nickname">{{nickname}}</view>
  9. <view>
  10. <text v-show="user_type===1" class="wddz">网店店主</text>
  11. <text v-show="user_type===2" class="zgcj">直供厂家</text>
  12. </view>
  13. </view>
  14. <view class="invite">
  15. <view class="invite-code">邀请码:H00000164</view>
  16. <view class="invite-progress">
  17. <view class="item active"></view>
  18. <view class="item active"></view>
  19. <view class="item active"></view>
  20. <view class="item"></view>
  21. <view class="item"></view>
  22. </view>
  23. <view class="invite-notes">再邀请3人获得代理会员</view>
  24. </view>
  25. </view>
  26. <view class="body">
  27. <view class="money">
  28. <view class="row">
  29. <view class="col">可提现金额(元):<text class="warning">8.86</text></view>
  30. <view class="col"><button class="btn tixian-btn">立即提现</button></view>
  31. </view>
  32. <view class="row">
  33. <view class="col">保证金(元):<text>0.00</text><text class="tips">(保证金2000元)</text></view>
  34. <view class="col"><button class="btn jiaona-btn">立即缴纳</button></view>
  35. </view>
  36. </view>
  37. <view class="vip-center">
  38. <view class="text">代理会员中心<text class="sub">(特权独享)</text></view>
  39. </view>
  40. <view class="menu">
  41. <view class="menu-item">
  42. <view class="icon">
  43. <image class="image" src="../../static/images/menu/b8.png" mode="scaleToFill"></image>
  44. </view>
  45. <view class="name">账单明细</view>
  46. </view>
  47. <view class="menu-item">
  48. <navigator url="/pages/order/order" open-type="navigate">
  49. <view class="icon">
  50. <image class="image" src="../../static/images/menu/b7.png" mode=""></image>
  51. </view>
  52. <view class="name">订单管理</view>
  53. </navigator>
  54. </view>
  55. <view>
  56. <view class="icon">
  57. <image class="image" src="../../static/images/menu/b2.png" mode=""></image>
  58. </view>
  59. <view class="name">我的商品</view>
  60. </view>
  61. <view>
  62. <navigator url="/pages/user/notice" open-type="navigate">
  63. <view class="icon">
  64. <image class="image" src="../../static/images/menu/b1.png" mode=""></image>
  65. </view>
  66. <view class="name">新手攻略</view>
  67. </navigator>
  68. </view>
  69. </view>
  70. <view class="menu">
  71. <view>
  72. <navigator url="/pages/user/problem" open-type="navigate">
  73. <view class="icon">
  74. <image class="image" src="../../static/images/menu/b3.png" mode=""></image>
  75. </view>
  76. <view class="name">常见问题</view>
  77. </navigator>
  78. </view>
  79. <view>
  80. <navigator url="/pages/user/kefu" open-type="navigate">
  81. <view class="icon">
  82. <image class="image" src="../../static/images/menu/b4.png" mode=""></image>
  83. </view>
  84. <view class="name">联系客服</view>
  85. </navigator>
  86. </view>
  87. <view>
  88. <navigator url="/pages/user/notice" open-type="navigate">
  89. <view class="icon">
  90. <image class="image" src="../../static/images/menu/b5.png" mode=""></image>
  91. </view>
  92. <view class="name">官方公告</view>
  93. </navigator>
  94. </view>
  95. <view>
  96. <view class="icon">
  97. <image class="image" src="../../static/images/menu/b6.png" mode=""></image>
  98. </view>
  99. <view class="name">意见反馈</view>
  100. </view>
  101. </view>
  102. </view>
  103. </view>
  104. </template>
  105. <script>
  106. import {
  107. mapState
  108. } from 'vuex'
  109. export default {
  110. data() {
  111. return {
  112. balance: '',
  113. deposit: '',
  114. user_type: 1,
  115. };
  116. },
  117. computed: mapState({
  118. nickname: state => state.user.nickname
  119. }),
  120. onNavigationBarButtonTap(e) {
  121. // console.log(e)
  122. switch (e.index) {
  123. case 0:
  124. uni.navigateTo({
  125. url: '/pages/user/setting'
  126. });
  127. break;
  128. case 1:
  129. uni.navigateTo({
  130. url: '/pages/message/message'
  131. });
  132. break;
  133. default:
  134. break;
  135. }
  136. }
  137. }
  138. </script>
  139. <style lang="scss" scoped>
  140. .head {
  141. background: $primary-color;
  142. display: flex;
  143. align-items: center;
  144. padding-bottom: 140upx;
  145. padding-top: 20upx;
  146. }
  147. .portrait {
  148. margin: 0 20upx;
  149. .image {
  150. width: 128upx;
  151. height: 128upx;
  152. background: white;
  153. border-radius: 128upx;
  154. border: 10upx solid rgba(255, 255, 255, 0.2);
  155. }
  156. }
  157. .nickname {
  158. font-size: 30upx;
  159. color: white;
  160. margin-bottom: 10upx;
  161. }
  162. .wddz,
  163. .zgcj {
  164. font-size: 24upx;
  165. color: white;
  166. border: 2upx solid white;
  167. border-radius: 20upx;
  168. width: 140upx;
  169. height: 36upx;
  170. line-height: 36upx;
  171. text-align: center;
  172. text-indent: 20upx;
  173. display: inline-block;
  174. padding: 0;
  175. background: url(../../static/images/do.png) no-repeat;
  176. background-size: 21upx 21upx;
  177. background-position: 10upx;
  178. }
  179. .invite {
  180. text-align: right;
  181. flex-grow: 1;
  182. margin-right: 20upx;
  183. color: white;
  184. .invite-code {
  185. font-size: 30upx;
  186. }
  187. .invite-notes {
  188. font-size: 24upx;
  189. }
  190. .invite-progress {
  191. .item {
  192. border: 2upx solid white;
  193. display: inline-block;
  194. width: 36upx;
  195. transform: scaleX(0.9);
  196. font-size: 0;
  197. border-radius: 2upx;
  198. &.active {
  199. border-color: yellow;
  200. }
  201. }
  202. &::after {
  203. content: "";
  204. background: url(../../static/images/vip.png) no-repeat;
  205. background-size: 42upx 42upx;
  206. width: 42upx;
  207. height: 42upx;
  208. display: inline-block;
  209. position: relative;
  210. top: 16upx;
  211. }
  212. margin-bottom: 20upx;
  213. }
  214. }
  215. .body {
  216. padding: 20upx;
  217. position: relative;
  218. top: -120upx;
  219. .money {
  220. background: white;
  221. border-radius: 20upx;
  222. padding: 20upx;
  223. .row {
  224. color: #333;
  225. display: flex;
  226. align-items: center;
  227. margin-bottom: 20upx;
  228. .warning {
  229. color: $primary-color;
  230. font-weight: bold;
  231. }
  232. .tips {
  233. color: #CCC;
  234. font-size: 24upx;
  235. }
  236. &:last-child {
  237. margin-bottom: 0;
  238. }
  239. & .col:first-child {
  240. flex-grow: 1;
  241. font-size: 28upx;
  242. }
  243. & .col:last-child {
  244. text-align: right;
  245. font-size: 28upx;
  246. }
  247. }
  248. .btn {
  249. background-color: $primary-color;
  250. color: white;
  251. font-size: 26upx;
  252. padding: 5upx 20upx;
  253. border-radius: 40upx;
  254. line-height: normal;
  255. }
  256. }
  257. }
  258. .vip-center {
  259. background: url(../../static/images/center5.png) no-repeat;
  260. background-size: 710upx 78upx;
  261. color: #EEEEEE;
  262. padding: 0 20upx;
  263. margin-top: 20upx;
  264. .text {
  265. margin-left: 50upx;
  266. background-color: #ff5454;
  267. font-weight: bold;
  268. line-height: 76upx;
  269. .sub {
  270. font-size: 24upx;
  271. }
  272. }
  273. }
  274. .menu {
  275. display: flex;
  276. background: white;
  277. border-radius: 20upx;
  278. padding: 30upx 20upx;
  279. margin-top: 20upx;
  280. justify-content: space-between;
  281. .name {
  282. font-size: 28upx;
  283. margin-top: 10upx;
  284. }
  285. .icon {
  286. text-align: center;
  287. }
  288. .icon .image {
  289. width: 50upx;
  290. height: 50upx;
  291. }
  292. }
  293. </style>