shuibei_share/components/productWindow/index.vue

<template>
  <up-popup :show="showPopup" :closeOnClickOverlay="true" @close="close">
    <view
      class="product-window"
      :class="(iSbnt ? 'join' : '') + ' ' + (iScart ? 'joinCart' : '')"
    >
      <view class="textpic acea-row row-between-wrapper">
        <view class="pictrue">
          <image :src="attr.productSelect.image"></image>
        </view>
        <view class="text">
          <view class="line1">
            {{ attr.productSelect.storeName }}
          </view>
          <view class="money font-color">
            ￥<text class="num">{{ calcNumPrice }}</text>
            <text class="stock" v-if="isShow"
              >库存: {{ attr.productSelect.stock }}</text
            >
            <text class="stock" v-if="limitNum"
              >限量: {{ attr.productSelect.quota }}</text
            >
          </view>
        </view>
        <view class="iconfont icon-guanbi" @click="close"></view>
      </view>
      <view class="rollTop">
        <view class="productWinList">
          <view
            class="item"
            v-for="(item, indexw) in attr.productAttr"
            :key="indexw"
          >
            <view class="title">{{ item.attrName }}</view>
            <view class="listn acea-row row-middle">
              <view
                class="itemn"
                :class="item.index === itemn ? 'on' : ''"
                v-for="(itemn, indexn) in item.attrValues"
                @click="tapAttr(indexw, indexn)"
                :key="indexn"
              >
                {{ itemn }}
              </view>
            </view>
          </view>
        </view>
        <view class="cart acea-row row-between-wrapper">
          <view class="title">数量</view>
          <view class="carnum acea-row row-left">
            <view
              class="item reduce"
              :class="attr.productSelect.cart_num <= 1 ? 'on' : ''"
              @click="CartNumDes"
            >
              -
            </view>
            <view class="item num">
              <input
                type="number"
                v-model="attr.productSelect.cart_num"
                data-name="productSelect.cart_num"
                @input="bindCode(attr.productSelect.cart_num)"
              />
            </view>
            <view
              v-if="iSplus"
              class="item plus"
              :class="
                attr.productSelect.cart_num >= attr.productSelect.stock
                  ? 'on'
                  : ''
              "
              @click="CartNumAdd"
            >
              +
            </view>
            <view
              v-else
              class="item plus"
              :class="
                attr.productSelect.cart_num >= attr.productSelect.quota ||
                attr.productSelect.cart_num >= attr.productSelect.stock ||
                attr.productSelect.cart_num >= attr.productSelect.num
                  ? 'on'
                  : ''
              "
              @click="CartNumAdd"
              >+</view
            >
          </view>
        </view>
      </view>
      <view class="footer-box">
        <up-button
          v-if="attr.productSelect.stock > 0"
          class="confirm-btn"
          @click="submit"
          type="primary"
          text="确定"
        ></up-button>
        <up-button
          v-else
          class="confirm-btn"
          @click="submit"
          type="primary"
          text="已售罄"
        ></up-button>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  attr: {
    type: Object,
    default: () => ({}),
  },
  showPopup: {
    type: Boolean,
    default: false,
  },
  limitNum: {
    type: Number,
    default: 0,
  },
  isShow: {
    type: Number,
    default: 0,
  },
  iSbnt: {
    type: Number,
    default: 0,
  },
  iSplus: {
    type: Number,
    default: 0,
  },
  iScart: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits([
  "goCat",
  "iptCartNum",
  "myevent",
  "ChangeCartNum",
  "attrVal",
  "ChangeAttr",
  "submit",
  "closePopup",
]);

const calcNumPrice = computed(() => {
  // 检查数据是否存在
  if (!props.attr?.productSelect) {
    return '0.00'
  }
  
  const { storePrice, cart_num } = props.attr.productSelect
  
  // 检查价格和数量是否存在且有效
  if (!storePrice || !cart_num) {
    return '0.00'
  }
  
  // 转换为数字并验证
  const price = Number(storePrice)
  const quantity = Number(cart_num)
  
  // 检查是否为有效数字
  if (isNaN(price) || isNaN(quantity)) {
    return '0.00'
  }
  
  // 检查是否为负数
  if (price < 0 || quantity < 0) {
    return '0.00'
  }
  
  // 计算总价并保留两位小数
  const total = price * quantity
  return total.toFixed(2)
})

function goCat() {
  emit("goCat");
}

