123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383 |
- <template>
- <view class="app">
- <view class="price-box">
- <text>支付金额</text>
- <text class="price">{{ money }}</text>
- </view>
- <view class="pay-type-list">
- <view class="type-item b-b" @click="changePayType(1)">
- <text class="icon iconfont iconweixin"></text>
- <view class="con">
- <text class="tit">微信支付</text>
- <text>推荐使用微信支付</text>
- </view>
- <label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 1"></radio></label>
- </view>
-
- <view class="type-item b-b" @click="changePayType(2)">
- <text class="icon iconfont iconzhifubao"></text>
- <view class="con"><text class="tit">支付宝支付</text></view>
- <label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 2"></radio></label>
- </view>
-
- <view class="type-item" @click="changePayType(3)">
- <text class="icon iconfont iconyue"></text>
- <view class="con">
- <text class="tit">余额支付</text>
- <text>可用余额 ¥{{ now_money }}</text>
- </view>
- <label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 3"></radio></label>
- </view>
- </view>
- <text class="mix-btn" :class="{ clickbg: payLoding }" @click="!payLoding ? confirm() : ''">确认支付</text>
- </view>
- </template>
- <script>
- import { balance } from '@/api/wallet.js';
- import { createOrderkey,computedOrderkey,orderPay } from '@/api/order.js';
- import { mapState } from 'vuex';
- import weichatObj from '@/plugin/jweixin-module/index.js';
- export default {
- data() {
- return {
- payType: 1,
-
- payName: 'weixin',
-
-
- payName: 'weixin',
-
- orderInfo: {},
- money: 0.0,
- now_money: 0.0,
- orderKey: '',
- orderId: '',
- payLoding: false,
- type: '',
-
- froms: '',
-
- pinkid: ''
- };
- },
- computed: {
-
- ...mapState(['weichatObj']),
-
- ...mapState('user',['userInfo'])
- },
- onLoad(options) {
- if (options.type == 1) {
- this.type = 1;
- this.orderId = options.ordid;
- this.money = options.money;
- } else {
- this.orderKey = options.key;
- let prepage = this.$api.prePage();
- computedOrderkey({
- orderkey: this.orderKey,
- couponId: prepage.couponChecked.id,
- addressId: prepage.addressData.id,
- useIntegral: prepage.checkedPoints ? 1 : 0
- }).then(({ data }) => {
-
- this.money = data.result.pay_price;
- });
- }
-
- if (options.pinkid) {
- this.pinkid = options.pinkid;
- }
-
- balance({}).then(({ data }) => {
-
- this.now_money = data.now_money;
- });
- },
- methods: {
-
- changePayType(type) {
- this.payType = type;
- if (this.payType == 1) {
- this.payName = 'weixin';
- }
- if (this.payType == 2) {
- this.payName = 'ali';
- }
- if (this.payType == 3) {
- this.payName = 'yue';
- }
- },
-
- orderMoneyPay() {
- let obj = this;
- console.log('支付金额')
- orderPay({
- uni: obj.orderId,
-
- from: obj.froms ? 'weixin' : 'H5',
-
-
- from: 'routine',
-
-
- from: 'app',
-
- paytype: obj.payName
- })
- .then(e => {
- console.log(obj.payName,'支付类型')
- console.log(e,'支付金额')
-
- if (obj.payName == 'yue' && e.data.status == 'SUCCESS') {
- if (e.status == 200) {
- obj.paySuccessTo();
- } else {
- obj.$api.msg(msg);
- }
- }
- if (obj.payName == 'weixin' || obj.payName == 'routine') {
- let da = e.data.result.jsConfig;
- let data = {
-
- timestamp: da.timestamp,
-
-
- timeStamp: da.timestamp,
-
- nonceStr: da.nonceStr,
- package: da.package,
- signType: da.signType,
- paySign: da.paySign,
- success: function(res) {
- obj.paySuccessTo();
- },
- fail: () => {
-
- uni.navigateTo({
- url: '/pages/order/order?state=0'
- });
- }
- };
-
- if(obj.payName == 'weixin'){
- weichatObj.chooseWXPay(data);
- }
-
-
- if(obj.payName == 'weixin' || obj.payName == 'routine' ){
- console.log('开始支付')
- wx.requestPayment(data);
- }
-
- }
- uni.hideLoading();
- obj.payLoding = false;
- })
- .catch(e => {
-
- uni.hideLoading();
- obj.payLoding = false;
- console.log(e);
- });
- },
-
- paySuccessTo() {
- let obj = this
- uni.hideLoading();
- uni.redirectTo({
- url: '/pages/money/paySuccess?orderid=' + this.orderId
- });
-
- },
-
- confirm: async function() {
- let obj = this;
-
- if (obj.payName == 'yue' && +obj.now_money < obj.money) {
- uni.showModal({
- title: '提示',
- content: '账户余额不足!',
- showCancel: false,
- success: res => {},
- fail: () => {},
- complete: () => {}
- });
- return;
- }
- uni.showLoading({
- title: '支付中',
- mask: true
- })
-
-
- obj.payLoding = true;
-
-
- obj.froms = uni.getStorageSync('weichatBrowser') || '';
-
-
- if (obj.type != 1) {
-
- obj.firstCreateOrder();
- } else {
-
- obj.orderMoneyPay();
- }
- },
-
- firstCreateOrder() {
- let obj = this;
-
- let prepage = obj.$api.prePage();
- let data = {
- real_name: prepage.addressData.real_name,
- phone: prepage.addressData.phone,
- couponId: prepage.couponChecked.id,
- addressId: prepage.addressData.id,
- useIntegral: prepage.checkedPoints ? 1 : 0,
- payType: obj.payName,
- mark: prepage.desc,
-
- from: obj.froms ? 'weixin' : 'H5',
-
-
- from: 'routine',
-
-
- from: 'app',
-
- shipping_type: 1
- };
-
- if (obj.pinkid) {
- data.pinkId = obj.pinkid;
- }
-
- createOrderkey(data, obj.orderKey)
- .then(({ data, status, msg }) => {
- console.log('生成订单')
-
- if (data.status == 'ORDER_EXIST') {
- uni.showModal({
- title: '提示',
- content: msg,
- showCancel: false
- });
- uni.hideLoading();
- obj.payLoding = false;
- return;
- }
-
- obj.orderId = data.result.orderId;
-
- if (obj.payName == 'yue') {
- if (status == 200 && data.status == 'SUCCESS') {
- obj.paySuccessTo();
- } else {
- obj.$api.msg(msg);
- }
- } else {
-
- obj.orderMoneyPay();
- }
- })
- .catch(e => {
- uni.hideLoading();
- obj.payLoding = false;
- console.log(e);
- });
- }
- }
- };
- </script>
- <style lang="scss">
- .app {
- width: 100%;
- }
- .price-box {
- background-color: #fff;
- height: 265upx;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 28upx;
- color: #909399;
- .price {
- font-size: 50upx;
- color: #303133;
- margin-top: 12upx;
- &:before {
- content: '¥';
- font-size: 40upx;
- }
- }
- }
- .pay-type-list {
- margin-top: 20upx;
- background-color: #fff;
- padding-left: 60upx;
- .type-item {
- height: 120upx;
- padding: 20upx 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-right: 60upx;
- font-size: 30upx;
- position: relative;
- }
- .icon {
- width: 100upx;
- font-size: 52upx;
- }
- .iconyue {
- color: #fe8e2e;
- }
- .iconweixin {
- color: #36cb59;
- }
- .iconzhifubao {
- color: #01aaef;
- }
- .tit {
- font-size: $font-lg;
- color: $font-color-dark;
- margin-bottom: 4upx;
- }
- .con {
- flex: 1;
- display: flex;
- flex-direction: column;
- font-size: $font-sm;
- color: $font-color-light;
- }
- }
- .mix-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 630upx;
- height: 80upx;
- margin: 80upx auto 30upx;
- font-size: $font-lg;
- color: #fff;
- background-color: $base-color;
- border-radius: 10upx;
- /* box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); */
- }
- .clickbg {
- background-color: $color-gray !important;
- }
- </style>
|