|
|
@@ -0,0 +1,293 @@
|
|
|
+<template>
|
|
|
+ <van-popup
|
|
|
+ v-model="popup"
|
|
|
+ position="bottom"
|
|
|
+ :animation="false"
|
|
|
+ :maskClick="false"
|
|
|
+ :close-on-click-overlay="false"
|
|
|
+ >
|
|
|
+ <div class="popue_box" v-if="orderDetail && orderDetail.discountInfo">
|
|
|
+ <div class="popue_box_index1">积分减免</div>
|
|
|
+ <div class="popue_box_index">
|
|
|
+ <div>减免规则</div>
|
|
|
+ <div style="color: #989898">{{ newMemberPoints.pointsPerUnit }}积分抵扣1小时</div>
|
|
|
+ </div>
|
|
|
+ <div class="popue_box_index">
|
|
|
+ <div>可用积分</div>
|
|
|
+ <div style="color: #999999">{{ newMemberPointsAvailable }}分</div>
|
|
|
+ </div>
|
|
|
+ <div class="popue_box_index">
|
|
|
+ <div>抵扣时长</div>
|
|
|
+ <div class="popue_box_index" style="width: 335px">
|
|
|
+ <div class="popue_box_index4_xs van-hairline--surround">
|
|
|
+ <div class="popue_box_index4_xs_index1" @click="pointsMath('minus')">
|
|
|
+ -
|
|
|
+ </div>
|
|
|
+ <div class="popue_box_index4_xs_index2">{{ pointsTime }}</div>
|
|
|
+ <div class="popue_box_index4_xs_index3" @click="pointsMath('add')">
|
|
|
+ +
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color: #808080">
|
|
|
+ 小时
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popue_box_index5">
|
|
|
+ <div
|
|
|
+ class="popue_box_index4_by"
|
|
|
+ @click="cancelPointsMathPopup()"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="popue_box_index4_by1"
|
|
|
+ @click="savePointsMathPopup()"
|
|
|
+ >
|
|
|
+ 确定
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-number-keyboard safe-area-inset-bottom/>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {mapState} from "vuex";
|
|
|
+import {Toast} from "vant";
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'newMemberPointsIndex',
|
|
|
+ computed:{
|
|
|
+ ...mapState({
|
|
|
+ orderDetail: (state) => state.order.orderDetail,
|
|
|
+ }),
|
|
|
+ parkingRule() {
|
|
|
+ if(!this.orderDetail?.parkingRule) {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ return this.orderDetail.parkingRule
|
|
|
+ },
|
|
|
+ newMemberPoints () {
|
|
|
+ return this.orderDetail.discountInfo.newMemberPoints
|
|
|
+ },
|
|
|
+ // points () {
|
|
|
+ // if(!this.orderDetail?.discountInfo?.points || !this.orderDetail.discountInfo?.points?.length) {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // return this.orderDetail.discountInfo.points[0]
|
|
|
+ // },
|
|
|
+ // pointsTime() {
|
|
|
+ // if(!this.newMemberPoints?.discountFee) return 0
|
|
|
+ //
|
|
|
+ // this.newMemberPoints?.discountFee
|
|
|
+ // },
|
|
|
+ hourPrice() {
|
|
|
+ return this.parkingRule.hourPrice
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ popup: false,
|
|
|
+ pointsTime: 0,
|
|
|
+ available: 0,
|
|
|
+ newMemberPointsAvailable: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ open () {
|
|
|
+ if ( this?.newMemberPoints?.discountFee ) {
|
|
|
+ this.pointsTime = this?.newMemberPoints?.discountFee / this.hourPrice
|
|
|
+ }
|
|
|
+ this.newMemberPointsAvailable = this.newMemberPoints.available // 新会员积分
|
|
|
+ this.available = this.orderDetail.discountInfo.points[0].available // 积分
|
|
|
+ this.popup = true
|
|
|
+ },
|
|
|
+ pointsMath(type) {
|
|
|
+ const {usedDiscountHours, maxDiscountHours} = this.newMemberPoints
|
|
|
+ if ( type === 'minus' && this.pointsTime ) {
|
|
|
+ this.pointsTime = this.pointsTime - 1;
|
|
|
+ this.newMemberPointsAvailable = this.newMemberPointsAvailable + this.newMemberPoints.pointsPerUnit;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 可能还有隐藏上限，就是普通的points的使用，单次不能超过上限
|
|
|
+ if(type === 'add' && this.newMemberPointsAvailable > this.newMemberPoints.pointsPerUnit && (this.pointsTime + usedDiscountHours < maxDiscountHours)) {
|
|
|
+ this.pointsTime = this.pointsTime + 1
|
|
|
+ this.newMemberPointsAvailable = this.newMemberPointsAvailable - this.newMemberPoints.pointsPerUnit
|
|
|
+ } else {
|
|
|
+ Toast('当前优惠已达上限')
|
|
|
+ }
|
|
|
+ // 调整当前积分
|
|
|
+ // 调整points的积分available
|
|
|
+ },
|
|
|
+ cancelPointsMathPopup() {
|
|
|
+ this.popup = false
|
|
|
+ },
|
|
|
+ savePointsMathPopup() {
|
|
|
+ // 如果是重复提交的话
|
|
|
+ if(this.newMemberPoints.available === this.newMemberPointsAvailable) {
|
|
|
+ this.popup = false;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$store.dispatch('order/saveNewMemberPointsMath', {
|
|
|
+ newMemberPoints: {
|
|
|
+ ...this.newMemberPoints,
|
|
|
+ selected: this.pointsTime > 0,
|
|
|
+ discountFee: this.pointsTime > 0 ? this.pointsTime * this.hourPrice : 0,
|
|
|
+ "available": this.newMemberPointsAvailable,
|
|
|
+ },
|
|
|
+ callback: () => {
|
|
|
+ this.popup = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+/*积分*/
|
|
|
+.popue_box {
|
|
|
+ height: 695px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ .popue_box_index {
|
|
|
+ width: 92%;
|
|
|
+ margin-left: 4%;
|
|
|
+ height: 117px;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 34px;
|
|
|
+ text-align: right;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index1 {
|
|
|
+ width: 92%;
|
|
|
+ font-size: 34px;
|
|
|
+ margin-left: 4%;
|
|
|
+ font-weight: 700;
|
|
|
+ height: 117px;
|
|
|
+ line-height: 117px;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_xs {
|
|
|
+ width: 260px;
|
|
|
+ height: 72px;
|
|
|
+ border: 2px solid #D8DAE0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .popue_box_index4_xs_index1 {
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ background-color: #FAFBFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 72px;
|
|
|
+ border-right: 1px solid #e5e6ec;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_xs_index2 {
|
|
|
+ width: 116px;
|
|
|
+ height: 72px;
|
|
|
+ line-height: 72px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_xs_index3 {
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ background-color: #f5f8fb;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 72px;
|
|
|
+ border-left: 1px solid #e5e6ec;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index5 {
|
|
|
+ font-size: 30px;
|
|
|
+ width: 92%;
|
|
|
+ margin-left: 4%;
|
|
|
+ font-weight: 700;
|
|
|
+ height: 214px;
|
|
|
+ line-height: 90px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_by {
|
|
|
+ width: 320px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 90px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 60px;
|
|
|
+ text-align: center;
|
|
|
+ color: var(--k-color-primary-01, #064c8a);
|
|
|
+ font-weight: 700;
|
|
|
+ border: 1px solid var(--k-color-primary-01, #064c8a);
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue_popue_box_index4_by {
|
|
|
+ .color_popue_box_index4_by('blue');
|
|
|
+ }
|
|
|
+
|
|
|
+ .green_popue_box_index4_by {
|
|
|
+ .color_popue_box_index4_by('green');
|
|
|
+ }
|
|
|
+
|
|
|
+ .color_popue_box_index4_by(@value) {
|
|
|
+ @color: 'color-@{value}';
|
|
|
+ color: @@color;
|
|
|
+ border: 1px solid @@color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_by1 {
|
|
|
+ width: 320px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 90px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 60px;
|
|
|
+ text-align: center;
|
|
|
+ // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ background-color: var(--k-color-primary-01, #064c8a);
|
|
|
+ border: 1px solid var(--k-color-primary-01, #064c8a);
|
|
|
+ }
|
|
|
+}
|
|
|
+.popue_box_index4_by {
|
|
|
+ width: 320px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 90px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 60px;
|
|
|
+ text-align: center;
|
|
|
+ color: var(--k-color-primary-01, #064c8a);
|
|
|
+ font-weight: 700;
|
|
|
+ border: 1px solid var(--k-color-primary-01, #064c8a);
|
|
|
+}
|
|
|
+.popue_box_index4_by1 {
|
|
|
+ width: 320px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 90px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 60px;
|
|
|
+ text-align: center;
|
|
|
+ // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ background-color: var(--k-color-primary-01, #064c8a);
|
|
|
+ border: 1px solid var(--k-color-primary-01, #064c8a);
|
|
|
+}
|
|
|
+</style>
|
john