distriBution.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  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-money='item.money' v-for="(item,index) of list" :key='index'>
  11. <view class="flex-center hg100">
  12. <view class="">
  13. <view class="color-ffa ft28">
  14. <text class="ft48"> {{item.money}} </text> 元
  15. </view>
  16. <view class="ft24">
  17. {{item.name}}
  18. </view>
  19. </view>
  20. </view>
  21. <!-- <image v-if="pay_type==1" class="icon-pay-jiao" src="../../static/images/jiao.png" mode=""></image> -->
  22. </view>
  23. <view class='input_box flex-y-center'>
  24. <text class='input_label'>¥</text>
  25. <input v-model="moneys" type="digit" @focus="getpricefocus" @input="getprice"
  26. placeholder="其他充值金额"
  27. maxlength="5"></input>
  28. </view>
  29. </view>
  30. <view class="home-title">
  31. 支付方式
  32. </view>
  33. <view class=" box-pack-between ">
  34. <view @click="bindtype" data-index="1" class="flex-center home-pay ft28 pr">
  35. <image class="icon-pay" src="../../static/images/wx.png" mode=""></image>
  36. <text>微信</text>
  37. <image class="icon-pay-jiao" src="../../static/images/jiao.png" mode=""></image>
  38. </view>
  39. </view>
  40. <view class="recharge_desc" v-if="recharge_desc">
  41. 充值提示:{{recharge_desc}}
  42. </view>
  43. <view class="hg100px"></view>
  44. <view class="login-btn flex-center" @click="pay">
  45. 立即充值
  46. </view>
  47. <view class="login-btn flex-center login-back" @click="getBack">
  48. 返回
  49. </view>
  50. <view class="hg50px"></view>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. // #ifdef H5
  56. import getWXSign from "@/static/js/config.js";
  57. // #endif
  58. export default {
  59. data() {
  60. return {
  61. // banner: [],
  62. list: [{
  63. name: '',
  64. money: 50,
  65. }, {
  66. name: '',
  67. money: 100,
  68. }, {
  69. name: '',
  70. money: 200,
  71. },
  72. {
  73. name: '',
  74. money: 500,
  75. },
  76. {
  77. name: '',
  78. money: 1000,
  79. },
  80. {
  81. name: '',
  82. money: 2000,
  83. },
  84. ],
  85. indexAct: null,
  86. pay_type: 2,
  87. id: null,
  88. is_pay: false,
  89. showBottom: false,
  90. isnav: false,
  91. recharge_desc: "",
  92. money: 0,
  93. moneys: '',
  94. store_user: {},
  95. openid: '',
  96. }
  97. },
  98. onLoad(e) {
  99. this.store_user = uni.getStorageSync("store_user");
  100. // #ifdef H5
  101. this.isweb();
  102. // #endif
  103. // #ifdef MP-WEIXIN
  104. uni.login({
  105. success: (res) => {
  106. console.log(res)
  107. // return
  108. if (res.code) {
  109. //发起网络请求
  110. this.request({
  111. url: 'Smdcshop/xcx_openid',
  112. data: {
  113. code: res.code,
  114. super_id: this.store_user.super_id,
  115. type: 1,
  116. },
  117. }).then(res => {
  118. if (res.code == '200') {
  119. this.openid = res.data.openid;
  120. }
  121. })
  122. } else {
  123. console.log('登录失败!' + res.errMsg)
  124. }
  125. }
  126. })
  127. // #endif
  128. },
  129. onShareAppMessage(e) {
  130. },
  131. methods: {
  132. getBack(e){
  133. uni.navigateTo({
  134. url:"../my/my"
  135. })
  136. },
  137. gzhurl(e) {
  138. this.request({
  139. url: "user/gzhurl",
  140. data: {
  141. type: 4,
  142. },
  143. }).then(res => {
  144. if (res.data.url) {
  145. window.location.href = res.data.url
  146. }
  147. }).catch((res) => {
  148. console.log("message", res)
  149. });
  150. },
  151. isweb() {
  152. function GetRequest() {
  153. var url = location.search; //获取url中"?"符后的字串
  154. var theRequest = new Object();
  155. if (url.indexOf("?") != -1) {
  156. //判断是否有参数
  157. var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
  158. var strs = str.split("&");
  159. console.log(strs)
  160. for (var i = 0; i < strs.length; i++) {
  161. theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  162. }
  163. }
  164. console.log(theRequest)
  165. return theRequest;
  166. }
  167. if (GetRequest().code) {
  168. this.request({
  169. url: "Smdcshop/xcx_openid",
  170. data: {
  171. code: GetRequest().code,
  172. super_id: this.store_user.super_id,
  173. type: 2,
  174. },
  175. }).then(res => {
  176. console.log(res, "user/gzhurl");
  177. if (res.code == 200) {
  178. this.openid = res.data.openid;
  179. }
  180. }).catch((res) => {
  181. console.log("message", res)
  182. });
  183. } else {
  184. this.gzhurl()
  185. }
  186. },
  187. getpricefocus(e) {
  188. this.paytype = -1;
  189. this.money = this.money;
  190. },
  191. getprice(e) {
  192. this.money = e.detail.value;
  193. this.indexAct = null;
  194. },
  195. choise(e) {
  196. this.moneys = '';
  197. this.money = e.currentTarget.dataset.money;
  198. this.indexAct = e.currentTarget.dataset.index;
  199. },
  200. pay(e) {
  201. var pay_type = 1;
  202. // #ifdef H5
  203. let ua = window.navigator.userAgent.toLowerCase();
  204. if (ua.match(/MicroMessenger/i) == 'micromessenger') {
  205. var pay_type = 2;
  206. }
  207. // #endif
  208. this.request({
  209. url: "Smdcshop/jhwechatcz",
  210. data: {
  211. admin_id: uni.getStorageSync("admin_id"),
  212. money: this.money,
  213. openid: this.openid,
  214. type: pay_type,
  215. },
  216. }).then(res => {
  217. console.log(res, "res")
  218. if (res.code === '200') {
  219. let autoinfo = res.data;
  220. // #ifdef H5
  221. getWXSign().then(res => {
  222. console.log('wx_getLocation');
  223. this.$wx.chooseWXPay({
  224. 'appId': autoinfo.appid,
  225. 'timestamp': autoinfo.timeStamp + "",
  226. 'nonceStr': autoinfo.nonceStr + "",
  227. 'package': autoinfo.package,
  228. 'signType': autoinfo.signType,
  229. 'paySign':autoinfo.paySign,
  230. success: (t) => {
  231. if (t.errMsg == 'chooseWXPay:ok') {
  232. uni.showModal({
  233. title: '提示',
  234. showCancel: false,
  235. content: "支付成功",
  236. success: (e) => {
  237. if (e.confirm) {
  238. uni.navigateTo({
  239. url: "./rechargeRecord"
  240. })
  241. }
  242. }
  243. });
  244. }
  245. },
  246. // 支付取消回调函数
  247. cencel: function(res) {
  248. // Toast('用户取消支付~')
  249. uni.showToast({
  250. title: "用户取消支付",
  251. icon: "none",
  252. })
  253. },
  254. // 支付失败回调函数
  255. fail: function(res) {
  256. uni.showToast({
  257. title: "支付失败",
  258. icon: "none",
  259. })
  260. // Toast('支付失败~')
  261. }
  262. })
  263. })
  264. // #endif
  265. // #ifdef MP-WEIXIN
  266. uni.requestPayment({
  267. provider: "wxpay",
  268. timeStamp: autoinfo.timeStamp + "",
  269. nonceStr: autoinfo.nonceStr,
  270. package: autoinfo.package,
  271. signType: autoinfo.signType,
  272. paySign: autoinfo.paySign,
  273. //微信、支付宝订单数据
  274. success: (res) => {
  275. console.log('success:', res);
  276. uni.showModal({
  277. title: "提示",
  278. content: "支付成功",
  279. showCancel: false,
  280. success: (res) => {
  281. uni.navigateTo({
  282. url: "./rechargeRecord"
  283. })
  284. }
  285. })
  286. },
  287. fail: (err) => {
  288. console.log(err, "err")
  289. uni.showModal({
  290. title: "提示",
  291. content: "支付失败",
  292. showCancel: false,
  293. success: (res) => {
  294. return
  295. }
  296. })
  297. }
  298. });
  299. // #endif
  300. }
  301. }).catch(res => {
  302. if (res.code == "4004") {
  303. uni.showModal({
  304. title: "提示",
  305. content: "请先进行账号绑定",
  306. confirmText: "去绑定",
  307. showCancel: false,
  308. success: (res) => {
  309. if (res.confirm) {
  310. uni.navigateTo({
  311. url: "../personal/weixin",
  312. })
  313. }
  314. }
  315. })
  316. } else {
  317. uni.showToast({
  318. title: res.message,
  319. icon: "none",
  320. })
  321. }
  322. });
  323. }
  324. }
  325. }
  326. </script>
  327. <style lang="scss">
  328. .home {
  329. width: 690rpx;
  330. margin: 0 auto;
  331. }
  332. .input_box {
  333. display: flex;
  334. padding: 20rpx;
  335. border-bottom: 1px solid #efefef;
  336. flex: 1;
  337. font-size: 40rpx;
  338. }
  339. .home-title {
  340. font-size: 28rpx;
  341. font-weight: 500;
  342. color: rgba(51, 51, 51, 1);
  343. opacity: 1;
  344. padding: 31rpx 0;
  345. }
  346. .home-item {
  347. width: 48%;
  348. background: rgba(255, 255, 255, 1);
  349. box-shadow: 0px 0px 10rpx rgba(168, 168, 168, 0.16);
  350. opacity: 1;
  351. border-radius: 4rpx;
  352. text-align: center;
  353. display: inline-block;
  354. margin: 0 0rpx 30rpx 0;
  355. color: #3387ff;
  356. padding: 16rpx;
  357. border-radius: 8rpx;
  358. }
  359. .home-content .home-item:nth-child(3n) {
  360. margin-right: 0rpx;
  361. }
  362. .home-content .home-item-active {
  363. background: #3387ff;
  364. color: #FFFFFF;
  365. }
  366. .home-content .home-item-active .color-ffa {
  367. color: #FFFFFF;
  368. }
  369. .ft48 {
  370. font-weight: bold;
  371. }
  372. .home-pay {
  373. width: 330rpx;
  374. height: 90rpx;
  375. background: rgba(255, 255, 255, 1);
  376. box-shadow: 0px 0px 10rpx rgba(168, 168, 168, 0.16);
  377. border-radius: 4rpx;
  378. position: relative;
  379. }
  380. .icon-pay {
  381. width: 48rpx;
  382. height: 48rpx;
  383. margin-right: 20rpx;
  384. }
  385. .icon-pay-jiao {
  386. position: absolute;
  387. bottom: 0;
  388. right: 0;
  389. width: 38rpx;
  390. height: 38rpx;
  391. }
  392. .login-btn {
  393. width: 630rpx;
  394. height: 90rpx;
  395. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  396. // box-shadow: 0px 2rpx 12rpx rgba(252, 219, 178, 1);
  397. opacity: 1;
  398. border-radius: 45rpx;
  399. margin: 0 auto;
  400. color: #FFFFFF;
  401. font-size: 30rpx;
  402. font-family: Source Han Sans CN;
  403. font-weight: 500;
  404. opacity: 1;
  405. }
  406. .login-btns {
  407. width: 630rpx;
  408. height: 90rpx;
  409. background: #ccc;
  410. box-shadow: 0px 2rpx 12rpx #FFFFFF;
  411. opacity: 1;
  412. border-radius: 45rpx;
  413. margin: 0 auto;
  414. color: #fff;
  415. font-size: 30rpx;
  416. font-family: Source Han Sans CN;
  417. font-weight: 500;
  418. opacity: 1;
  419. margin-top: 30rpx;
  420. }
  421. .hg100px {
  422. height: 100rpx;
  423. }
  424. .recharge_desc {
  425. padding: 20rpx 0;
  426. font-size: 24rpx;
  427. color: #999;
  428. }
  429. .login-back{
  430. margin-top: 40rpx;
  431. }
  432. </style>