recharge.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <template>
  2. <view class="content">
  3. <!-- <swiper-bar :banner="banner"></swiper-bar> -->
  4. <view class="home">
  5. <view class="home-title">
  6. 充值金额
  7. </view>
  8. <view class="home-content box-pack-between wrap">
  9. <view class="home-item" @click="choise" :class="index==indexAct?'home-item-active':''"
  10. :data-index='index' :data-id='item.id' :data-name='item.name'
  11. v-for="(item,index) of list" :key='index'>
  12. <view class="flex-center hg100">
  13. <view class="">
  14. <view class="color-ffa ft28">
  15. <text class="ft48"> {{item.money}} </text> 元
  16. </view>
  17. <view class="ft24">
  18. {{item.name}}
  19. </view>
  20. </view>
  21. </view>
  22. <!-- <image v-if="pay_type==1" class="icon-pay-jiao" src="../../static/images/jiao.png" mode=""></image> -->
  23. </view>
  24. </view>
  25. <view class="home-title">
  26. 支付方式
  27. </view>
  28. <view class=" box-pack-between ">
  29. <view @click="bindtype" data-index="1" class="flex-center home-pay ft28 pr">
  30. <image class="icon-pay" src="../../static/images/wx.png" mode=""></image>
  31. <text>微信</text>
  32. <image class="icon-pay-jiao" src="../../static/images/jiao.png" mode=""></image>
  33. </view>
  34. </view>
  35. <view class="recharge_desc" v-if="recharge_desc">
  36. 充值提示:{{recharge_desc}}
  37. </view>
  38. <view class="hg100px"></view>
  39. <view class="login-btn flex-center" @click="pay">
  40. 立即充值
  41. </view>
  42. <view class="hg50px"></view>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. // #ifdef H5
  48. import getWXSign from "@/static/js/config.js";
  49. // #endif
  50. export default {
  51. data() {
  52. return {
  53. // banner: [],
  54. list: [],
  55. indexAct: null,
  56. pay_type: 2,
  57. id: null,
  58. is_pay: false,
  59. showBottom: false,
  60. isnav: false,recharge_desc:"",name:'',
  61. }
  62. },
  63. onLoad(e) {
  64. this.request({
  65. url: "recharge/lists",
  66. data: {
  67. token: uni.getStorageSync("token"),
  68. },
  69. }).then(res => {
  70. console.log(res, "res")
  71. if (res.code === '200') {
  72. this.recharge_desc=res.recharge_desc;
  73. this.list = res.data;
  74. }
  75. });
  76. },
  77. onShareAppMessage(e) {
  78. },
  79. methods: {
  80. choise(e) {
  81. this.id = e.currentTarget.dataset.id;
  82. this.indexAct = e.currentTarget.dataset.index;
  83. this.name= e.currentTarget.dataset.name;
  84. },
  85. pay(e) {
  86. var pay_type = 13;
  87. // #ifdef H5
  88. let ua = window.navigator.userAgent.toLowerCase();
  89. if (ua.match(/MicroMessenger/i) == 'micromessenger') {
  90. var pay_type = 12;
  91. }
  92. // #endif
  93. this.request({
  94. url: "recharge/create",
  95. data: {
  96. token: uni.getStorageSync("token"),
  97. package_id: this.id,
  98. pay_type,
  99. name:this.name,
  100. },
  101. }).then(res => {
  102. console.log(res, "res")
  103. if (res.code === '200') {
  104. let autoinfo = res.data;
  105. // #ifdef H5
  106. getWXSign().then(res => {
  107. console.log('wx_getLocation');
  108. this.$wx.chooseWXPay({
  109. 'appId': autoinfo.appid,
  110. 'timestamp': autoinfo.time + "",
  111. 'nonceStr': autoinfo.nonce_str + "",
  112. 'package': 'prepay_id=' + autoinfo.prepay_id,
  113. 'signType': 'MD5',
  114. 'paySign': autoinfo.sign1,
  115. success: (t) => {
  116. if (t.errMsg == 'chooseWXPay:ok') {
  117. uni.showModal({
  118. title: '提示',
  119. showCancel: false,
  120. content: "支付成功",
  121. success: (e) => {
  122. if (e.confirm) {
  123. // this.payorder();
  124. uni.navigateTo({
  125. url:"./recharge_log"
  126. })
  127. }
  128. }
  129. });
  130. }
  131. },
  132. // 支付取消回调函数
  133. cencel: function(res) {
  134. // Toast('用户取消支付~')
  135. uni.showToast({
  136. title: "用户取消支付",
  137. icon: "none",
  138. })
  139. },
  140. // 支付失败回调函数
  141. fail: function(res) {
  142. uni.showToast({
  143. title: "支付失败",
  144. icon: "none",
  145. })
  146. // Toast('支付失败~')
  147. }
  148. })
  149. })
  150. // #endif
  151. // #ifdef MP-WEIXIN
  152. uni.requestPayment({
  153. provider: "wxpay",
  154. timeStamp: autoinfo.time + "",
  155. nonceStr: autoinfo.nonce_str,
  156. package: "prepay_id=" + autoinfo.prepay_id,
  157. signType: "MD5",
  158. paySign: autoinfo.sign1,
  159. //微信、支付宝订单数据
  160. success: (res) => {
  161. console.log('success:', res);
  162. uni.showModal({
  163. title: "提示",
  164. content: "支付成功",
  165. showCancel: false,
  166. success: (res) => {
  167. uni.navigateTo({
  168. url:"./recharge_log"
  169. })
  170. }
  171. })
  172. },
  173. fail: (err) => {
  174. console.log(err, "err")
  175. uni.showModal({
  176. title: "提示",
  177. content: "支付失败",
  178. showCancel: false,
  179. success: (res) => {
  180. return
  181. }
  182. })
  183. }
  184. });
  185. // #endif
  186. }
  187. }).catch(res=>{
  188. if (res.code == "4004") {
  189. uni.showModal({
  190. title: "提示",
  191. content: "请先进行账号绑定",
  192. confirmText: "去绑定",
  193. showCancel: false,
  194. success: (res) => {
  195. if (res.confirm) {
  196. uni.navigateTo({
  197. url: "../personal/weixin",
  198. })
  199. }
  200. }
  201. })
  202. }else{
  203. uni.showToast({
  204. title:res.message,
  205. icon: "none",
  206. })
  207. }
  208. });
  209. }
  210. }
  211. }
  212. </script>
  213. <style lang="scss">
  214. .home {
  215. width: 690rpx;
  216. margin: 0 auto;
  217. }
  218. .home-title {
  219. font-size: 28rpx;
  220. font-weight: 500;
  221. color: rgba(51, 51, 51, 1);
  222. opacity: 1;
  223. padding: 31rpx 0;
  224. }
  225. .home-item {
  226. width: 48%;
  227. background: rgba(255, 255, 255, 1);
  228. box-shadow: 0px 0px 10rpx rgba(168, 168, 168, 0.16);
  229. opacity: 1;
  230. border-radius: 4rpx;
  231. text-align: center;
  232. display: inline-block;
  233. margin: 0 0rpx 30rpx 0;
  234. color: #3387ff;
  235. padding: 16rpx;
  236. border-radius: 8rpx;
  237. }
  238. .home-content .home-item:nth-child(3n) {
  239. margin-right: 0rpx;
  240. }
  241. .home-content .home-item-active {
  242. background: #3387ff;
  243. color: #FFFFFF;
  244. }
  245. .home-content .home-item-active .color-ffa {
  246. color: #FFFFFF;
  247. }
  248. .ft48 {
  249. font-weight: bold;
  250. }
  251. .home-pay {
  252. width: 330rpx;
  253. height: 90rpx;
  254. background: rgba(255, 255, 255, 1);
  255. box-shadow: 0px 0px 10rpx rgba(168, 168, 168, 0.16);
  256. border-radius: 4rpx;
  257. position: relative;
  258. }
  259. .icon-pay {
  260. width: 48rpx;
  261. height: 48rpx;
  262. margin-right: 20rpx;
  263. }
  264. .icon-pay-jiao {
  265. position: absolute;
  266. bottom: 0;
  267. right: 0;
  268. width: 38rpx;
  269. height: 38rpx;
  270. }
  271. .login-btn {
  272. width: 630rpx;
  273. height: 90rpx;
  274. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  275. // box-shadow: 0px 2rpx 12rpx rgba(252, 219, 178, 1);
  276. opacity: 1;
  277. border-radius: 45rpx;
  278. margin: 0 auto;
  279. color: #FFFFFF;
  280. font-size: 30rpx;
  281. font-family: Source Han Sans CN;
  282. font-weight: 500;
  283. opacity: 1;
  284. }
  285. .login-btns {
  286. width: 630rpx;
  287. height: 90rpx;
  288. background: #ccc;
  289. box-shadow: 0px 2rpx 12rpx #FFFFFF;
  290. opacity: 1;
  291. border-radius: 45rpx;
  292. margin: 0 auto;
  293. color: #fff;
  294. font-size: 30rpx;
  295. font-family: Source Han Sans CN;
  296. font-weight: 500;
  297. opacity: 1;
  298. margin-top: 30rpx;
  299. }
  300. .hg100px {
  301. height: 100rpx;
  302. }
  303. .recharge_desc{
  304. padding: 20rpx 0;
  305. font-size:24rpx;
  306. color: #999;
  307. }
  308. </style>