checkOut.vue 5.0 KB

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