pay.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <view class="content">
  3. <view class="top">
  4. <view class="inner">
  5. <view class="pay">
  6. <view class="title">
  7. <text class="name">付款给 芳华佳选</text>
  8. <text class="desc">微信收款</text>
  9. </view>
  10. <view class="pay-money">
  11. <view class="pay-money-title">支付金额</view>
  12. <view class="money">
  13. <text class="fh">¥</text>
  14. <input v-model="money" class="uni-input" @input="testMoney" type="digit" focus />
  15. </view>
  16. <textarea class="desc" placeholder="请填写备注说明" maxlength="20" v-model="desc" />
  17. </view>
  18. </view>
  19. </view>
  20. <view class="btn-box">
  21. <view class="btn" @click="pay()">确认支付</view>
  22. </view>
  23. </view>
  24. <view class="ad">
  25. <ad unit-id="adunit-a018415a6deb69e8"></ad>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import {payment,checkpayment} from '@/api/payment'
  31. export default {
  32. data() {
  33. return {
  34. companyUserId:null,
  35. companyId:null,
  36. desc:"",
  37. money:null,
  38. wxPay: true,
  39. checkTimer: null, // 轮询定时器 ID
  40. maxRetryCount: 10, // 最大轮询次数(可选)
  41. retryCount: 0 // 当前轮询次数(可选)
  42. }
  43. },
  44. onLoad: function(options) {
  45. // if (options.hasOwnProperty('q') && options.q) {
  46. // // 通过下面这步解码,可以拿到url的值
  47. // const url = decodeURIComponent(options.q)
  48. // this.url=url;
  49. // // // 对url中携带的参数提取处理
  50. // const obj = this.utils.urlToObj(url)
  51. // console.log(obj)
  52. // this.companyId=obj.companyId;
  53. // this.companyUserId=obj.companyUserId;
  54. // }
  55. this.companyId=options.companyId;
  56. this.companyUserId=options.companyUserId;
  57. if (this.checkTimer) {
  58. clearInterval(this.checkTimer);
  59. this.checkTimer = null;
  60. }
  61. },
  62. onShareAppMessage(res) {
  63. return {
  64. title: '芳华佳选-收款',
  65. path: `/pages_user/user/pay?companyId=`+this.companyId+"&companyUserId="+this.companyUserId
  66. }
  67. },
  68. methods: {
  69. testMoney(e){
  70. let that = this;
  71. let price = e.detail.value
  72. if (price.indexOf(".") == 0) {
  73. //'首位小数点情况'
  74. price = price.replace(/[^$#$]/g, "0.");
  75. price = price.replace(/\.{2,}/g, ".");
  76. }
  77. price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
  78. //重新赋值给input
  79. this.$nextTick(() => {
  80. this.money = price;
  81. });
  82. },
  83. pay(){
  84. if(this.money==null){
  85. uni.showToast({
  86. icon:'none',
  87. title: "请输入支付金额"
  88. });
  89. return;
  90. }
  91. uni.login({
  92. success: res => {
  93. console.log(res)
  94. this.payment(res.code);
  95. }
  96. });
  97. },
  98. payment(code){
  99. var data = {payMoney:this.money,remark:this.desc,code:code,companyId:this.companyId,companyUserId:this.companyUserId};
  100. var that=this;
  101. uni.showLoading();
  102. payment(data).then(
  103. res => {
  104. if(res.code==200){
  105. console.log(1111,res);
  106. var result=res.result;
  107. wx.navigateToMiniProgram({
  108. appId: 'wx1b63de1096c46cde', // 收银台小程序 AppId 固定值
  109. path: '/pages/pay/pay', // 收银台小程序 固定路径
  110. extraData: {
  111. orderNo: result.orderNo,
  112. orderAmt: result.orderAmt,
  113. platMerCstNo: result.platMerCstNo,
  114. platMerCstName: result.platMerCstName,
  115. businessCstNo: result.businessCstNo,
  116. licenseCode: result.licenseCode,
  117. },
  118. envVersion: 'release', // 开发版 develop,体验版 trial,正式环境传 release
  119. success(res) {
  120. uni.showLoading({
  121. title:"查询支付结果中..."
  122. })
  123. // 启动定时器并保存 ID
  124. that.checkTimer = setInterval(() => {
  125. const data = { payCode: result.payCode };
  126. checkpayment(data).then(res => {
  127. if (res.code == 200) {
  128. console.log(res)
  129. // uni.showLoading({
  130. // title:"查询支付结果中..."
  131. // })
  132. if (res.status == 1) {
  133. // 跳转前清除定时器
  134. clearInterval(that.checkTimer);
  135. uni.redirectTo({
  136. url: './success'
  137. });
  138. }
  139. // else{
  140. // setTimeout(()=>{
  141. // clearInterval(that.checkTimer);
  142. // uni.showToast({
  143. // icon:'none',
  144. // title: "用户未支付",
  145. // });
  146. // },10000)
  147. // }
  148. }
  149. });
  150. }, 4000);
  151. console.log(res)
  152. // 接口调用成功的回调函数
  153. },
  154. fail(res) {
  155. if (that.checkTimer) clearInterval(that.checkTimer);
  156. // 接口调用失败的回调函数
  157. }
  158. })
  159. // uni.requestPayment({
  160. // provider: 'wxpay',
  161. // timeStamp: res.result.timeStamp,
  162. // nonceStr: res.result.nonceStr,
  163. // package: res.result.packageValue,
  164. // signType: res.result.signType,
  165. // paySign: res.result.paySign,
  166. // success: function(res) {
  167. // uni.hideLoading();
  168. // uni.showToast({
  169. // icon:'success',
  170. // title: "支付成功",
  171. // });
  172. // uni.navigateTo({
  173. // url:'./success'
  174. // })
  175. // },
  176. // fail: function(err) {
  177. // console.log('fail:' + JSON.stringify(err));
  178. // uni.hideLoading();
  179. // }
  180. // });
  181. }else{
  182. uni.showToast({
  183. icon:'none',
  184. title: res.msg,
  185. });
  186. }
  187. },
  188. rej => {}
  189. );
  190. }
  191. }
  192. }
  193. </script>
  194. <style lang="scss">
  195. page{
  196. height: 100%;
  197. background-color: #f0eff4;
  198. }
  199. .content{
  200. height: 100%;
  201. display: flex;
  202. flex-direction: column;
  203. .top{
  204. flex:1;
  205. padding: 20rpx;
  206. .inner{
  207. width: 100%;
  208. display: flex;
  209. flex-direction: column;
  210. align-items: flex-start;
  211. justify-content: center;
  212. .pay{
  213. width: 100%;
  214. box-shadow: 1px 1px 5px #e6e6e6;
  215. background: #FFFFFF;
  216. border-radius: 5upx;
  217. display: flex;
  218. flex-direction: column;
  219. align-items: flex-start;
  220. .title{
  221. display: flex;
  222. flex-direction: column;
  223. align-items: flex-start;
  224. width: 100%;
  225. background-color: #f7f7f7;
  226. padding: 30rpx 0rpx;
  227. .name{
  228. padding: 15rpx 30rpx;
  229. font-size: 32rpx;
  230. }
  231. .desc{
  232. color: #989898;
  233. padding: 15rpx 30rpx;
  234. font-size: 25rpx;
  235. }
  236. }
  237. .pay-money
  238. {
  239. padding: 30rpx 0rpx;
  240. width: 100%;
  241. background: #FFFFFF;
  242. border-radius: 5upx;
  243. display: flex;
  244. flex-direction: column;
  245. align-items: flex-start;
  246. .pay-money-title{
  247. padding: 15rpx 30rpx;
  248. font-size: 32rpx;
  249. }
  250. .money{
  251. font-size: 42rpx;
  252. padding: 15rpx 30rpx;
  253. display: flex;
  254. flex-direction: row;
  255. align-items: flex-start;
  256. input{
  257. margin-left: 15rpx;
  258. }
  259. }
  260. .desc{
  261. width: 100%;
  262. padding: 30rpx 30rpx;
  263. border-top: 1rpx solid #e6e6e6;
  264. }
  265. textarea {
  266. height:50rpx;
  267. line-height: 50rpx;
  268. }
  269. }
  270. }
  271. }
  272. .btn-box{
  273. padding: 30rpx 0rpx;
  274. height: 121upx;
  275. display: flex;
  276. align-items: center;
  277. justify-content: center;
  278. .btn{
  279. width: 91.73%;
  280. height: 88upx;
  281. line-height: 88upx;
  282. font-size: 30upx;
  283. font-family: PingFang SC;
  284. font-weight: bold;
  285. color: #FFFFFF;
  286. text-align: center;
  287. background: #2BC7B9;
  288. border-radius: 44upx;
  289. }
  290. }
  291. }
  292. .ad{
  293. margin: 0rpx 0rpx 60rpx;
  294. }
  295. }
  296. </style>