pay.vue 6.7 KB

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