<template>
|
<view>
|
<u-toast ref="uToast" />
|
<view v-for="item in payments" :key="item.code" @click="toPayHandler(item.code)" v-if="!(type == $globalConstVars.paymentType.recharge && item.code == 'balancepay')">
|
<view class="u-reset-button coreshop-list menu-avatar padding-xl radius shadow shadow-lg bg-blue margin-top">
|
<view class="coreshop-list-item">
|
<view class="coreshop-avatar radius">
|
<u--image width="34px" height="34px" :src="item.icon" :lazy-load="false" :fade="false" duration="0"></u--image>
|
</view>
|
<view class="content">
|
<view class="coreshop-text-grey">{{ item.name }}</view>
|
<view class="coreshop-text-gray coreshop-font-sm flex coreshop-text-left">
|
<view class="u-line-1 coreshop-text-red" v-if="item.code == 'balancepay'">
|
当前余额：{{userInfo.balance}}元
|
</view>
|
<view class="u-line-1" v-else>
|
{{item.memo}}
|
</view>
|
</view>
|
</view>
|
<view class="action">
|
<u-tag text="选择此支付方式" mode="dark" type="error" shape="circle" />
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="payment-pop" v-show="popShow">
|
<view class="payment-pop-c">
|
<image src="/static/images/payments/wait-pay.png" style="width: 30px;height: 30px;"></image>
|
<view class="text">支付中，请稍后...</view>
|
</view>
|
<view class="payment-pop-b">
|
<button class="coreshop-btn coreshop-btn-c" @click="popHide">支付失败</button>
|
<button class="coreshop-btn coreshop-btn-o" @click="popHide">支付成功</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex';
|
export default {
|
props: {
|
// 如果是商品订单此参数必须
|
orderId: {
|
type: String,
|
default() {
|
return ''
|
}
|
},
|
// 如果是充值订单此参数必须
|
recharge: {
|
type: Number,
|
default() {
|
return 0
|
}
|
},
|
// 用户id
|
uid: {
|
type: Number,
|
default() {
|
return 0
|
}
|
},
|
// 订单类型
|
type: {
|
type: Number,
|
default() {
|
return 1
|
}
|
}
|
},
|
data() {
|
return {
|
payments: [],
|
popShow: false
|
}
|
},
|
mounted() {
|
this.getPayments()
|
},
|
computed: {
|
...mapState({
|
userInfo: state => state.userInfo,
|
}),
|
userInfo: {
|
get() {
|
return this.$store.state.userInfo;
|
},
|
set(val) {
|
this.$store.commit('userInfo', val);
|
}
|
},
|
},
|
methods: {
|
// 获取可用支付方式列表
|
getPayments() {
|
this.$u.api.paymentList().then(res => {
|
if (res.status) {
|
this.payments = this.formatPayments(res.data)
|
}
|
})
|
},
|
// 支付方式处理
|
formatPayments(payments) {
|
// 如果是充值订单 过滤余额支付 过滤非线上支付方式
|
if (this.type === 2) {
|
payments = payments.filter(item => item.code !== 'balancepay' || item.isOnline === false)
|
}
|
|
// 设置logo图片
|
payments.forEach(item => {
|
this.$set(item, 'icon', '/static/images/payments/' + item.code + '.png')
|
})
|
return payments
|
},
|
// 用户点击支付方式处理
|
toPayHandler(code) {
|
this.popShow = true;
|
let _this = this
|
|
let data = {
|
payment_code: code,
|
payment_type: _this.type,
|
params: {
|
trade_type: 'APP',
|
}
|
}
|
data.ids = (this.type == this.$globalConstVars.paymentType.common || this.type == this.$globalConstVars.paymentType.pinTuan || this.type == this.$globalConstVars.paymentType.group || this.type == this.$globalConstVars.paymentType.seckill || this.type == this.$globalConstVars.paymentType.bargain || this.type == this.$globalConstVars.paymentType.giveaway || this.type == this.$globalConstVars.paymentType.solitaire || this.type == this.$globalConstVars.paymentType.transactionComponent || this.type == this.$globalConstVars.paymentType.serviceOrder) ? this.orderId : this.uid
|
|
// 判断订单支付类型
|
if (this.type == this.$globalConstVars.paymentType.recharge && this.recharge) {
|
data.ids = this.recharge;
|
data.params.money = this.recharge;
|
} else if ((this.type == this.$globalConstVars.paymentType.formPay || this.type == this.$globalConstVars.paymentType.formOrder) && this.recharge) {
|
data.ids = this.orderId;
|
}
|
switch (code) {
|
case 'alipay':
|
/**
|
* 支付宝支付需要模拟GET提交数据
|
*/
|
console.log("支付宝支付入参app", data)
|
_this.$u.api.pay(data).then(res => {
|
if (res.status) {
|
uni.requestPayment({
|
provider: "alipay",
|
orderInfo: res.data,
|
success: function (data) {
|
_this.$refs.uToast.show({
|
message: '支付成功', type: 'success', complete: function () {
|
console.log("支付id", res.otherData.tradeNo)
|
_this.redirectHandler(res.otherData.tradeNo)
|
}
|
})
|
},
|
fail: function (resFail) {
|
console.log(resFail);
|
}
|
});
|
} else {
|
_this.$comon.errorToShow(res.msg)
|
_this.popHide();
|
}
|
})
|
break
|
case 'wechatpay':
|
// 微信app支付
|
_this.$u.api.pay(data).then(res => {
|
if (res.status) {
|
uni.requestPayment({
|
provider: "wxpay",
|
orderInfo: {
|
appid: res.data.appid,
|
noncestr: res.data.noncestr,
|
package: res.data.package,
|
partnerid: res.data.partnerid,
|
prepayid: res.data.prepayid,
|
timestamp: res.data.timestamp,
|
sign: res.data.sign,
|
},
|
success: function (data) {
|
_this.$refs.uToast.show({
|
message: '支付成功', type: 'success', complete: function () {
|
_this.redirectHandler(res.data.paymentId)
|
}
|
})
|
},
|
fail: function (res) {
|
console.log(res);
|
}
|
});
|
} else {
|
_this.$u.toast(res.msg)
|
_this.popHide();
|
}
|
})
|
break
|
case 'balancepay':
|
/**
|
* 用户余额支付
|
*
|
*/
|
_this.$u.api.pay(data).then(res => {
|
if (res.status) {
|
_this.redirectHandler(res.data.paymentId)
|
} else {
|
_this.$u.toast(res.msg)
|
_this.popHide();
|
}
|
})
|
break
|
case 'offline':
|
/**
|
* 线下支付
|
*/
|
_this.$common.modelShow('线下支付说明', '请联系客服进行线下支付', () => { }, false, '取消', '确定')
|
break
|
}
|
},
|
// 支付成功后跳转操作
|
redirectHandler(paymentId) {
|
this.$u.route({ type: 'redirectTo', url: '/pages/payment/result/result?id=' + paymentId });
|
},
|
// 支付中显示隐藏
|
popHide() {
|
this.popShow = false
|
}
|
}
|
|
}
|
</script>
|
|
|
<style lang="scss">
|
.coreshop-avatar { background: #fff; }
|
</style>
|
