You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
735 lines
19 KiB
735 lines
19 KiB
<template>
|
|
|
|
<view id="store-payment">
|
|
<form @submit="formSubmit" :report-submit="report">
|
|
<view class="order-item" v-if="order.status === 1 && init">
|
|
<view class="title mx-1px-bottom">
|
|
商品清单
|
|
</view>
|
|
<view class="goods info" v-for="(item, index) in order.items" :key="index">
|
|
<view class="goods-item">
|
|
<view class="item-left">
|
|
<image :src="item.item_meta.image"></image>
|
|
</view>
|
|
<view class="item-right">
|
|
<view class="goods-name item">
|
|
<view class="name">
|
|
{{item.item_name}}
|
|
</view>
|
|
<view>
|
|
{{item.quantity}}件
|
|
</view>
|
|
</view>
|
|
<view class="goods-money item">
|
|
<view>
|
|
{{item.item_meta.specs_text}}
|
|
</view>
|
|
<view>
|
|
￥{{item.total / 100}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="order-item" v-if="order.balance_paid == 0">
|
|
<view class="title mx-1px-bottom">
|
|
余额
|
|
</view>
|
|
<view class="balance info" v-if="balance">
|
|
<view class="num">
|
|
<span>￥</span>
|
|
<input type="digit" @input="modifyBalance" :value="inputBalance" :placeholder="'可使用' + paybalance.balance / 100 + '元'"></input>
|
|
|
|
<i class="iconfont icon-delete" v-if="inputBalance" @tap="cancel"></i>
|
|
</view>
|
|
<view class="text" @tap="useAll">
|
|
全部使用
|
|
</view>
|
|
</view>
|
|
<view class="no-balance" v-else>
|
|
您暂无可用余额
|
|
</view>
|
|
</view>
|
|
|
|
<view class="pay-balance" v-else>
|
|
您已使用余额支付{{order.balance_paid / 100}}元
|
|
</view>
|
|
|
|
<view class="order-item" v-if="paybalance.balance != (inputBalance * 100) || paybalance.balance == 0">
|
|
<view class="title mx-1px-bottom">
|
|
支付方式
|
|
</view>
|
|
<view class="type info">
|
|
<radio-group class="radio-group">
|
|
<label class="radio">
|
|
<radio checked="true" color="red"></radio>
|
|
<!-- #ifdef H5 -->
|
|
<text v-if="env.isWechat">微信支付</text>
|
|
<text v-else>支付宝支付</text>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
|
|
<text>微信支付</text>
|
|
<!-- #endif -->
|
|
</label>
|
|
</radio-group>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order-info">
|
|
<view v-if="order.balance_paid == 0">
|
|
<view class="item">
|
|
<view class="left">
|
|
余额支付
|
|
</view>
|
|
<view class="num">
|
|
￥{{inputBalance || 0}}
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<!-- #ifdef H5 -->
|
|
<view class="left" v-if="env.isWechat">
|
|
微信支付
|
|
</view>
|
|
<view class="left" v-else>
|
|
支付宝支付
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
|
|
<view class="left">
|
|
微信支付
|
|
</view>
|
|
<!-- #endif -->
|
|
<view class="num">
|
|
￥{{countMoney || order.total / 100}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="item">
|
|
<view class="left" >
|
|
余额支付
|
|
</view>
|
|
<view class="num">
|
|
￥{{order.balance_paid / 100}}
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
<view class="item">
|
|
<view class="left" v-if="env.isWechat">
|
|
微信支付
|
|
</view>
|
|
<view class="left" v-else>
|
|
支付宝支付
|
|
</view>
|
|
<view class="num">
|
|
￥{{((order.total - order.balance_paid) / 100)}}
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
|
|
<view class="item">
|
|
<view class="left">
|
|
微信支付
|
|
</view>
|
|
<view class="num">
|
|
￥{{((order.total - order.balance_paid) / 100)}}
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<button :style="'background: ' + config.mainColor" form-type="submit" :loading="loading">立即支付</button>
|
|
|
|
|
|
</view>
|
|
<view class="order-over" v-if="order.status != 1 && init">
|
|
<view>
|
|
订单已支付
|
|
</view>
|
|
<view class="over-btn" @tap="jumpOrderDetail">
|
|
查看订单详情
|
|
</view>
|
|
</view>
|
|
</form>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
var app = getApp();
|
|
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
order: {},
|
|
order_no: '',
|
|
channel: 'wx_lite',
|
|
amount: 0,
|
|
loading: false,
|
|
inputBalance: '',
|
|
balance: '',
|
|
paybalance: {
|
|
balance: 0,
|
|
inputBalance: 0
|
|
},
|
|
countMoney: '',
|
|
config: '',
|
|
report: true,
|
|
formId: '',
|
|
init: false,
|
|
// #ifdef H5
|
|
env:{
|
|
isIPad: /ipad/i.test(window.navigator.userAgent),
|
|
isIphone: /iphone|ipad|ipod/i.test(window.navigator.userAgent),
|
|
isWechat: /MicroMessenger/i.test(window.navigator.userAgent)
|
|
}
|
|
// #endif
|
|
};
|
|
},
|
|
|
|
onShow() {
|
|
this.queryUserSum();
|
|
},
|
|
|
|
onLoad(e) {
|
|
// 第三方平台配置颜色
|
|
var gbConfig = this.$cookieStorage.get('globalConfig') || '';
|
|
this.setData({
|
|
config: gbConfig
|
|
});
|
|
this.setData({
|
|
order_no: e.order_no,
|
|
loading: false
|
|
});
|
|
|
|
},
|
|
methods: {
|
|
jumpOrderDetail() {
|
|
wx.redirectTo({
|
|
url: `/pages/order/detail/detail?no=${this.order_no}`
|
|
});
|
|
},
|
|
|
|
modifyBalance(e) {
|
|
var val = e.detail.value;
|
|
var min = 0;
|
|
var balance = this.paybalanceF(val);
|
|
var max = (balance.balance / 100).toFixed(2);
|
|
|
|
if (!val) {
|
|
val = '';
|
|
} else if (/\S*$/.test(val)) {
|
|
val = val.replace(/[^\d\.]|^\./g, '').replace(/\.{2}/g, '.').replace(/^([1-9]\d*|0)(\.\d{1,2})(\.|\d{1})?$/, '$1$2').replace(/^0\d{1}/g, '0');
|
|
}
|
|
|
|
if (Number(val) < min) {
|
|
val = min;
|
|
} else if (Number(val) > max) {
|
|
val = max;
|
|
}
|
|
|
|
this.setData({
|
|
inputBalance: val
|
|
});
|
|
this.paybalanceF(val);
|
|
this.countMoneyF();
|
|
return val;
|
|
},
|
|
|
|
useAll() {
|
|
var balance = this.paybalanceF(this.order.total / 100);
|
|
this.setData({
|
|
inputBalance: (balance.balance / 100).toFixed(2)
|
|
});
|
|
this.countMoneyF();
|
|
},
|
|
|
|
cancel() {
|
|
this.setData({
|
|
inputBalance: '',
|
|
channel: 'wx_lite'
|
|
});
|
|
this.countMoneyF();
|
|
},
|
|
|
|
paybalanceF(val) {
|
|
var total = this.order.total;
|
|
var balance = Math.min(this.balance, total);
|
|
var inputBalance = val;
|
|
/*if ((inputBalance * 100) == balance && balance != 0) {
|
|
this.setData({
|
|
channel: 'balance'
|
|
})
|
|
} else {
|
|
this.setData({
|
|
channel: 'wx_lite'
|
|
})
|
|
}*/
|
|
|
|
var data = {
|
|
balance,
|
|
inputBalance
|
|
};
|
|
this.setData({
|
|
paybalance: data
|
|
});
|
|
return data;
|
|
},
|
|
|
|
queryOrderDetail(order_no) {
|
|
var oauth = this.$cookieStorage.get('user_token');
|
|
this.$http.get({
|
|
api: `api/order/${order_no}`,
|
|
header: {
|
|
Authorization: oauth
|
|
}
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
|
|
if (res.status) {
|
|
this.$cookieStorage.set('service_retreat', res.data);
|
|
this.setData({
|
|
order: res.data,
|
|
init: true
|
|
});
|
|
this.paybalanceF(0);
|
|
} else {
|
|
wx.showModal({
|
|
content: res.message || '获取订单数据失败',
|
|
showCancel: false
|
|
});
|
|
}
|
|
|
|
wx.hideLoading();
|
|
} else {
|
|
wx.showModal({
|
|
content: '获取订单数据失败',
|
|
showCancel: false
|
|
});
|
|
wx.hideLoading();
|
|
}
|
|
}).catch(rej => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '获取订单数据失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
|
|
// 新版支付
|
|
newcharge(success, charge) {
|
|
if (success) {
|
|
var that = this;
|
|
|
|
if (charge.pay_scene == 'test') {
|
|
wx.showModal({
|
|
content: '不支持模拟支付',
|
|
showCancel: false
|
|
});
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
} else {
|
|
wx.requestPayment({
|
|
"timeStamp": charge.credential.wechat.timeStamp,
|
|
"nonceStr": charge.credential.wechat.nonceStr,
|
|
"package": charge.credential.wechat.package,
|
|
"signType": charge.credential.wechat.signType,
|
|
"paySign": charge.credential.wechat.paySign,
|
|
success: res => {
|
|
if (res.errMsg == 'requestPayment:ok') {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.redirectTo({
|
|
url: `/pages/store/success/success?order_no=${that.order_no}&amount=${that.amount}&channel=${that.channel}&formId=${this.formId}`
|
|
});
|
|
} else {
|
|
wx.showModal({
|
|
content: '调用支付失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
fail: err => {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
|
|
if (err.errMsg == 'requestPayment:fail cancel') {
|
|
wx.redirectTo({
|
|
url: `/pages/order/detail/detail?no=${that.order_no}`
|
|
});
|
|
} else {
|
|
wx.showModal({
|
|
content: '调用支付失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.showModal({
|
|
content: charge || '请求支付失败，请重试！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
//app支付
|
|
appPayment(success,orderInfo) {
|
|
var that = this;
|
|
if (success) {
|
|
// 获取服务供应商
|
|
uni.getProvider({
|
|
service:'payment',
|
|
success:ret=>{
|
|
uni.requestPayment({
|
|
provider:'wxpay',
|
|
orderInfo:orderInfo,
|
|
success: res => {
|
|
if (res.errMsg == 'requestPayment:ok') {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.redirectTo({
|
|
url: `/pages/store/success/success?order_no=${that.order_no}&amount=${that.amount}&channel=${that.channel}&formId=${this.formId}`
|
|
});
|
|
} else {
|
|
wx.showModal({
|
|
content: '调用支付失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
fail: err => {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
|
|
if (err.errMsg == 'requestPayment:fail:[payment微信:-2]User canceled') {
|
|
wx.redirectTo({
|
|
url: `/pages/order/detail/detail?no=${that.order_no}`
|
|
});
|
|
} else {
|
|
wx.showModal({
|
|
content: '调用支付失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
} else {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.showModal({
|
|
content: charge || '请求支付失败，请重试！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
// 纯余额支付
|
|
balanceCharge() {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.redirectTo({
|
|
url: `/pages/store/success/success?order_no=${this.order_no}&amount=${this.amount}&channel=${this.channel}&formId=${this.formId}`
|
|
});
|
|
},
|
|
|
|
// 查询用户余额信息
|
|
queryUserSum() {
|
|
var oauth = this.$cookieStorage.get('user_token');
|
|
wx.showLoading({
|
|
title: '加载中',
|
|
mask: true
|
|
});
|
|
this.$http.get({
|
|
api: 'api/users/balance/sum',
|
|
header: {
|
|
Authorization: oauth
|
|
}
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
|
|
if (res.status) {
|
|
this.setData({
|
|
balance: res.data.sum
|
|
});
|
|
this.queryOrderDetail(this.order_no);
|
|
} else {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: res.message || '请求失败',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
getOpenid() {
|
|
return new Promise((resolve, reject) => {
|
|
wx.login({
|
|
success: res => {
|
|
this.$http.get({
|
|
api: `api/oauth/miniprogram/openid`,
|
|
data: {
|
|
code: res.code
|
|
}
|
|
}).then(res => {
|
|
res = res.data;
|
|
resolve(res.data.openid);
|
|
}).catch(() => {
|
|
reject('获取openid失败');
|
|
});
|
|
},
|
|
fail: () => {
|
|
wx.showModal({
|
|
content: "接口请求失败",
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
formSubmit(e) {
|
|
if (this.loading) return;
|
|
this.setData({
|
|
loading: true
|
|
});
|
|
var oauth = this.$cookieStorage.get('user_token');
|
|
this.getOpenid().then(res => {
|
|
var data = {
|
|
channel: this.channel,
|
|
openid: res,
|
|
order_no: this.order_no,
|
|
balance: Number(this.inputBalance)
|
|
};
|
|
|
|
if (this.$cookieStorage.get('agent_code')) {
|
|
data.agent_code = this.$cookieStorage.get('agent_code');
|
|
}
|
|
|
|
this.$http.post({
|
|
api: `api/shopping/order/charge`,
|
|
data: data,
|
|
header: {
|
|
Authorization: oauth
|
|
}
|
|
}).then(res => {
|
|
res = res.data;
|
|
if (res.status) {
|
|
this.formId = e.detail.formId || '';
|
|
if (res.data.name == 'balance') {
|
|
this.balanceCharge();
|
|
} else {
|
|
this.newcharge(true, res.data.charge);
|
|
|
|
}
|
|
} else {
|
|
this.newcharge(false, res.message);
|
|
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.showModal({
|
|
content: '支付失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
// #endif
|
|
|
|
|
|
//h5支付
|
|
// #ifdef H5
|
|
formSubmit(e) {
|
|
if (this.loading) return;
|
|
this.setData({
|
|
loading: true
|
|
});
|
|
let env = {
|
|
isIPad: /ipad/i.test(window.navigator.userAgent),
|
|
isIphone: /iphone|ipad|ipod/i.test(window.navigator.userAgent),
|
|
isWechat: /MicroMessenger/i.test(window.navigator.userAgent)
|
|
}
|
|
|
|
if(this.channel=='wx_lite'){
|
|
if(env.isWechat){
|
|
this.channel='wx_pub';
|
|
} else{
|
|
this.channel='alipay_wap';
|
|
}
|
|
}
|
|
|
|
var oauth = this.$cookieStorage.get('user_token');
|
|
if(env.isWechat){
|
|
var openid = this.$cookieStorage.get('openid');
|
|
} else{
|
|
var openid = '';
|
|
}
|
|
let origin = window.location.origin;
|
|
let pathname = window.location.pathname;
|
|
var url = origin+'/pages/store/success/success?order_no='+this.order_no;
|
|
var fail_url = origin+'/pages/order/detail/detail?no='+this.order_no;
|
|
var data = {
|
|
channel: this.channel,
|
|
order_no: this.order_no,
|
|
balance: Number(this.inputBalance),
|
|
extra:{
|
|
openid:openid,
|
|
successUrl:url,
|
|
failUrl:fail_url
|
|
}
|
|
};
|
|
this.$http.post({
|
|
api:'api/shopping/order/charge',
|
|
data:data,
|
|
header:{
|
|
Authorization: oauth
|
|
}
|
|
}).then(res=>{
|
|
res = res.data;
|
|
if(res.status){
|
|
if(res.data.redirect_url){
|
|
var redirect_url = res.data.redirect_url
|
|
window.location.href=redirect_url;
|
|
}
|
|
}else{
|
|
wx.showModal({
|
|
content: res.message||'支付失败',
|
|
showCancel: false
|
|
});
|
|
|
|
}
|
|
}).catch(rej=>{
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.showModal({
|
|
content: rej.message||'支付失败',
|
|
showCancel: false
|
|
});
|
|
})
|
|
|
|
},
|
|
// #endif
|
|
|
|
// app支付
|
|
// #ifdef APP-PLUS
|
|
formSubmit(e) {
|
|
if (this.loading) return;
|
|
this.setData({
|
|
loading: true
|
|
});
|
|
|
|
if(this.channel=='wx_lite'){
|
|
this.channel='wx_app';
|
|
}
|
|
var oauth = this.$cookieStorage.get('user_token');
|
|
var data = {
|
|
channel: this.channel,
|
|
order_no: this.order_no,
|
|
balance: Number(this.inputBalance)
|
|
};
|
|
|
|
if (this.$cookieStorage.get('agent_code')) {
|
|
data.agent_code = this.$cookieStorage.get('agent_code');
|
|
}
|
|
|
|
this.$http.post({
|
|
api: `api/shopping/order/charge`,
|
|
data: data,
|
|
header: {
|
|
Authorization: oauth
|
|
}
|
|
}).then(res => {
|
|
res = res.data;
|
|
if (res.status) {
|
|
|
|
this.formId = e.detail.formId || '';
|
|
if (res.data.name == 'balance') {
|
|
this.balanceCharge();
|
|
} else{
|
|
this.appPayment(true,JSON.stringify(res.data))
|
|
}
|
|
|
|
} else{
|
|
this.appPayment(false,res.message)
|
|
}
|
|
}).catch(rej=>{
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.showModal({
|
|
content: rej.message||'支付失败',
|
|
showCancel: false
|
|
});
|
|
})
|
|
},
|
|
// #endif
|
|
|
|
countMoneyF() {
|
|
this.setData({
|
|
countMoney: (this.order.total / 100 - this.inputBalance).toFixed(2)
|
|
});
|
|
},
|
|
|
|
setData: function (obj) {
|
|
let that = this;
|
|
let keys = [];
|
|
let val, data;
|
|
Object.keys(obj).forEach(function (key) {
|
|
keys = key.split('.');
|
|
val = obj[key];
|
|
data = that.$data;
|
|
keys.forEach(function (key2, index) {
|
|
if (index + 1 == keys.length) {
|
|
that.$set(data, key2, val);
|
|
} else {
|
|
if (!data[key2]) {
|
|
that.$set(data, key2, {});
|
|
}
|
|
}
|
|
|
|
data = data[key2];
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/less" lang="less">
|
|
@import "payment";
|
|
</style>
|