function bindCode() {
  emit("iptCartNum", props.attr.productSelect.cart_num);
}

function close() {
  emit("closePopup");
}

function submit() {
  emit("submit");
}

function CartNumDes() {
  emit("ChangeCartNum", false);
}

function CartNumAdd() {
  emit("ChangeCartNum", true);
}

function tapAttr(indexw, indexn) {
  emit("attrVal", { indexw, indexn });
  // 直接修改 props 不推荐，建议父组件传递响应式对象
  if (props.attr.productAttr && props.attr.productAttr[indexw]) {
    props.attr.productAttr[indexw].index =
      props.attr.productAttr[indexw].attrValues[indexn];
  }
  const value = getCheckedValue().join(",");
  emit("ChangeAttr", value);
}

function getCheckedValue() {
  const productAttr = props.attr.productAttr || [];
  const value = [];
  for (let i = 0; i < productAttr.length; i++) {
    for (let j = 0; j < productAttr[i].attrValues.length; j++) {
      if (productAttr[i].index === productAttr[i].attrValues[j]) {
        value.push(productAttr[i].attrValues[j]);
      }
    }
  }
  return value;
}
</script>

<style scoped lang="scss">
.product-window {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding-bottom: 40rpx;

  &.join,
  &.joinCart {
    padding-bottom: 30rpx;
  }
  &.joinCart {
    z-index: 999;
  }

  .textpic {
    padding: 0 130rpx 0 30rpx;
    margin-top: 29rpx;
    position: relative;

    .pictrue {
      width: 150rpx;
      height: 150rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }

    .text {
      width: 410rpx;
      font-size: 32rpx;
      color: #333333;

      .money {
        font-size: 24rpx;
        margin-top: 40rpx;

        .num {
          font-size: 36rpx;
        }
        .stock {
          color: #999;
          margin-left: 18rpx;
        }
      }
    }

    .iconfont {
      position: absolute;
      right: 30rpx;
      top: -5rpx;
      font-size: 35rpx;
      color: #8a8a8a;
    }
  }

  .rollTop {
    max-height: 500rpx;
    overflow: auto;
    margin-top: 36rpx;
  }

  .footer-box {
    padding: 0 30rpx;
    margin: 30rpx 0 0 0;
    .confirm-btn {
      border-radius: 100rpx;
      background-color: $header-color;
      border-color: $header-color;
    }
  }

  .productWinList {
    .item {
      & + .item {
        margin-top: 36rpx;
      }
      .title {
        font-size: 30rpx;
        color: #999;
        padding: 0 30rpx;
      }
      .listn {
        padding: 0 30rpx 0 16rpx;

        .itemn {
          border: 1px solid #f2f2f2;
          font-size: 26rpx;
          color: #282828;
          padding: 7rpx 33rpx;
          border-radius: 40rpx;
          margin: 20rpx 0 0 14rpx;
          background-color: #f2f2f2;

          &.on {
            color: $theme-color;
            background: rgba(255, 244, 243, 1);
            border-color: $theme-color;
          }
          &.limit {
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }

  .cart {
    margin-top: 36rpx;
    padding: 0 30rpx;

    .title {
      font-size: 30rpx;
      color: #999;
    }

    .carnum {
      height: 54rpx;
      margin-top: 24rpx;

      view {
        width: 84rpx;
        text-align: center;
        height: 100%;
        line-height: 54rpx;
        color: #282828;
        font-size: 45rpx;
      }

      .reduce {
        border-right: 0;
        border-radius: 6rpx 0 0 6rpx;
        line-height: 48rpx;

        &.on {
          color: #dedede;
          font-size: 44rpx;
        }
      }

      .plus {
        border-left: 0;
        border-radius: 0 6rpx 6rpx 0;
        line-height: 46rpx;

        &.on {
          border-color: #e3e3e3;
          color: #dedede;
        }
      }

      .num {
        background: rgba(242, 242, 242, 1);
        color: #282828;
        font-size: 28rpx;
        border-radius: 12rpx;
        line-height: 29px;
        height: 54rpx;

        input {
          display: -webkit-inline-box;
        }
      }
    }
  }

  .joinBnt {
    font-size: 30rpx;
    width: 620rpx;
    height: 86rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 86rpx;
    color: #fff;
    margin: 21rpx auto 0 auto;

    &.on {
      background-color: #bbb;
      color: #fff;
    }
  }
}
</style>