tripellet-merchant/pages/verification/selectCoupon.vue

<template>
  <view class="content s_page">
    <custom :bgColor="'transparent'">
      <template v-slot:content>
        <view class="custom_content flex_ac">
          <view class="custom_c_txt"
            >クーポンを選ぶ/{{ $t("选择优惠券") }}</view
          >
        </view>
      </template>
    </custom>
    <view class="main">
      <view
        v-for="(item, index) in newList"
        :key="index"
        :class="[
          'item',
          { itemAct: item.checked },
          { itemHuise: item.ifChecked },
        ]"
        @tap="itemClick(index, item.ifChecked)"
      >
        <view class="item-tit">{{ item.title }}</view>
        <view class="item-neir">
          <view class="txtFz16" v-if="item.amount_receivable_text">{{
            item.amount_receivable_text
          }}</view>
          <view class="txtFz30" v-if="item.discount_type == 1"
            >{{ item.discount }}%OFF</view
          >
          <view class="txtFz30" v-else-if="item.discount_type == 2"
            >{{ item.discount }}円OFF</view
          >
          <view class="txtFz14" v-if="item.show_at && item.show_at.length"
            >{{ $t("有效日期：") }}{{ item.show_at[0] }}~{{
              item.show_at[1]
            }}</view
          >
        </view>
      </view>
    </view>
    <view class="btn-btm">
      <view @tap="btnOk" :class="['button', { 'btn-act': !buttonBr }]"
        >確認/{{ $t("确认") }}</view
      >
    </view>
    <!-- 占位 -->
    <view style="position: relative; opacity: 0" class="btn-btm">
      <view :class="['button', { 'btn-act': !buttonBr }]"
        >確認/{{ $t("确认") }}</view
      >
    </view>
  </view>
</template>

<script>
import custom from "@/components/custom/custom";
import { getWriteOffInfo } from "@/request/ticketReq.js";
export default {
  components: {
    custom,
  },
  data() {
    return {
      dqItem: [], // 当前选中的
      newList: [],
      heXiaoData: [],
    };
  },
  onLoad(e) {
    let storeId = uni.getStorageSync("store_obj").id;
    let userId = uni.getStorageSync("customer_info")[0];
    this.getListFn(storeId, userId);
    this.heXiaoData = uni.getStorageSync("heXiaoData");
    console.log(this.heXiaoData);
  },
  methods: {
    // 点击确认后-计算抵扣价格
    btnOk() {
      this.dqItem.discount = +this.dqItem.discount;
      console.log("当前选中券", this.dqItem);
      // 计算优惠券百分比抵扣价格
      if (this.dqItem.discount_type == 1) {
        // 百分比-需要四舍五入取整
        this.heXiaoData.dTicket = Math.round(
          this.heXiaoData.totalMoney * (this.dqItem.discount / 100)
        );
      } else if (this.dqItem.discount_type == 2) {
        // 直接抵扣
        this.heXiaoData.dTicket = this.dqItem.discount;
      }
      // 计算抵扣后总价格
      // if (!!this.heXiaoData.dIntegral) {
      // 抵扣后的价格=总价-(积分抵扣+优惠券抵扣)
      console.log("优惠券抵扣", this.heXiaoData.dTicket);
      console.log("积分抵扣", this.heXiaoData.dIntegral);
      this.heXiaoData.dMoney =
        this.heXiaoData.totalMoney -
        (this.heXiaoData.dTicket + this.heXiaoData.dIntegral);
      // } else {
      //   this.heXiaoData.dMoney =
      //     this.heXiaoData.totalMoney - this.heXiaoData.dTicket;
      // }

      // 选择的券的数据
      this.heXiaoData.coupon = [{ type: this.dqItem.type, id: this.dqItem.id }];

      console.log("抵扣后价格", this.heXiaoData);

      uni.setStorageSync("heXiaoData", this.heXiaoData);

      uni.navigateBack({
        delta: 1,
      });
    },
    async getListFn(spid, userId) {
      let res = await getWriteOffInfo({ shop_id: spid, user_id: userId });
      this.newList = res.data.data.coupon;

      this.newList.forEach((item, index) => {
        console.log(item.amount_receivable, this.heXiaoData.totalMoney);
        if (
          item.amount_receivable != 0 &&
          item.amount_receivable > this.heXiaoData.totalMoney
        ) {
          this.$set(this.newList, index, {
            ...item,
            ifChecked: true,
            checked: false,
          });
        } else {
          this.$set(this.newList, index, {
            ...item,
            ifChecked: false,
            checked: false,
          });
        }
      });
      console.log("newList", this.newList);
    },
    itemClick(e, type) {
      if (type) return;
      this.dqItem = this.newList[e];
      this.newList.map((item, index) => {
        item.checked = index === e ? true : false;
      });
    },
  },
  computed: {
    buttonBr() {
      return this.newList.every((item) => {
        return !item.checked;
      });
    },
  },
};
</script>
<style>
page {
  background: linear-gradient(
    rgba(160, 204, 87, 0.2) 0%,
    rgba(223, 226, 0, 0.2) 100%
  );
}
</style>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.custom_content {
  width: 500rpx;
}
.custom_c_txt {
  font-size: 40rpx;
  color: $step_color;
  font-weight: 600;
}
.s_page {
  min-height: 100vh;
  &.mb_flag {
    width: 100%;
    position: fixed;
    top: -60rpx;
    left: 0;
    // // min-height: calc(100vh + 120rpx);
    // padding-bottom: 500rpx;
    // box-sizing: border-box;
  }
}

.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  background-color: #f8f9fb;
  height: 100vh;
  background: linear-gradient(
    rgba(160, 204, 87, 0.2) 0%,
    rgba(223, 226, 0, 0.2) 100%
  );
}

.main {
  padding: 32rpx;
  .item {
    border-radius: 16rpx;
    overflow: hidden;
    font-weight: 600;
    margin-bottom: 30rpx;
    border: 3px solid transparent;
    &.itemAct {
      border: 3px solid #85bc6b;
    }
    .item-tit {
      background: linear-gradient(
        90deg,
        #7eb96a 0%,
        #93c158 43.5%,
        #d4d822 100%
      );
      padding: 10rpx 24rpx;
    }
    .item-neir {
      padding: 24rpx;
      background-color: #fff;
      .txtFz16 {
        font-size: 32rpx;
      }
      .txtFz30 {
        font-size: 60rpx;
      }
      .txtFz14 {
        font-size: 28rpx;
      }
    }
  }
  .itemHuise {
    .item-tit {
      background: #dbdbdb;
    }
  }
}
.btn-btm {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx 0;
  .button {
    width: 560rpx;
    padding: 20rpx 0;
    text-align: center;
    background-color: #f2f2f2;
    border-radius: 41rpx;
    margin: 0 auto;
    font-weight: 600;
    font-size: 32rpx;
    color: #acacac;
  }
  .btn-act {
    background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
    color: #fff;
  }
}
</style>