650 lines
15 KiB
Vue
650 lines
15 KiB
Vue
<template>
|
||
<base-page>
|
||
<view class="uni-flex uni-row page-height">
|
||
<view class="common-wrap left-wrap" style="flex: 1;">
|
||
<view class="header-box">
|
||
<view class="order-time">
|
||
<view class="title">消费时间</view>
|
||
<uni-datetime-picker v-model="orderData.create_time" type="datetime" :clearIcon="false" />
|
||
</view>
|
||
|
||
<view class="header" v-if="memberInfo" :style="'background-image:url(' + $util.img('public/uniapp/cashier/member-bg.png') + ');background-repeat: no-repeat;'">
|
||
<view class="headimg" @click="showMember">
|
||
<image class="header-image" :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.img('public/uniapp/default_img/head.png')"></image>
|
||
</view>
|
||
|
||
<view class="head-info" @click="showMember">
|
||
<view class="head-info-top">
|
||
<view class="name">
|
||
<view class="text">{{ memberInfo.nickname }}</view>
|
||
<view class="level" v-if="memberInfo.member_level">{{ memberInfo.member_level_name }}</view>
|
||
</view>
|
||
<view class="mobile">{{ memberInfo.mobile }}</view>
|
||
</view>
|
||
<view class="head-info-bottom">
|
||
<view class="">积分：{{ memberInfo.point }}</view>
|
||
<view class="">消费券：{{ (parseFloat(memberInfo.balance_money) + parseFloat(memberInfo.balance)) | moneyFormat }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="switch primary-btn" @click="openSelectMember()">更换会员</button>
|
||
<button class="switch primary-btn" @click="replaceMember()">散客</button>
|
||
</view>
|
||
<view class="header" v-else :style="'background-image:url(' + $util.img('public/uniapp/cashier/member-bg.png') + ');background-repeat: no-repeat;'">
|
||
<view class="headimg"><image class="header-image" :src="$util.img('public/uniapp/default_img/head.png')"></image></view>
|
||
<view class="head-info"><view class="name">散客</view></view>
|
||
<button class="switch primary-btn">查询会员</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="title">
|
||
<view>
|
||
结算清单（
|
||
<text>{{ orderData.goods_num }}</text>
|
||
）
|
||
</view>
|
||
<view class="clear">
|
||
<text class="iconfont iconqingchushujuku"></text>
|
||
<text>清空</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-list common-scrollbar">
|
||
<block v-if="orderData.goods_list.length">
|
||
<view class="content-item" v-for="(item, index) in orderData.goods_list" :key="index">
|
||
<view class="item-img"><image :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })" mode="widthFix"></image></view>
|
||
<view class="item-info">
|
||
<view class="item-name">{{ item.sku_name }}</view>
|
||
<view class="item-del">删除</view>
|
||
<view class="item-spe">{{ item.spec_name }}</view>
|
||
<view class="item-price">￥{{ item.price | moneyFormat }}</view>
|
||
</view>
|
||
<view class="item-num">
|
||
<view class="num-dec">-</view>
|
||
<view class="num">{{ item.num }}</view>
|
||
<view class="num-inc">+</view>
|
||
</view>
|
||
<!-- <view class="item-total-price">￥{{ item.goods_money | moneyFormat }}</view> -->
|
||
<!-- <view class="item-del iconfont iconguanbi"></view> -->
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="empty">
|
||
<image :src="$util.img('public/uniapp/cashier/cart_empty.png')" mode="widthFix"></image>
|
||
<view class="tips">点击右侧商品，选择商品进行结账</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom">
|
||
<view class="bottom-info">
|
||
<view class="bottom-left">
|
||
共
|
||
<text>{{ orderData.goods_num }}</text>
|
||
件
|
||
</view>
|
||
<view class="bottom-right">
|
||
优惠明细
|
||
<i class="iconfont iconqianhou2"></i>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-btn">
|
||
<button class="default-btn btn-left">现金收款</button>
|
||
<button class="primary-btn btn-right">收款￥{{ orderData.pay_money | moneyFormat }}</button>
|
||
</view>
|
||
</view>
|
||
<view class="pay-shade"></view>
|
||
</view>
|
||
<view class="uni-flex uni-row common-wrap" style="flex: 2;">
|
||
<view class="comp-wrap" v-show="actionBtnShwo">
|
||
<button :class="['comp-btn', { 'primary-btn': type == 'topUp' }, { 'default-btn': type != 'topUp' }]" @click="type = 'topUp'">充值</button>
|
||
<button :class="['comp-btn', { 'primary-btn': type == 'member' }, { 'default-btn': type != 'member' }]" @click="showMember">会员</button>
|
||
</view>
|
||
<view class="list-wrap" style="flex: 1;">
|
||
<view class="content" v-show="type == 'topUp'">
|
||
<nc-member-recharge @actionBtnShwoFn="actionBtnShwoFn" @switchMember="openSelectMember" ref="member"></nc-member-recharge>
|
||
</view>
|
||
<view class="content" v-show="type == 'member'">
|
||
<nc-member-detail v-if="memberInfo" ref="memberDetail" :member-id="memberInfo.member_id"></nc-member-detail>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<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" /></view>
|
||
<view class="footer"><button type="default" class="primary-btn" @click="remarkConfirm">确认</button></view>
|
||
</view>
|
||
</uni-popup>
|
||
<nc-select-member ref="selectMember"></nc-select-member>
|
||
</base-page>
|
||
</template>
|
||
|
||
<script>
|
||
import ncSelectMember from '@/components/nc-select-member/nc-select-member.vue';
|
||
import ncMemberDetail from '@/components/nc-member-detail/nc-member-detail.vue';
|
||
import ncMemberRecharge from '@/components/nc-member-recharge/nc-member-recharge.vue';
|
||
export default {
|
||
components: { ncMemberRecharge, ncSelectMember, ncMemberDetail },
|
||
data() {
|
||
return {
|
||
title: '充值',
|
||
type: 'topUp',
|
||
goodsData: {},
|
||
orderData: {
|
||
pay_money: 0,
|
||
goods_list: [],
|
||
remark: '',
|
||
goods_num: 0,
|
||
card_type: 'membercard',
|
||
create_time: 0
|
||
},
|
||
remark: '',
|
||
isRepeat: false,
|
||
actionBtnShwo: true
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
uni.hideTabBar();
|
||
uni.setStorageSync('orderData', {
|
||
pay_money: 0,
|
||
goods_list: [],
|
||
remark: '',
|
||
goods_num: 0,
|
||
card_type: 'membercard'
|
||
});
|
||
},
|
||
onShow() {
|
||
this.type = 'topUp';
|
||
var pages = getCurrentPages(); // 获取栈实例
|
||
let currentPage = pages[pages.length - 1]['$page']['fullPath'];
|
||
this.orderData = uni.getStorageSync('orderData');
|
||
this.orderData.create_time = this.$util.timeFormat(parseInt(new Date().getTime() / 1000));
|
||
},
|
||
methods: {
|
||
remarkConfirm() {
|
||
this.$refs.member.remark = this.remark;
|
||
this.$refs.remarkPopup.close();
|
||
},
|
||
remarkSeting() {
|
||
this.remark = this.$refs.member.remark;
|
||
this.$refs.remarkPopup.open();
|
||
},
|
||
openSelectMember() {
|
||
if (this.$refs.selectMember) this.$refs.selectMember.open();
|
||
},
|
||
showMember() {
|
||
if (!this.memberInfo || !this.memberInfo.member_id) {
|
||
this.openSelectMember();
|
||
} else {
|
||
this.type = 'member';
|
||
}
|
||
},
|
||
clearGoods(data) {
|
||
this.goodsData = [];
|
||
},
|
||
// 控制操作按钮是否显示
|
||
actionBtnShwoFn(data) {
|
||
this.actionBtnShwo = data;
|
||
}
|
||
},
|
||
watch: {
|
||
type: function(nVal) {
|
||
if (nVal != 'member') {
|
||
this.$refs.member.search = false;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.header-box >>> .uni-select-lay-select {
|
||
padding-right: 0.1rem !important;
|
||
}
|
||
.header-box >>> .uni-select-lay-icon {
|
||
display: none !important;
|
||
}
|
||
.header-box >>> .uni-select-lay-input-close {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.left-wrap {
|
||
position: relative;
|
||
max-width: 3.9rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.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;
|
||
}
|
||
.header-box {
|
||
padding: 0.15rem;
|
||
border-bottom: 0.01rem solid #e6e6e6;
|
||
.order-time {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
user-select: none;
|
||
position: relative;
|
||
z-index: 3;
|
||
height: 0.3rem;
|
||
padding: 0 0.1rem 0 0.1rem;
|
||
box-sizing: border-box;
|
||
border-radius: 0.02rem;
|
||
border: 0.01rem solid #e5e5e5;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.14rem;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.uni-date {
|
||
flex: 1;
|
||
margin-left: 0.1rem;
|
||
}
|
||
|
||
/deep/ .uni-date-x {
|
||
height: 0.28rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header {
|
||
margin-top: 0.15rem;
|
||
height: 0.8rem;
|
||
font-size: 0.2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 0.15rem;
|
||
background-size: 100% 100%;
|
||
border-radius: 0.03rem;
|
||
|
||
.header-image {
|
||
width: 0.5rem;
|
||
height: 0.5rem;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.head-info {
|
||
flex: 1;
|
||
margin-left: 0.1rem;
|
||
|
||
.name {
|
||
font-size: 0.16rem;
|
||
color: #fff;
|
||
display: flex;
|
||
|
||
.level {
|
||
background: #ffffff;
|
||
border: 0.01rem solid $primary-color;
|
||
border-radius: 0.02rem;
|
||
font-size: 0.12rem;
|
||
color: $primary-color;
|
||
margin-left: 0.05rem;
|
||
padding: 0.01rem 0.04rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.text {
|
||
max-width: 0.8rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.mobile {
|
||
font-size: 0.14rem;
|
||
color: #fff;
|
||
margin-top: 0.04rem;
|
||
}
|
||
.head-info-bottom {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-top: 0.05rem;
|
||
view {
|
||
color: #fff;
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
}
|
||
}
|
||
|
||
.switch {
|
||
text-align: center;
|
||
line-height: 0.3rem;
|
||
margin-left: 0.08rem;
|
||
padding: 0 0.05rem;
|
||
overflow: hidden;
|
||
font-size: $uni-font-size-sm;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.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: #8558fa;
|
||
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;
|
||
}
|
||
}
|
||
.item-total-price {
|
||
font-size: 0.14rem;
|
||
margin-left: 0.1rem;
|
||
color: #fe2278;
|
||
}
|
||
.item-del {
|
||
// font-size: 0.3rem;
|
||
color: $primary-color;
|
||
margin-left: 0.1rem;
|
||
cursor: pointer;
|
||
margin-right: -0.8rem;
|
||
margin-top: -0.2rem;
|
||
// color: #8558fa;
|
||
font-size: 0.14rem;
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty {
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 60%;
|
||
margin-top: 0.4rem;
|
||
}
|
||
|
||
.tips {
|
||
color: #999;
|
||
margin-top: 0.15rem;
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
width: 100%;
|
||
padding: 0.15rem;
|
||
box-sizing: border-box;
|
||
background-color: #ffffff;
|
||
border-top: 0.01rem solid #e6e6e6;
|
||
.bottom-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.bottom-left {
|
||
font-size: 0.14rem;
|
||
color: #303133;
|
||
opacity: 0.8;
|
||
.money {
|
||
color: #fe2278;
|
||
}
|
||
}
|
||
.bottom-right {
|
||
font-size: 0.14rem;
|
||
color: #303133;
|
||
opacity: 0.8;
|
||
i {
|
||
font-size: 0.14rem;
|
||
}
|
||
}
|
||
}
|
||
.bottom-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 0.1rem;
|
||
.btn-left {
|
||
width: 39%;
|
||
height: 0.4rem;
|
||
line-height: 0.4rem;
|
||
}
|
||
.btn-right {
|
||
width: 60%;
|
||
margin-left: 0.15rem;
|
||
height: 0.4rem;
|
||
line-height: 0.4rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.comp-wrap {
|
||
min-width: 1rem;
|
||
border: 0.01rem solid #e6e6e6;
|
||
border-radius: 0.02rem;
|
||
padding: 0.2rem 0.17rem;
|
||
|
||
.tag-parent {
|
||
position: relative;
|
||
|
||
.num-tag {
|
||
position: absolute;
|
||
background-color: #f00;
|
||
color: #fff;
|
||
height: 0.18rem;
|
||
line-height: 0.18rem;
|
||
padding: 0 0.06rem;
|
||
border-radius: 0.1rem;
|
||
font-size: 0.12rem;
|
||
text-align: center;
|
||
z-index: 1;
|
||
top: 0;
|
||
right: 0.12rem;
|
||
transform: translateY(-50%) translateX(100%);
|
||
}
|
||
}
|
||
|
||
.comp-btn {
|
||
overflow: inherit;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
}
|
||
.list-wrap {
|
||
border: 0.01rem solid #e6e6e6;
|
||
border-radius: 0.02rem;
|
||
height: 100%;
|
||
border-left: 0;
|
||
padding: 0 0.2rem;
|
||
box-sizing: border-box;
|
||
width: 0;
|
||
|
||
.content {
|
||
height: 100%;
|
||
}
|
||
|
||
.comp-btn {
|
||
width: 80%;
|
||
box-align: center;
|
||
margin-top: 0.2rem;
|
||
}
|
||
.header {
|
||
height: 0.66rem;
|
||
line-height: 0.66rem;
|
||
text-align: left;
|
||
color: #303133;
|
||
font-size: 0.14rem;
|
||
}
|
||
|
||
.body {
|
||
padding: 0.3rem;
|
||
}
|
||
}
|
||
.page-height {
|
||
height: 100%;
|
||
}
|
||
|
||
.common-wrap {
|
||
height: 100%;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|