index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. <template>
  2. <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
  3. <view class="main">
  4. <view class="one">
  5. <view class="one_1" v-if="!user._id">
  6. <text class="iconfont icon-geren2" @click="toOrrder('logo')"></text>
  7. <view class="name">未登录</view>
  8. </view>
  9. <view class="one_1" v-else>
  10. <image :src="user.icon"></image>
  11. <view class="name">
  12. <text>{{user.name||'暂无'}}</text>
  13. <text>普通会员</text>
  14. </view>
  15. </view>
  16. <view class="one_2">
  17. <view class="one_2_1">
  18. <text v-if="user._id">{{user.collect||0}}</text>
  19. <text @click="toOrrder('pagesMy/collection/market')">收藏的商品</text>
  20. </view>
  21. <text class="link">|</text>
  22. <view class="one_2_1">
  23. <text v-if="user._id">{{user.collect||0}}</text>
  24. <text @click="toOrrder('pagesMy/collection/shop')">收藏的店铺</text>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="two">
  29. <view class="two_1">
  30. <view class="title">我的订单</view>
  31. <view class="title">
  32. <text @click="toOrrder('pagesMy/order/index')">全部订单</text>
  33. <text class="iconfont icon-dayufuhao"></text>
  34. </view>
  35. </view>
  36. <view class="two_2">
  37. <view class="orderList" v-for="(item, index) in orderList" :key="index" @click="toOrrder(item.type)">
  38. <view class="icon">
  39. <text class="iconfont" :class="[item.icon]"></text>
  40. </view>
  41. <text class="title">{{item.title}}</text>
  42. </view>
  43. </view>
  44. <view class="two_1" v-for="(item, index) in menuList" :key="index" @click="toOrrder(item.type)">
  45. <view class="title">{{item.title}}</view>
  46. <view class="title">
  47. <text v-if="user._id&&item.title=='我的积分'">{{user.integral||0}}分</text>
  48. <text v-if="user._id&&item.title=='客服电话'">{{user.phone||'123-345-6780'}}</text>
  49. <text class="iconfont icon-dayufuhao"></text>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. </mobile-frame>
  55. </template>
  56. <script>
  57. export default {
  58. data() {
  59. return {
  60. frameStyle: {
  61. useBar: true
  62. },
  63. // 用户信息
  64. user: {},
  65. // 图标菜单
  66. orderList: [{
  67. icon: 'icon-daifukuan',
  68. title: '待付款',
  69. type: 'a'
  70. },
  71. {
  72. icon: 'icon-daifahuo',
  73. title: '待发货',
  74. type: 'b'
  75. },
  76. {
  77. icon: 'icon-daishouhuo',
  78. title: '待收货/消费',
  79. type: 'c'
  80. },
  81. {
  82. icon: 'icon-daipinglun',
  83. title: '待评论',
  84. type: 'd'
  85. },
  86. {
  87. icon: 'icon-shouhoufuwuicon',
  88. title: '售后',
  89. type: 'e'
  90. },
  91. ],
  92. // 菜单
  93. menuList: [{
  94. title: '我的优惠劵',
  95. type: 'f'
  96. },
  97. {
  98. title: '我的积分',
  99. type: 'g'
  100. },
  101. {
  102. title: '我的资产',
  103. type: 'h'
  104. },
  105. {
  106. title: '我的拼团',
  107. type: 'i'
  108. },
  109. {
  110. title: '我的收货地址',
  111. type: 'j'
  112. },
  113. {
  114. title: '账号管理',
  115. type: 'k'
  116. },
  117. {
  118. title: '客服电话',
  119. type: 'l'
  120. },
  121. ],
  122. };
  123. },
  124. onShow: function() {},
  125. methods: {
  126. toPath(e) {
  127. if (e && e.route) uni.redirectTo({
  128. url: `/${e.route}`
  129. })
  130. },
  131. // 跳转页面
  132. toOrrder(e) {
  133. const that = this;
  134. uni.navigateTo({
  135. url: `/${e}`
  136. })
  137. },
  138. }
  139. }
  140. </script>
  141. <style lang="scss">
  142. .main {
  143. display: flex;
  144. flex-direction: column;
  145. width: 100vw;
  146. height: 100vh;
  147. .one {
  148. text-align: center;
  149. padding: 4vw 0;
  150. background-color: #FB1438;
  151. color: var(--mainColor);
  152. .one_1 {
  153. margin: 0 0 5vw 0;
  154. image {
  155. width: 25vw;
  156. height: 25vw;
  157. border-radius: 25vw;
  158. }
  159. .iconfont {
  160. font-size: 80px;
  161. }
  162. .name {
  163. display: flex;
  164. justify-content: space-evenly;
  165. margin: 2vw 0;
  166. font-size: var(--font18Szie);
  167. }
  168. }
  169. .one_2 {
  170. display: flex;
  171. flex-direction: row;
  172. justify-content: space-around;
  173. font-size: var(--font16Szie);
  174. .one_2_1 {
  175. display: flex;
  176. flex-direction: column;
  177. }
  178. .link {
  179. font-weight: bold;
  180. }
  181. }
  182. }
  183. .two {
  184. background-color: var(--f1Color);
  185. .two_1 {
  186. display: flex;
  187. justify-content: space-between;
  188. padding: 4vw;
  189. background-color: var(--mainColor);
  190. margin: 0 0 0.1vw 0;
  191. .title {
  192. font-size: var(--font16Szie);
  193. text:first-child {
  194. margin: 0 1vw 0 0;
  195. }
  196. }
  197. .title:last-child {
  198. color: var(--f85Color);
  199. font-size: var(--font14Size);
  200. }
  201. }
  202. .two_1:nth-last-child(2) {
  203. margin: 0 0 2vw 0;
  204. }
  205. .two_1:nth-last-child(4) {
  206. margin: 0 0 2vw 0;
  207. }
  208. .two_2 {
  209. display: flex;
  210. justify-content: space-between;
  211. padding: 5vw;
  212. background-color: var(--mainColor);
  213. margin: 0 0 2vw 0;
  214. .orderList {
  215. text-align: center;
  216. .icon {
  217. .iconfont {
  218. font-size: 25px;
  219. }
  220. }
  221. .title {
  222. display: inline-block;
  223. margin: 2vw 0 0 0;
  224. font-size: var(--font12Size);
  225. }
  226. }
  227. }
  228. }
  229. }
  230. </style>