shop-applet/pages/payment/settlement.vue

990 lines
27 KiB
Vue
Raw Permalink 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='order-submission'>
<!-- 商品信息 -->
<view class="storeinfo-wrapper">
<view class="store-item">
<view class="store-title">
<text class="iconfont icon-shangjiadingdan"></text>
<view class="txt" @click="goStore(item.mer_id)">{{payForm.merName}}</view>
<text class="iconfont icon-xiangyou"></text>
</view>
<view class="product-item">
<view class="img-box">
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/89ad3202402292014108303.jpg" width="170rpx"
height="180rpx" />
</view>
<view class="content event_content">
<view class="name line1">
{{payForm.money}}元实物提货券
</view>
<view style="margin-top: 30rpx;color: #FF5C2D;">
{{payForm.money}}
</view>
</view>
</view>
</view>
</view>
<view class='wrapper'>
<view class='item'>
<view style="font-weight: bold;">支付方式</view>
<view class='list'>
<!-- #ifdef H5 -->
<view class='payItem acea-row row-middle' :class='active==index ?"on":""' @tap='payItem(index)'
v-for="(item,index) in cartArr" :key='index' v-if="item.payStatus==1">
<view class='name acea-row row-center-wrapper'>
<view class='iconfont animated'
:class='(item.icon) + " " + (animated==true&&active==index ?"bounceIn":"")'></view>
{{item.name}}
</view>
<view class='tip'>
{{item.title}}
<block v-if="item.value == 'balance'">
{{userInfo.now_money}}
</block>
<block v-else-if="item.value == 'merBalance'">
{{moneyInfo.extract_money}}
</block>
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP || APP-PLUS -->
<view class='payItem acea-row row-middle' :class='active==index ?"on":""' @tap='payItem(index)'
v-for="(item,index) in cartArr" :key='index' v-if="item.payStatus==1">
<view class='name acea-row row-center-wrapper'>
<view class='iconfont animated'
:class='(item.icon) + " " + (animated==true&&active==index ?"bounceIn":"")'></view>
{{item.name}}
</view>
<view class='tip'>
{{item.title}}
<block v-if="item.value == 'balance'">
{{userInfo.now_money}}
</block>
<block v-else-if="item.value == 'merBalance'">
{{moneyInfo.extract_money}}
</block>
</view>
</view>
<!-- #endif -->
</view>
</view>
</view>
<view class='moneyList'>
<view class='item acea-row row-between-wrapper'>
<view>商品总价:</view>
<view class='money'>¥{{payForm.money}}</view>
</view>
<view class='item acea-row row-between-wrapper'>
<view>补贴抵扣</view>
<block v-if="platformConsumption.length > 0" >
<view class='discount money red_packet' @click="couponTap3()">
<text v-if="consumption_id">-¥{{consumption_money||'0.00'}}</text>
<text v-else>有补贴补贴未选</text>
<text class='iconfont icon-jiantou'></text>
</view>
</block>
<block v-else>
<view class='discount'>暂无抵扣红包</view>
</block>
</view>
</view>
<view style='height:140rpx;'></view>
<view class='footer acea-row row-between-wrapper'>
<view class="footer_count">
<view>
合计:
<text class='pColor' v-if="cartArr[4].payStatus == 1 && active == 4">¥0.00</text>
<text class='pColor' v-else>¥{{ total_coupon }}</text>
</view>
</view>
<view class='settlement' :class='couponData.status != "noAddress" ? "" : "disabled"' style='z-index:100'
@tap="SubOrder">{{couponData.status != "noAddress" ? '提交订单':'选择地址'}}</view>
</view>
</view>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
let app = getApp();
import {
orderConfirm,
createOrder
} from '@/api/order.js';
import {
getUserInfo,
getAdminApplyAPI
} from '@/api/user.js';
import {
openPaySubscribe
} from '@/utils/SubscribeMessage.js';
import {
mapGetters
} from "vuex";
import {
configMap
} from '@/utils';
import {
orderPay,
orderCheck
} from "@/api/payment.js";
export default {
data() {
return {
platformConsumption: [],
//支付方式
cartArr: [{
"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-icon-test",
value: 'merBalance',
title: '可用余额:',
payStatus: this.$store.getters.globalData.yue_pay_status,
},
{
"name": "线下支付",
"icon": "icon-yinhangqia",
value: 'offline',
title: '线下支付',
payStatus: 2,
}, {
"name": "先货后款",
"icon": "tan-a-lujing17324",
value: 'creditBuy',
title: `结算周期:${this.settle_cycle}天 日利率:${this.interest_rate}%`,
payStatus: '',
},
],
tagStyle: {
img: 'width:100%;display:block;',
video: 'width:100%;'
},
radioList: [{
title: this.deliveryName,
check: true
}, {
title: '到店核销',
check: false
}],
payType: 'weixin', //支付方式
active: 0, //支付方式切换
address: {
address: false
}, //地址组件
couponId: 0, //优惠券id
cartId: '', //购物车id
userInfo: {}, //用户信息
moneyInfo: {}, //商户余额信息
coupon_price: 0, //优惠券抵扣金额
ChangePrice: 0, //使用积分抵扣变动后的金额
formIds: [], //收集formid
status: 0,
is_address: false,
toPay: false, //修复进入支付时页面隐藏从新刷新页面
cartInfo: [],
priceGroup: {},
animated: false,
totalPrice: 0,
offlinePostage: "",
from: '',
orderStatus: '', //是否有地址
couponIndex: 0, //选择商铺优惠券索引
subCoupon: {}, //提交订单使用的优惠券
couponData: {},
orderPay: false,
pics: [],
extend: [],
virtualIndex: 0,
platformCoupon: [],
total_platform_coupon_price: 0,
enabledPlatformCoupon: false,
plantCoupon: false,
order_key: '',
product_type: '',
source: null,
settle_cycle: '', // 周期
type_id: '', //店铺类型
consumption_id: '', //补贴id
consumption_money: '', //补贴抵扣金额
total_coupon: '', //合计
payForm: {
cart_id: '',
address_id: '',
consumption_id: '',
use_coupon: '',
takes: '',
use_integral: '',
receipt_data: [],
mark: '',
pay_type: '',
money: '',
merName: '',
return_url: ''
},
checkForm: {
address_id: '',
cart_id: [],
consumption_id: '',
product_type: 0,
source: 999,
takes: [],
use_coupon: {},
use_integral: false
},
};
},
computed: {
...mapGetters(['isLogin', 'viewColor']),
...configMap(['hide_mer_status', 'yue_pay_status']),
},
watch: {
yue_pay_status(n) {
this.payMode[2].payStatus = n
}
},
onLoad: function(options) {
options.money = parseFloat(options.money).toFixed(2);
this.payForm.cart_id = options.cartId;
this.payForm.money = options.money;
this.payForm.merName = options.merName;
this.checkForm.cart_id = options.cartId.split(',');
this.total_coupon = options.money;
// this.platformConsumption = [{
// balance: "39000.00",
// coupon_price: "50000.00",
// coupon_title: "春耕采购余额",
// coupon_user_id: 178,
// describe: "仅限平台指定商家商品可使用",
// end_time: "2025-07-01 00:00:00",
// start_time: "2024-03-02 14:15:17",
// uid: 889
// }]
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('datas', (data) => {
this.platformConsumption = data;
})
// #ifdef H5
this.from = this.$wechat.isWeixin() ? 'weixin' : 'h5'
// #endif
// #ifdef MP
this.from = 'routine'
// #endif
// #ifdef APP-PLUS
this.from = 'weixin'
// #endif
if (!this.isLogin) {
this.isAuto = true;
this.isShowAuth = true
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this.getUserInfo()
},
methods: {
couponTap3: function(item, index) {
uni.navigateTo({
url: '/pages/redpacket/redpacket',
success: (res) => {
res.eventChannel.emit('changeRedPacketInfo', this.platformConsumption)
uni.$once('changeRedPacket', (data) => {
this.consumption_id = data;
orderCheck({
...this.checkForm,
consumption_id: this.consumption_id
}).then(res=>{
this.total_coupon = res.data.order_price;
this.consumption_money = res.data.consumption_money;
this.payForm.consumption_id = this.consumption_id;
// this.payForm.money = res.data.order_price;
})
})
}
})
},
// 授权关闭
authColse: function(e) {
console.log(e, 'authColse')
this.isShowAuth = e;
},
onLoadFun() {
this.isShowAuth = false;
},
// 获取个人信息
getUserInfo() {
getUserInfo().then(res => {
this.userInfo = res.data;
this.loadMoneyInfo();
})
},
payItem: function(e) {
let that = this;
let active = e;
that.active = active;
// console.log(this.active);
that.animated = true;
that.payType = that.cartArr[active].value;
if (that.payType == 'weixin') {
that.payType = that.from
}
},
loadMoneyInfo(){
//获取账户金额以及冻结金额 重新调了一次接口
getAdminApplyAPI(this.userInfo.service.mer_id).then(res => {
this.moneyInfo = res.data;
})
},
payment: function(data) {
let that = this;
createOrder(data).then(res => {
let status = res.data.status,
orderId = res.data.result.order_id,
jsConfig = res.data.result.config,
// 暂不跳转
goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message +
'&product_type=' + that.payForm.product_type + '&source=' + that.payForm.source,
goPagesOrder = '/pages/order_details/stay?order_id=' + orderId +
'&credit_buy=1&product_type=' + that.payForm.product_type;
that.orderPay = true;
uni.hideLoading();
switch (status) {
case 'ORDER_EXIST':
case 'EXTEND_ORDER':
case 'PAY_ERROR':
case 'error':
return that.$util.Tips({
title: res.message
}, {
tab: 5,
url: goPagesOrder
});
break;
case 'success':
return that.$util.Tips({
title: res.message,
icon: 'success'
}, {
tab: 5,
url: goPages
});
break;
case 'alipay':
case "alipayQr":
return;
break;
// #ifndef MP
case "wechat":
case "weixin":
case "weixinApp":
jsConfig.timeStamp = jsConfig.timestamp;
// #ifndef APP-PLUS
this.$wechat.pay(jsConfig).then(res => {
return that.$util.Tips({
title: res.message,
icon: 'success'
}, {
tab: 4,
url: goPages
});
}).catch(res => {
if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
title: '取消支付'
}, {
tab: 5,
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=支付成功' + '&product_type=' + that.product_type +
'&source=' + that.source;
return that.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 4,
url: url
});
},
fail: (e) => {
console.log(e, '111111111')
// 暂不跳转
let url = '/pages/order_pay_status/index?order_id=' + orderId +
'&msg=取消支付' + '&product_type=' + that.product_type +
'&source=' + that.source;
return that.$util.Tips({
title: '取消支付',
}, {
tab: 4,
url: url
});
},
complete: (res) => {
uni.hideLoading();
},
});
// #endif
break;
// #endif
// #ifdef MP
case "routine":
jsConfig.timeStamp = jsConfig.timestamp;
that.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 that.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 5,
url: goPages
});
},
fail: function(e) {
// 暂不跳转
let pages = '/pages/order_pay_status/index?order_id=' +
orderId + '&msg=取消支付' + '&product_type=' + that
.product_type + '&source=' + that.source;
return that.$util.Tips({
title: '取消支付'
}, {
tab: 5,
url: pages + '&status=0'
});
},
})
break;
// #endif
case "balance":
//余额
return that.$util.Tips({
title: res.msg
}, {
tab: 5,
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}&product_type=${that.product_type}&source${that.source}`
let eUrl = encodeURIComponent(url)
let jsurl = jsConfig.mweb_url || jsConfig.h5_url
let locations = `${jsurl}&redirect_url=${eUrl}`
// 暂不跳转
setTimeout(() => {
location.href = locations;
}, 100);
break;
// #endif
default:
// 暂不跳转
let pages = '/pages/order_pay_status/index?order_id=' +
orderId + '&msg=取消支付' + '&product_type=' + that.product_type + '&source=' +
that.source
return that.$util.Tips({
title: '取消支付'
}, {
tab: 5,
url: pages + '&status=0'
});
}
}).catch(err => {
return that.$util.Tips({
title: err
});
uni.hideLoading();
});
},
SubOrder: function() {
let that = this,
data = {};
if (!that.payType) return that.$util.Tips({
title: '请选择支付方式'
});
if (that.payType == 'balance' && this.userInfo.now_money < this.payForm.money) {
return that.$util.Tips({
title: '余额不足,请选择其他的支付方式!'
});
}
this.payForm.pay_type = that.payType;
uni.showLoading({
title: '订单支付中',
mask: true
});
// #ifdef MP
openPaySubscribe().then(() => {
that.payment(this.payForm);
});
// #endif
// #ifndef MP
that.payment(this.payForm);
// #endif
}
}
}
</script>
<style lang="scss" scoped>
.order-submission .wrapper {
margin-bottom: 12rpx;
background-color: #fff;
}
.order-submission .wrapper .item {
padding: 27rpx 30rpx;
font-size: 30rpx;
color: #282828;
}
.order-submission .virtual_form {
padding: 0 30rpx;
}
/deep/.order-submission .virtual_form .uni-input-wrapper {
text-align: right;
}
.order-submission .virtual_form .item-require {
color: red;
margin-right: 4rpx;
}
.order-submission .virtual_form .item {
border-bottom: 1rpx solid #EEEEEE;
padding: 27rpx 0;
}
.upload {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.order-submission .virtual_form .pictrue {
width: 156rpx;
height: 156rpx;
margin: 24rpx 20rpx 0 0;
position: relative;
font-size: 11px;
color: #bbb;
border-radius: 3rpx;
&:nth-child(4n) {
margin-right: 0;
}
&:nth-last-child(1) {
border: 0.5px solid #ddd;
box-sizing: border-box;
}
uni-image,
image {
width: 100%;
height: 100%;
border-radius: 1px;
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
}
}
.order-submission .wrapper .item .discount {
font-size: 30rpx;
color: #999;
&.discount_voice {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 500rpx;
text-align: right;
}
}
.order-submission .wrapper .item .discount .iconfont {
color: #515151;
font-size: 30rpx;
margin-left: 15rpx;
}
.order-submission .wrapper .item .discount .num {
font-size: 32rpx;
margin-right: 20rpx;
}
.order-submission .wrapper .item input {
flex: 1;
height: 100%;
margin-left: 20rpx;
text-align: right;
}
.order-submission .wrapper .item .placeholder {
color: #ccc;
}
.order-submission .wrapper .item .list {
margin-top: 35rpx;
}
.order-submission .wrapper .item .list .payItem {
border: 1px solid #eee;
border-radius: 6rpx;
height: 86rpx;
width: 100%;
box-sizing: border-box;
margin-top: 20rpx;
font-size: 28rpx;
color: #282828;
}
.order-submission .wrapper .item .list .payItem.on {
border-color: var(--view-theme);
color: var(--view-theme);
}
.order-submission .wrapper .item .list .payItem .name {
width: 50%;
text-align: center;
border-right: 1px solid #eee;
justify-content: left;
padding-left: 80rpx;
}
.order-submission .wrapper .item .list .payItem .name .iconfont {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
text-align: center;
line-height: 44rpx;
background-color: #fe960f;
color: #fff;
font-size: 30rpx;
margin-right: 15rpx;
}
.order-submission .wrapper .item .list .payItem .name .iconfont.icon-weixin2 {
background-color: #41b035;
}
.order-submission .wrapper .item .list .payItem .name .iconfont.icon-icon34 {
background-color: #4295D5;
}
.order-submission .wrapper .item .list .payItem .tip {
width: 49%;
text-align: center;
font-size: 26rpx;
color: #aaa;
}
.order-submission .moneyList {
margin-top: 12rpx;
background-color: #fff;
padding: 30rpx;
}
.order-submission .moneyList .item {
font-size: 28rpx;
color: #282828;
}
.order-submission .moneyList .item~.item {
margin-top: 20rpx;
}
.order-submission .moneyList .item .money {
color: #868686;
}
.order-submission .footer {
width: 100%;
height: 100rpx;
height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
background-color: #fff;
padding: 0 30rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
z-index: 30;
.footer_count {
font-size: 28rpx;
}
.coupon_price {
color: #999999;
font-size: 20rpx;
margin-top: 10rpx;
text {
color: #282828;
padding: 2rpx 10rpx;
background: #F5F5F5;
border-radius: 26rpx;
margin-left: 20rpx;
line-height: 30rpx;
height: 30rpx;
display: inline-block;
}
}
}
.pColor {
color: var(--view-priceColor);
}
.order-submission .footer .settlement {
font-size: 30rpx;
color: #fff;
width: 240rpx;
height: 70rpx;
background-color: var(--view-theme);
border-radius: 50rpx;
text-align: center;
line-height: 70rpx;
&.disabled {
background-color: #cccccc;
}
}
.storeinfo-wrapper {
.store-item {
margin-top: 12rpx;
background-color: #fff;
.store-title {
display: flex;
align-items: center;
padding: 28rpx 30rpx;
.icon-shangjiadingdan {
font-size: 32rpx;
}
.icon-xiangyou {
font-size: 26rpx;
color: #999;
}
.txt {
margin: 0 8rpx;
}
}
.product-item {
display: flex;
padding: 25rpx 30rpx;
border-top: 1px solid #F0F0F0;
.img-box {
width: 130rpx;
height: 130rpx;
image {
width: 130rpx;
height: 130rpx;
border-radius: 16rpx;
}
}
.content {
position: relative;
width: 550rpx;
margin-left: 30rpx;
font-size: 28rpx;
color: #282828;
overflow: hidden;
&.event_content {
.line1 {
width: 360rpx;
}
.price {
position: absolute;
top: 0;
right: 0;
margin-top: 0;
text {
display: block;
text-align: right;
}
}
}
.label {
margin-top: 10rpx;
color: #868686;
font-size: 20rpx;
}
.price {
margin-top: 20rpx;
color: var(--view-priceColor);
position: relative;
text {
margin-left: 10rpx;
color: #999;
}
.delivery_type {
float: right;
text {
color: var(--view-priceColor);
font-size: 20rpx;
}
}
}
}
}
}
}
uni-checkbox-group,
.checkgroup {
width: 100%;
.checkbox {
float: right;
}
}
.total {
display: flex;
justify-content: flex-end;
padding-right: 30rpx;
padding-bottom: 30rpx;
font-size: 26rpx;
color: #282828;
.price {
margin-left: 10rpx;
color: var(--view-priceColor);
font-size: 28rpx;
font-weight: bold;
text {
font-size: 20rpx;
}
}
}
.red_packet {
color: #ff5c2d !important;
background-color: rgba(#ff5c2d, 0.3);
border-radius: 60rpx;
padding: 5rpx 10rpx;
padding-left: 20rpx;
font-size: 25rpx;
}
</style>