pay.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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} 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. }
  40. },
  41. onLoad: function(options) {
  42. // if (options.hasOwnProperty('q') && options.q) {
  43. // // 通过下面这步解码,可以拿到url的值
  44. // const url = decodeURIComponent(options.q)
  45. // this.url=url;
  46. // // // 对url中携带的参数提取处理
  47. // const obj = this.utils.urlToObj(url)
  48. // console.log(obj)
  49. // this.companyId=obj.companyId;
  50. // this.companyUserId=obj.companyUserId;
  51. // }
  52. this.companyId=options.companyId;
  53. this.companyUserId=options.companyUserId;
  54. },
  55. onShareAppMessage(res) {
  56. return {
  57. title: '御君方-收款',
  58. path: `/pages_user/user/pay?companyId=`+this.companyId+"&companyUserId="+this.companyUserId
  59. }
  60. },
  61. methods: {
  62. testMoney(e){
  63. let that = this;
  64. let price = e.detail.value
  65. if (price.indexOf(".") == 0) {
  66. //'首位小数点情况'
  67. price = price.replace(/[^$#$]/g, "0.");
  68. price = price.replace(/\.{2,}/g, ".");
  69. }
  70. price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
  71. //重新赋值给input
  72. this.$nextTick(() => {
  73. this.money = price;
  74. });
  75. },
  76. pay(){
  77. if(this.money==null){
  78. uni.showToast({
  79. icon:'none',
  80. title: "请输入支付金额"
  81. });
  82. return;
  83. }
  84. uni.login({
  85. success: res => {
  86. console.log(res)
  87. this.payment(res.code);
  88. }
  89. });
  90. },
  91. payment(code){
  92. var data = {payMoney:this.money,remark:this.desc,code:code,companyId:this.companyId,companyUserId:this.companyUserId};
  93. var that=this;
  94. uni.showLoading();
  95. payment(data).then(
  96. res => {
  97. if(res.code==200){
  98. console.log(res);
  99. var result=res.result;
  100. wx.navigateToMiniProgram({
  101. appId: 'wx1b63de1096c46cde', // 收银台小程序 AppId 固定值
  102. path: '/pages/pay/pay', // 收银台小程序 固定路径
  103. extraData: {
  104. orderNo: result.orderNo,
  105. orderAmt: result.orderAmt,
  106. platMerCstNo: result.platMerCstNo,
  107. platMerCstName: result.platMerCstName,
  108. businessCstNo: result.businessCstNo,
  109. licenseCode: result.licenseCode,
  110. },
  111. envVersion: 'release', // 开发版 develop,体验版 trial,正式环境传 release
  112. success(res) {
  113. uni.showLoading({
  114. title:"查询支付结果中..."
  115. })
  116. console.log(res)
  117. // 接口调用成功的回调函数
  118. },
  119. fail(res) {
  120. // 接口调用失败的回调函数
  121. }
  122. })
  123. // uni.requestPayment({
  124. // provider: 'wxpay',
  125. // timeStamp: res.result.timeStamp,
  126. // nonceStr: res.result.nonceStr,
  127. // package: res.result.packageValue,
  128. // signType: res.result.signType,
  129. // paySign: res.result.paySign,
  130. // success: function(res) {
  131. // uni.hideLoading();
  132. // uni.showToast({
  133. // icon:'success',
  134. // title: "支付成功",
  135. // });
  136. // uni.navigateTo({
  137. // url:'./success'
  138. // })
  139. // },
  140. // fail: function(err) {
  141. // console.log('fail:' + JSON.stringify(err));
  142. // uni.hideLoading();
  143. // }
  144. // });
  145. }else{
  146. uni.showToast({
  147. icon:'none',
  148. title: res.msg,
  149. });
  150. }
  151. },
  152. rej => {}
  153. );
  154. }
  155. }
  156. }
  157. </script>
  158. <style lang="scss">
  159. page{
  160. height: 100%;
  161. background-color: #f0eff4;
  162. }
  163. .content{
  164. height: 100%;
  165. display: flex;
  166. flex-direction: column;
  167. .top{
  168. flex:1;
  169. padding: 20rpx;
  170. .inner{
  171. width: 100%;
  172. display: flex;
  173. flex-direction: column;
  174. align-items: flex-start;
  175. justify-content: center;
  176. .pay{
  177. width: 100%;
  178. box-shadow: 1px 1px 5px #e6e6e6;
  179. background: #FFFFFF;
  180. border-radius: 5upx;
  181. display: flex;
  182. flex-direction: column;
  183. align-items: flex-start;
  184. .title{
  185. display: flex;
  186. flex-direction: column;
  187. align-items: flex-start;
  188. width: 100%;
  189. background-color: #f7f7f7;
  190. padding: 30rpx 0rpx;
  191. .name{
  192. padding: 15rpx 30rpx;
  193. font-size: 32rpx;
  194. }
  195. .desc{
  196. color: #989898;
  197. padding: 15rpx 30rpx;
  198. font-size: 25rpx;
  199. }
  200. }
  201. .pay-money
  202. {
  203. padding: 30rpx 0rpx;
  204. width: 100%;
  205. background: #FFFFFF;
  206. border-radius: 5upx;
  207. display: flex;
  208. flex-direction: column;
  209. align-items: flex-start;
  210. .pay-money-title{
  211. padding: 15rpx 30rpx;
  212. font-size: 32rpx;
  213. }
  214. .money{
  215. font-size: 42rpx;
  216. padding: 15rpx 30rpx;
  217. display: flex;
  218. flex-direction: row;
  219. align-items: flex-start;
  220. input{
  221. margin-left: 15rpx;
  222. }
  223. }
  224. .desc{
  225. width: 100%;
  226. padding: 30rpx 30rpx;
  227. border-top: 1rpx solid #e6e6e6;
  228. }
  229. textarea {
  230. height:50rpx;
  231. line-height: 50rpx;
  232. }
  233. }
  234. }
  235. }
  236. .btn-box{
  237. padding: 30rpx 0rpx;
  238. height: 121upx;
  239. display: flex;
  240. align-items: center;
  241. justify-content: center;
  242. .btn{
  243. width: 91.73%;
  244. height: 88upx;
  245. line-height: 88upx;
  246. font-size: 30upx;
  247. font-family: PingFang SC;
  248. font-weight: bold;
  249. color: #FFFFFF;
  250. text-align: center;
  251. background: #2BC7B9;
  252. border-radius: 44upx;
  253. }
  254. }
  255. }
  256. .ad{
  257. margin: 0rpx 0rpx 60rpx;
  258. }
  259. }
  260. </style>