index.vue 3.9 KB

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