init
This commit is contained in:
砂糖
524
fuintUniapp/components/grade-popup/index.vue
Normal file
524
fuintUniapp/components/grade-popup/index.vue
Normal file
@@ -0,0 +1,524 @@
|
||||
<template>
|
||||
<view class="grade-popup popup" catchtouchmove="true" :class="(value && complete) ? 'show' : 'none'"
|
||||
@touchmove.stop.prevent="moveHandle">
|
||||
|
||||
<view class="mask" @click="close('mask')"></view>
|
||||
<!-- 要购买的等级信息确认 start -->
|
||||
<view v-if="!isShowPay" 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"><text class="price" v-if="memberGrade.catchValue > 0">￥{{ memberGrade.catchValue }}</text>购买{{ memberGrade.name }}</view>
|
||||
</view>
|
||||
<view class="specification-content">
|
||||
<view class="grade-item" v-if="memberGrade.discount > 0">
|
||||
<view class="item-rule"><view class="title">买单折扣：</view>{{ memberGrade.discount }}折</view>
|
||||
</view>
|
||||
<view class="grade-item" v-if="memberGrade.speedPoint > 0">
|
||||
<view class="item-rule"><view class="title">积分加速：</view>{{ memberGrade.speedPoint }}倍</view>
|
||||
</view>
|
||||
<view class="grade-item">
|
||||
<view class="item-rule">
|
||||
<view class="title">有效期限：</view>
|
||||
<text v-if="memberGrade.validDay > 0">{{ memberGrade.validDay }}天</text>
|
||||
<text v-else>永久</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grade-description">
|
||||
<view class="item-rule">
|
||||
<view class="title">权益说明：</view>
|
||||
<view>{{ memberGrade.userPrivilege ? memberGrade.userPrivilege : '暂无'}}</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="buyNow">立即购买</view>
|
||||
</view>
|
||||
<!-- 页面结束 -->
|
||||
</view>
|
||||
<!-- 要购买的等级信息确认 end -->
|
||||
|
||||
<!-- 支付信息确认 start -->
|
||||
<view class="confirm" v-if="isShowPay">
|
||||
<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="couponInfo && couponInfo.amount" class="pay-item">
|
||||
<view class="item-point">
|
||||
<view class="title" @click="doUseCoupon">
|
||||
<text v-if="useCoupon" class="iconfont is-use icon-success"></text>
|
||||
<text v-if="!useCoupon" class="iconfont icon-success"></text>
|
||||
<text class="point-amount">使用卡券抵扣</text>
|
||||
<text class="amount">￥{{ couponInfo.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay-item">
|
||||
<view class="item-amount">
|
||||
<view class="title">
|
||||
实付金额：<text class="amount">￥{{ ((parseFloat(memberGrade.catchValue) - parseFloat(useCouponInfo.amount)) >= 0 ? (parseFloat(memberGrade.catchValue) - parseFloat(useCouponInfo.amount)) : 0.0.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="doBuy">确认支付</view>
|
||||
</view>
|
||||
<!-- 页面结束 -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付信息确认 end -->
|
||||
|
||||
</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: 'GradePopup',
|
||||
props: {
|
||||
// true 组件显示 false 组件隐藏
|
||||
value: {
|
||||
Type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// vk云函数路由模式参数开始-----------------------------------------------------------
|
||||
// 等级信息
|
||||
memberGrade: {
|
||||
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, // 组件是否加载完成
|
||||
isShowPay: false, // true 显示 false 隐藏
|
||||
useCoupon: true, // 是否使用卡券
|
||||
useCouponInfo: { amount: 0, id: '' }, // 使用的卡券
|
||||
couponInfo: null // 可用卡券
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
},
|
||||
methods: {
|
||||
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");
|
||||
that.isShowPay = false;
|
||||
that.useCoupon = true;
|
||||
} else if (s == "mask") {
|
||||
if (that.maskCloseAble) {
|
||||
that.$emit("input", false);
|
||||
that.$emit("close", "mask");
|
||||
}
|
||||
}
|
||||
},
|
||||
moveHandle() {
|
||||
//禁止父元素滑动
|
||||
},
|
||||
// 立即购买
|
||||
buyNow() {
|
||||
this.prePay();
|
||||
},
|
||||
// 是否使用卡券
|
||||
doUseCoupon() {
|
||||
if (this.useCoupon) {
|
||||
this.useCoupon = false;
|
||||
this.useCouponInfo = { amount: 0, id: '' };
|
||||
} else {
|
||||
this.useCoupon = true;
|
||||
this.useCouponInfo = this.couponInfo;
|
||||
}
|
||||
},
|
||||
// 确认购买
|
||||
doBuy() {
|
||||
const app = this
|
||||
let couponId = "";
|
||||
if (app.useCoupon) {
|
||||
couponId = app.couponInfo ? app.couponInfo.userCouponId : 0;
|
||||
}
|
||||
// 请求api
|
||||
SettlementApi.submit(app.memberGrade.id, "", "member", "", "", 0, couponId, "", 0, 0, 0, "", "JSAPI")
|
||||
.then(result => app.onSubmitCallback(result))
|
||||
.catch(err => {
|
||||
if (err.result) {
|
||||
const errData = err.result.data
|
||||
if (errData) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 支付前查询
|
||||
prePay() {
|
||||
const app = this
|
||||
// 请求api
|
||||
SettlementApi.prePay({ type: 'memberGrade' })
|
||||
.then(result => {
|
||||
if (result.data) {
|
||||
if (result.data.canUseCouponInfo) {
|
||||
app.couponInfo = result.data.canUseCouponInfo;
|
||||
if (app.useCoupon) {
|
||||
app.useCouponInfo = app.couponInfo;
|
||||
}
|
||||
}
|
||||
app.isShowPay = true;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.result) {
|
||||
const errData = err.result.data;
|
||||
if (errData) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 订单提交成功后回调
|
||||
onSubmitCallback(result) {
|
||||
const app = this
|
||||
// 微信支付
|
||||
if (result.data.payType == PayTypeEnum.WECHAT.value) {
|
||||
wxPayment(result.data.payment)
|
||||
.then(() => {
|
||||
uni.showModal({
|
||||
title: '支付结果',
|
||||
content: '支付成功',
|
||||
showCancel: false,
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
app.$router.go(0);
|
||||
app.$emit('onPaySuccess');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(err => app.$error('支付失败'))
|
||||
.finally(() => {
|
||||
//empty
|
||||
})
|
||||
}
|
||||
|
||||
// 余额支付
|
||||
if (result.data.payType == PayTypeEnum.BALANCE.value) {
|
||||
app.$error('支付成功');
|
||||
app.$emit('onPaySuccess');
|
||||
}
|
||||
},
|
||||
// 弹窗
|
||||
toast(title, icon) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: icon
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: function(val) {
|
||||
if (val) {
|
||||
that.open();
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grade-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: 1200rpx;
|
||||
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 {
|
||||
.price {
|
||||
color: #f03c3c;
|
||||
}
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.specification-content {
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
.grade-item {
|
||||
.title {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
float: left;
|
||||
}
|
||||
display: flex;
|
||||
height: 100rpx;
|
||||
padding-top:30rpx;
|
||||
cursor:pointer;
|
||||
.item-rule {
|
||||
padding: 20rpx;
|
||||
border-bottom: solid 1px #cccccc;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.grade-description {
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
min-height: 100rpx;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.amount {
|
||||
color: #f03c3c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.is-use {
|
||||
color: $fuint-theme
|
||||
}
|
||||
.item-left_icon {
|
||||
margin-right: 20rpx;
|
||||
font-size: 48rpx;
|
||||
|
||||
&.wechat {
|
||||
color: #00c800;
|
||||
}
|
||||
|
||||
&.balance {
|
||||
color: $fuint-theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 120rpx;
|
||||
.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>
|
||||
Reference in New Issue
Block a user