584 lines
18 KiB
Vue
584 lines
18 KiB
Vue
<template>
|
||
<view class="pay-popup popup" catchtouchmove="true" :class="(value && complete) ? 'show' : 'none'"
|
||
@touchmove.stop.prevent="moveHandle">
|
||
<!-- 页面内容开始 -->
|
||
<view class="mask" @click="close('mask')"></view>
|
||
<!-- 页面开始 -->
|
||
<view class="confirm" v-if="!showPayPopup">
|
||
<view class="layer attr-content" :style="'border-radius: 10rpx 10rpx 0 0;'">
|
||
<view class="specification-wrapper">
|
||
<scroll-view class="specification-wrapper-content" scroll-y="true">
|
||
<view class="specification-header">
|
||
<view class="specification-name">支付确认</view>
|
||
</view>
|
||
<view class="specification-content">
|
||
<view v-if="payInfo.isLogin && ((parseFloat(payInfo.totalAmount) - (parseFloat(payInfo.totalAmount) * parseFloat(payInfo.payDiscount))) > 0)" class="pay-item">
|
||
<view class="item-point">
|
||
<view class="title">
|
||
<text class="iconfont icon-success"></text>
|
||
<text v-if="payInfo.payDiscount < 1" class="point-amount">会员{{parseFloat(payInfo.payDiscount * 10).toFixed(2)}}折优惠<text class="amount">￥{{(parseFloat(payInfo.totalAmount) - ((parseFloat(payInfo.totalAmount) * parseFloat(payInfo.payDiscount)))).toFixed(2)}}</text></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="payInfo.isLogin && payInfo.pointAmount >= 0.01 && payInfo.canUsedAsMoney == 'true'" class="pay-item">
|
||
<view class="item-point">
|
||
<view class="title">
|
||
<text class="iconfont icon-success"></text>
|
||
<text v-if="payInfo.usePoint > 0" class="point-amount">使用{{ payInfo.usePoint.toFixed(0) }}积分抵扣</text>
|
||
<text v-if="payInfo.usePoint > 0" class="amount">￥{{ parseFloat(payInfo.pointAmount).toFixed(2) }}</text>
|
||
<text v-if="payInfo.usePoint < 1" class="point-amount">不使用积分抵扣</text>
|
||
<text v-if="payInfo.maxPoint > 0" class="modify" @click="modifyPoint">修改>></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="!payInfo.isLogin && payInfo.maxPoint < 1" class="pay-item">
|
||
<view class="item-point">
|
||
<view class="title">
|
||
<text class="iconfont icon-success"></text>
|
||
<text>会员可使用积分进行抵扣哦~</text>
|
||
<text class="modify" @click="onGetLogin">去登录>></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="payInfo.isLogin && payInfo.couponInfo !== null" class="pay-item">
|
||
<view class="item-point">
|
||
<view class="title">
|
||
<text class="iconfont icon-success"></text>
|
||
<text v-if="payInfo.couponAmount > 0" class="point-amount">使用卡券抵扣</text>
|
||
<text v-if="payInfo.couponAmount > 0" class="amount">￥{{ parseFloat(payInfo.couponAmount).toFixed(2) }}</text>
|
||
<text v-if="payInfo.couponAmount <= 0 && payInfo.couponInfo.amount" class="point-amount">不使用卡券抵扣？</text>
|
||
<text v-if="payInfo.couponInfo.amount" class="modify" @click="modifyCoupon">修改>></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pay-item">
|
||
<view class="item-amount">
|
||
<view class="title">
|
||
<text class="iconfont icon-success"></text>
|
||
实付金额：<text class="amount">￥{{ (parseFloat(payInfo.payAmount)).toFixed(2) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="close" @click="close('close')" v-if="showClose">
|
||
<image class="close-item" :src="closeImage"></image>
|
||
</view>
|
||
</view>
|
||
<view class="btn-wrapper">
|
||
<view class="sure" @click="toPay">确认支付</view>
|
||
</view>
|
||
<!-- 页面结束 -->
|
||
</view>
|
||
<view class="point-popup">
|
||
<uni-popup ref="pointPopup" type="dialog">
|
||
<uni-popup-dialog mode="input" focus="false" v-model="payInfo.usePoint.toFixed(0)" title="修改积分数量" type="info" placeholder="请输入积分数量" :before-close="true" @close="closeDialog" @confirm="doUsePoint"></uni-popup-dialog>
|
||
</uni-popup>
|
||
</view>
|
||
<view class="coupon-popup">
|
||
<uni-popup ref="couponPopup" type="dialog">
|
||
<uni-popup-dialog focus="false" v-if="payInfo.couponAmount > 0" v-model="payInfo.usePoint.toFixed(0)" title="确认信息" content="不使用卡券进行抵扣？" type="info" :before-close="true" @close="closeDialog" @confirm="doUseCoupon"></uni-popup-dialog>
|
||
<uni-popup-dialog focus="false" v-if="payInfo.couponAmount <= 0 && payInfo.couponInfo !== null" title="确认信息" :content="'使用卡券最多可抵扣￥'+ payInfo.couponInfo.amount" type="info" :before-close="true" @close="closeDialog" @confirm="doUseCoupon"></uni-popup-dialog>
|
||
</uni-popup>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付方式弹窗 -->
|
||
<u-popup v-model="showPayPopup" mode="bottom" :closeable="true">
|
||
<view class="pay-type-popup">
|
||
<view class="title">请选择支付方式</view>
|
||
<view class="pop-content">
|
||
<!-- 微信支付 -->
|
||
<view class="pay-item dis-flex flex-x-between" @click="payNow(PayTypeEnum.WECHAT.value)">
|
||
<view class="item-left dis-flex flex-y-center">
|
||
<view class="item-left_icon wechat">
|
||
<text class="iconfont icon-weixinzhifu"></text>
|
||
</view>
|
||
<view class="item-left_text">
|
||
<text>{{ PayTypeEnum.WECHAT.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 余额支付 -->
|
||
<view class="pay-item dis-flex flex-x-between" @click="payNow(PayTypeEnum.BALANCE.value)">
|
||
<view class="item-left dis-flex flex-y-center">
|
||
<view class="item-left_icon balance">
|
||
<text class="iconfont icon-qiandai"></text>
|
||
</view>
|
||
<view class="item-left_text">
|
||
<text>{{ PayTypeEnum.BALANCE.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 页面内容结束 -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as SettlementApi from '@/api/settlement'
|
||
import PayTypeEnum from '@/common/enum/order/PayType'
|
||
import { wxPayment } from '@/utils/app'
|
||
|
||
var that; // 当前页面对象
|
||
var vk; // 自定义函数集
|
||
export default {
|
||
name: 'PayPopup',
|
||
props: {
|
||
// true 组件显示 false 组件隐藏
|
||
value: {
|
||
Type: Boolean,
|
||
default: false
|
||
},
|
||
// vk云函数路由模式参数开始-----------------------------------------------------------
|
||
// 支付信息
|
||
payInfo: {
|
||
Type: Object,
|
||
default: {}
|
||
},
|
||
// vk云函数路由模式参数结束-----------------------------------------------------------
|
||
// 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true
|
||
maskCloseAble: {
|
||
Type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否显示右上角关闭按钮
|
||
showClose: {
|
||
Type: Boolean,
|
||
default: true
|
||
},
|
||
// 关闭按钮的图片地址
|
||
closeImage: {
|
||
Type: String,
|
||
default: "https://img.alicdn.com/imgextra/i1/121022687/O1CN01ImN0O11VigqwzpLiK_!!121022687.png"
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
complete: false, // 组件是否加载完成
|
||
usePoint: '',
|
||
showPayPopup: false,
|
||
PayTypeEnum
|
||
};
|
||
},
|
||
mounted() {
|
||
that = this;
|
||
},
|
||
methods: {
|
||
// 初始化
|
||
init() {
|
||
//empty
|
||
},
|
||
async open() {
|
||
that.complete = true;
|
||
that.$emit("open", true);
|
||
that.$emit("input", true);
|
||
},
|
||
// 监听 - 弹出层收起
|
||
close(s) {
|
||
if (s == "close") {
|
||
that.$emit("input", false);
|
||
that.$emit("close", "close");
|
||
} else if (s == "mask") {
|
||
if (that.maskCloseAble) {
|
||
that.$emit("input", false);
|
||
that.$emit("close", "mask");
|
||
}
|
||
}
|
||
},
|
||
|
||
moveHandle() {
|
||
// 禁止父元素滑动
|
||
},
|
||
toPay() {
|
||
that.showPayPopup = true
|
||
},
|
||
// 立即支付
|
||
payNow(payType) {
|
||
const app = this
|
||
// 请求api
|
||
let couponId = 0
|
||
if (app.payInfo.couponAmount > 0) {
|
||
couponId = app.payInfo.couponInfo.userCouponId;
|
||
}
|
||
SettlementApi.submit(0, "", "payment", app.payInfo.remark, parseFloat(app.payInfo.totalAmount).toFixed(2), parseInt(app.payInfo.usePoint), couponId, "", 0, 0, 0, "", payType)
|
||
.then(result => app.onSubmitCallback(result))
|
||
.catch(err => {
|
||
if (err.result) {
|
||
const errData = err.result.data;
|
||
if (errData) {
|
||
return false;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 去登录
|
||
onGetLogin() {
|
||
uni.navigateTo({
|
||
url: "/pages/login/index"
|
||
})
|
||
},
|
||
// 订单提交成功后回调
|
||
onSubmitCallback(result) {
|
||
const app = this
|
||
if (result.code != '200') {
|
||
if (result.message) {
|
||
app.$error(result.message);
|
||
} else {
|
||
app.$error('支付失败');
|
||
}
|
||
return false
|
||
}
|
||
|
||
// 微信支付
|
||
if (result.data.payType == PayTypeEnum.WECHAT.value) {
|
||
wxPayment(result.data.payment)
|
||
.then(() => {
|
||
app.$navTo(`pages/pay/result`, { amount: parseFloat(result.data.orderInfo.amount).toFixed(2), point: parseInt(result.data.orderInfo.usePoint)})
|
||
})
|
||
.catch(err =>
|
||
app.$error('订单未支付'))
|
||
.finally(() => {
|
||
//empty
|
||
})
|
||
}
|
||
|
||
// 余额支付
|
||
if (result.data.payType == PayTypeEnum.BALANCE.value) {
|
||
if (result.data.orderInfo.payStatus == 'B') {
|
||
app.$navTo(`pages/pay/result`, { amount: parseFloat(result.data.orderInfo.amount).toFixed(2), point: parseInt(result.data.orderInfo.usePoint)})
|
||
} else {
|
||
if (result.message) {
|
||
app.$error(result.message);
|
||
} else {
|
||
app.$error('支付失败');
|
||
}
|
||
}
|
||
}
|
||
},
|
||
modifyPoint() {
|
||
this.$refs.pointPopup.open('top')
|
||
},
|
||
modifyCoupon() {
|
||
this.$refs.couponPopup.open('top')
|
||
},
|
||
doUsePoint(usePoint) {
|
||
if (usePoint.length < 1) {
|
||
usePoint = 0
|
||
}
|
||
if (!(/(^[0-9]\d*$)/.test(usePoint))) {
|
||
this.$error('请输入正整数')
|
||
return false
|
||
}
|
||
|
||
if (usePoint > this.payInfo.maxPoint) {
|
||
if (this.payInfo.maxPoint > 0) {
|
||
this.$error('最多使用' + this.payInfo.maxPoint + '积分')
|
||
} else {
|
||
this.$error('您暂无可用积分')
|
||
}
|
||
return false
|
||
}
|
||
|
||
this.payInfo.usePoint = usePoint
|
||
|
||
this.$emit('modifyChoice', this.payInfo)
|
||
this.$refs.pointPopup.close()
|
||
},
|
||
doUseCoupon() {
|
||
if (this.payInfo.couponAmount > 0) {
|
||
this.payInfo.couponAmount = 0
|
||
} else {
|
||
this.payInfo.couponAmount = this.payInfo.couponInfo.amount
|
||
}
|
||
this.$emit('modifyChoice', this.payInfo)
|
||
this.$refs.couponPopup.close()
|
||
},
|
||
closeDialog() {
|
||
this.$refs.pointPopup.close()
|
||
this.$refs.couponPopup.close()
|
||
},
|
||
// 弹窗
|
||
toast(title, icon) {
|
||
uni.showToast({
|
||
title: title,
|
||
icon: icon
|
||
});
|
||
}
|
||
},
|
||
watch: {
|
||
value: function(val) {
|
||
if (val) {
|
||
that.open();
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 弹出层-支付方式
|
||
.pay-type-popup {
|
||
padding: 25rpx 25rpx 70rpx 25rpx;
|
||
.title {
|
||
font-size: 30rpx;
|
||
margin-bottom: 50rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.pop-content {
|
||
min-height: 140rpx;
|
||
padding: 0 20rpx;
|
||
|
||
.pay-item {
|
||
padding: 30rpx;
|
||
font-size: 30rpx;
|
||
background: #fff;
|
||
border: 1rpx solid #00acac;
|
||
border-radius: 8rpx;
|
||
color: #888;
|
||
margin-bottom: 12rpx;
|
||
text-align: center;
|
||
|
||
.item-left_icon {
|
||
margin-right: 20rpx;
|
||
font-size: 48rpx;
|
||
|
||
&.wechat {
|
||
color: #00c800;
|
||
}
|
||
|
||
&.balance {
|
||
color: #00acac;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-popup {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 21;
|
||
overflow: hidden;
|
||
|
||
&.show {
|
||
display: block;
|
||
|
||
.mask {
|
||
animation: showPopup 0.2s linear both;
|
||
}
|
||
|
||
.layer {
|
||
animation: showLayer 0.2s linear both;
|
||
}
|
||
}
|
||
|
||
&.hide {
|
||
.mask {
|
||
animation: hidePopup 0.2s linear both;
|
||
}
|
||
|
||
.layer {
|
||
animation: hideLayer 0.2s linear both;
|
||
}
|
||
}
|
||
|
||
&.none {
|
||
display: none;
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
background-color: rgba(0, 0, 0, 0.65);
|
||
}
|
||
|
||
.layer {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
position: fixed;
|
||
z-index: 99;
|
||
bottom: 0;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
background-color: #fff;
|
||
|
||
.specification-wrapper {
|
||
width: 100%;
|
||
padding: 30rpx 25rpx 10rpx 25rpx;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
|
||
.specification-wrapper-content {
|
||
width: 100%;
|
||
max-height: 900rpx;
|
||
min-height: 300rpx;
|
||
|
||
&::-webkit-scrollbar {
|
||
/*隐藏滚轮*/
|
||
display: none;
|
||
}
|
||
|
||
.specification-header {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
position: relative;
|
||
margin-bottom: 40rpx;
|
||
text-align: center;
|
||
.specification-name {
|
||
font-weight: bold;
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
padding: 10rpx;
|
||
}
|
||
}
|
||
|
||
.specification-content {
|
||
text-align: left;
|
||
.pay-item {
|
||
padding: 35rpx 30rpx 30rpx 100rpx;
|
||
cursor: pointer;
|
||
margin-bottom: 8rpx;
|
||
border: solid 3rpx #cccccc;
|
||
border-radius: 10rpx;
|
||
.iconfont {
|
||
margin-right: 10rpx;
|
||
color: #00acac
|
||
}
|
||
.item-point {
|
||
.amount {
|
||
color: #f9211c;
|
||
}
|
||
.modify {
|
||
margin-left: 30rpx;
|
||
color: #00acac;
|
||
}
|
||
}
|
||
.item-amount {
|
||
font-size: 30rpx;
|
||
.amount {
|
||
color: #f9211c;
|
||
font-size: 35rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
top: 30rpx;
|
||
right: 25rpx;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
text-align: center;
|
||
line-height: 50rpx;
|
||
|
||
.close-item {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-wrapper {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
flex: 0 0 120rpx;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 26rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 60rpx;
|
||
.layer-btn {
|
||
width: 335rpx;
|
||
height: 76rpx;
|
||
border-radius: 38rpx;
|
||
color: #fff;
|
||
line-height: 76rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
|
||
&.add-cart {
|
||
background: #ffbe46;
|
||
}
|
||
|
||
&.buy {
|
||
background: #fe560a;
|
||
}
|
||
}
|
||
|
||
.sure {
|
||
width: 698rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
color: #fff;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
background:linear-gradient(to right, #f9211c, #ff6335)
|
||
}
|
||
|
||
.sure.add-cart {
|
||
background: #ff9402;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes showPopup {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes hidePopup {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes showLayer {
|
||
0% {
|
||
transform: translateY(120%);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0%);
|
||
}
|
||
}
|
||
|
||
@keyframes hideLayer {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(120%);
|
||
}
|
||
}
|
||
}
|
||
</style>
|