初始上传
This commit is contained in:
1023
addon/cashier/source/os/components/ns-payment/index.js
Executable file
1023
addon/cashier/source/os/components/ns-payment/index.js
Executable file
File diff suppressed because it is too large
Load Diff
786
addon/cashier/source/os/components/ns-payment/index.scss
Executable file
786
addon/cashier/source/os/components/ns-payment/index.scss
Executable file
@@ -0,0 +1,786 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-wrap {
|
||||
.header {
|
||||
height: 0.66rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 0.15rem 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
margin-right: 0.15rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
background-color: #f7f8fa;
|
||||
padding-bottom: 0.15rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
/deep/ .uni-scroll-view-content {
|
||||
margin: 0 0.15rem;
|
||||
width: calc(100% - 0.3rem);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.payment-money {
|
||||
text-align: right;
|
||||
font-size: 0.2rem;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
line-height: 0.6rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 0.6rem;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
.uni-flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.type-item {
|
||||
padding: 0.2rem 0.1rem;
|
||||
background: #fff;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.16rem;
|
||||
margin: 0 0.1rem 0.1rem 0;
|
||||
width: calc((100% - 0.86rem) / 3);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 0.02rem;
|
||||
|
||||
&.account {
|
||||
width: calc((100% - 0.86rem) / 2);
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
font-size: 0.3rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fe2278;
|
||||
margin-left: 0.05rem;
|
||||
}
|
||||
|
||||
.iconxuanzhong {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $primary-color;
|
||||
|
||||
.iconxuanzhong {
|
||||
display: block;
|
||||
right: -0.11rem;
|
||||
bottom: -0.01rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-type {
|
||||
.type-item {
|
||||
padding: 0.15rem 0.1rem;
|
||||
}
|
||||
|
||||
.pay-icon {
|
||||
color: #fff;
|
||||
background: #f0f0f0;
|
||||
width: 0.3rem;
|
||||
height: 0.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.16rem;
|
||||
border-radius: 0.05rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
padding-top: 0.15rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.scancode {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 0 0 0.1rem;
|
||||
min-width: 1rem;
|
||||
}
|
||||
|
||||
.print-ticket {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bill-wrap {
|
||||
width: 3rem;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 0.2rem;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
line-height: 0.6rem;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0;
|
||||
margin: 0 0.15rem;
|
||||
display: block;
|
||||
height: auto;
|
||||
|
||||
.block-title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 0.35rem;
|
||||
margin-top: 0.2rem;
|
||||
|
||||
text {
|
||||
padding: 0 0.2rem;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
border-top: 0.01rem dashed #e6e6e6;
|
||||
}
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
margin-top: 0.2rem;
|
||||
|
||||
.text {
|
||||
color: #fe2278;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remark-info {
|
||||
padding: 0.1rem;
|
||||
background-color: var(--primary-color-light-9);
|
||||
color: $primary-color;
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-result {
|
||||
.body {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
text-align: center;
|
||||
|
||||
&.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.iconfont {
|
||||
font-size: 1rem;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.msg {
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.16rem;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 0.66rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 0.01rem solid #e6e6e6;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
margin: 0 0 0 0.15rem;
|
||||
width: auto;
|
||||
min-width: 1.6rem;
|
||||
height: 0.45rem;
|
||||
line-height: 0.45rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.money-wrap {
|
||||
background: #fff;
|
||||
border-radius: 0.05rem;
|
||||
|
||||
.head {
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
.iconguanbi1 {
|
||||
position: absolute;
|
||||
right: 0.15rem;
|
||||
font-size: 0.22rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
display: flex;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
height: 0.6rem;
|
||||
align-items: center;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0 0.15rem;
|
||||
|
||||
.unit {
|
||||
font-size: 0.25rem;
|
||||
}
|
||||
|
||||
.money {
|
||||
margin-left: 0.05rem;
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard-wrap {
|
||||
width: 4rem;
|
||||
padding: 0 0.2rem 0.3rem 0.2rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-wrap {
|
||||
background: #fff;
|
||||
width: 6rem;
|
||||
border-radius: 0.05rem;
|
||||
|
||||
.head {
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
.iconguanbi1 {
|
||||
position: absolute;
|
||||
right: 0.15rem;
|
||||
font-size: 0.22rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
padding: 0.1rem 0.15rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
margin: 0 0.1rem 0.1rem 0;
|
||||
padding: 0.1rem 0;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
width: calc((100% - 0.14rem) / 2);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.iconxuanzhong {
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: -0.01rem;
|
||||
bottom: -0.01rem;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $primary-color;
|
||||
|
||||
.iconxuanzhong {
|
||||
display: block;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2n + 2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.money {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 0.6rem;
|
||||
min-width: 1rem;
|
||||
font-size: 0.2rem;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: 0.16rem;
|
||||
margin-top: 0.05rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 0 0.1rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time,
|
||||
.limit {
|
||||
font-size: 0.12rem;
|
||||
color: #999;
|
||||
line-height: 1;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe-verify-popup {
|
||||
width: 4.4rem;
|
||||
height: 3.1rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
|
||||
.header {
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.type-wrap {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
margin-left: 0.15rem;
|
||||
font-size: 0.16rem;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
font-size: 0.18rem;
|
||||
color: $primary-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconguanbi1 {
|
||||
position: absolute;
|
||||
right: 0.15rem;
|
||||
top: 0;
|
||||
font-size: 0.22rem;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 0.3rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.member-code-hint{
|
||||
margin-top: .3rem;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
font-size: 0.25rem;
|
||||
font-weight: bold;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
|
||||
.sms-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.15rem;
|
||||
border-bottom: 0.01rem solid #eee;
|
||||
padding: 0.15rem 0;
|
||||
|
||||
view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
margin: 0 0.1rem 0 0;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
text {
|
||||
position: absolute;
|
||||
right: 0.1rem;
|
||||
font-size: 0.2rem;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.send-tip {
|
||||
color: $primary-color;
|
||||
font-size: 0.13rem;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
margin-top: 0.3rem;
|
||||
line-height: 0.4rem;
|
||||
}
|
||||
|
||||
.scancode-wrap {
|
||||
text-align: center;
|
||||
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
|
||||
view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
input {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
height: 0.5rem;
|
||||
border: 0.01rem solid #cccccc;
|
||||
text-align: center;
|
||||
padding: 0 0.1rem;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.focus {
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0 0 0.02rem 0.02rem var(--primary-color-light-7);
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
position: absolute;
|
||||
right: 0.1rem;
|
||||
font-size: 0.2rem;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
margin: 0 0 0 0.1rem;
|
||||
line-height: 0.5rem;
|
||||
width: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 3rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.third-popup {
|
||||
width: 4rem;
|
||||
height: 5rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.head {
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
font-size: 0.25rem;
|
||||
}
|
||||
|
||||
.iconguanbi1 {
|
||||
position: absolute;
|
||||
right: 0.15rem;
|
||||
font-size: 0.22rem;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
text-align: center;
|
||||
font-size: 0.18rem;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.scan-code-type {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 0.2rem;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.type-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: 0.5rem;
|
||||
font-size: 0.16rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 0.03rem solid #f5f5f5;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
border-bottom: 0.03rem solid $primary-color;
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
width: 0.01rem;
|
||||
height: 60%;
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.qrcode-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.empty {
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qrcode-item {
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
padding: 0.1rem;
|
||||
box-shadow: 0 0.02rem 0.1rem 0 rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.qrcode {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 0.25rem;
|
||||
position: absolute !important;
|
||||
z-index: 5;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scancode-wrap {
|
||||
view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: 3.3rem;
|
||||
height: 0.5rem;
|
||||
border: 0.01rem solid #cccccc;
|
||||
text-align: center;
|
||||
padding: 0 0.1rem;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.focus {
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0 0 0.02rem 0.02rem var(--primary-color-light-7);
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
position: absolute;
|
||||
right: 0.1rem;
|
||||
font-size: 0.2rem;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 3.3rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remark-wrap {
|
||||
width: 6rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.04rem;
|
||||
box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0.15rem;
|
||||
height: 0.45rem;
|
||||
line-height: 0.45rem;
|
||||
border-bottom: 0.01rem solid #e8eaec;
|
||||
|
||||
.iconfont {
|
||||
font-size: $uni-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0.15rem 0.15rem 0.1rem;
|
||||
|
||||
textarea {
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
width: 100%;
|
||||
padding: 0.1rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 0.5rem;
|
||||
padding-bottom: 0.05rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
366
addon/cashier/source/os/components/ns-payment/ns-payment.vue
Executable file
366
addon/cashier/source/os/components/ns-payment/ns-payment.vue
Executable file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<view class="container" v-if="payInfo">
|
||||
<view class="uni-flex uni-column payment-wrap" v-show="payStatus == 'pay'">
|
||||
<view class="header">结算</view>
|
||||
<view class="body">
|
||||
<view class="info-wrap">
|
||||
<scroll-view scroll-y="true" class="info">
|
||||
<view class="payment-money">费用总额：￥{{ payInfo.original_money | moneyFormat }}</view>
|
||||
<block v-if="promotionShow">
|
||||
<view class="title">营销优惠</view>
|
||||
<view class="uni-flex">
|
||||
<view class="type-item" :class="{ disabled: payInfo.offset.coupon_array.member_coupon_list.length == 0, active: discount.coupon_id }" @click="selectCoupon" v-if="payInfo.offset.coupon_array">
|
||||
<view class="iconfont iconyouhuiquan"></view>
|
||||
<view class="name" v-show="!discount.coupon_id">
|
||||
优惠券
|
||||
<text class="text" v-if="payInfo.offset.coupon_array.member_coupon_list.length">
|
||||
（{{ payInfo.offset.coupon_array.member_coupon_list.length }}张可用）
|
||||
</text>
|
||||
</view>
|
||||
<view class="name" v-show="discount.coupon_id">
|
||||
优惠券抵扣
|
||||
<text class="text">{{ payInfo.coupon_money }}元</text>
|
||||
</view>
|
||||
<view class="iconfont iconxuanzhong"></view>
|
||||
</view>
|
||||
<view class="type-item" :class="{ active: discount.reduction }" @click="reduction" v-if="payInfo.collectmoney_config.reduction == 1">
|
||||
<view class="iconfont iconjianmianjine"></view>
|
||||
<view class="name" v-if="discount.reduction" @click.stop="openMoneyPopup({ title: '减免金额', money: $util.moneyFormat(discount.reduction), type: 'reduction' })">
|
||||
减免
|
||||
<text class="text">{{ discount.reduction }}元</text>
|
||||
</view>
|
||||
<view v-else class="name">减免金额</view>
|
||||
<view class="iconfont iconxuanzhong"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-if="payInfo.offset.point_array || payInfo.offset.balance">
|
||||
<view class="title">账户余额</view>
|
||||
<view class="uni-flex">
|
||||
<view class="type-item account" :class="{ active: discount.is_use_balance, disabled: balance == 0 }" @click="useBalance" v-if="payInfo.offset.balance">
|
||||
<view class="iconfont iconyue"></view>
|
||||
<view class="name" v-if="discount.is_use_balance">
|
||||
余额支付
|
||||
<text class="text">{{ payInfo.total_balance | moneyFormat }}元</text>
|
||||
</view>
|
||||
<view class="name" v-else>
|
||||
账户余额
|
||||
<text class="text" v-if="balance > 0">{{ balance | moneyFormat }}元</text>
|
||||
</view>
|
||||
<view class="iconfont iconxuanzhong"></view>
|
||||
</view>
|
||||
<view class="type-item account" :class="{ active: discount.is_use_point, disabled: payInfo.offset.point_array.point == 0 }" @click="usePoint" v-if="payInfo.offset.point_array">
|
||||
<view class="iconfont iconjifen1"></view>
|
||||
<view class="name" v-if="discount.is_use_point">
|
||||
积分抵扣
|
||||
<text class="text">{{ payInfo.point_money | moneyFormat }}元（{{ parseInt(payInfo.offset.point_array.point) }}积分）</text>
|
||||
</view>
|
||||
<view class="name" v-else>
|
||||
账户积分
|
||||
<text class="text" v-if="globalMemberInfo.point">{{ globalMemberInfo.point }}积分</text>
|
||||
</view>
|
||||
<view class="iconfont iconxuanzhong"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="title">支付方式</view>
|
||||
<view class="uni-flex pay-type">
|
||||
<block v-for="(item, key,index) in payType" :key="key">
|
||||
<view class="type-item" @click="switchPayType(item.type)" :class="{ active: item.type == type }">
|
||||
<view class="pay-icon iconfont" :style="{ background: item.background }" :class="item.icon"></view>
|
||||
<view class="name">{{ item.name }} [{{ item.hotKey }}]</view>
|
||||
<view class="iconfont iconxuanzhong"></view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="type-item" @click="switchMemberCode()" :class="{ active: discount.is_use_balance}">
|
||||
<view class="pay-icon iconfont iconhuiyuanma" :style="{ background: '#F7861E' }"></view>
|
||||
<view class="name">
|
||||
<text>会员码 [M]</text>
|
||||
<template v-if="discount.is_use_balance">
|
||||
<text style="margin-left: 0.05rem;">(</text>
|
||||
<text style="margin-left: 0.05rem;">使用余额</text>
|
||||
<text class="text">{{ payInfo.total_balance | moneyFormat }}元</text>
|
||||
<text style="margin-left: 0.05rem;">)</text>
|
||||
</template>
|
||||
</view>
|
||||
<!-- <view class="iconfont iconxuanzhong"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="remark-info" v-if="payInfo.remark">备注：{{ payInfo.remark }}</view>
|
||||
</scroll-view>
|
||||
<view class="button-wrap">
|
||||
<view class="print-ticket">
|
||||
<checkbox-group @change="autoPrintTicket = !autoPrintTicket">
|
||||
<label>
|
||||
<checkbox :checked="autoPrintTicket" style="transform:scale(0.7)" />
|
||||
<text>打印小票</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<button class="default-btn" @click="openRemark">备注</button>
|
||||
<button class="default-btn cancel-btn" plain @click="cancelPayment">取消 [Esc]</button>
|
||||
<button class="primary-btn" @click="confirm()" v-if="type != 'third' || payInfo.pay_money == 0">收款 [Enter]</button>
|
||||
<button class="primary-btn" @click="thirdConfirm()" v-else>收款 [Enter]</button>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="bill-wrap">
|
||||
<view class="title">支付明细</view>
|
||||
<view class="body">
|
||||
<view class="bill-info">
|
||||
<view>费用总额</view>
|
||||
<view>￥{{ payInfo.original_money | moneyFormat }}</view>
|
||||
</view>
|
||||
<view class="block-title"><text>营销优惠</text></view>
|
||||
<view class="bill-info">
|
||||
<view>减免金额</view>
|
||||
<view class="text">
|
||||
-￥{{ payInfo.offset.reduction ? $util.moneyFormat(payInfo.offset.reduction) : '0.00' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="bill-info" v-if="payInfo.offset.coupon_array">
|
||||
<view>优惠券</view>
|
||||
<view class="text">-￥{{ $util.moneyFormat(payInfo.coupon_money) }}</view>
|
||||
</view>
|
||||
<view class="bill-info" v-if="payInfo.offset.hongbao_array">
|
||||
<view>红包</view>
|
||||
<view class="text">-￥{{ $util.moneyFormat(payInfo.hongbao_money) }}</view>
|
||||
</view>
|
||||
<view class="bill-info" v-if="payInfo.offset.point_array">
|
||||
<view>积分抵扣</view>
|
||||
<view class="text">-￥{{ $util.moneyFormat(payInfo.point_money) }}</view>
|
||||
</view>
|
||||
<block v-if="payInfo.offset.balance">
|
||||
<view class="block-title"><text>余额抵扣</text></view>
|
||||
<view class="bill-info">
|
||||
<view>余额支付</view>
|
||||
<view>-￥{{ $util.moneyFormat(payInfo.total_balance) }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="block-title"><text>支付方式</text></view>
|
||||
<view class="bill-info">
|
||||
<view>{{ payType[type].name }}</view>
|
||||
<view v-show="type == 'cash'">
|
||||
￥{{ payInfo.cash > 0 ? $util.moneyFormat(payInfo.cash) : $util.moneyFormat(payInfo.pay_money) }}
|
||||
</view>
|
||||
<view v-show="type != 'cash'">￥{{ payInfo.pay_money | moneyFormat }}</view>
|
||||
</view>
|
||||
<view class="block-title"></view>
|
||||
<view class="bill-info">
|
||||
<view>需支付</view>
|
||||
<view>￥{{ payInfo.pay_money | moneyFormat }}</view>
|
||||
</view>
|
||||
<view class="bill-info">
|
||||
<view>实付</view>
|
||||
<view v-show="type == 'cash'">
|
||||
￥{{ payInfo.cash > 0 ? $util.moneyFormat(payInfo.cash) : $util.moneyFormat(payInfo.pay_money) }}
|
||||
</view>
|
||||
<view v-show="type != 'cash'">￥{{ payInfo.pay_money | moneyFormat }}</view>
|
||||
</view>
|
||||
<view class="bill-info" v-if="payInfo.cash_change > 0">
|
||||
<view>找零</view>
|
||||
<view>￥{{ payInfo.cash_change | moneyFormat }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付结果 -->
|
||||
<view class="uni-flex uni-column pay-result" v-show="payStatus == 'success'">
|
||||
<view class="body status">
|
||||
<view class="iconfont iconchenggong"></view>
|
||||
<view class="msg">收款成功</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<button class="primary-btn" @click="paySuccess">继续收款 [Enter]（{{ autoComplete.time }}s）</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="moneyPopup" type="center">
|
||||
<view class="money-wrap">
|
||||
<view class="head">
|
||||
<text>{{ moneyPopup.title }}</text>
|
||||
<text class="iconfont iconguanbi1" @click="$refs.moneyPopup.close()"></text>
|
||||
</view>
|
||||
<view class="content-wrap">
|
||||
<view class="unit">￥</view>
|
||||
<view class="money">{{ moneyPopup.money }}</view>
|
||||
</view>
|
||||
<view class="keyboard-wrap">
|
||||
<view class="num-wrap">
|
||||
<view class="key-item" @click="keydown('1')">1</view>
|
||||
<view class="key-item" @click="keydown('2')">2</view>
|
||||
<view class="key-item" @click="keydown('3')">3</view>
|
||||
<view class="key-item" @click="keydown('4')">4</view>
|
||||
<view class="key-item" @click="keydown('5')">5</view>
|
||||
<view class="key-item" @click="keydown('6')">6</view>
|
||||
<view class="key-item" @click="keydown('7')">7</view>
|
||||
<view class="key-item" @click="keydown('8')">8</view>
|
||||
<view class="key-item" @click="keydown('9')">9</view>
|
||||
<view class="key-item" @click="keydown('00')">00</view>
|
||||
<view class="key-item" @click="keydown('0')">0</view>
|
||||
<view class="key-item" @click="keydown('.')">.</view>
|
||||
</view>
|
||||
<view class="action-wrap">
|
||||
<view class="delete" @click="deleteCode">删除</view>
|
||||
<view class="delete" @click="moneyPopup.money = ''">清空</view>
|
||||
<view class="confirm" @click="moneyPopupConfirm()">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<uni-popup ref="couponPopup" type="center" v-if="payInfo.offset.coupon_array && payInfo.offset.coupon_array.member_coupon_list.length">
|
||||
<view class="coupon-wrap">
|
||||
<view class="head">
|
||||
<text>选择优惠券</text>
|
||||
<text class="iconfont iconguanbi1" @click="$refs.couponPopup.close()"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="body">
|
||||
<view class="list">
|
||||
<view class="item" :class="{ active: discount.coupon_id && discount.coupon_id == item.coupon_id }" v-for="(item, index) in payInfo.offset.coupon_array.member_coupon_list" :key="index" @click="selectCouponItem(item)">
|
||||
<view class="money" v-show="item.type == 'discount'">
|
||||
{{ item.discount }}
|
||||
<text class="unit">折</text>
|
||||
</view>
|
||||
<view class="money" v-show="item.type != 'discount'">
|
||||
<text class="unit">￥</text>
|
||||
{{ item.money }}
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title">{{ item.coupon_name }}</view>
|
||||
<view class="limit">
|
||||
{{ item.at_least == 0 ? '无门槛券' : '满' + item.at_least + '可用' }}
|
||||
{{ item.type == 'discount' && item.discount_limit > 0 ? ',最多优惠' + item.discount_limit : '' }}
|
||||
</view>
|
||||
<view class="time" v-if="item.end_time">{{ $util.timeFormat(item.end_time, 'y-m-d') }}前可用
|
||||
</view>
|
||||
<view class="time" v-else>长期有效</view>
|
||||
</view>
|
||||
<view class="iconfont iconxuanzhong"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 扫码枪支付弹窗 -->
|
||||
<uni-popup ref="thirdPopup" type="center" @change="popupChange">
|
||||
<view class="third-popup">
|
||||
<view class="head">
|
||||
<text>请选择扫码方式</text>
|
||||
<text class="iconfont iconguanbi1" @click="$refs.thirdPopup.close();thirdPopupOpen = false;"></text>
|
||||
</view>
|
||||
<view class="money">扫码收款￥{{ payInfo.pay_money | moneyFormat }}</view>
|
||||
<view class="scan-code-type" v-if="type == 'third'">
|
||||
<view class="type-item" :class="{ active: scanCodeType == 'scancode' }" @click="scanCodeType = 'scancode'">扫码枪</view>
|
||||
<view class="type-item" :class="{ active: scanCodeType == 'qrcode' }" @click="scanCodeType = 'qrcode'">二维码</view>
|
||||
</view>
|
||||
<view class="content-wrap">
|
||||
<view class="qrcode-wrap" v-show="scanCodeType == 'qrcode'">
|
||||
<block v-if="payQrcode.length">
|
||||
<view class="qrcode-item" v-for="(item, index) in payQrcode" :key="index">
|
||||
<image :src="item.qrcode.replace(/[\r\n]/g, '')" mode="widthFix" class="qrcode" v-if="item.qrcode.indexOf('data:image') != -1" />
|
||||
<image :src="$util.img(item.qrcode)" mode="widthFix" class="qrcode" v-else />
|
||||
<image :src="$util.img(item.logo)" mode="widthFix" class="logo" />
|
||||
</view>
|
||||
</block>
|
||||
<view class="empty" v-else>没有可用的收款二维码</view>
|
||||
</view>
|
||||
<view class="scancode-wrap" v-show="scanCodeType == 'scancode'">
|
||||
<block v-if="scancodeList.length">
|
||||
<view>
|
||||
<input type="number" v-model="authCode" :class="{ focus: scanCodeFocus }"
|
||||
:focus="scanCodeFocus" placeholder="请点击输入框聚焦扫码或输入付款码" @confirm="scanCode"
|
||||
@focus="scanCodeFocus = true" @blur="scanCodeInputBlur()" />
|
||||
<text class="iconfont icondelete" v-show="authCode.length > 0" @click="clearAuthCode"></text>
|
||||
</view>
|
||||
<image src="@/static/cashier/scan_code_tip.png" mode="widthFix" />
|
||||
</block>
|
||||
<view class="empty" v-else>没有可用的支付方式</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 使用账号余额，验证会员码/手机号 -->
|
||||
<uni-popup ref="safeVerifyPopup" type="center">
|
||||
<view class="safe-verify-popup">
|
||||
<view class="header">
|
||||
<view class="type-wrap" v-if="active == 'memberCodePopup'">
|
||||
<view class="item">会员码</view>
|
||||
</view>
|
||||
<view class="type-wrap" v-else-if="active == 'safeVerifyPopup' && payInfo.collectmoney_config.sms_verify == 1">
|
||||
<view class="item" :class="{ active: safeVerifyType == 'payment_code' }" @click="changeSafeVerifyType('payment_code')">会员码</view>
|
||||
<view class="item" :class="{ active: safeVerifyType == 'sms_code' }" @click="changeSafeVerifyType('sms_code')">短信验证码</view>
|
||||
</view>
|
||||
<text class="iconfont iconguanbi1" @click="$refs.safeVerifyPopup.close()"></text>
|
||||
</view>
|
||||
<view class="content" v-show="safeVerifyType == 'payment_code'">
|
||||
<view class="scancode-wrap">
|
||||
<view class="input-wrap">
|
||||
<view>
|
||||
<input type="number" v-model="paymentCode" :class="{ focus: scanCodeFocus }"
|
||||
:focus="scanCodeFocus" placeholder="请点击输入框聚焦扫码或输入会员码" @confirm="verifyPaymentCode"
|
||||
@focus="scanCodeFocus = true" @blur="scanCodeInputBlur()"
|
||||
placeholder-class="placeholder" />
|
||||
<text class="iconfont icondelete" v-show="paymentCode.length > 0" @click="clearPaymentCode"></text>
|
||||
</view>
|
||||
<button class="primary-btn" @click="verifyPaymentCode">确认</button>
|
||||
</view>
|
||||
<image src="@/static/cashier/scan_code_tip.png" mode="widthFix" />
|
||||
<!-- <view class="member-code-hint">打开手机端 --》个人中心 --》 会员码</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="content" v-show="safeVerifyType == 'sms_code' && active == 'safeVerifyPopup'">
|
||||
<block v-if="payInfo.member_account">
|
||||
<view class="tip">将发送验证码到该手机</view>
|
||||
<view class="mobile">
|
||||
{{ payInfo.member_account.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') }}
|
||||
</view>
|
||||
<view class="sms-code">
|
||||
<view>
|
||||
<input type="number" v-model="smsCode" class="sms-code" placeholder="请输入验证码"
|
||||
:focus="scanCodeFocus" placeholder-class="placeholder" @focus="scanCodeFocus = true"
|
||||
@blur="scanCodeFocus = false" />
|
||||
<text class="iconfont icondelete" v-show="smsCode.length > 0" @click="clearSmsCode"></text>
|
||||
</view>
|
||||
<text class="send-tip" @click="sendMobileCode" :class="{ disabled: dynacodeData.isSend }">{{ dynacodeData.codeText }}</text>
|
||||
</view>
|
||||
<button class="primary-btn" @click="verifySmsCode">确认</button>
|
||||
</block>
|
||||
<view v-else>该会员尚未绑定手机号，无法使用该验证方式</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<uni-popup ref="remarkPopup" type="center">
|
||||
<view class="remark-wrap">
|
||||
<view class="header">
|
||||
<text class="title">备注</text>
|
||||
<text class="iconfont iconguanbi1" @click="$refs.remarkPopup.close()"></text>
|
||||
</view>
|
||||
<view class="body">
|
||||
<textarea v-model="remark" placeholder="填写备注信息" placeholder-class="placeholder-class" @keydown.enter="remarkConfirm" />
|
||||
</view>
|
||||
<view class="footer">
|
||||
<button type="default" class="primary-btn" @click="remarkConfirm">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import index from './index.js';
|
||||
export default {
|
||||
name: 'nsPayment',
|
||||
mixins: [index]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user