checkOut.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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 class="u-required">支付数量</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-popup mode="center" closeable @close="closeModal" v-model="showPayModal" width="600rpx" >
  35. <view class="slot-content">
  36. <view>请输入支付密码</view>
  37. <view class="text-cont">
  38. <view>
  39. <text>收取门店:</text>
  40. <text>{{storeName}}</text>
  41. </view>
  42. <view class="num-text">
  43. <text>支付数量:</text>
  44. <view>
  45. <text class="num-big">{{number}}</text>乐豆
  46. </view>
  47. </view>
  48. <view>
  49. <text>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</text>
  50. <text>{{remarks||'--'}}</text>
  51. </view>
  52. </view>
  53. <view class="footer">
  54. <u-input v-model="password"
  55. input-align="center"
  56. type="password"
  57. placeholder="请输入支付密码"
  58. :maxlength="30"
  59. @confirm="confirm"
  60. />
  61. </view>
  62. <view class="fot-btn">
  63. <u-button @click="confirm" type="error" >确认支付</u-button>
  64. </view>
  65. </view>
  66. </u-popup>
  67. </view>
  68. </template>
  69. <script>
  70. export default{
  71. data() {
  72. return {
  73. storeName: '和超级大黄蜂发挥教师的回复', // 门店名称
  74. remarks: '', // 备注
  75. number: '', // 支付数量
  76. showPayModal: false, // 支付弹窗
  77. password: '', // 支付密码
  78. }
  79. },
  80. onLoad() {
  81. },
  82. methods: {
  83. // 确认支付
  84. handlePay() {
  85. if (!this.number) {
  86. uni.showToast({
  87. title: '请输入支付数量',
  88. icon: 'none'
  89. })
  90. } else {
  91. this.showPayModal = true
  92. }
  93. },
  94. // 关闭弹窗
  95. closeModal() {
  96. this.showPayModal = false
  97. this.password = ''
  98. },
  99. // 输入密码完成 支付
  100. confirm(e) {
  101. console.log(e,'eeeee')
  102. }
  103. },
  104. }
  105. </script>
  106. <style lang="less">
  107. page{
  108. height: 100%;
  109. }
  110. .page-content{
  111. width: 100%;
  112. height: 100%;
  113. background-color: #fff;
  114. .num-cont{
  115. width: 100%;
  116. padding: 30upx;
  117. .num-input{
  118. display: flex;
  119. align-items: center;
  120. justify-content: center;
  121. >u-input {
  122. width: 300upx;
  123. border-bottom: 1px solid #f8f8f8;
  124. }
  125. }
  126. }
  127. .pay-btn{
  128. padding: 0 30upx;
  129. }
  130. }
  131. .slot-content{
  132. padding: 30upx 0;
  133. font-size: 32upx;
  134. display: flex;
  135. flex-direction: column;
  136. align-items: center;
  137. justify-content: space-between;
  138. .text-cont{
  139. width: 100%;
  140. margin-top: 20upx;
  141. border-bottom: 1px solid #F8F8F8;
  142. >view {
  143. padding: 10upx 40upx;
  144. display: flex;
  145. >text{
  146. &:last-child {
  147. flex: 1;
  148. padding-left: 30upx;
  149. }
  150. }
  151. .num-big{
  152. font-size: 36upx;
  153. color: red;
  154. padding-left: 30upx;
  155. }
  156. }
  157. .num-text{
  158. align-items: center;
  159. }
  160. }
  161. .footer{
  162. width: 80%;
  163. border-bottom: 1px solid #b1b1b1;
  164. }
  165. .fot-btn{
  166. margin-top: 30upx;
  167. }
  168. }
  169. </style>