index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <view class="cart-pages">
  3. <view class="cart-bar">
  4. <view>
  5. <u-image height="40rpx" width="40rpx" src="/static/position.png"></u-image>
  6. </view>
  7. <view class="position">
  8. <view class="address">陕西省西安市未央区华帝金座A座6楼</view>
  9. <view>王明 1456465455</view>
  10. </view>
  11. <view>
  12. <u-image height="40rpx" width="40rpx" src="/static/edit.png"></u-image>
  13. </view>
  14. </view>
  15. <view class="goods-list">
  16. <!-- 商品列表 -->
  17. <view class="goods-item" v-for="(item,index) in 6" :key="index">
  18. <view class="goods-imgs">
  19. <u-image width="150rpx" height="150rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
  20. </view>
  21. <view class="goods-info">
  22. <view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
  23. <view class="goods-price">
  24. <view><text>50</text>乐豆</view>
  25. <view>×2</view>
  26. </view>
  27. </view>
  28. </view>
  29. <!-- 总计 -->
  30. <view class="goods-heji">
  31. <view>
  32. <view>商品合计</view>
  33. <view><text>250</text>乐豆</view>
  34. </view>
  35. <view>
  36. <view>运费</view>
  37. <view>免运费</view>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="cart-submit">
  42. <view>总计:<text>450</text> 乐豆</view>
  43. <view>
  44. <u-button type="warning" @click="toPay">确认支付</u-button>
  45. </view>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. export default {
  51. data() {
  52. return {
  53. };
  54. },
  55. methods: {
  56. //立即下单
  57. toPay(){
  58. }
  59. },
  60. }
  61. </script>
  62. <style lang="scss">
  63. page{
  64. height: 100%;
  65. }
  66. .cart-pages{
  67. width: 100%;
  68. height: 100%;
  69. display: flex;
  70. flex-direction: column;
  71. .cart-bar{
  72. background: #FFFFFF;
  73. box-shadow: 1px 1px 3px #eee;
  74. border-bottom: 1px solid #eee;
  75. display: flex;
  76. align-items: center;
  77. padding:20upx 10upx;
  78. .position{
  79. flex-grow: 1;
  80. }
  81. > view{
  82. padding: 0 5upx;
  83. .address{
  84. font-weight: bold;
  85. padding: 10upx 0;
  86. }
  87. &:last-child{
  88. padding: 0 20upx;
  89. }
  90. }
  91. }
  92. .goods-list{
  93. padding: 20upx 0;
  94. flex-grow: 1;
  95. overflow: auto;
  96. .goods-class-box{
  97. background: #FFFFFF;
  98. box-shadow: 1px 1px 3px #eee;
  99. margin-bottom: 20upx;
  100. }
  101. .goods-item{
  102. padding: 20upx;
  103. display: flex;
  104. align-items: center;
  105. justify-content: space-between;
  106. border-bottom: 1px solid #F8F8F8;
  107. background: #fff;
  108. &:last-child{
  109. border: 0;
  110. }
  111. .goods-imgs{
  112. position: relative;
  113. }
  114. .goods-info{
  115. padding-left: 20upx;
  116. }
  117. .goods-price{
  118. display: flex;
  119. align-items: center;
  120. justify-content: space-between;
  121. padding-top: 20upx;
  122. >view{
  123. &:first-child{
  124. font-size: 22upx;
  125. text{
  126. color: red;
  127. font-size: 30upx;
  128. margin-right: 6upx;
  129. }
  130. }
  131. }
  132. }
  133. }
  134. }
  135. .goods-heji{
  136. padding: 20upx;
  137. background: #FFFFFF;
  138. box-shadow: 1px 1px 3px #eee;
  139. margin-top: 20upx;
  140. >view{
  141. display: flex;
  142. align-items: center;
  143. justify-content: space-between;
  144. padding: 10upx 0;
  145. text{
  146. color: red;
  147. margin-right: 6upx;
  148. }
  149. }
  150. }
  151. .cart-submit{
  152. padding: 20upx;
  153. background: #FFFFFF;
  154. box-shadow: 1px 1px 3px #eee;
  155. border-top: 1px solid #eee;
  156. display: flex;
  157. align-items: center;
  158. justify-content: space-between;
  159. > view{
  160. text{
  161. color: red;
  162. font-size: 36upx;
  163. margin-right: 6upx;
  164. }
  165. }
  166. }
  167. }
  168. </style>