users/pages/order/offlinepay/index.vue

266 lines
11 KiB
Vue

<template>
<view>
<view class="top-main-box">
<view v-if="merch.merchname">
<navigator @click="go2MerchIndex(merchid)" class="fukuan-top">
<view>
<view class="fukuan-title">付款给[{{ merch.merchname }}]</view>
<view class="fukuan-shanghu"><text>(点击前往商家店铺)</text></view>
</view>
<image style="border-radius:12rpx;" :src="merch.logo"
@error="this.merch.logo = 'http://yuledui.oss-cn-qingdao.aliyuncs.com/' + merch.logo"></image>
</navigator>
<view class="fui-cell-group fukuan-jin-e">
<view class="top-money-remark" @click="toggleKeyboard(1)">
<text @longpress="showSpreadRemark">金额</text>
<text @click="showRemarkClick" class="reamrk-btn">备注</text>
</view>
<view class="fui-cell" @click="toggleKeyboard(1)">
<view class="fui-cell-labelf">¥</view>
<view class="fui-cell-remark noremark"
style="margin-left:25rpx;text-align:left;font-size:58rpx;">
<text v-if="!list.realprice" :style="'opacity:' + mockInputFocusText + ';'">|</text>
<text v-if="list.realprice" class="fui-input textl" id="price">{{ list.realprice ?
list.realprice : '' }}</text>
<text v-else style="opacity:0.5;">在此输入金额</text>
</view>
</view>
<view class="remark-money"><input v-if="showRemarkInput" @input="listChange" class="fui-input textl"
id="remark" placeholder="请输入备注" type="text" /></view>
</view>
</view>
<!-- 储值卡抵扣 -->
<block v-if="recharge > 0"> <!-- 简单隐藏一下 -->
<view class="fui-cell-group" v-if="!hideRechargeDeduct">
<view class="fui-cell" v-if="list.realprice">
<block v-if="recharge > 0">
<view>
<checkbox-group @change="useRechargeCheckBox" style="transform: scale(0.75);">
<checkbox color="#ed6d00" :checked="use_deduct_recharge"></checkbox>
</checkbox-group>
</view>
<view class="fui-cell-info" style="color:#666;flex:inherit;margin-right:15rpx;">
<text v-if="merch.third_company_credit_order == 'yes'">使用{{
merch.third_company_credit_merchname }}积分抵扣</text>
<text v-else>使用储值卡抵扣</text>
</view>
<view class="flex">
<view class="badge badge-danger " style="font-size:30rpx;"
v-if="list.deduct_recharge && list.deduct_recharge != undefined">
{{ list.deduct_recharge }}元
</view>
</view>
</block>
</view>
</view>
</block>
<!-- /储值卡抵扣 -->
<!-- 金豆赠送活动抵扣 -->
<view class="fui-cell-group" v-if="credit1_hot_set>0&&credit1_hot_set_jine>=20">
<block v-if="ismobile">
<view class="fui-cell" v-if="list.realprice">
<view>
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber_hot" class="mini-btn"></button>
</view>
<view class="fui-cell-info" style="color:#666;flex:inherit;margin-right:15rpx;">{{ activity_platform }}赠送{{ credit1_hot_rang }}金豆</view>
<view class="flex">
<view class="" style="font-size:30rpx;color:red">可抵扣约{{ credit1_hot_rang*0.1|limitDecimal }}元
</view>
</view>
</view>
</block>
<block v-else>
<view class="fui-cell" v-if="list.realprice">
<view>
<checkbox-group @change="useCreditCheckBox_hot" style="transform: scale(0.75);">
<checkbox color="#ed6d00" value="1" :checked="use_deductprice_hot"></checkbox>
</checkbox-group>
</view>
<view class="fui-cell-info" style="color:#666;flex:inherit;margin-right:15rpx;">{{ activity_platform }}赠送{{ credit1_hot_rang }}金豆</view>
<view class="flex">
<view class="" style="font-size:30rpx;color:red">可抵扣约{{ credit1_hot_rang*0.1|limitDecimal }}元
</view>
</view>
</view>
</block>
</view>
<!-- /金豆赠送活动抵扣 -->
<!-- 金豆抵扣 -->
<view class="fui-cell-group" v-if="!hideCreditDeduct">
<!-- 小秦的版本1.0
<view class="fui-cell" v-if="list.realprice">
<block v-if="credit1 > 0">
<view>
<checkbox-group @change="useCreditCheckBox" style="transform: scale(0.75);">
<checkbox color="#ed6d00" :checked="use_deductprice"></checkbox>
</checkbox-group>
</view>
<view class="fui-cell-info" style="color:#666;flex:inherit;margin-right:15rpx;">使用金豆抵扣</view>
<view class="flex">
<block v-if="list.deductprice && list.deductprice != undefined&&list.deductcredit > 0">
<view class="badge badge-danger " style="font-size:30rpx;">{{ list.deductprice }}元
</view>
<view class="fui-cell-info " style="color:#FF9933;widht:100%;margin-left:6.2px">-{{
list.deductcredit }}豆</view>
<text @click="showMiniCreditdeductTips" class="icox icox-bangzhuzhongxin"
style="margin-left: 10rpx;"></text>
</block>
<text
v-if="(list.realprice < min_deduct_credit_price && credit1 > 0) || (credit1 * merch.credit_pay_rate < 0.1 && credit1 > 0)"
class="fui-cell-info"
style="color:#666;flex:inherit;margin-left:15rpx;font-size:24rpx;">
金豆可抵扣小于{{ min_deduct_credit_price }}元
</text>
</view>
</block>
<text class="text tip-txt" v-else>暂无可抵扣金豆</text>
</view> -->
<view class="fui-cell" style="flex-wrap:wrap;" v-if="list.realprice">
<block v-if="credit1 > 0">
<block v-if="ismobile">
<view>
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="mini-btn"></button>
</view>
<view class="fui-cell-info" style="color:#666;flex:inherit;margin-right:15rpx;">金豆会员享更多优惠</view>
<view class="flex">
<view style="font-size:30rpx;margin-left:60rpx;color:red">本次消费可用金豆抵扣约{{use_max_credit_money}}元
</view>
</view>
</block>
<block v-else>
<view>
<checkbox-group @change="useCreditCheckBox" style="transform: scale(0.75);">
<checkbox color="#ed6d00" :checked="use_deductprice"></checkbox>
</checkbox-group>
</view>
<view class="fui-cell-info" style="color:#666;flex:inherit;margin-right:10rpx;">金豆会员享更多优惠</view>
<view class="flex">
<view style="font-size:30rpx;margin-left:60rpx;color:red">本次消费可用金豆抵扣约{{use_max_credit_money}}
</view>
</view>
</block>
</block>
<text class="text tip-txt" v-else>暂无可抵扣金豆</text>
</view>
</view>
<!-- /金豆抵扣 -->
<view class="fui-cell-group">
<!-- 满减 -->
<view class="fui-cell ">
<view v-if="list.money_sub > 0" class="fui-cell-info credit-title-txt">
随机立减:
<text style="color:#1aac19;">{{ list.money_sub }}元</text>
<text class="tip-txt hide"><text style="margin-left:5rpx">(消费越多 优惠越多)</text></text>
</view>
<view class="fui-cell-info credit-title-txt">
<text v-if="merch.third_company_credit_order == 'yes'">{{ merch.third_company_credit_merchname
}} {{ merch.third_company_credit_name }}</text>
<text v-else>储值余额</text>
<text>:</text>
<text style="color:#0099CC;">{{ recharge?recharge:0.00 }}元</text>
<view class="tip-txt"><text class="hide">(消费所得金豆可用于抵扣现金)</text></view>
</view>
</view>
<navigator class="fui-cell " openType="navigate">
<view v-if="list.credit" class="fui-cell-info credit-title-txt">
金豆奖励:
<text class="text-danger" style="color:#FF9933;">{{ list.credit }}豆</text>
<view class="tip-txt hide"><text>(所得金豆可以再次抵现)</text></view>
</view>
<view class="fui-cell-info credit-title-txt">
金豆余额:
<text style="color:#FF9933;">{{ credit1?credit1:0.00 }}豆</text>
<text @click="showMiniCreditdeductTips" class="icox icox-bangzhuzhongxin" style="margin-left: 5rpx;"></text>
<view class="tip-txt"><text class="hide">(消费所得金豆可用于抵扣现金)</text>
</view>
</view>
</navigator>
<navigator target="miniProgram" :app-id="merch.third_company_credit_miniappid" path="/pages/index/index"
class="fui-cell"
v-if="merch.third_company_credit_order == 'yes' && merch.third_company_credit_miniappid">
<image style="width: 90rpx;height: 90rpx;" v-if="merch.third_company_credit_merchlogo != ''"
class="icon" :src="merch.third_company_credit_merchlogo"></image>
<view class="fui-cell-info credit-title-txt">
<view class="text">
<text>{{ merch.third_company_credit_miniappid_click_tips }}</text>
</view>
</view>
</navigator>
<view v-if="list.realprice > 0" class="fui-cell " openType="navigate">
<view class="fui-cell-info credit-title-txt">
最终应付:
<text class="realprice">{{ list.needpay }}元</text>
<view class="tip-txt hide"><text>(所得金豆可以再次抵现)</text></view>
</view>
</view>
</view>
<view class="fui-cell-group">
<navigator class="fui-cell" openType="navigate" url="/pages/public/coupon/index?type=0"
v-if="list.couponcount > 0">
<view class="fui-cell-info" style="color:#666">{{ !data.couponname ? '选择优惠券' : '已选择优惠券:' +
data.couponname }}</view>
<view class="fui-cell-remark">
<view class="badge badge-danger">{{ list.couponcount }}</view>
</view>
<text class="text" v-if="list.couponcount <= 0">无可用</text>
</navigator>
</view>
<view :class="'fui-footer '" class="hide" v-if="list.realprice">
<view class="tool nopadding">
<view class="text">
<view class="title text-right">
需付:
<text class="text-danger" style="font-size:32rpx;">{{ list.needpay }}元</text>
</view>
</view>
<view class="text">
<view class="title text-right" style="font-size:26rpx;color:gray;">
获得金豆奖励
<text class="text-danger" style="color:#FF9933;">{{ list.credit }}</text>
</view>
</view>
<view class="btns">
<text v-if="!on_paying" @tap="submitFun" class="btn btn-danger ">立即支付</text>
<text v-if="on_paying" class="btn btn-danger ">支付中...</text>
</view>
</view>
</view>
</view>
<!-- 数字人民币显示 -->
<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="mini-btn" v-if="ismobile">授权手机号</button> -->
<button @click="useEcnyPay" class="e-cny-button" v-if="merch.e_cny_qrurl_psbc">点我使用数字人民币支付</button>
<!-- /数字人民币 -->
<view class="yuledui-biaoyu">
<text>要省钱 就用2</text>
<text class="yld-txt">余乐兑</text>
<text class="shangbiao-txt">®</text>
</view>
<view style="text-align:center;"> <!-- 隐藏键盘按钮 -->
<img @click="toggleKeyboard" class="hide-btn"
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/wx_miniapp/order/offlinepay/down-hide.png" />
</view>
<view :class="showKeyBoard ? '' : 'hide'" class="bottom-key">
<cwx-keyboard v-if="option.cashierid && option.cashierid != '' && option.total > 0" ref="clearMoney"
@confirmEvent="submitFun" :hideInputNumber="true" btn-color="#08c163" title="点我付款"></cwx-keyboard>
<cwx-keyboard v-else ref="clearMoney" @oninputBind="onMoneyInput" @confirmEvent="submitFun"
:money.sync="list.realprice" btn-color="#08c163" title="付款"></cwx-keyboard>
</view>
</view>
</template>
<script src="./index.js"></script>
<style>
@import './index.css';
</style>