pay.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  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 = { orderId: result.payCode };
  126. checkpayment(data).then(res => {
  127. if (res.code == 200) {
  128. console.log(res)
  129. if (res.status == 3) {
  130. // 跳转前清除定时器
  131. clearInterval(that.checkTimer);
  132. uni.navigateTo({
  133. url: './success'
  134. });
  135. }else{
  136. setTimeout(()=>{
  137. clearInterval(that.checkTimer);
  138. uni.showToast({
  139. icon:'none',
  140. title: "用户未支付",
  141. });
  142. },500)
  143. }
  144. }
  145. });
  146. }, 4000);
  147. console.log(res)
  148. // 接口调用成功的回调函数
  149. },
  150. fail(res) {
  151. if (that.checkTimer) clearInterval(that.checkTimer);
  152. // 接口调用失败的回调函数
  153. }
  154. })
  155. // uni.requestPayment({
  156. // provider: 'wxpay',
  157. // timeStamp: res.result.timeStamp,
  158. // nonceStr: res.result.nonceStr,
  159. // package: res.result.packageValue,
  160. // signType: res.result.signType,
  161. // paySign: res.result.paySign,
  162. // success: function(res) {
  163. // uni.hideLoading();
  164. // uni.showToast({
  165. // icon:'success',
  166. // title: "支付成功",
  167. // });
  168. // uni.navigateTo({
  169. // url:'./success'
  170. // })
  171. // },
  172. // fail: function(err) {
  173. // console.log('fail:' + JSON.stringify(err));
  174. // uni.hideLoading();
  175. // }
  176. // });
  177. }else{
  178. uni.showToast({
  179. icon:'none',
  180. title: res.msg,
  181. });
  182. }
  183. },
  184. rej => {}
  185. );
  186. }
  187. }
  188. }
  189. </script>
  190. <style lang="scss">
  191. page{
  192. height: 100%;
  193. background-color: #f0eff4;
  194. }
  195. .content{
  196. height: 100%;
  197. display: flex;
  198. flex-direction: column;
  199. .top{
  200. flex:1;
  201. padding: 20rpx;
  202. .inner{
  203. width: 100%;
  204. display: flex;
  205. flex-direction: column;
  206. align-items: flex-start;
  207. justify-content: center;
  208. .pay{
  209. width: 100%;
  210. box-shadow: 1px 1px 5px #e6e6e6;
  211. background: #FFFFFF;
  212. border-radius: 5upx;
  213. display: flex;
  214. flex-direction: column;
  215. align-items: flex-start;
  216. .title{
  217. display: flex;
  218. flex-direction: column;
  219. align-items: flex-start;
  220. width: 100%;
  221. background-color: #f7f7f7;
  222. padding: 30rpx 0rpx;
  223. .name{
  224. padding: 15rpx 30rpx;
  225. font-size: 32rpx;
  226. }
  227. .desc{
  228. color: #989898;
  229. padding: 15rpx 30rpx;
  230. font-size: 25rpx;
  231. }
  232. }
  233. .pay-money
  234. {
  235. padding: 30rpx 0rpx;
  236. width: 100%;
  237. background: #FFFFFF;
  238. border-radius: 5upx;
  239. display: flex;
  240. flex-direction: column;
  241. align-items: flex-start;
  242. .pay-money-title{
  243. padding: 15rpx 30rpx;
  244. font-size: 32rpx;
  245. }
  246. .money{
  247. font-size: 42rpx;
  248. padding: 15rpx 30rpx;
  249. display: flex;
  250. flex-direction: row;
  251. align-items: flex-start;
  252. input{
  253. margin-left: 15rpx;
  254. }
  255. }
  256. .desc{
  257. width: 100%;
  258. padding: 30rpx 30rpx;
  259. border-top: 1rpx solid #e6e6e6;
  260. }
  261. textarea {
  262. height:50rpx;
  263. line-height: 50rpx;
  264. }
  265. }
  266. }
  267. }
  268. .btn-box{
  269. padding: 30rpx 0rpx;
  270. height: 121upx;
  271. display: flex;
  272. align-items: center;
  273. justify-content: center;
  274. .btn{
  275. width: 91.73%;
  276. height: 88upx;
  277. line-height: 88upx;
  278. font-size: 30upx;
  279. font-family: PingFang SC;
  280. font-weight: bold;
  281. color: #FFFFFF;
  282. text-align: center;
  283. background: #2BC7B9;
  284. border-radius: 44upx;
  285. }
  286. }
  287. }
  288. .ad{
  289. margin: 0rpx 0rpx 60rpx;
  290. }
  291. }
  292. </style>