123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341 |
- <template>
- <view class="content">
- <!-- <swiper-bar :banner="banner"></swiper-bar> -->
- <view class="home">
- <view class="home-title">
- 充值金额
- </view>
- <view class="home-content box-pack-between wrap">
- <view class="home-item" @click="choise" :class="index==indexAct?'home-item-active':''"
- :data-index='index' :data-id='item.id' :data-name='item.name'
- v-for="(item,index) of list" :key='index'>
- <view class="flex-center hg100">
- <view class="">
- <view class="color-ffa ft28">
- <text class="ft48"> {{item.money}} </text> 元
- </view>
- <view class="ft24">
- {{item.name}}
- </view>
- </view>
- </view>
- <!-- <image v-if="pay_type==1" class="icon-pay-jiao" src="../../static/images/jiao.png" mode=""></image> -->
- </view>
- </view>
- <view class="home-title">
- 支付方式
- </view>
- <view class=" box-pack-between ">
- <view @click="bindtype" data-index="1" class="flex-center home-pay ft28 pr">
- <image class="icon-pay" src="../../static/images/wx.png" mode=""></image>
- <text>微信</text>
- <image class="icon-pay-jiao" src="../../static/images/jiao.png" mode=""></image>
- </view>
- </view>
- <view class="recharge_desc" v-if="recharge_desc">
- 充值提示:{{recharge_desc}}
- </view>
- <view class="hg100px"></view>
- <view class="login-btn flex-center" @click="pay">
- 立即充值
- </view>
- <view class="hg50px"></view>
- </view>
- </view>
- </template>
- <script>
- // #ifdef H5
- import getWXSign from "@/static/js/config.js";
- // #endif
- export default {
- data() {
- return {
- // banner: [],
- list: [],
- indexAct: null,
- pay_type: 2,
- id: null,
- is_pay: false,
- showBottom: false,
- isnav: false,recharge_desc:"",name:'',
- }
- },
- onLoad(e) {
- this.request({
- url: "recharge/lists",
- data: {
- token: uni.getStorageSync("token"),
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- this.recharge_desc=res.recharge_desc;
- this.list = res.data;
- }
- });
- },
- onShareAppMessage(e) {
- },
- methods: {
- choise(e) {
- this.id = e.currentTarget.dataset.id;
- this.indexAct = e.currentTarget.dataset.index;
- this.name= e.currentTarget.dataset.name;
- },
- pay(e) {
- var pay_type = 13;
- // #ifdef H5
- let ua = window.navigator.userAgent.toLowerCase();
- if (ua.match(/MicroMessenger/i) == 'micromessenger') {
- var pay_type = 12;
- }
- // #endif
- this.request({
- url: "recharge/create",
- data: {
-
- token: uni.getStorageSync("token"),
- package_id: this.id,
- pay_type,
- name:this.name,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- let autoinfo = res.data;
- // #ifdef H5
- getWXSign().then(res => {
- console.log('wx_getLocation');
- this.$wx.chooseWXPay({
- 'appId': autoinfo.appid,
- 'timestamp': autoinfo.time + "",
- 'nonceStr': autoinfo.nonce_str + "",
- 'package': 'prepay_id=' + autoinfo.prepay_id,
- 'signType': 'MD5',
- 'paySign': autoinfo.sign1,
- success: (t) => {
- if (t.errMsg == 'chooseWXPay:ok') {
- uni.showModal({
- title: '提示',
- showCancel: false,
- content: "支付成功",
- success: (e) => {
- if (e.confirm) {
- // this.payorder();
- uni.navigateTo({
- url:"./recharge_log"
- })
- }
- }
- });
- }
- },
- // 支付取消回调函数
- cencel: function(res) {
- // Toast('用户取消支付~')
- uni.showToast({
- title: "用户取消支付",
- icon: "none",
- })
- },
- // 支付失败回调函数
- fail: function(res) {
- uni.showToast({
- title: "支付失败",
- icon: "none",
- })
- // Toast('支付失败~')
- }
- })
- })
- // #endif
- // #ifdef MP-WEIXIN
- uni.requestPayment({
- provider: "wxpay",
- timeStamp: autoinfo.time + "",
- nonceStr: autoinfo.nonce_str,
- package: "prepay_id=" + autoinfo.prepay_id,
- signType: "MD5",
- paySign: autoinfo.sign1,
- //微信、支付宝订单数据
- success: (res) => {
- console.log('success:', res);
- uni.showModal({
- title: "提示",
- content: "支付成功",
- showCancel: false,
- success: (res) => {
- uni.navigateTo({
- url:"./recharge_log"
- })
- }
- })
- },
- fail: (err) => {
- console.log(err, "err")
- uni.showModal({
- title: "提示",
- content: "支付失败",
- showCancel: false,
- success: (res) => {
- return
- }
- })
- }
- });
- // #endif
- }
- }).catch(res=>{
- if (res.code == "4004") {
- uni.showModal({
- title: "提示",
- content: "请先进行账号绑定",
- confirmText: "去绑定",
- showCancel: false,
- success: (res) => {
- if (res.confirm) {
- uni.navigateTo({
- url: "../personal/weixin",
- })
- }
- }
- })
- }else{
- uni.showToast({
- title:res.message,
- icon: "none",
- })
- }
- });
- }
- }
- }
- </script>
- <style lang="scss">
- .home {
- width: 690rpx;
- margin: 0 auto;
- }
- .home-title {
- font-size: 28rpx;
- font-weight: 500;
- color: rgba(51, 51, 51, 1);
- opacity: 1;
- padding: 31rpx 0;
- }
- .home-item {
- width: 48%;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 0px 10rpx rgba(168, 168, 168, 0.16);
- opacity: 1;
- border-radius: 4rpx;
- text-align: center;
- display: inline-block;
- margin: 0 0rpx 30rpx 0;
- color: #3387ff;
- padding: 16rpx;
- border-radius: 8rpx;
- }
- .home-content .home-item:nth-child(3n) {
- margin-right: 0rpx;
- }
- .home-content .home-item-active {
- background: #3387ff;
- color: #FFFFFF;
- }
- .home-content .home-item-active .color-ffa {
- color: #FFFFFF;
- }
- .ft48 {
- font-weight: bold;
- }
- .home-pay {
- width: 330rpx;
- height: 90rpx;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 0px 10rpx rgba(168, 168, 168, 0.16);
- border-radius: 4rpx;
- position: relative;
- }
- .icon-pay {
- width: 48rpx;
- height: 48rpx;
- margin-right: 20rpx;
- }
- .icon-pay-jiao {
- position: absolute;
- bottom: 0;
- right: 0;
- width: 38rpx;
- height: 38rpx;
- }
- .login-btn {
- width: 630rpx;
- height: 90rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- // box-shadow: 0px 2rpx 12rpx rgba(252, 219, 178, 1);
- opacity: 1;
- border-radius: 45rpx;
- margin: 0 auto;
- color: #FFFFFF;
- font-size: 30rpx;
- font-family: Source Han Sans CN;
- font-weight: 500;
- opacity: 1;
- }
- .login-btns {
- width: 630rpx;
- height: 90rpx;
- background: #ccc;
- box-shadow: 0px 2rpx 12rpx #FFFFFF;
- opacity: 1;
- border-radius: 45rpx;
- margin: 0 auto;
- color: #fff;
- font-size: 30rpx;
- font-family: Source Han Sans CN;
- font-weight: 500;
- opacity: 1;
- margin-top: 30rpx;
- }
- .hg100px {
- height: 100rpx;
- }
- .recharge_desc{
- padding: 20rpx 0;
- font-size:24rpx;
- color: #999;
- }
- </style>
|