初始上传
This commit is contained in:
216
addon/cashier/source/os/pages/recharge/index.vue
Executable file
216
addon/cashier/source/os/pages/recharge/index.vue
Executable file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<base-page>
|
||||
<view class="uni-flex uni-row page-height recharge-wrap">
|
||||
<view class="common-wrap left-wrap">
|
||||
<view class="cashregister-header-box">
|
||||
<view class="order-time">
|
||||
<view class="title">消费时间</view>
|
||||
<uni-datetime-picker v-model="create_time" type="datetime" :clearIcon="false" />
|
||||
</view>
|
||||
|
||||
<view class="header" v-if="globalMemberInfo">
|
||||
<view class="headimg">
|
||||
<image class="header-image" :src="globalMemberInfo.headimg ? $util.img(globalMemberInfo.headimg) : $util.img(defaultImg.head)" @error="globalMemberInfo.headimg = defaultImg.head"/>
|
||||
<view v-if="globalMemberInfo.member_level" class="member-nameplate">
|
||||
{{ globalMemberInfo.member_level_name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="head-info">
|
||||
<view class="head-info-top">
|
||||
<view class="name">
|
||||
<block v-if="globalMemberInfo.mobile">
|
||||
<view class="mobile">{{ globalMemberInfo.mobile }}</view>
|
||||
<view class="text">
|
||||
<text>（</text>
|
||||
<text class="nickname">{{globalMemberInfo.nickname }}</text>
|
||||
<text>）</text>
|
||||
</view>
|
||||
</block>
|
||||
<text v-else>{{ globalMemberInfo.nickname }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="head-info-bottom point">积分：{{ globalMemberInfo.point }}</view>
|
||||
<view class="head-info-bottom balance">余额：{{ (parseFloat(globalMemberInfo.balance_money) + parseFloat(globalMemberInfo.balance)) | moneyFormat}}</view>
|
||||
</view>
|
||||
<button class="switch primary-btn member-open">更换会员</button>
|
||||
<button class="switch primary-btn replace-member">散客</button>
|
||||
</view>
|
||||
<view class="header" v-else>
|
||||
<view class="headimg">
|
||||
<image class="header-image" :src="$util.img(defaultImg.head)" />
|
||||
</view>
|
||||
<view class="head-info">
|
||||
<view class="name">散客</view>
|
||||
</view>
|
||||
<button class="switch primary-btn">查询会员</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="content-list common-scrollbar">
|
||||
<view class="empty">
|
||||
<image src="@/static/cashier/cart_empty.png" mode="widthFix"/>
|
||||
<view class="tips">点击右侧商品，选择商品进行结账</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="bottom-info">
|
||||
<view class="bottom-left">共 0 件</view>
|
||||
<view class="bottom-right">
|
||||
<text class="pay-money">￥0.00</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-btn">
|
||||
<button class="primary-btn btn-right">结账</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay-shade"></view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row common-wrap right-wrap">
|
||||
<scroll-view scroll-y="true" class="info-wrap" v-show="type == 'member'">
|
||||
<view class="header">会员充值</view>
|
||||
<view class="headimg-content" v-if="globalMemberInfo">
|
||||
<view class="headimg">
|
||||
<image v-if="globalMemberInfo.headimg" :src="globalMemberInfo.headimg ? $util.img(globalMemberInfo.headimg) : $util.img(defaultImg.head)"/>
|
||||
<image v-else mode="aspectFill" src="@/static/member/head.png" />
|
||||
</view>
|
||||
<view class="header-info" @click="showMember">
|
||||
<view class="name">
|
||||
<text>{{ globalMemberInfo.nickname }}</text>
|
||||
<text v-if="globalMemberInfo.member_level" class="level-name">{{ globalMemberInfo.member_level_name }}</text>
|
||||
<button type="default" @click.stop="openMember()" class="primary-btn">切换会员</button>
|
||||
</view>
|
||||
<view class="header-info-item">
|
||||
<view>手机号：{{ globalMemberInfo.mobile || '--' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="headimg-content" v-else>
|
||||
<view class="headimg">
|
||||
<image mode="aspectFill" src="@/static/member/head.png" />
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<view class="name">
|
||||
<text>散客</text>
|
||||
<button type="default" @click="openMember()" class="primary-btn">登录会员</button>
|
||||
</view>
|
||||
<view class="header-info-item">
|
||||
<view>手机号：--</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-box">
|
||||
<view class="form-content">
|
||||
<view class="form-item">
|
||||
<view class="form-label">
|
||||
<text class="required"></text>
|
||||
充值方式：
|
||||
</view>
|
||||
<view class="form-inline">
|
||||
<uni-data-checkbox v-model="rechargeType" :localdata="rechargeTypeList" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item" v-if="rechargeType == 2">
|
||||
<view class="form-label">
|
||||
<text class="required">*</text>
|
||||
充值金额：
|
||||
</view>
|
||||
<view class="form-inline">
|
||||
<input type="number" class="form-input" v-model="rechargeMoney" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item" v-if="rechargeType == 1">
|
||||
<view class="form-label">
|
||||
<text class="required">*</text>
|
||||
充值金额：
|
||||
</view>
|
||||
<view class="form-inline ">
|
||||
<view class="label-list">
|
||||
<view class="form-label" :class="{ active: rechargeIndex == index }" @click="rechargeIndex = index" v-for="(item, index) in memberRecharge" :key="index">
|
||||
<view class="price">{{ item.buy_price }}元</view>
|
||||
<view class="balance">到账{{ item.face_value }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item" v-if="reward">
|
||||
<view class="form-label">
|
||||
<text class="required">*</text>
|
||||
充值优惠：
|
||||
</view>
|
||||
<view class="form-inline">
|
||||
<view class="content-box">
|
||||
<view class="content-gift" v-if="memberRecharge[rechargeIndex].growth">
|
||||
<text class="iconfont iconchengchangzhi"></text>
|
||||
<text>赠送{{ memberRecharge[rechargeIndex].growth }}成长值</text>
|
||||
</view>
|
||||
<view class="content-gift" v-if="memberRecharge[rechargeIndex].point">
|
||||
<text class="iconfont iconjifen"></text>
|
||||
<text>赠送{{ memberRecharge[rechargeIndex].point }}积分</text>
|
||||
</view>
|
||||
<view class="content-gift" v-if="memberRecharge[rechargeIndex].coupon_id">
|
||||
<text class="iconfont iconyouhuiquan1"></text>
|
||||
<text>赠送优惠券 X{{ memberRecharge[rechargeIndex].coupon_id.split(',').length }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="gift-remark" v-if="rechargeType == 1 && memberRecharge.length > 0 && memberRecharge[rechargeIndex] && memberRecharge[rechargeIndex].goods_data != undefined">
|
||||
备注：赠送的产品需线下提货，赠送的项目可在线下进行使用
|
||||
</view>
|
||||
|
||||
<view class="action-btn">
|
||||
<button type="primary" class="primary-btn" @click="pay()">充值</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="info-wrap" v-show="type == 'pay'">
|
||||
<ns-payment ref="payment" storeRoute="recharge" @cancel="cancelPayment" @success="paySuccess" :outTradeNo="outTradeNo"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ns-select-member ref="selectMember"/>
|
||||
|
||||
<!-- 会员详情弹出框 -->
|
||||
<ns-member-detail-popup ref="memberDetailPopup" />
|
||||
|
||||
</base-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import recharge from './public/js/recharge.js';
|
||||
import nsSelectMember from '@/components/ns-select-member/ns-select-member.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
nsSelectMember
|
||||
},
|
||||
mixins: [recharge],
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.recharge-wrap .cashregister-header-box>>>.uni-select-lay-select {
|
||||
padding-right: 0.1rem !important;
|
||||
}
|
||||
|
||||
.recharge-wrap .cashregister-header-box>>>.uni-select-lay-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.recharge-wrap .cashregister-header-box>>>.uni-select-lay-input-close {
|
||||
display: none !important;
|
||||
}
|
||||
.recharge-wrap >>> .member-head .iconfont {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import './public/css/index.scss';
|
||||
</style>
|
||||
442
addon/cashier/source/os/pages/recharge/public/css/index.scss
Executable file
442
addon/cashier/source/os/pages/recharge/public/css/index.scss
Executable file
@@ -0,0 +1,442 @@
|
||||
.left-wrap {
|
||||
position: relative;
|
||||
max-width: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 0.2rem;
|
||||
flex: 1;
|
||||
|
||||
.pay-shade {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba($color: #fff, $alpha: 0.6);
|
||||
z-index: 10;
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0.15rem;
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-size: 0.14rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
&:nth-child(1) {
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 0.03rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-list {
|
||||
margin-top: 0.1rem;
|
||||
flex: 1;
|
||||
height: 0;
|
||||
overflow-y: scroll;
|
||||
|
||||
.content-item {
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
padding: 0.1rem 0;
|
||||
|
||||
.item-img {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
margin-left: 0.1rem;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
|
||||
.item-name {
|
||||
font-size: 0.14rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.del {
|
||||
margin-right: -0.8rem;
|
||||
margin-top: -0.2rem;
|
||||
color: $primary-color;
|
||||
font-size: 0.14rem;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.item-spe {
|
||||
font-size: 0.1rem;
|
||||
color: #999;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 0.14rem;
|
||||
margin-top: 0.05rem;
|
||||
margin-left: -0.03rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0.1rem;
|
||||
margin-top: 0.3rem;
|
||||
|
||||
.num-dec {
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
background: #e6e6e6;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
border-radius: 30%;
|
||||
text-align: center;
|
||||
line-height: 0.23rem;
|
||||
font-size: 0.25rem;
|
||||
margin-right: 0.1rem;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.num-inc {
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
background: $primary-color;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
border-radius: 30%;
|
||||
text-align: center;
|
||||
line-height: 0.23rem;
|
||||
font-size: 0.25rem;
|
||||
margin-left: 0.1rem;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 60%;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #999;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
padding:0.2rem 0.2rem 0.24rem 0.2rem;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
|
||||
.bottom-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.bottom-left {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
font-size: 0.14rem;
|
||||
|
||||
.pay-money {
|
||||
font-size: 0.27rem;
|
||||
height: 0.22rem;
|
||||
font-weight: 600;
|
||||
font-family: AlibabaPuHuiTiM;
|
||||
color: $primary-color;
|
||||
line-height: 0.22rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0.2rem;
|
||||
|
||||
.btn-right {
|
||||
width: 1.4rem;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
border: 0 !important;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.common-wrap {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-wrap {
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
border-radius: 0.02rem;
|
||||
height: 100%;
|
||||
border-left: 0;
|
||||
padding: 0 0.2rem;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
|
||||
.header {
|
||||
height: 0.66rem;
|
||||
line-height: 0.66rem;
|
||||
text-align: left;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
color: #303133;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
|
||||
.headimg-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.2rem;
|
||||
|
||||
.headimg {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-info {
|
||||
margin-left: 0.15rem;
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.16rem;
|
||||
color: #303133;
|
||||
|
||||
.level-name {
|
||||
background: #ffffff;
|
||||
border: 0.01rem solid $primary-color;
|
||||
border-radius: 0.02rem;
|
||||
font-size: 0.12rem;
|
||||
color: $primary-color;
|
||||
margin-left: 0.15rem;
|
||||
min-width: 0.65rem;
|
||||
height: 0.22rem;
|
||||
text-align: center;
|
||||
line-height: 0.22rem;
|
||||
padding: 0 0.04rem;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
padding: 0 0.1rem;
|
||||
width: 1rem;
|
||||
font-size: $uni-font-size-sm;
|
||||
margin: 0;
|
||||
height: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.1rem;
|
||||
justify-content: space-between;
|
||||
|
||||
view {
|
||||
text-align: left;
|
||||
font-size: 0.14rem;
|
||||
color: #303133;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-box {
|
||||
.form-content {
|
||||
margin-top: 0.2rem;
|
||||
|
||||
.gift-remark {
|
||||
margin-left: 1.3rem;
|
||||
color: #999;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 0.1rem;
|
||||
display: flex;
|
||||
|
||||
.form-label {
|
||||
width: 1.3rem;
|
||||
text-align: right;
|
||||
padding-right: 0.1rem;
|
||||
box-sizing: border-box;
|
||||
height: 0.32rem;
|
||||
line-height: 0.32rem;
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
margin-right: 0.03rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
line-height: 0.32rem;
|
||||
margin-right: 0.1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.form-input {
|
||||
width: 2.3rem;
|
||||
border-width: 0.01rem;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-radius: 0.02rem;
|
||||
padding-left: 0.1rem;
|
||||
height: 0.32rem;
|
||||
line-height: 0.32rem;
|
||||
font-size: 0.14rem;
|
||||
border-color: #e6e6e6;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
margin-right: 0.1rem;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.form-label {
|
||||
padding: 0.05rem 0.15rem;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 0.1rem 0.1rem 0;
|
||||
cursor: pointer;
|
||||
flex-direction: column;
|
||||
width: unset;
|
||||
height: unset;
|
||||
white-space: nowrap;
|
||||
|
||||
.balance {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 0.17rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
background-color: var(--primary-color-light-9);
|
||||
|
||||
.balance {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-gift {
|
||||
background-color: #f8f8f8;
|
||||
padding: 0.04rem 0.1rem;
|
||||
margin-bottom: 0.15rem;
|
||||
font-size: 0.13rem;
|
||||
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
text {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0.24rem;
|
||||
|
||||
button {
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
239
addon/cashier/source/os/pages/recharge/public/js/recharge.js
Executable file
239
addon/cashier/source/os/pages/recharge/public/js/recharge.js
Executable file
@@ -0,0 +1,239 @@
|
||||
import {getRechargeConfig, addRecharge} from '@/api/recharge'
|
||||
import {getMemberInfoById} from '@/api/member'
|
||||
import {mapGetters} from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 'member',
|
||||
//充值卡相关
|
||||
memberRecharge: [],
|
||||
rechargeMoney: 0,
|
||||
rechargeType: 1,
|
||||
rechargeIndex: 0,
|
||||
rechargeTypeList: [{
|
||||
text: '充值套餐',
|
||||
value: 1
|
||||
}, {
|
||||
text: '自定义金额',
|
||||
value: 2
|
||||
}],
|
||||
outTradeNo: '',
|
||||
isRepeat: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
reward() {
|
||||
if (this.rechargeType == 1 && this.memberRecharge.length > 0 && this.memberRecharge[this.rechargeIndex]) {
|
||||
let data = this.memberRecharge[this.rechargeIndex];
|
||||
if (data.point || data.growth || data.coupon) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
...mapGetters(['rechargeActive','memberSearchWayConfig'])
|
||||
},
|
||||
onLoad() {
|
||||
uni.hideTabBar();
|
||||
},
|
||||
onShow() {
|
||||
this.create_time = this.$util.timeFormat(parseInt(new Date().getTime() / 1000));
|
||||
this.addKeyDownEvent();
|
||||
|
||||
// 添加组件的键盘监听事件
|
||||
if (this.$refs.payment) this.$refs.payment.addKeyDownEvent();
|
||||
|
||||
this.getMemberRecharge();
|
||||
},
|
||||
onHide() {
|
||||
this.removeKeyDownEvent();
|
||||
|
||||
// 移除组件的键盘监听事件
|
||||
if (this.$refs.payment) this.$refs.payment.removeKeyDownEvent();
|
||||
},
|
||||
methods: {
|
||||
//充值卡相关
|
||||
getMemberRecharge() {
|
||||
getRechargeConfig().then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.memberRecharge = res.data;
|
||||
if (this.memberRecharge.length > 0) {
|
||||
for (let i in this.memberRecharge) this.memberRecharge[i]['money'] = this.memberRecharge[i]['price'];
|
||||
} else {
|
||||
this.rechargeType = 2;
|
||||
this.rechargeTypeList[0].disable = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getMemberInfo() {
|
||||
getMemberInfoById(this.globalMemberInfo.member_id).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.$store.commit('app/setGlobalMemberInfo', res.data);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '未获取到会员信息'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
openMember() {
|
||||
if (this.$refs.selectMember) {
|
||||
this.$store.commit('recharge/setActive', 'ShowMember');
|
||||
this.$refs.selectMember.open(() => {
|
||||
this.$store.commit('recharge/setActive', 'ShowMemberAfter');
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$refs.selectMember.inputFocus = true;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
showMember() {
|
||||
this.$store.commit('recharge/setActive', 'ShowMember');
|
||||
if (!this.globalMemberInfo) {
|
||||
if (this.$refs.selectMember) this.$refs.selectMember.open(() => {
|
||||
this.$store.commit('recharge/setActive', 'ShowMemberAfter');
|
||||
});
|
||||
} else {
|
||||
// 打开会员信息弹出框
|
||||
this.$store.commit('recharge/setActive', 'ShowMemberAfter');
|
||||
this.$refs.memberDetailPopup.open();
|
||||
}
|
||||
},
|
||||
pay() {
|
||||
if (!this.globalMemberInfo || (this.globalMemberInfo && !this.globalMemberInfo.member_id)) {
|
||||
this.type = 'member';
|
||||
this.openMember();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.rechargeType == 1 && !this.memberRecharge[this.rechargeIndex]) {
|
||||
this.$util.showToast({
|
||||
title: '请选择充值套餐'
|
||||
});
|
||||
return;
|
||||
}
|
||||
var isValid = /^-?\d+(\.\d{1,2})?$/;
|
||||
if (this.rechargeType == 2 && !isValid.test(this.rechargeMoney)) {
|
||||
this.$util.showToast({
|
||||
title: '请输入正确的充值金额'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let data = {
|
||||
member_id: this.globalMemberInfo.member_id
|
||||
};
|
||||
if (this.rechargeType == 1) {
|
||||
data.sku_array = [{
|
||||
recharge_id: this.memberRecharge[this.rechargeIndex].recharge_id
|
||||
}];
|
||||
} else {
|
||||
data.sku_array = [{
|
||||
money: this.rechargeMoney
|
||||
}];
|
||||
}
|
||||
data.sku_array = JSON.stringify(data.sku_array);
|
||||
|
||||
this.$store.commit('recharge/setActive', 'OrderCreate');
|
||||
|
||||
if (this.isRepeat) return;
|
||||
this.isRepeat = true;
|
||||
addRecharge(data).then(res => {
|
||||
this.isRepeat = false;
|
||||
if (res.code == 0) {
|
||||
this.outTradeNo = res.data.out_trade_no;
|
||||
this.type = 'pay';
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelPayment() {
|
||||
this.type = 'member';
|
||||
},
|
||||
paySuccess() {
|
||||
this.type = 'member';
|
||||
this.outTradeNo = '';
|
||||
this.getMemberInfo();
|
||||
|
||||
this.$store.commit('recharge/setActive', '');
|
||||
this.isRepeat = false;
|
||||
},
|
||||
/**
|
||||
* 添加键盘监听事件
|
||||
*/
|
||||
addKeyDownEvent() {
|
||||
// #ifdef H5
|
||||
// 绑定监听事件
|
||||
window.addEventListener("keydown", this.listenerKeyDown, true);
|
||||
|
||||
// 监听F1~F12，BACKSPACE
|
||||
window.POS_HOTKEY_CALLBACK = (control, code) => {
|
||||
this.posHotKeyCallback(code);
|
||||
};
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 移除键盘监听事件
|
||||
*/
|
||||
removeKeyDownEvent() {
|
||||
// #ifdef H5
|
||||
window.removeEventListener("keydown", this.listenerKeyDown, true);
|
||||
|
||||
delete window.POS_HOTKEY_CALLBACK;
|
||||
// #endif
|
||||
},
|
||||
listenerKeyDown(e) {
|
||||
var code = e.code;
|
||||
|
||||
// console.log('KeyDown', this.type, code, this.rechargeActive, e);
|
||||
|
||||
if (this.rechargeActive == '' && code == 'KeyM') {
|
||||
// 选择会员，键盘快捷键【M】
|
||||
|
||||
this.openMember();
|
||||
|
||||
} else if(this.rechargeActive == 'ShowMember' && this.memberSearchWayConfig.way == 'list'){
|
||||
|
||||
// 按照会员列表进行搜索
|
||||
if (code == 'Enter' || code == 'NumpadEnter') {
|
||||
|
||||
if(this.$refs.selectMember.searchFinish && this.$refs.selectMember.memberId){
|
||||
this.$refs.selectMember.getMemberInfo(this.$refs.selectMember.memberId);
|
||||
}
|
||||
}
|
||||
|
||||
} else if (this.rechargeActive == 'ShowMemberAfter' || (this.type == 'member' && this.rechargeActive == '')) {
|
||||
// 活跃窗口：设置会员后，选择充值金额
|
||||
|
||||
if (code == 'Enter' || code == 'NumpadEnter') {
|
||||
this.pay();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
/**
|
||||
* 监听键盘事件回调
|
||||
* @param {Object} code
|
||||
*/
|
||||
posHotKeyCallback(code) {
|
||||
if (code == 'BACKSPACE') {
|
||||
// 退格键
|
||||
if (this.rechargeActive == 'OrderCreate') {
|
||||
if (this.$refs.payment) {
|
||||
if (this.$refs.payment.active == 'openMoneyPopup') {
|
||||
this.$refs.payment.deleteCode();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
// 触发左侧菜单按键回调
|
||||
this.menuTriggerKeyCodeCallBack(code);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user