302 lines
12 KiB
Vue
302 lines
12 KiB
Vue
<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>
|
||
<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.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 }}元</text>
|
||
</view>
|
||
<view class="name" v-else>
|
||
账户积分
|
||
<text class="text" v-if="memberInfo.point">（{{ memberInfo.point }}积分）</text>
|
||
</view>
|
||
<view class="iconfont iconxuanzhong"></view>
|
||
</view>
|
||
<view class="type-item" :class="{ active: discount.reduction }" @click="reduction">
|
||
<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.balance">
|
||
<view class="title">使用余额</view>
|
||
<view class="uni-flex">
|
||
<view class="type-item" :class="{ active: discount.is_use_balance, disabled: balance == 0 }" @click="useBalance">
|
||
<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>
|
||
</block>
|
||
|
||
<view class="title">支付方式</view>
|
||
<view class="uni-flex pay-type">
|
||
<view class="type-item" @click="switchPayType(item.type)" :class="{ active: item.type == type }" v-for="(item, index) in payType" :key="index">
|
||
<view class="pay-icon iconfont" :style="{ background: item.background }" :class="item.icon"></view>
|
||
<view class="name">{{ item.name }}</view>
|
||
<view class="iconfont iconxuanzhong"></view>
|
||
</view>
|
||
</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="$refs.remarkPopup.open()">备注</button>
|
||
<button class="default-btn cancel-btn" plain @click="cancelPayment">取消</button>
|
||
<button class="primary-btn" @click="confirm()" v-if="type != 'third' || payInfo.pay_money == 0">确认</button>
|
||
<button class="primary-btn" @click="thirdConfirm()" v-else>确认</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">继续收款（{{ 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="operation-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.coupon_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">{{ item.end_time | timeFormat('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()"></text>
|
||
</view>
|
||
<view class="money">扫码收款￥{{ payInfo.pay_money | moneyFormat }}</view>
|
||
<view class="scan-code-type">
|
||
<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'"><image :src="$util.img(qrcodeUrl)" mode="widthFix"></image></view>
|
||
<view class="scancode-wrap" v-show="scanCodeType == 'scancode'">
|
||
<input
|
||
type="number"
|
||
v-model="authCode"
|
||
:class="{ focus: scancodeFocus }"
|
||
:focus="scancodeFocus"
|
||
placeholder="请点击输入框聚焦扫码或输入付款码"
|
||
@confirm="scancode"
|
||
@focus="scancodeFocus = true"
|
||
@blur="scancodeFocus = false"
|
||
/>
|
||
<image :src="$util.img('public/uniapp/cashier/scan_code_tip.png')" mode="widthFix"></image>
|
||
</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" /></view>
|
||
<view class="footer"><button type="default" class="primary-btn" @click="remarkConfirm">确认</button></view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import payment from './nc-payment.js';
|
||
export default {
|
||
name: 'ncPayment',
|
||
mixins: [payment]
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './nc-payment.scss';
|
||
</style>
|