pay.vue 6.5 KB

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