|
|
@@ -1,11 +1,25 @@
|
|
|
<template>
|
|
|
<div class="pay">
|
|
|
<div class="card inpt-box">
|
|
|
- <div class="big-inp flex_r flex_jb flex_ac">
|
|
|
- <div class="tit">消费总额</div>
|
|
|
- <input v-model="Body.money" @input="payCalculate" placeholder="请询问服务员后输入" class="inp"/>
|
|
|
- </div>
|
|
|
- <input v-model="Body.not_discount" @input="payCalculate" placeholder="请询问服务员后输入" class="inp bur"/>
|
|
|
+ <view class="big-inp flex_r flex_jb flex_ac">
|
|
|
+ <view class="tit">消费总额</view>
|
|
|
+ <view class="flex_r flex_ac flex_je color">
|
|
|
+ <span class="fw-700 yuanab" :style="{right: (mlength*24-mlength*2.4)+'rpx'}" v-if="Body.money && Body.money >=0">¥</span>
|
|
|
+ <input type="digit" focus v-model="Body.money" @input="payCalculate" class="inp" v-if="Body.money"/>
|
|
|
+ <input type="digit" focus v-model="Body.money" @input="payCalculate" placeholder="请询问服务员后输入" placeholder-style="font-size: 28rpx; color: #999; font-weight: 500;" v-else class="inp"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex_r flex_jb flex_ac bur">
|
|
|
+ <view class="flex_c ">
|
|
|
+ <span class="t">不参与优惠金额</span>
|
|
|
+ <span class="b">(最高消费总额*{{discounts.max_discounted*100 || 0}}%)</span>
|
|
|
+ </view>
|
|
|
+ <view class="flex_r flex_ac flex_je disinp">
|
|
|
+ <span class="fw-700 yuanab1" :style="{right: (dlength*20-dlength*2.5)+'rpx'}" v-if="Body.not_discount">¥</span>
|
|
|
+ <input type="digit" v-model="Body.not_discount" @input="payCalculate" class="inp" v-if="Body.not_discount"/>
|
|
|
+ <input type="digit" v-model="Body.not_discount" @input="payCalculate" placeholder="请询问服务员后输入" placeholder-style="font-size: 28rpx; color: #999; font-weight: 500;" v-else class="inp"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</div>
|
|
|
<div class="money card">
|
|
|
<div class="li flex_r flex_jb">
|
|
|
@@ -16,8 +30,48 @@
|
|
|
<span>赠送茶宝</span>
|
|
|
<span>{{ discounts.chabao || 0 }}</span>
|
|
|
</div>
|
|
|
+ <div class="li flex_r flex_jb">
|
|
|
+ <span>可用余额</span>
|
|
|
+ <span>{{ user_money || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="money card flex_c">
|
|
|
+ <div class="li flex_r flex_ac flex_jb">
|
|
|
+ <span class="sum fw-700">合计:<span class="color">¥{{ Math.floor((Number(Body.money) - Number(discounts.discount)) * 100) / 100 || 0 }}</span></span>
|
|
|
+ <span class="p color fw-700">实际支付</span>
|
|
|
+ </div>
|
|
|
+ <div class="li flex_r flex_ac flex_jb color right">
|
|
|
+ <span class="dis">余额抵扣:¥{{ user_money }}</span>
|
|
|
+ <span class=" fw-700">
|
|
|
+ ¥{{ (Math.floor(((Number(Body.money) - Number(user_money) - Number(discounts.discount))) * 100) / 100 >= 0
|
|
|
+ ? Math.floor(((Number(Body.money) - Number(user_money) - Number(discounts.discount))) * 100) / 100 : 0) || 0 }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="btn" @click="onpay">确认买单</div>
|
|
|
+ <div class="bto flex_r flex_jb flex_ac">
|
|
|
+ <span @click="goto('/pagesC/settledMerchant/tip')">优惠说明</span>
|
|
|
+ <button open-type="contact" style="background: none; border: none !important; border-radius: none !important; line-height: 1; padding: 0; margin: 0;">
|
|
|
+ <span style="font-size: 24rpx; color: #808080;">问题反馈</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="subBtn flex_r flex_ac flex_jb">
|
|
|
+ <div class="subBtn_left flex_c">
|
|
|
+ <span class="sum">合计:<span class="yuan">¥</span>{{ Math.floor((Number(Body.money) - Number(discounts.discount)) * 100) / 100 || 0 }}</span>
|
|
|
+ <span class="dis">余额抵扣:¥{{ user_money }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="subBtn_center">
|
|
|
+ <span class="yuan">¥</span><span>
|
|
|
+ {{ (Math.floor(((Number(Body.money) - Number(user_money) - Number(discounts.discount))) * 100) / 100 >= 0
|
|
|
+ ? Math.floor(((Number(Body.money) - Number(user_money) - Number(discounts.discount))) * 100) / 100 : 0) || 0 }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="subBtn_right">
|
|
|
+ <div class="subBtn_right_btn" @click="onpay">
|
|
|
+ 确认买单
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -33,18 +87,53 @@ export default {
|
|
|
return {
|
|
|
Body: {},
|
|
|
merchant: {},
|
|
|
- discounts: {}
|
|
|
+ discounts: {},
|
|
|
+ user_money: 0,
|
|
|
+ mlength: 0,
|
|
|
+ dlength: 0
|
|
|
};
|
|
|
},
|
|
|
+ watch:{
|
|
|
+ "Body.money"(e){
|
|
|
+ if(e){
|
|
|
+ if(e.toString().length<=19){
|
|
|
+ this.mlength = e.toString().length || 0
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.mlength = 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "Body.not_discount"(e){
|
|
|
+ if(e){
|
|
|
+ if(e.toString().length<=20){
|
|
|
+ this.dlength = e.toString().length || 0
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.dlength = 1
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
payCalculate(){
|
|
|
- post("v1/merchant/quickPay",this.Body).then(res=>{
|
|
|
+ // this.Body.money<=0?this.Body.money=0:''
|
|
|
+ // this.Body.not_discount<=0?this.Body.not_discount=0:''
|
|
|
+ let params={
|
|
|
+ shopt_id: this.Body.shopt_id,
|
|
|
+ money: this.Body.money || 0,
|
|
|
+ not_discount: this.Body.not_discount || 0,
|
|
|
+ }
|
|
|
+ post("v1/merchant/quickPay",params).then(res=>{
|
|
|
if(res.code == 0){
|
|
|
this.discounts = res.data
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
onpay(){
|
|
|
+ if(Number(this.Body.not_discount) > Math.floor(Number(this.Body.money) * Number(this.discounts.max_discounted) * 100) / 100){
|
|
|
+ this.$toast(`当前订单不参与优惠金额最大不能超过${Math.floor(Number(this.Body.money) * Number(this.discounts.max_discounted) * 100) / 100}。`)
|
|
|
+ return
|
|
|
+ }
|
|
|
let that = this
|
|
|
uni.showModal({
|
|
|
title: "温馨提示",
|
|
|
@@ -79,12 +168,15 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- onLoad(da) {
|
|
|
+ async onLoad(da) {
|
|
|
this.merchant = this.getLS("topay_merchant")
|
|
|
uni.setNavigationBarTitle({ title: this.merchant.name })
|
|
|
this.Body.shopt_id = this.merchant.id
|
|
|
+ this.user_money = (await uni.Luserfun()).property;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.payCalculate()
|
|
|
},
|
|
|
- onShow() {},
|
|
|
mounted() {},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -93,37 +185,85 @@ export default {
|
|
|
.pay{
|
|
|
padding: 28rpx 32rpx;
|
|
|
}
|
|
|
+.color{
|
|
|
+ color: #01A23A;
|
|
|
+}
|
|
|
+.fw-700{
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
.inpt-box{
|
|
|
+ .inp{
|
|
|
+ // background-color: rgba($color: #000, $alpha: 0.07);
|
|
|
+ // width: auto;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ // padding: 0 30rpx;
|
|
|
+ text-align: right;
|
|
|
+ color: #8a8a8a;
|
|
|
+ }
|
|
|
.big-inp{
|
|
|
margin-bottom: 20rpx;
|
|
|
+ position: relative;
|
|
|
.inp{
|
|
|
- width: calc(100% - 258rpx);
|
|
|
- font-size: 32rpx;
|
|
|
+ // max-width: calc(100% - 158rpx);
|
|
|
+ width: auto !important;
|
|
|
+ font-size: 36rpx !important;
|
|
|
+ color: #01A23A;
|
|
|
+ width: fit-content;
|
|
|
+ }
|
|
|
+ // .inp::before{
|
|
|
+ // content: "¥";
|
|
|
+ // position: absolute;
|
|
|
+ // left: 5px;
|
|
|
+ // top: 0;
|
|
|
+ // }
|
|
|
+ .yuanab{
|
|
|
+ position: absolute;
|
|
|
+ // left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .disinp{
|
|
|
+ color: #808080;
|
|
|
+ font-size: 28rpx;
|
|
|
+ position: relative;
|
|
|
+ .yuanab1{
|
|
|
+ position: absolute;
|
|
|
+ padding-bottom: 2rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.tit{
|
|
|
font-size: 36rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .inp{
|
|
|
- background-color: rgba($color: #000, $alpha: 0.07);
|
|
|
- height: 72rpx;
|
|
|
- line-height: 72rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- text-align: right;
|
|
|
+ font-weight: 700;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
+
|
|
|
.bur{
|
|
|
- position: relative;
|
|
|
- padding-left: 228rpx;
|
|
|
- &::after{
|
|
|
- content: "不参与优惠金额";
|
|
|
- position: absolute;
|
|
|
- left: 30rpx;
|
|
|
- top: 0;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #222;
|
|
|
+ // position: relative;
|
|
|
+ // padding-left: 228rpx;
|
|
|
+ padding: 0 14rpx 0 10rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: rgba($color: #000, $alpha: 0.07);
|
|
|
+ // &::after{
|
|
|
+ // content: "不参与优惠金额";
|
|
|
+ // position: absolute;
|
|
|
+ // left: 30rpx;
|
|
|
+ // top: 0;
|
|
|
+ // font-size: 24rpx;
|
|
|
+ // color: #222;
|
|
|
+
|
|
|
+ // }
|
|
|
+ .t{
|
|
|
+ color: #000;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ .b{
|
|
|
+ color: #7F7F7F;
|
|
|
+ font-size: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -138,6 +278,12 @@ export default {
|
|
|
span {
|
|
|
font-size: 30rpx;
|
|
|
}
|
|
|
+ .sum {
|
|
|
+ // padding-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ .dis{
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.corg {
|
|
|
@@ -150,22 +296,59 @@ export default {
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
- padding: 28rpx 30rpx;
|
|
|
+ padding: 26rpx 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
+ .right{
|
|
|
+ text-align: right;
|
|
|
+ .p{
|
|
|
+ // padding-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.btn{
|
|
|
color: #fff;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
font-size: 36rpx;
|
|
|
- background: #17bb87;
|
|
|
+ font-weight: 700;
|
|
|
+ background: #01A23A;
|
|
|
border-radius: 45rpx;
|
|
|
text-align: center;
|
|
|
margin-top: 100rpx;
|
|
|
}
|
|
|
+.bto{
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 26rpx 30rpx 0;
|
|
|
+ color: #808080;
|
|
|
+ button{
|
|
|
+ background:#F5F6F8;
|
|
|
+ border: 1rpx solid #F5F6F8;
|
|
|
+ }
|
|
|
+ button::after {
|
|
|
+ border: 0 !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-input-placeholder { /* WebKit browsers */
|
|
|
+ color: #999;
|
|
|
+ font-size:14px;
|
|
|
+}
|
|
|
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
|
+ color: #999;
|
|
|
+ font-size:14px;
|
|
|
+}
|
|
|
+::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
|
+ color: #999;
|
|
|
+ font-size:14px;
|
|
|
+}
|
|
|
+:-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
|
+ color: #999;
|
|
|
+ font-size:14px;
|
|
|
+}
|
|
|
</style>
|