xlcs/xlcs-user/pagesOrder/confirmOrder/confirmOrder.vue

<template>
  <view class="gg">
    <u-navbar :border-bottom="false" :is-back="true">
      <view class="u-flex u-m-l-20 u-m-r-20">
        <view class="u-font-xl u-m-r-20">生成订单</view>
        <view class="u-font-xs u-light-color u-p-t-10">共{{ getSelectedCount }}件商品</view>
      </view>
    </u-navbar>
    <view class="gg-content">
      <scroll-view v-if="getCartInfoList" class="gg-cart-sv-container" scroll-y="true">
        <!-- 提货点 -->
        <!--        <u-card :padding="10" :show-head="false">
                  <view slot="body" class="u-m-10">提货点：{{ getLeaderAddressVo.takeName }}</view>
                </u-card> -->

        <u-card :padding="10" :show-head="true">
          <view slot="head" class="u-m-10">联系方式</view>
          <view slot="body" class="u-m-10">
            <u-input v-model="sumbitOrderForm.receiverName" class="u-p-b-20" placeholder="请输入姓名"/>
            <u-input v-model="sumbitOrderForm.receiverPhone" placeholder="请输入电话" type="number"/>
          </view>
        </u-card>

        <!-- 商品 -->
        <view v-for="(cartInfoListItem, index) in getCartInfoList" :key="index">
          <u-card :border="false" :padding="10" :show-head="showMultiCheckbox(index)">
            <view slot="head" class="u-m-10">
              <text>{{ cartInfoListItem.activityRule.ruleDesc }}</text>
            </view>
            <view slot="body">
              <view v-for="(cartInfoItem, idx) in cartInfoListItem.cartInfoList" :key="idx">
                <!-- 动态class绑定是为了确保最后一条底部线条不显示 -->
                <view :class="{ 'u-border-bottom': idx !== cartInfoListItem.cartInfoList.length - 1 }"
                      class="u-body-item u-flex u-col-between u-p-10">
                  <ListImgItem :lazyLoad="false"
                               :showBottom="cartInfoItem.skuType === 0 && cartInfoItem.isNewPerson === 1"
                               :showLeft="cartInfoItem.skuType === 1" :showRight="false"
                               :src="cartInfoItem.imgUrl" height="200rpx" width="200rpx"></ListImgItem>
                  <view class="u-p-b-20 u-m-l-20" style="flex:1">
                    <view>{{ cartInfoItem.skuName }}</view>
                    <view>购买数量：{{ cartInfoItem.skuNum }}</view>
                    <view class="u-flex u-row-between">
                      <view class="u-type-error">
                        <text>￥</text>
                        <text class="u-font-xl">{{ cartInfoItem.cartPrice }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </u-card>
        </view>

        <!-- 优惠券 -->
        <u-card v-if="getCartCouponInfoList.length > 0" :padding="10" :show-head="false">
          <view slot="body">
            <view class="coupon">
              <view v-for="couponInfoItem in getCartCouponInfoList" :key="couponInfoItem.id"
                    :class="{ selected: couponInfoItem.selected }" class="content u-m-b-20"
                    @click="switchCouponInfoItem(couponInfoItem)">
                <view class="left">
                  <view class="sum">
                    ￥
                    <text class="num">{{ couponInfoItem.amount }}</text>
                  </view>
                  <view class="type">
                    {{ couponInfoItem.couponType === 'FULL_REDUCTION' ? '满减券' : '现金券' }}
                  </view>
                  <view class="type">{{ getRangeType(couponInfoItem.rangeType) }}</view>
                </view>
                <view class="centre">
                  <view class="title">{{ couponInfoItem.couponName }}</view>
                  <view class="u-type-info">{{ couponInfoItem.rangeDesc }}</view>
                  <view class="valid-date">
                    过期时间：{{ dayjs(couponInfoItem.expireTime).format('YYYY-MM-DD') }}
                  </view>
                </view>
                <view class="right">
                  <block v-if="couponInfoItem.isSelect === 1">
                    <u-tag text="可以使用" type="error"/>
                  </block>
                  <block v-else>
                    <u-tag text="不能使用" type="info"/>
                  </block>

                  <block v-if="couponInfoItem.isOptimal === 1">
                    <u-tag text="最优推荐" type="error"/>
                  </block>
                  <block v-else>
                    <u-tag text="非优使用" type="info"/>
                  </block>
                </view>
              </view>
            </view>
          </view>
        </u-card>
      </scroll-view>

      <view class="gg-navigation">
        <view class="navigation">
          <view class="left">
            <view class="item u-p-l-20">
              <view class="u-font-sm u-line-1">
                <view class="u-type-error">现价:￥{{ getCartPriceInfo.totalAmount }}</view>
                <view class="u-font-xs u-type-info">
                  优惠券优惠:￥{{ getCartPriceInfo.couponReduceAmount }}
                  <text class="u-font-xs u-m-l-20 u-type-info">原价:</text>
                  <text
                      class="u-font-xs u-type-info">￥{{ getCartPriceInfo.originalTotalAmount }}
                  </text>
                </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="buy btn u-line-1" @click="createSubmitOrder">生成订单</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapActions, mapGetters, mapState} from 'vuex';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      couponId: 0,
      sumbitOrderForm: {
        couponId: 0,
        leaderId: 0,
        orderNo: '',
        receiverName: '',
        receiverPhone: ''
      }
    };
  },
  computed: {
    ...mapState('orderModule', ['order']),
    ...mapGetters('orderModule', ['getCartInfoList', 'getSelectedCount', 'getCartPriceInfo', 'getLeaderAddressVo',
      'showMultiCheckbox', 'getCartCouponInfoList'
    ]),
    getRangeType() {
      return function (rangeType) {
        switch (rangeType) {
          case 'ALL':
            return '全场通用';
          case 'SKU':
            return '指定商品';
          case 'CATEGORY':
            return '指定分类';
        }
      };
    }
  },
  methods: {
    dayjs,
    ...mapActions('orderModule', ['getConfirmOrderAction']),
    switchCouponInfoItem(couponInfoItem) {
      if (couponInfoItem.isSelect) {
        this.getCartCouponInfoList.forEach(item => (item.selected = false));
        couponInfoItem.selected = true;

        const couponReduceAmount = couponInfoItem.amount; // 优惠价格
        const totalAmount = this.getCartPriceInfo.originalTotalAmount - couponReduceAmount; // 总价

        this.getCartPriceInfo.totalAmount = totalAmount;
        this.getCartPriceInfo.couponReduceAmount = couponReduceAmount;
        this.couponId = couponInfoItem.id;
      } else {
        uni.showToast({
          title: '优惠券无法使用'
        });
      }
    },
    async createSubmitOrder() {
      this.sumbitOrderForm.orderNo = this.order.orderNo;
      this.sumbitOrderForm.couponId = this.couponId;
      this.sumbitOrderForm.leaderId = this.getLeaderAddressVo.leaderId;

      if (this.$u.test.isEmpty(this.sumbitOrderForm.receiverName)) {
        uni.showToast({
          title: '请输入提货者姓名',
          icon: 'none'
        });
        this.sumbitOrderForm.receiverName = '';
        return;
      }

      if (!this.$u.test.mobile(this.sumbitOrderForm.receiverPhone)) {
        uni.showToast({
          title: '请输入提货者手机号码',
          icon: 'none'
        });
        this.sumbitOrderForm.receiverPhone = '';
        return;
      }

      const result = await this.$u.api.postSubmitOrder(this.sumbitOrderForm);
      this.$u.route(`/pagesOrder/getOrderInfo/getOrderInfo?orderId=${result}`);
    }
  },
  mounted() {
    this.getConfirmOrderAction();

    this.getCartCouponInfoList.map(item => {
      if (item.selected) {
        this.couponId = item.id;
      }
    });
  }
};
</script>

