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

<template>
  <u-popup :show="show" mode="bottom" :round="10" closeable @close="close">
    <view class="content">
      <view class="goods-information" v-if="selectGoodsInformation.goods">
        <image
          class="goods-img"
          :src="selectGoodsInformation.goods.image"
          mode=""
        ></image>
        <view class="goods-right">
          <view class="title">
            {{ selectGoodsInformation.goods.name_cn }}
          </view>
          <view class="price">
            ￥{{ selectGoodsInformation.goods.discount_price }}
          </view>
        </view>
      </view>
      <view class="discount">
        <view class=""> 折扣 </view>
        <u--input
          inputAlign="right"
          placeholder="打8折请输入80,以原价计算"
          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="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">确定</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,
    };
  },
  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) {
      console.log(this.selectGoodsInformation);
      this.discountPrice =
        Number(this.selectGoodsInformation.goods.discount_price) *
        (Number(e) * 0.01);
      this.preferential =
        Number(this.selectGoodsInformation.goods.discount_price) -
        this.discountPrice;
    },
  },
};
</script>

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

  .goods-information {
    display: flex;
    justify-content: flex-start;

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

    .goods-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 70%;
      .title {
        font-size: 28rpx;
        color: #333;
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .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: 30rpx;
  }
}
</style>