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>
      
      <!-- 商品类型选择 -->
      <view class="goods-type">
        <text class="label">商品类型：</text>
        <radio-group @change="handleTypeChange">
          <view v-for="item in goodsTypes" :key="item.value" class="radio-item">
            <label>
              <radio :value="item.value" :checked="currentType === item.value" color="#007AFF"/>
              {{ item.label }}
            </label>
          </view>
        </radio-group>
      </view>

      <!-- 价格输入区域 -->
      <view class="price-input">
        <text class="tip">最低销售价格不能小于：{{ minPrice }}</text>
        <view class="input-row">
          <text>销售价：</text>
          <input 
            type="number" 
            v-model="currentPrice" 
            placeholder="请输入销售价"
            :min="minPrice"
            @input="calculateProfit"
          />
        </view>
      </view>

      <!-- 计算结果显示 -->
      <view class="profit-display">
        <view>养老金：{{ pensionFund.toFixed(2) }}</view>
        <view>创客利润：{{ makerProfit.toFixed(2) }}</view>
      </view>

      <button class="confirm-btn" @tap="handleConfirm">确定</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    minPrice: { type: Number, default: 8.75 },
    originalPrice: { type: Number, required: true },
    goodsType: { type: String, default: 1 }
  },
  data() {
    return {
      currentPrice: this.originalPrice,
      currentType: this.goodsType,
      pensionFund: 0,
      makerProfit: 1.75,
      goodsTypes: [
        { label: '普通商品', value: 1 },
        { label: '会员商品', value: 8 },
        { label: '高级会员商品', value: 10 },
        { label: '合伙人商品', value: 14 },
        { label: '股权商品', value: 15 },
        { label: '合伙人+股权商品', value: 16 }
      ]
    }
  },
  methods: {
    handleTypeChange(e) {
      this.currentType = e.detail.value
      // 这里可以添加不同类型的价格计算逻辑
    },
    calculateProfit() {
      // 示例计算逻辑，实际根据业务需求修改
      this.pensionFund = this.currentPrice * 0.05
      this.makerProfit = this.currentPrice * 0.15
    },
    handleConfirm() {
      if (this.currentPrice < this.minPrice) {
        uni.showToast({ title: '价格不能低于最低价', icon: 'none' })
        return
      }
      this.$emit('confirm', {
        price: Number(this.currentPrice),
        type: this.currentType
      })
    },
    close() {
      this.$emit('close')
    }
  }
}
</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;
}

.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>