wx-qhb/pageD/commodityManage/component/batchDiscountPopup.vue

<template>
  <u-popup :show="show" mode="bottom" :round="10" closeable @close="close">
    <view class="content">
      <view class="goods-information"> {{ i18n.wantDiscount }}</view>
      <view class="discount">
        <view class=""> {{ i18n.discount }} </view>
        <u--input
          inputAlign="right"
          :placeholder="i18n.originalPrice"
          border="none"
          type="number"
          v-model="value"
          @change="change"
          maxlength="2"
        ></u--input>
        <view style="margin-left: 10rpx"> % </view>
      </view>
      <!-- <view
        class="text-list"
        v-if="JSON.stringify(selectGoodsInformation) != '{}' && value"
      >
        <view class="_text-1">
          <text>折扣价</text>
          <text>￥{{ discountPrice }}</text>
        </view>
        <view class="_text-1">
          <text>优惠</text>
          <text style="color: #f83224">-￥{{ preferential }}</text>
        </view>
      </view> -->
      <button class="btn" @click="confirm">{{ i18n.enter }}</button>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
    selectGoodsInformation: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      value: "",
      discountPrice: 0,
      preferential: 0,
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    close() {
      this.value = "";
      this.discountPrice = 0;
      this.preferential = 0;
      this.$emit("close");
    },
    confirm() {
      this.$emit("close", this.value);
      this.value = "";
      this.discountPrice = 0;
      this.preferential = 0;
    },
    change(e) {
      this.discountPrice =
        Number(this.selectGoodsInformation.goods.price) * (Number(e) * 0.01);
      this.preferential =
        Number(this.selectGoodsInformation.goods.price) - this.discountPrice;
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  padding: 30rpx 24rpx;

  .goods-information {
    display: flex;
    justify-content: center;
    font-weight: 600;

    .goods-img {
      width: 104rpx;
      height: 104rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }

    .goods-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .title {
        font-size: 28rpx;
        color: #333;
      }

      .price {
        font-size: 28rpx;
        opacity: 0.8;
        color: #333;
      }
    }
  }

  .discount {
    display: flex;
    padding: 36rpx;
    border-radius: 10rpx;
    border: 2rpx solid #f83224;
    margin-top: 56rpx;
    font-size: 30rpx;
    color: #222;
    align-items: center;
    font-weight: 600;
  }

  .text-list {
    border-top: 2rpx solid rgba(151, 151, 151, 0.1);
    margin-top: 40rpx;

    ._text-1 {
      display: flex;
      justify-content: space-between;
      height: 100rpx;
      align-items: center;
      font-size: 28rpx;
    }
  }

  .btn {
    background-color: #f83224;
    border-radius: 44rpx;
    color: #fff;
    margin-top: 100rpx;
  }
}
</style>