pay.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  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">付�盛世生活工具A</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. <ykscreenRecord></ykscreenRecord>
  28. </view>
  29. </template>
  30. <script>
  31. import {payment} from '@/api/payment'
  32. import { loginByMiniApp} from '@/api/user'
  33. import ykscreenRecord from "@/components/yk-screenRecord/yk-screenRecord.vue"
  34. export default {
  35. components:{
  36. ykscreenRecord
  37. },
  38. data() {
  39. return {
  40. companyUserId:null,
  41. companyId:null,
  42. desc:"",
  43. money:null,
  44. wxPay: true,
  45. }
  46. },
  47. onLoad: function(options) {
  48. // if (options.hasOwnProperty('q') && options.q) {
  49. // // 通过下面这步解码,可以拿到url的值
  50. // const url = decodeURIComponent(options.q)
  51. // this.url=url;
  52. // // // 对url中携带的参数提取处理
  53. // const obj = this.utils.urlToObj(url)
  54. // console.log(obj)
  55. // this.companyId=obj.companyId;
  56. // this.companyUserId=obj.companyUserId;
  57. // }
  58. this.companyId=options.companyId;
  59. this.companyUserId=options.companyUserId;
  60. this.gologin()
  61. },
  62. onShareAppMessage(res) {
  63. return {
  64. title: '盛世生活工具A-收款',
  65. path: `/pages_user/user/pay?companyId=`+this.companyId+"&companyUserId="+this.companyUserId
  66. }
  67. },
  68. methods: {
  69. gologin(){
  70. let provider = 'weixin'
  71. uni.login({
  72. provider: provider,
  73. success: async loginRes => {
  74. console.log(loginRes)
  75. uni.getUserInfo({
  76. provider: provider,
  77. success: (infoRes)=> {
  78. uni.showToast({
  79. title: '处理中...',
  80. icon: 'loading'
  81. });
  82. loginByMiniApp({
  83. code: loginRes.code,
  84. encryptedData:infoRes.encryptedData,
  85. iv:infoRes.iv,
  86. appId:wx.getAccountInfoSync().miniProgram.appId,
  87. }).then(res=>{
  88. uni.hideLoading();
  89. if (res.code == 200) {
  90. } else {
  91. uni.showToast({
  92. title: res.msg,
  93. icon: 'none'
  94. });
  95. }
  96. }).catch(err=>{
  97. uni.hideLoading();
  98. uni.showToast({
  99. icon:'none',
  100. title: "登录失败,请重新登录",
  101. });
  102. });
  103. }
  104. });
  105. }
  106. })
  107. },
  108. testMoney(e){
  109. let that = this;
  110. let price = e.detail.value
  111. if (price.indexOf(".") == 0) {
  112. //'首位小数点情况'
  113. price = price.replace(/[^$#$]/g, "0.");
  114. price = price.replace(/\.{2,}/g, ".");
  115. }
  116. price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
  117. //重新赋值给input
  118. this.$nextTick(() => {
  119. this.money = price;
  120. });
  121. },
  122. pay(){
  123. if(this.money==null){
  124. uni.showToast({
  125. icon:'none',
  126. title: "请输入支付金额"
  127. });
  128. return;
  129. }
  130. this.payment();
  131. // this.utils.isLogin().then(res => {
  132. // if(res){
  133. // uni.navigateTo({
  134. // url: url
  135. // })
  136. // }
  137. // })
  138. // uni.login({
  139. // success: res => {
  140. // console.log(res)
  141. // }
  142. // });
  143. },
  144. payment(){
  145. var data = {payMoney:this.money,remark:this.desc,companyId:this.companyId,companyUserId:this.companyUserId,appId:wx.getAccountInfoSync().miniProgram.appId};
  146. console.log(data)
  147. var that=this;
  148. uni.showLoading();
  149. payment(data).then(
  150. res => {
  151. if(res.code==200){
  152. console.log(res);
  153. uni.requestPayment({
  154. provider: 'wxpay',
  155. timeStamp: res.result.timeStamp,
  156. nonceStr: res.result.nonceStr,
  157. package: res.result.packageValue,
  158. signType: res.result.signType,
  159. paySign: res.result.paySign,
  160. success: function(res) {
  161. uni.hideLoading();
  162. uni.showToast({
  163. icon:'success',
  164. title: "支付成功",
  165. });
  166. uni.navigateTo({
  167. url:'./success'
  168. })
  169. },
  170. fail: function(err) {
  171. console.log('fail:' + JSON.stringify(err));
  172. uni.hideLoading();
  173. }
  174. });
  175. }else{
  176. uni.showToast({
  177. icon:'none',
  178. title: res.msg,
  179. });
  180. }
  181. },
  182. rej => {}
  183. );
  184. }
  185. }
  186. }
  187. </script>
  188. <style lang="scss">
  189. page{
  190. height: 100%;
  191. background-color: #f0eff4;
  192. }
  193. .content{
  194. height: 100%;
  195. display: flex;
  196. flex-direction: column;
  197. .top{
  198. flex:1;
  199. padding: 20rpx;
  200. .inner{
  201. width: 100%;
  202. display: flex;
  203. flex-direction: column;
  204. align-items: flex-start;
  205. justify-content: center;
  206. .pay{
  207. width: 100%;
  208. box-shadow: 1px 1px 5px #e6e6e6;
  209. background: #FFFFFF;
  210. border-radius: 5upx;
  211. display: flex;
  212. flex-direction: column;
  213. align-items: flex-start;
  214. .title{
  215. display: flex;
  216. flex-direction: column;
  217. align-items: flex-start;
  218. width: 100%;
  219. background-color: #f7f7f7;
  220. padding: 30rpx 0rpx;
  221. .name{
  222. padding: 15rpx 30rpx;
  223. font-size: 32rpx;
  224. }
  225. .desc{
  226. color: #989898;
  227. padding: 15rpx 30rpx;
  228. font-size: 25rpx;
  229. }
  230. }
  231. .pay-money
  232. {
  233. padding: 30rpx 0rpx;
  234. width: 100%;
  235. background: #FFFFFF;
  236. border-radius: 5upx;
  237. display: flex;
  238. flex-direction: column;
  239. align-items: flex-start;
  240. .pay-money-title{
  241. padding: 15rpx 30rpx;
  242. font-size: 32rpx;
  243. }
  244. .money{
  245. font-size: 42rpx;
  246. padding: 15rpx 30rpx;
  247. display: flex;
  248. flex-direction: row;
  249. align-items: flex-start;
  250. input{
  251. margin-left: 15rpx;
  252. }
  253. }
  254. .desc{
  255. width: 100%;
  256. padding: 30rpx 30rpx;
  257. border-top: 1rpx solid #e6e6e6;
  258. }
  259. textarea {
  260. height:50rpx;
  261. line-height: 50rpx;
  262. }
  263. }
  264. }
  265. }
  266. .btn-box{
  267. padding: 30rpx 0rpx;
  268. height: 121upx;
  269. display: flex;
  270. align-items: center;
  271. justify-content: center;
  272. .btn{
  273. width: 91.73%;
  274. height: 88upx;
  275. line-height: 88upx;
  276. font-size: 30upx;
  277. font-family: PingFang SC;
  278. font-weight: bold;
  279. color: #FFFFFF;
  280. text-align: center;
  281. background: #FC581C ;
  282. border-radius: 44upx;
  283. }
  284. }
  285. }
  286. .ad{
  287. margin: 0rpx 0rpx 60rpx;
  288. }
  289. }
  290. </style>