708 lines
17 KiB
Vue
708 lines
17 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="$refs.selectMember.open()">更换会员</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" @click="$refs.selectMember.open()">查询会员</button>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="title">
|
||
<view>
|
||
结算清单（
|
||
<text>{{ orderData.goods_num }}</text>
|
||
）
|
||
</view>
|
||
<view class="clear" @click="clearGoods">
|
||
<text class="iconfont iconqingchushujuku"></text>
|
||
<text>清空</text>
|
||
</view>
|
||
</view>
|
||
<view class="content-list common-scrollbar">
|
||
<block v-if="orderData.goods_list.length && Object.keys(goodsData).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"
|
||
@error="item.goods_image = $util.img('public/uniapp/default_img/goods.png')"
|
||
></image>
|
||
</view>
|
||
<view class="item-info">
|
||
<view class="item-name">{{ item.sku_name }}</view>
|
||
<view class="item-del" @click="deleteGoods(item)">删除</view>
|
||
<view class="item-spe">{{ item.spec_name }}</view>
|
||
<view class="card-name" v-if="item.card_item_id && goodsData['sku_name' + item.sku_id + 'item_id' + item.card_item_id]">
|
||
使用卡项：{{ goodsData['sku_name' + item.sku_id + 'item_id' + item.card_item_id].card_name }}
|
||
</view>
|
||
<view class="item-price">
|
||
<text class="member-price" v-if="item.is_member_price">Svip</text>
|
||
<text class="unit">￥</text>
|
||
{{ item.price | moneyFormat }}
|
||
</view>
|
||
</view>
|
||
<view class="item-num">
|
||
<view class="num-dec" @click="dec(item)">-</view>
|
||
<view class="num" v-if="item.card_item_id && goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id]">
|
||
{{ goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id].num }}
|
||
</view>
|
||
<view class="num" v-else-if="goodsData['sku_num' + item.sku_id]">{{ goodsData['sku_num' + item.sku_id].num }}</view>
|
||
<view class="num" v-else>{{ item.num }}</view>
|
||
<view class="num-inc" @click="inc(item)">+</view>
|
||
</view>
|
||
<view class="card-deduction" v-if="item.card_info && Object.keys(item.card_info).length">
|
||
卡项抵扣：{{ item.card_info.goods_name }}抵扣￥{{ item.num * item.goods_money }}({{ item.num }}次)
|
||
</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"></view>
|
||
</view>
|
||
<view class="bottom-btn">
|
||
<button class="default-btn btn-left" :disabled="orderData.goods_num == 0" @click="pay('cash')">现金收款</button>
|
||
<button class="primary-btn btn-right" :disabled="orderData.goods_num == 0" @click="pay('')">收款￥{{ orderData.pay_money | moneyFormat }}</button>
|
||
</view>
|
||
</view>
|
||
<view class="pay-shade" v-show="type == 'pay'"></view>
|
||
</view>
|
||
<view class="uni-flex uni-row common-wrap" style="flex: 2;">
|
||
<view class="comp-wrap" v-show="type != 'pay'">
|
||
<button class=" comp-btn" :class="type == 'goods' ? 'primary-btn' : 'default-btn'" @click="type = 'goods'">商品</button>
|
||
<button class=" comp-btn" :class="type == 'member' ? 'primary-btn' : 'default-btn'" @click="showMember">会员</button>
|
||
<button class="comp-btn" :class="type == 'card' ? 'primary-btn' : 'default-btn'" @click="showMemberCard">会员卡项</button>
|
||
|
||
<button class="default-btn comp-btn" @click="wholeOrderCancel()">整单取消</button>
|
||
<view class="tag-parent">
|
||
<button class="comp-btn" :class="type == 'order' ? 'primary-btn' : 'default-btn'" @click="hangingOrder">挂/取单</button>
|
||
<text class="num-tag" v-if="orderNum > 0">{{ orderNum < 100 ? orderNum : '99+' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-wrap" style="flex: 1;">
|
||
<!-- 提单 -->
|
||
<view v-show="type == 'order'"><nc-pend-order ref="order" @takeorder="takeorder"></nc-pend-order></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 class="content" v-show="type == 'card'"><nc-member ref="member" @selectGoods="selectMemberGoods"></nc-member></view>
|
||
|
||
<!-- 商品 -->
|
||
<view class="content" v-show="type == 'goods'"><nc-goods @select="selectGoods" :goods-ids="goodsIds" ref="goods"></nc-goods></view>
|
||
|
||
<view class="content payment-content" v-show="type == 'pay'">
|
||
<nc-payment ref="payment" :pay-money="orderData.pay_money" @cancel="cancelPayment" @success="paySuccess" :out-trade-no="outTradeNo"></nc-payment>
|
||
</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>
|
||
<u-icon name="arrow-down"></u-icon>
|
||
</uni-popup>
|
||
|
||
<nc-select-member ref="selectMember"></nc-select-member>
|
||
</base-page>
|
||
</template>
|
||
|
||
<script>
|
||
import billing from './public/js/billing.js';
|
||
import ncSelectMember from '@/components/nc-select-member/nc-select-member.vue';
|
||
import ncMemberDetail from '@/components/nc-member-detail/nc-member-detail.vue';
|
||
export default {
|
||
components: { ncSelectMember, ncMemberDetail },
|
||
onLoad() {
|
||
uni.hideTabBar({});
|
||
},
|
||
data() {
|
||
return {
|
||
memberList: []
|
||
};
|
||
},
|
||
mixins: [billing]
|
||
};
|
||
</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;
|
||
}
|
||
|
||
.header-box {
|
||
padding: 0.15rem;
|
||
border-bottom: 0.01rem solid #e6e6e6;
|
||
|
||
.search-box {
|
||
.head-search {
|
||
display: flex;
|
||
|
||
.search-switch {
|
||
width: 0.7rem;
|
||
}
|
||
|
||
.search-input {
|
||
margin-left: 0.1rem;
|
||
display: flex;
|
||
border-width: 0.01rem;
|
||
border-style: solid;
|
||
border-color: #e6e6e6;
|
||
height: 0.3rem;
|
||
align-items: center;
|
||
padding-left: 0.05rem;
|
||
width: calc(100% - 1.3rem);
|
||
|
||
.iconfont {
|
||
}
|
||
|
||
input {
|
||
margin-left: 0.05rem;
|
||
}
|
||
}
|
||
|
||
.search-btn {
|
||
width: 0.55rem;
|
||
margin-left: 0.1rem;
|
||
padding: 0 0.1rem;
|
||
height: 0.32rem;
|
||
font-size: 0.12rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
flex-wrap: wrap;
|
||
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;
|
||
}
|
||
.card-name {
|
||
font-size: 0.12rem;
|
||
margin-top: 0.05rem;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #999;
|
||
}
|
||
.member-price {
|
||
border-radius: 0.02rem;
|
||
padding: 0.01rem 0.05rem;
|
||
background-color: rgba($primary-color, $alpha: 0.1);
|
||
color: #8558fa;
|
||
font-size: 0.12rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
.item-price {
|
||
font-size: 0.14rem;
|
||
margin-top: 0.05rem;
|
||
margin-left: -0.03rem;
|
||
.unit {
|
||
font-size: 0.12rem;
|
||
}
|
||
}
|
||
}
|
||
.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 {
|
||
color: $primary-color;
|
||
cursor: pointer;
|
||
margin-right: -0.8rem;
|
||
margin-top: -0.2rem;
|
||
font-size: 0.14rem;
|
||
float: right;
|
||
}
|
||
.card-deduction {
|
||
width: 100%;
|
||
font-size: 0.12rem;
|
||
margin-top: 0.05rem;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: 1.3rem;
|
||
height: 0.4rem;
|
||
line-height: 0.4rem;
|
||
}
|
||
|
||
.btn-right {
|
||
flex: 1;
|
||
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: initial;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
}
|
||
|
||
.payment-content {
|
||
border-left: 0.01rem solid #e6e6e6;
|
||
padding-left: 0.17rem;
|
||
}
|
||
|
||
.list-wrap {
|
||
padding: 0 0.2rem;
|
||
border: 0.01rem solid #e6e6e6;
|
||
border-radius: 0.02rem;
|
||
height: 100%;
|
||
border-left: 0;
|
||
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;
|
||
border-bottom: 0.01rem solid #e6e6e6;
|
||
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>
|