You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

286 lines
6.8 KiB

10 months ago
  1. <template>
  2. <view class="user">
  3. <view class="user-base-info">
  4. <img src="../../static/usercenter/user-top-bg.png" alt="" style="width: 100%;"/>
  5. <view class="box">
  6. <view class="user-base-info-top">
  7. <!-- 一般是凤尾鱼 -->
  8. </view>
  9. <view class="user-base-body">
  10. <img src="../../static/usercenter/user-pic@3x.png" alt="" />
  11. <view class="user-info">
  12. <view class="user-name">
  13. {{ userInfo.account }}
  14. </view>
  15. <view class="user-name">
  16. code{{ userInfo.invitationCode}}
  17. </view>
  18. <view class="vip">
  19. vip
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. <view class="account-info">
  26. <u-row customStyle="margin-bottom: 10px">
  27. <u-col span="5" @click="toBalance">
  28. <view>
  29. {{ $t('page.user.balance') + " " + userInfo.money || 0 }}
  30. </view>
  31. <view>
  32. <!-- 证券 -->
  33. </view>
  34. </u-col>
  35. <u-col span="3.5" @click="toBalance">
  36. <image class="purse-img" src="../../static/usercenter/purse 1024@3x.png"></image>
  37. <view>{{ $t('page.user.purse') }}</view>
  38. </u-col>
  39. <u-col span="3.5" @click="toBankCard">
  40. <image class="card-img" src="../../static/usercenter/card@3x.png"></image>
  41. <view>{{ $t('page.user.cardCase') }}</view>
  42. </u-col>
  43. </u-row>
  44. </view>
  45. <view class="speedy">
  46. <!-- <view class="speedy-top">
  47. <text>Bon hàng cùa tói</text>
  48. <view class="more">
  49. Xem thèm don hàng
  50. <u-icon name="arrow-right"></u-icon>
  51. </view>
  52. </view> -->
  53. <view class="speedy-list">
  54. <view class="speedy-item">
  55. <view @click="toOrder(0)" class="feature">
  56. <image src="../../static/usercenter/recharge@3x.png" mode="aspectFit"></image>
  57. <text>{{ $t('page.user.pendingPayment') }}</text>
  58. </view>
  59. <view @click="toOrder(1)" class="feature">
  60. <image src="../../static/usercenter/withdraw@3x.png" mode="aspectFit"></image>
  61. <text>{{ $t('page.user.pendingShipment') }}</text>
  62. </view>
  63. <view @click="toOrder(2)" class="feature">
  64. <image src="../../static/usercenter/Delivery-address@3x.png" mode="aspectFit"></image>
  65. <text>{{ $t('page.user.pendingReceipt') }}</text>
  66. </view>
  67. <view @click="toOrder(3)" class="feature">
  68. <image src="../../static/usercenter/Recharge- record@3x.png" mode="aspectFit"></image>
  69. <text>{{ $t('page.user.completed') }}</text>
  70. </view>
  71. </view>
  72. <view class="speedy-item">
  73. <view class="feature" @click="toCollect">
  74. <image src="../../static/usercenter/Collect@3x.png" mode="aspectFit"></image>
  75. <text>{{ $t('page.user.collect') }}</text>
  76. </view>
  77. <view class="feature" @click="toAddress">
  78. <image src="../../static/usercenter/address@3x.png" mode="aspectFit"></image>
  79. <text>{{ $t('page.user.address') }}</text>
  80. </view>
  81. <view class="feature" @click="toAuth">
  82. <image src="../../static/usercenter/standing@3x.png" mode="aspectFit"></image>
  83. <text>{{ $t('page.user.standing') }}</text>
  84. </view>
  85. <view class="feature" @click="toSetting">
  86. <image src="../../static/usercenter/Settings@3x.png" mode="aspectFit"></image>
  87. <text>{{ $t('page.user.settings') }}</text>
  88. </view>
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. </template>
  94. <script>
  95. export default {
  96. data() {
  97. return {
  98. userInfo : {
  99. account : localStorage.getItem('account'),
  100. money : localStorage.getItem('money'),invitationCode:localStorage.getItem('invitationCode'),
  101. }
  102. }
  103. },
  104. onShow(){
  105. this.userInfo = {
  106. account : localStorage.getItem('account'),
  107. money : localStorage.getItem('money'),
  108. invitationCode:localStorage.getItem('invitationCode'),
  109. }
  110. this.getInfo()
  111. },
  112. methods: {
  113. getInfo(){
  114. this.request('getInfo')
  115. .then(res => {
  116. if(res.code == 200){
  117. localStorage.setItem('uid', res.result.id)
  118. localStorage.setItem('money', res.result.money || 0)
  119. localStorage.setItem('account', res.result.account)
  120. localStorage.setItem('invitationCode',res.result.invitationCode)
  121. }
  122. })
  123. },
  124. toBalance(){
  125. uni.navigateTo({
  126. url : '/pages/balance/balance'
  127. })
  128. },
  129. toAddress(){
  130. uni.navigateTo({
  131. url : '/pages/user/address/address'
  132. })
  133. },
  134. toCollect(){
  135. uni.reLaunch({
  136. url : '/pages/collect/collect'
  137. })
  138. },
  139. toAuth(){
  140. uni.navigateTo({
  141. url : '/pages/user/IdentityAuthentication/IdentityAuthentication'
  142. })
  143. },
  144. toOrder(id){
  145. localStorage.setItem('orderIndex', id)
  146. uni.switchTab({
  147. url : '/pages/order/order'
  148. })
  149. },
  150. toBankCard(){
  151. uni.navigateTo({
  152. url : '/pages/user/bankCart/bankCart'
  153. })
  154. },
  155. toSetting(){
  156. uni.navigateTo({
  157. url : '/pages/setting/setting'
  158. })
  159. }
  160. }
  161. }
  162. </script>
  163. <style lang="scss" scoped>
  164. .user {
  165. .user-base-info {
  166. position: relative;
  167. background: white;
  168. img{
  169. vertical-align: middle;
  170. }
  171. .box{
  172. height: 100%;
  173. width: 100%;
  174. position: absolute;
  175. left: 0;
  176. top: 0;
  177. .user-base-info-top {
  178. display: flex;
  179. align-items: center;
  180. justify-content: center;
  181. font-size: 16px;
  182. height: 30%;
  183. color: #F3F3F3;
  184. font-size: 30rpx;
  185. }
  186. .user-base-body {
  187. box-sizing: border-box;
  188. padding: 0px 15px;
  189. display: flex;
  190. align-items: flex-start;
  191. height: 70%;
  192. img {
  193. width: 70px;
  194. height: 70px;
  195. margin-right: 20px;
  196. }
  197. .user-info {
  198. .user-name {
  199. color: #F3F3F3;
  200. font-size: 14px;
  201. }
  202. .vip {
  203. background: #FCCC92;
  204. height: 20px;
  205. line-height: 20px;
  206. width: 46px;
  207. border-radius: 10px;
  208. text-align: center;
  209. color: #FA6239;
  210. margin-top: 10px;
  211. }
  212. }
  213. }
  214. }
  215. }
  216. .account-info{
  217. height: 100px;
  218. background: white;
  219. font-size: 25rpx;
  220. .u-row{
  221. box-sizing: border-box;
  222. display: flex;
  223. align-items: center;
  224. height: 100%;
  225. .u-col{
  226. display: flex;
  227. height: 71px;
  228. align-items: center !important;
  229. justify-content: center !important;
  230. border-right: 2px solid #ccc;
  231. &:nth-child(3n){
  232. border-right: none;
  233. }
  234. image{
  235. width: 35px;
  236. height: 35px;
  237. }
  238. }
  239. }
  240. }
  241. .speedy{
  242. box-sizing: border-box;
  243. margin-top: 20px;
  244. .speedy-top{
  245. display: flex;
  246. height: 60px;
  247. background: white;
  248. align-items: center;
  249. justify-content: space-between;
  250. padding: 0px 15px;
  251. .more{
  252. display: flex;
  253. }
  254. }
  255. .speedy-list{
  256. .speedy-item{
  257. display: flex;
  258. flex-wrap: wrap;
  259. justify-content: center;
  260. margin-bottom: 15px;
  261. background: white;
  262. padding: 15px 15px;
  263. font-size: 25rpx;
  264. .feature{
  265. flex:1;
  266. text-align: center;
  267. image{
  268. width: 35px;
  269. height: 35px;
  270. }
  271. text{
  272. display: block;
  273. }
  274. }
  275. }
  276. }
  277. }
  278. }
  279. </style>