H5-Merchant/pages/supplychainon/price-edit-modal.vue

<template>
  <view class="price-edit-modal">
    <!-- 遮罩层 -->
    <view class="mask" @tap="close"></view>

    <!-- 弹窗内容 -->
    <view class="modal-content">
      <view class="modal-header">修改销售价</view>
      <template v-for="(listItem, isd) in upList">
       <view class="wparnkd-centent" :key="'sdfgdxf' + isd">
         <!-- 商品类型选择 -->
        <view class="goods-type" :key="'sdfgdf' + isd">
          <text class="label">商品类型：</text>
          <radio-group @change="handleTypeChange">
            <view
              v-for="(item, index) in goodsTypesData"
              :key="item.value + '_index' + index"
              class="radio-item"
            >
              <label>
                <radio
                  :value="String(item.value)"
                  :checked="currentType === item.value"
                  color="#007AFF"
                />
                {{ item.label }}
              </label>
            </view>
          </radio-group>
        </view>
        <view v-if="uplength != 1 && uplength != 0" :key="'sdfgdttf' + isd">
          <view style="padding-bottom: 10rpx">规格:</view>
          <view style="color: #007aff">{{ listItem.detail.规格 }}</view>
        </view>
        <!-- 价格输入区域 -->
        <view class="price-input" :key="'sdfotktmgdf' + isd">
          <text class="tip"
            >最低销售价格不能小于：{{ listItem.min_market_price }}</text
          >
          <view class="input-row">
            <text>销售价：</text>
            <input
              type="number"
              v-model="fuzupList[isd].price"
              placeholder="请输入销售价"
              @input="calculateProfit"
            />
          </view>
        </view>

        <!-- 计算结果显示 -->
        <view class="profit-display" :key="'sdkkf' + isd">
          <view>销售价：{{ listItem.price || "0.00" }}</view>
          <view>养老金：{{ listItem.gong_pension || "0.00" }}</view>
          <view>创客利润：{{ listItem.plate_mer_profit || "0.00" }}</view>
        </view>
       </view>
      </template>
      <button class="confirm-btn" @tap="handleConfirm">确定</button>
    </view>
  </view>
</template>

<script>
import { editSupplyChainPrice } from "@/commit/product.js";
export default {
  props: {
    productData: {
      type: Object,
      default: () => {},
    },
    merInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      currentPrice: "",
      currentType: "",
      goodsTypes: "", // 商品类型
      productStyles: [
        { value: "", label: "全部" },
        { value: "0", label: "单规格" },
        { value: "1", label: "多规格" },
      ],
      upList: [], //attrValue
      uplength: 0, //attrValue.length
      pnjen: "", //product_id
      fuzupList: [], //attrValue
    };
  },
  watch: {
    productData: {
      handler(val) {
        this.getProductData(val);
      },
      deep: true,
    },
  },
  mounted() {
    this.getProductData(this.productData);
  },
  methods: {
    handleTypeChange(e) {
      this.currentType = e.detail.value;
      // 这里可以添加不同类型的价格计算逻辑
    },
    calculateProfit() {
      // 示例计算逻辑，实际根据业务需求修改
      this.pensionFund = this.currentPrice * 0.05;
      this.makerProfit = this.currentPrice * 0.15;
    },
    getProductData(val) {
      const _this = this;
      const ev = (val && val.attrValue) || [];
      const en = val && val.product_id;
      const etype = val && val.type;
      _this.goodsTypes = etype;
      _this.upList = JSON.parse(JSON.stringify([...ev]));
      _this.fuzupList = JSON.parse(JSON.stringify([...ev]));
      _this.pnjen = en;
      _this.uplength = ev.length;
    },
    handleConfirm() {
      var reg =
        /(^[1-9]([0-9]+)?(.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9].[0-9]([0-9])?$)/;
      //单拿数据 组成新的数组
      const skuArr = this.fuzupList.map((project) => ({
        sku_id: project.gong_sku_id,
        edit_price: project.price,
      }));
      let _this = this;
      const isEmtyPrice = skuArr.some(
        (item) =>
          item.edit_price == "" ||
          item.edit_price == null ||
          item.edit_price == undefined
      );
      const isZQPrice = skuArr.some(
        (item) => !reg.test(item.edit_price) || item.edit_price == 0
      );
      if (isEmtyPrice) {
        uni.showToast({ title: "请输入金额", icon: "none" });
        return;
      }
      if (isZQPrice) {
        uni.showToast({ title: "请输入正确金额", icon: "none" });
        return;
      }
      editSupplyChainPrice(this.pnjen, {
        skuArr: skuArr,
        type: this.goodsTypes,
      }).then(
        (res) => {
          if (res.data.status == 200) {
            uni.showToast({ title: res.data.message, icon: "none" });
            _this.$emit("confirm");
          } else {
            uni.showToast({ title: res.data.message, icon: "none" });
          }
        },
        (fail) => {
          uni.showToast({ title: res.data.message, icon: "none" });
        }
      );
    },
    close() {
      this.$emit("close");
    },
  },
  computed: {
    goodsTypesData() {
      if (this.merInfo && this.merInfo.mer_id == 324) {
        return [
          { label: "普通商品", value: 1 },
          { label: "会员商品", value: 8 },
          { label: "高级会员商品", value: 10 },
          { label: "合伙人商品", value: 14 },
          { label: "股权商品", value: 15 },
          { label: "合伙人+股权商品", value: 16 },
        ];
      } else {
        return [{ label: "普通商品", value: 1 }];
      }
    },
  },
};
</script>

<style scoped>
/* 弹窗公共样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  z-index: 1000;
}

.wparnkd-centent{
  max-height: 70vh;
  overflow-y: auto;
}

.modal-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
}

/* 商品类型选择样式 */
.goods-type {
  margin-bottom: 30rpx;
}
.radio-item {
  margin: 15rpx 0;
  display: flex;
  align-items: center;
}

/* 输入区域样式 */
.price-input {
  margin: 20rpx 0;
}
.input-row {
  display: flex;
  align-items: center;
  margin: 15rpx 0;
}
input {
  border: 1rpx solid #ddd;
  padding: 10rpx;
  border-radius: 8rpx;
  flex: 1;
  margin-left: 15rpx;
}

/* 按钮样式 */
.confirm-btn {
  background: #007aff;
  color: white;
  margin-top: 30rpx;
  border-radius: 8rpx;
}

.profit-display {
  padding: 15rpx 0;
  border-top: 1rpx solid #eee;
  margin-top: 20rpx;
}
</style>