checkOut.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="page-content">
  3. <u-gap height="10" bg-color="#f8f8f8"></u-gap>
  4. <u-field
  5. class="field-item"
  6. v-model="storeName"
  7. disabled
  8. input-align="right"
  9. label="收取门店"
  10. placeholder="请填写手机号"
  11. >
  12. </u-field>
  13. <u-field
  14. v-model="remarks"
  15. label="备注"
  16. input-align="right"
  17. auto-height
  18. placeholder="请填写备注(最多500个字符)"
  19. type="textarea"
  20. >
  21. </u-field>
  22. <view class="num-cont">
  23. <text>支付数量</text>
  24. <view class="num-input">
  25. <u-input v-model="value" type="number" placeholder="请输入数量" />
  26. <text>个乐豆</text>
  27. </view>
  28. </view>
  29. <u-gap height="50" bg-color="#f8f8f8"></u-gap>
  30. <view class="pay-btn">
  31. <u-button @click="handlePay" type="error" >确认支付</u-button>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. export default{
  37. data() {
  38. return {
  39. storeName: '和超级大黄蜂',
  40. remarks: ''
  41. }
  42. },
  43. onLoad() {
  44. },
  45. methods: {
  46. // 确认支付
  47. handlePay() {
  48. }
  49. },
  50. }
  51. </script>
  52. <style lang="less">
  53. page{
  54. height: 100%;
  55. }
  56. .page-content{
  57. width: 100%;
  58. height: 100%;
  59. background-color: #fff;
  60. .num-cont{
  61. width: 100%;
  62. padding: 30upx;
  63. .num-input{
  64. display: flex;
  65. align-items: center;
  66. justify-content: center;
  67. >u-input {
  68. width: 300upx;
  69. border-bottom: 1px solid #f8f8f8;
  70. }
  71. }
  72. }
  73. .pay-btn{
  74. padding: 0 30upx;
  75. }
  76. }
  77. </style>