new-mshop-view/pages/agent/delivery/payment.vue

741 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :style="viewColor">
<!--具体内容-->
<view class='content-box'>
<!--买单金额-->
<view class="money">
<view class="top-bg-line"></view>
<view class="money-box">
<view class="title">缴费金额</view>
<view class="input-box">
<view class="unit">¥</view>
<input class="money-input" :value="payment_current.price | toFixedTwo" readonly disabled />
</view>
</view>
</view>
<!--赠送内容-->
<view class="give">
<view class="box-title">赠送额度</view>
<view class="give-content">
<view class="give-box">赠送冠名品牌额度<view class="give-quota">{{ payment_current.title_quota | toFixedTwo}}</view></view>
<view class="give-box">赠送其他品牌额度<view class="give-quota">{{ payment_current.other_quota | toFixedTwo}}</view></view>
<view class="give-box change-btn" v-if="Object.values(payment_list).length > 1" @click="showChangePopup">切换规格</view>
</view>
</view>
<!--支付方式-->
<view class="pay-type">
<view class="box-title">支付方式</view>
<view class="box-content">
<radio-group name="pay_type" @change="changePayType">
<view class="pay-label" v-for="(item,index) in pay_list" :key="index" v-if="item.payStatus==1">
<label>
<view class="pay-item">
<view class="left">
<view :class="['iconfont','animated',item.icon]"></view>
<view class="pay-item-info">
<view class="pay-name">{{ item.name }}</view>
<view class='tip'>
{{item.title}}
<block v-if="item.value == 'balance'">
{{now_money}}
</block>
</view>
</view>
</view>
<view class="right">
<radio :value="item.value" :checked="item.value == pay_info.pay_type ? true : false" />
</view>
</view>
</label>
</view>
</radio-group>
</view>
</view>
<!--支付按钮-->
<view class="pay-btn" v-if="agent_id > 0" @click="confirmPayment">确认支付</view>
<view class="pay-btn not-btn" v-else>确认支付</view>
</view>
<!--授权登录-->
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
<!--支付项目选择-->
<uni-popup ref="paymentListPopup" type="bottom">
<view class="payment-list-content">
<view class="list">
<view class="box" v-for="(item,index) in payment_list" :key="index">
<view class="left">
<view class="price">¥{{ item.price | toFixedTwo}}</view>
<view class="quota-box">赠送冠名品牌额度<view class="quota-num">{{ item.title_quota | toFixedTwo }}</view></view>
<view class="quota-box">赠送其他品牌额度<view class="quota-num">{{ item.other_quota | toFixedTwo }}</view></view>
</view>
<view class="selected-btn" @click="changePayment(index)">选中</view>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import emptyPage from '@/components/emptyPage.vue';
import {getUserInfo} from "@/api/user";
import {deliveryPaymentList, deliveryCreateOrder} from "@/api/agent";
const app = getApp();
export default {
components: {
authorize,
emptyPage,
},
data() {
return {
agent_id: '',
// 登录相关
isAuto: false, //没有授权的不会自动授权
isShowAuth: false,//是否隐藏授权
//支付相关
pay_list: [
{
"name": "微信支付",
"icon": "icon-weixin2",
value: 'weixin',
title: '微信快捷支付',
payStatus: 1,
},
{
name: "支付宝支付",
icon: "icon-icon34",
// #ifdef H5 || APP-PLUS
value: 'alipay',
// #endif
// #ifdef MP
value: 'alipayQr',
// #endif
title: '支付宝支付',
payStatus: this.$store.getters.globalData.alipay_open
},
{
"name": "余额支付",
"icon": "icon-icon-test",
value: 'balance',
title: '可用余额:',
payStatus: this.$store.getters.globalData.yue_pay_status,
},
{
"name": "线下支付",
"icon": "icon-yinhangqia",
value: 'offline',
title: '线下支付',
payStatus: 2,
},
],
now_money: 0,
pay_info: {
money: 0.00,// 买单金额
pay_type: 'weixin',
// #ifdef H5
return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
// #endif
},
// 缴费信息
payment_list: {},
payment_index: '',
payment_current: {},
};
},
computed: {
...mapGetters(['isLogin', 'userInfo', 'viewColor'])
},
filters: {
toFixedTwo(value) {
value = value || 0;
value = Number(value);
return value.toFixed(2);
}
},
onLoad(options) {
this.agent_id = options.agent_id || 0;
// 判断agent_id <= 0 抛出错误,返回代理中心
if(Number(this.agent_id) <= 0){
this.$util.Tips({
title: '非法访问,信息不存在!',
},{tab:5,url:`/pages/agent/centerV2?agent_id=${this.agent_id}`});
return false;
}
// 判断:是否登录
if (!this.isLogin) {
// 未登录 授权登录
this.isAuto = true;
this.isShowAuth = true
}else{
// 已登录 获取信息
this.init();
}
},
onReachBottom: function () {},
methods: {
// 授权回调
onLoadFun() {
if(this.isLogin){
this.isShowAuth = false;
this.init();
}
},
// 授权关闭
authClose(e) {
this.isShowAuth = e
},
// 授权成功 获取用户信息
init () {
let _this = this;
// 获取用户信息
getUserInfo().then(res => {
_this.now_money = res.data.now_money
});
// 获取用户缴费列表
this.getPaymentList();
},
// 获取缴费项列表
getPaymentList(){
let _this = this;
deliveryPaymentList().then(res => {
let data = res.data || {};
_this.payment_list = data || {};
_this.payment_index = 0;
_this.payment_current = data[_this.payment_index] || {};
// 判断:如果不存在任何缴费项目 报错并且返回
if(Object.values(data).length <= 0){
this.$util.Tips({
title: '不存在任何支付项,请联系管理员!',
},{tab:5,url:`/pages/agent/centerV2?agent_id=${_this.agent_id}`});
return false;
}
});
},
// 点击显示切换支付项弹框
showChangePopup(){
this.$refs.paymentListPopup.open('bottom');
},
// 点击切换支付项
changePayment(index){
this.payment_index = index;
this.$set(this, 'payment_current', this.payment_list[this.payment_index] || {});
this.$refs.paymentListPopup.close();
},
// 修改支付方式
changePayType(e){
this.pay_info.pay_type = e.detail.value || e.target.value;
},
// 确认付款
confirmPayment(){
let _this = this;
let paymentCurrentInfo = Object.assign({}, _this.payment_current);
let payInfo = Object.assign({},_this.pay_info);
payInfo.agent_id = _this.agent_id;
payInfo.money = Number(paymentCurrentInfo.price).toFixed(2);
payInfo.title_quota = Number(paymentCurrentInfo.title_quota).toFixed(2);
payInfo.other_quota = Number(paymentCurrentInfo.other_quota).toFixed(2);
// 发起支付
if (payInfo.pay_type == 'weixin') {
// #ifdef H5
payInfo.pay_type = _this.$wechat.isWeixin() ? 'weixin' : 'h5'
// #endif
// #ifdef MP
payInfo.pay_type = 'routine'
// #endif
// #ifdef APP-PLUS
payInfo.pay_type = 'weixin'
// #endif
}
uni.showLoading({title: '订单处理中...', mask: true});
deliveryCreateOrder(payInfo).then(res => {
if (res.status == 200) {
let backUrl = `/pages/agent/delivery/payment_record?agent_id=${_this.agent_id}`;
let backTab = 5;
if(Number(paymentCurrentInfo.price) > 0){
let status = res.data.status,
orderId = res.data.result.order_id,
callback_key = res.data.result.pay_key,
jsConfig = res.data.result.config;
// let goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message;
let goPages = backUrl;
switch (status) {
case 'ORDER_EXIST':
case 'EXTEND_ORDER':
case 'PAY_ERROR':
case 'error':
return _this.$util.Tips({
title: res.message
}, {
tab: backTab,
url: goPages
});
break;
case 'success':
return _this.$util.Tips({
title: res.message,
icon: 'success'
}, {
tab: backTab,
url: goPages
});
break;
case 'alipay':
case "alipayQr":
uni.navigateTo({
url: '/pages/order_pay_back/index?keyCode=' + callback_key + '&url=' +
jsConfig
})
return;
break;
// #ifndef MP
case "wechat":
case "weixin":
case "weixinApp":
jsConfig.timeStamp = jsConfig.timestamp;
// #ifndef APP-PLUS
this.$wechat.pay(jsConfig).then(res => {
return _this.$util.Tips({
title: res.message,
icon: 'success'
}, {
tab: backTab,
url: goPages
});
}).catch(res => {
if (res.errMsg == 'chooseWXPay:cancel') return _this.$util.Tips({
title: '取消支付'
}, {
tab: backTab,
url: goPages + '&status=0'
});
})
// #endif
// #ifdef APP-PLUS
let mp_pay_name=''
if(uni.requestOrderPayment){
mp_pay_name='requestOrderPayment'
}else{
mp_pay_name='requestPayment'
}
uni[mp_pay_name]({
provider: 'wxpay',
orderInfo: jsConfig,
success: (e) => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付成功';
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: backTab,
url: backUrl
});
},
fail: (e) => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
return _this.$util.Tips({
title: '取消支付',
}, {
tab: backTab,
url: backUrl
});
},
complete: () => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
return _this.$util.Tips({
title: '',
}, {
tab: backTab,
url: backUrl
});
},
});
// #endif
break;
// #endif
// #ifdef MP
case "routine":
jsConfig.timeStamp = jsConfig.timestamp;
_this.toPay = true;
let mp_pay_name=''
if(uni.requestOrderPayment){
mp_pay_name='requestOrderPayment'
}else{
mp_pay_name='requestPayment'
}
uni[mp_pay_name]({
...jsConfig,
success: function(res) {
uni.hideLoading();
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: backTab,
url: goPages
});
},
fail: function(e) {
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
return _this.$util.Tips({
title: '取消支付'
}, {
tab: backTab,
// url: pages + '&status=0'
url: backUrl
});
},
})
break;
// #endif
case "balance":
//余额
return _this.$util.Tips({
title: res.msg
}, {
tab: backTab,
url: goPages + '&status=1'
});
break;
// #ifdef H5
case 'h5':
let host = window.location.protocol + "//" + window.location.host;
// let url = `${host}/pages/order_pay_status/index?order_id=${orderId}&msg=${res.message}`
let eUrl = encodeURIComponent(backUrl)
let jsurl = jsConfig.mweb_url || jsConfig.h5_url
let locations = `${jsurl}&redirect_url=${eUrl}`
setTimeout(() => {
location.href = locations;
}, 100);
break;
// #endif
// #ifdef APP-PLUS
case 'alipayApp':
uni.requestPayment({
provider: 'alipay',
orderInfo: jsConfig,
success: (e) => {
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: backTab,
url: goPages
});
},
fail: (e) => {
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付失败'
return _this.$util.Tips({
title: '支付失败'
}, {
tab: backTab,
url: backUrl
});
},
complete: () => {
uni.hideLoading();
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
return _this.$util.Tips({
title: ''
}, {
tab: backTab,
url: backUrl
});
},
});
break;
// #endif
default:
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
return _this.$util.Tips({
title: '取消支付'
}, {
tab: backTab,
// url: pages + '&status=0'
url: backUrl
});
}
}else{
_this.$util.Tips({
title: '操作成功!',
},{
tab: backTab,
url: backUrl
});
}
}
}).catch(err => {
uni.hideLoading();
this.$util.Tips({title: err});
});
},
},
}
</script>
<style scoped lang="scss">
.content-box{
width: 100vw;
min-height: 100vh;
background-color: orange;
padding: 20rpx;
background: linear-gradient(to bottom, #1b79ff, #f6f6f6) no-repeat;
background-size: 100% 300rpx;
background-color: #f6f6f6;
// 公共内容
.box-title{
margin: 30rpx 0;
height: 50rpx;
line-height: 50rpx;
font-size: 28rpx;
padding-left: 20rpx;
font-weight: bold;
position: relative;
}
.box-title:after{
content: "";
position: absolute;
left: 0;
top: calc((50rpx - 30rpx) / 2);
width: 10rpx;
height: 30rpx;
background: #1777ff;
}
// 买单金额
.money{
position: relative;
padding: 15rpx;
.top-bg-line{
width: 100%;
background-color: #1256ad;
height: 20rpx;
border-radius: 50rpx;
position: absolute;
left: 0;
top: 0;
}
.money-box{
background: #FFFFFF;
position: relative;
width: 100%;
top: -5rpx;
border-radius: 15rpx;
padding: 20rpx;
box-shadow: 0px 3px 5px 0px #ececec;
.title{
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
font-weight: bold;
}
.input-box{
height: 70rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-end;
font-size: 50rpx;
font-weight: bold;
margin: 20rpx 0 30rpx 0;
}
.unit{
margin-right: 15rpx;
}
.money-input{
height: 70rpx;
}
}
}
// 赠送额度
.give{
.give-content{
width: 100%;
display: inline-flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
flex-direction: column;
.give-box{
display: inline-flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width: 100%;
height: 50rpx;
line-height: 50rpx;
color: #C3C3C3;
font-size: 30rpx;
.give-quota{
color: #f70e05;
}
}
.change-btn{
color: #1b79ff;
}
}
}
// 支付方式
.pay-type{
.box-content{
.pay-label:not(:last-child){
margin-bottom: 20rpx;
}
.pay-item{
height: 120rpx;
padding: 20rpx;
width: 100%;
border: 2rpx solid #d9dce4;
border-radius: 15rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
.left{
width: calc(100% - 80rpx);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.animated{
width: 44rpx;
height: 44rpx;
border-radius: 50%;
text-align: center;
line-height: 44rpx;
background-color: #fe960f;
color: #fff;
font-size: 30rpx;
margin-right: 15rpx;
}
.icon-weixin2 {
background-color: #41b035;
}
.icon-icon34 {
background-color: #4295D5;
}
.pay-item-info{
.pay-name{
text-align: left;
border-right: 1px solid #eee;
justify-content: left;
}
.tip{
text-align: left;
font-size: 26rpx;
color: #aaa;
}
}
}
.right{
width: 80rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
}
}
}
}
// 确认支付
.pay-btn{
width: calc(100% - (20rpx * 2));
background: #1777ff;
color: #FFFFFF;
border-radius: 15rpx;
font-size: 30rpx;
text-align: center;
height: 70rpx;
line-height: 70rpx;
position: absolute;
left: 20rpx;
bottom: 150rpx;
}
.not-btn{
background-color: #909399;
color: #fff;
}
}
.payment-list-content{
background: #FFFFFF;
width: 100vw!important;
height: 80vh!important;
padding: 15rpx;
border-top-right-radius: 20rpx;
border-top-left-radius: 20rpx;
.list{
overflow: auto;
height: calc(100% - 60rpx);
.box{
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
width: 100%;
.left{
width: calc(100% - 110rpx);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.price{
width: 100%;
font-size: 36rpx;
height: 70rpx;
line-height: 70rpx;
color: #fb0000;
}
.quota-box{
width: 100%;
font-size: 28rpx;
text-align: left;
height: 40rpx;
line-height: 40rpx;
display: inline-flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
justify-content: flex-start;
color: #818181;
.quota-num{
color: #f70e05;
}
}
}
.selected-btn{
width: 100rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 26rpx;
background-color: #67c23a;
color: #fff;
border-radius: 50rpx;
}
}
.box:not(:last-child){
border-bottom: 2rpx solid #f6f6f6;
}
}
}
</style>