wxapp_shuibei/components/productWindow/index.vue

<template>
  <up-popup :show="showPopup" :closeOnClickOverlay="true" @close="close" closeable>
    <view
      class="product-window"
      :class="(iSbnt ? 'join' : '') + ' ' + (iScart ? 'joinCart' : '')"
    >
      <view class="popup-title">请选择规格</view>
      <view class="textpic acea-row">
        <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>

          </view>
          <view class="font-color" >
            <text class="stock"
            >工费: {{ attr.productSelect.price || 0 }}元/g</text
            >
            <text class="stock"
            >附加费: {{ attr.productSelect.additionalAmount || "0" }}元</text
            >
          </view>
          <view class="font-color" >
            <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>
            <text class="stock font333" v-if="isShow"
            >库存: {{ attr.productSelect.stock }}</text
            >
            <text class="stock font333" 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">
        <button
          v-if="attr.productSelect.stock > 0"
          class="confirm-btn"
          @click="submit"
          type="primary"
        >确定</button>
        <button
          v-else
          class="confirm-btn"
          @click="submit"
          type="primary"
        >已售罄</button>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import { computed,watch } 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",
  "updatePrice"
]);

const calcNumPrice = computed(() => {
  // 检查数据是否存在
  if (!props.attr?.productSelect) {
    return "0.00";
  }

  const { price, cart_num, additionalAmount, weight } =
    props.attr.productSelect;
  // 计算总价并保留两位小数
  const total =
    (Number(price) * Number(weight) + Number(additionalAmount || 0)) *
    Number(cart_num);
  return total.toFixed(2);
});

// 监听 calcNumPrice 变化并传递给父组件
watch(calcNumPrice, (newPrice) => {
  emit("updatePrice", newPrice);
}, { immediate: true });
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 30rpx 0 30rpx;
    margin-top: 29rpx;
    position: relative;
    align-items: center;

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

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

    .text {
      //width: 430rpx;
      width: 70%;
      font-size: 32rpx;
      color: #333333;
      padding-left: 30rpx;

      .money {
        font-size: 24rpx;
        //margin-top: 40rpx;
      }
      .num {
        font-size: 36rpx;
      }
      .stock {
        font-size: 24rpx;
        color: #666;
        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 {
      height: 88rpx;
      line-height: 88rpx;
      color: #333;
      border-radius: 16rpx;
      background-color: $header-color;
      border-color: $header-color;
    }
  }

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

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

          &.on {
            color: $theme-color;
            background: rgba(248, 192, 8, 0.10);
            border-color: $border-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;
    border: 2rpx solid #DCDFE6;
    display: inline-flex;

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

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

      &.on {
        color: #8C8C8C;
        font-size: 44rpx;
        background-color: #DCDFE6;
      }
    }

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

      &.on {
        border-color: #e3e3e3;
        color: #8C8C8C;
        background-color: #DCDFE6;
      }
    }

    .num {
      background: #fff;
      color: #333;
      font-size: 24rpx;
      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;
    }
  }
}
.popup-title{
  height: 100rpx;
  line-height: 100rpx;
  font-size: 36rpx;
  color: #333;
  text-align: center;
}
</style>