checkOut.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  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. :value="store.name"
  7. disabled
  8. input-align="right"
  9. label="收取门店"
  10. >
  11. </u-field>
  12. <u-field
  13. v-model="remarks"
  14. label="备注"
  15. input-align="right"
  16. auto-height
  17. placeholder="请填写备注(最多500个字符)"
  18. type="textarea"
  19. >
  20. </u-field>
  21. <view class="num-cont">
  22. <text class="u-required">支付数量</text>
  23. <view class="num-input">
  24. <u-input v-model="number" type="number" placeholder="请输入数量" />
  25. <text>个乐豆</text>
  26. </view>
  27. </view>
  28. <u-gap height="50" bg-color="#f8f8f8"></u-gap>
  29. <view class="pay-btn">
  30. <u-button @click="handlePay" type="error" >确认支付</u-button>
  31. </view>
  32. <!-- 确认支付弹窗 -->
  33. <u-popup mode="center" closeable @close="closeModal" v-model="showPayModal" width="600rpx" >
  34. <view class="slot-content">
  35. <view>请输入支付密码</view>
  36. <view class="text-cont">
  37. <view>
  38. <text>收取门店:</text>
  39. <text>{{store.name||'--'}}</text>
  40. </view>
  41. <view class="num-text">
  42. <text>支付数量:</text>
  43. <view>
  44. <text class="num-big">{{number}}</text>乐豆
  45. </view>
  46. </view>
  47. <view>
  48. <text>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</text>
  49. <text>{{remarks||'--'}}</text>
  50. </view>
  51. </view>
  52. <view class="footer">
  53. <u-input v-model="password"
  54. input-align="center"
  55. type="password"
  56. placeholder="请输入支付密码"
  57. :maxlength="30"
  58. @confirm="confirm"
  59. />
  60. </view>
  61. <view class="fot-btn">
  62. <u-button @click="confirm" type="error" >确认支付</u-button>
  63. </view>
  64. </view>
  65. </u-popup>
  66. <!-- 提示用户设置支付密码 -->
  67. <u-modal v-model="showSetPswModal"
  68. content="请先设置支付密码,才能使用乐豆"
  69. show-cancel-button
  70. confirm-text="去设置"
  71. cancel-text="暂时放弃"
  72. @confirm="toSetPwd"
  73. @cancel="showSetPswModal=false"
  74. ></u-modal>
  75. </view>
  76. </template>
  77. <script>
  78. import { sellerReceive,sellerFindByPartnerNo } from '@/api/user.js'
  79. import { existPayPwd } from '@/api/order.js'
  80. export default{
  81. data() {
  82. return {
  83. showSetPswModal: false,
  84. store: null, // 门店信息
  85. remarks: '', // 备注
  86. number: '', // 支付数量
  87. showPayModal: false, // 支付弹窗
  88. password: '', // 支付密码
  89. partnerNo: '' // 销售商编号
  90. }
  91. },
  92. onLoad(opts) {
  93. console.log(opts)
  94. this.partnerNo = opts.scene
  95. // 查询销售商信息
  96. sellerFindByPartnerNo({officialPartnerNo: this.partnerNo}).then(res => {
  97. if(res.status == 200){
  98. this.store = res.data
  99. }
  100. })
  101. },
  102. methods: {
  103. // 跳转到设置支付密码页
  104. toSetPwd () {
  105. uni.navigateTo({
  106. url:"/pages/userCenter/userInfo/paymentPwd"
  107. })
  108. },
  109. // 确认支付
  110. handlePay() {
  111. if (!this.number) {
  112. uni.showToast({
  113. title: '请输入支付数量',
  114. icon: 'none'
  115. })
  116. } else {
  117. existPayPwd().then(res => {
  118. console.log(res,'rrrrrr')
  119. if(res.status == 200) {
  120. // 设置过支付密码,输入密码
  121. if(res.data) {
  122. this.showPayModal = true
  123. } else {
  124. // 没设置过支付密码,提示设置密码
  125. this.showSetPswModal = true
  126. }
  127. }
  128. })
  129. }
  130. },
  131. // 关闭弹窗
  132. closeModal() {
  133. this.showPayModal = false
  134. this.password = ''
  135. },
  136. // 输入密码完成 支付
  137. confirm(e) {
  138. if(this.password == ''){
  139. uni.showToast({
  140. title: '请输入支付密码',
  141. icon: 'none'
  142. })
  143. return
  144. }
  145. let data = {
  146. "payPassword": this.password,
  147. "changeNum": this.number,
  148. "remarks": this.remarks,
  149. "officialPartnerNo": this.partnerNo
  150. }
  151. sellerReceive(data).then(res => {
  152. console.log(res)
  153. if(res.status == 200){
  154. uni.navigateBack()
  155. uni.showToast({
  156. icon: 'none',
  157. title: res.message
  158. })
  159. }
  160. })
  161. }
  162. },
  163. }
  164. </script>
  165. <style lang="less">
  166. page{
  167. height: 100%;
  168. }
  169. .page-content{
  170. width: 100%;
  171. height: 100%;
  172. background-color: #fff;
  173. .num-cont{
  174. width: 100%;
  175. padding: 30upx;
  176. .num-input{
  177. display: flex;
  178. align-items: center;
  179. justify-content: center;
  180. >u-input {
  181. width: 300upx;
  182. border-bottom: 1px solid #f8f8f8;
  183. }
  184. }
  185. }
  186. .pay-btn{
  187. padding: 0 30upx;
  188. }
  189. }
  190. .slot-content{
  191. padding: 30upx 0;
  192. font-size: 32upx;
  193. display: flex;
  194. flex-direction: column;
  195. align-items: center;
  196. justify-content: space-between;
  197. .text-cont{
  198. width: 100%;
  199. margin-top: 20upx;
  200. border-bottom: 1px solid #F8F8F8;
  201. >view {
  202. padding: 10upx 40upx;
  203. display: flex;
  204. >text{
  205. &:last-child {
  206. flex: 1;
  207. padding-left: 30upx;
  208. }
  209. }
  210. .num-big{
  211. font-size: 36upx;
  212. color: red;
  213. padding-left: 30upx;
  214. }
  215. }
  216. .num-text{
  217. align-items: center;
  218. }
  219. }
  220. .footer{
  221. width: 80%;
  222. border-bottom: 1px solid #b1b1b1;
  223. }
  224. .fot-btn{
  225. margin-top: 30upx;
  226. }
  227. }
  228. </style>