checkOut.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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="number" 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. <!-- 确认支付弹窗 -->
  34. <u-modal v-model="showPayModal" title="请输入支付密码">
  35. <view class="slot-content">
  36. <view>
  37. <text>收取门店:</text>
  38. <text>{{storeName}}</text>
  39. </view>
  40. <view>
  41. <text>支付数量:</text>
  42. <text>{{number}}</text>
  43. </view>
  44. <view>
  45. <text>备注:</text>
  46. <text>{{remarks}}</text>
  47. </view>
  48. </view>
  49. </u-modal>
  50. </view>
  51. </template>
  52. <script>
  53. export default{
  54. data() {
  55. return {
  56. storeName: '和超级大黄蜂', // 门店名称
  57. remarks: '', // 备注
  58. number: '', // 支付数量
  59. showPayModal: false // 支付弹窗
  60. }
  61. },
  62. onLoad() {
  63. },
  64. methods: {
  65. // 确认支付
  66. handlePay() {
  67. this.showPayModal = true
  68. }
  69. },
  70. }
  71. </script>
  72. <style lang="less">
  73. page{
  74. height: 100%;
  75. }
  76. .page-content{
  77. width: 100%;
  78. height: 100%;
  79. background-color: #fff;
  80. .num-cont{
  81. width: 100%;
  82. padding: 30upx;
  83. .num-input{
  84. display: flex;
  85. align-items: center;
  86. justify-content: center;
  87. >u-input {
  88. width: 300upx;
  89. border-bottom: 1px solid #f8f8f8;
  90. }
  91. }
  92. }
  93. .pay-btn{
  94. padding: 0 30upx;
  95. }
  96. }
  97. .slot-content{
  98. }
  99. </style>