checkOut.vue 6.0 KB

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