<style lang="scss">
.gg {
  height: 100%;
  background-color: $u-bg-color;

  // scrollView的固定高度设置
  // 底部导航与顶部自定义导航高度需要减去
  &-cart-sv-container {
    height: calc(100vh - 90rpx - 136rpx);
  }

  // 底部导航
  &-navigation {
    width: 100%;
    height: 90rpx;
    position: fixed;
    bottom: 0;

    .navigation {
      height: 100%;
      display: flex;
      border: solid 2rpx #f2f2f2;
      background-color: #ffffff;
      padding: 12rpx 0;

      .left {
        display: flex;
        flex: 1;
        font-size: 20rpx;

        .item {
          margin: 0 10rpx;

          &.car {
            text-align: center;
            position: relative;
          }
        }
      }

      .right {
        display: flex;
        font-size: 28rpx;
        align-items: center;

        .btn {
          line-height: 66rpx;
          padding: 0 30rpx;
          border-radius: 36rpx;
          color: #ffffff;
        }

        .buy {
          background-color: #ff7900;
          margin: 0 30rpx;
        }
      }
    }
  }
}

.coupon {
  background-color: #ffffff;
  width: 100%;
  // border: 10rpx;
  color: $u-type-warning;
  font-size: 28rpx;

  .content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40rpx 20rpx;
    border: 10rpx;
    background-color: #fff5f4;

    .left {
      .sum {
        font-size: 32rpx;

        .num {
          font-size: 60rpx;
          font-weight: bold;
        }
      }
    }

    .centre {
      margin-left: 40rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: $u-main-color;
      }
    }

    .right {
      margin-left: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      u-tag {
        padding: 5rpx;
      }

      .immediate-use {
        padding: 0 20rpx;
        height: 50rpx;
        border-radius: 25rpx;
        line-height: 50rpx;
        background-color: $u-type-warning !important;
        color: #ffffff !important;
        font-size: 24rpx;
        border: none;
        word-break: keep-all;
      }
    }
  }
}

.selected {
  background-color: $u-type-error !important;
}
</style>