You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

584 lines
18 KiB
Vue

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<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 $fuint-theme;
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: $fuint-theme;
}
}
}
}
}
.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: $fuint-theme
}
.item-point {
.amount {
color: #f9211c;
}
.modify {
margin-left: 30rpx;
color: $fuint-theme;
}
}
.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: $fuint-theme;
}
}
}
@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>