submitOrder.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <view class="w-full">
  3. <send-type @sendTypeChange="sendTypeChange" />
  4. <view class="gap"></view>
  5. <!-- <view class="address">
  6. <u-cell-group>
  7. <u-cell title="添加收货地址" :border="false" url='' isLink>
  8. <u-icon slot="icon" size="24" name="plus"></u-icon>
  9. </u-cell>
  10. </u-cell-group>
  11. </view> -->
  12. <view class="padding-sm dflex-b bg-main" @click="toaddr">
  13. <view class="dflex">
  14. <view class="addr-label">配送至</view>
  15. <view class="w-full dflex-wrap-w">
  16. <view>
  17. <text>张三</text>
  18. <text class="margin-left">18599999999</text>
  19. </view>
  20. <view class="margin-bottom-xs">
  21. <text>广西壮族自治区-柳州市-鱼峰区 xxxx</text>
  22. </view>
  23. </view>
  24. </view>
  25. <u-icon slot="icon" size="20" name="arrow-right"></u-icon>
  26. <!-- <view class="iconfont iconjiantou-01 fs-sm"></view> -->
  27. </view>
  28. <view class="gap"></view>
  29. <view class="goods-order-list w-full padding-lr-sm">
  30. <view class="shop dflex-b ">
  31. <view class="shop-check">
  32. <text class="shop-name">xxx学校xx年级xx班级</text>
  33. </view>
  34. </view>
  35. <view class="goods-cart w-full">
  36. <view class="goods-cont padding-tb" v-for="index in 3" :key="index">
  37. <my-goods :data="data">
  38. <view class="good-num">×1</view>
  39. </my-goods>
  40. </view>
  41. </view>
  42. </view>
  43. <!-- 金额明细 -->
  44. <view class="bg-main">
  45. <view class="dflex-b padding-lr padding-tb-sm">
  46. <view class="flex1">总金额</view>
  47. <view class=""><text style="font-size: 24rpx;">¥</text>46.32</view>
  48. </view>
  49. <view class="dflex-b padding-lr padding-tb-sm">
  50. <view class="flex1">运费 (总重:4.960 kg )</view>
  51. <view class="ft-base">¥10.00</view>
  52. </view>
  53. <view class="dflex-b padding-lr padding-tb-sm">
  54. <view class="margin-right-xl">备注</view>
  55. <input class="flex1 padding-sm" type="text" v-model="order_desc" placeholder="请填写买家备注"
  56. placeholder-class="placeholder" />
  57. </view>
  58. </view>
  59. <view class="gap"></view>
  60. <my-gap :height="130" />
  61. <view class="submit-bar padding-sm dflex-b">
  62. <view class="submit-btn dflex-c">提交订单</view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. export default {
  68. data() {
  69. return {
  70. data:{
  71. src:'../../static/x0.jpg',
  72. title:'标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
  73. spec:'180cm',
  74. price:'53.30'
  75. }
  76. }
  77. },
  78. methods: {
  79. }
  80. }
  81. </script>
  82. <style lang="scss" scoped>
  83. .addr-label{
  84. padding: 6upx 0;
  85. border-radius:3px;
  86. background-color: #F6390D;
  87. color: #fff;
  88. width: 120upx;
  89. text-align: center;
  90. flex-shrink: 0;
  91. margin-right: 14upx;
  92. }
  93. .order-spec{
  94. padding-bottom: 10upx;
  95. }
  96. .shop{
  97. padding-top: 20upx;
  98. }
  99. .goods-num{
  100. font-size: 16px;
  101. padding-left: 20upx;
  102. }
  103. .goods-cont{
  104. width: 100%;
  105. box-sizing: border-box;
  106. }
  107. .total-goods{
  108. font-size: 12px;
  109. color: #999;
  110. }
  111. .submit-bar{
  112. height: 130rpx;
  113. width: 100%;
  114. background-color: #FFF;
  115. position: fixed;
  116. left: 0;
  117. bottom: 0;
  118. box-shadow: 0px -4px 16px 0px rgba(0,0,0,0.15);
  119. z-index: 10;
  120. .submit-btn{
  121. background-color: #0581FE;
  122. height: 100%;
  123. width: 100%;
  124. color: #FFF;
  125. font-size: 14px;
  126. // font-weight: 700;
  127. border-radius:35upx ;
  128. }
  129. }
  130. .good-num{
  131. font-size: 12px;
  132. padding-top: 40rpx;
  133. }
  134. </style>