tenant-Platform/src/views/insurancePolicy/modules/EquitiesItem.vue

<!-- 模板区域 -->
<template>
  <div>
    <el-drawer :model-value="show" @update:model-value="$emit('update:show', $event)" title="权益选择"
      :direction="direction" size="900px">
      <el-form :model="form" label-width="120px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="接收人所在地区">
              <el-cascader v-model="provinceoptions" style="width: 100%;" filterable clearable :options="regionOptions"
                :props="areaProps" @change="provinceChange" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 出单费用信息 -->
      <div class="orderIssueFee">
        <div class="expenseInfo flex a-c j-s">
          <div>
            <span>出单费用</span>
            <span>￥{{ props.EquitiesInfo.insFeeOrders.totalExportPremium }}</span>
          </div>
          <div>
            <span>可用金额</span>
            <span>￥{{ props.EquitiesInfo.insFeeOrders.availableAmount }}</span>
          </div>
          <div>
            <span>已使用金额</span>
            <span>￥{{ calcUsedAndRemaining.usedAmount }}</span>
          </div>
          <div style="font-weight: bold;">
            <span>剩余金额</span>
            <span style="color: #FF8C21;"> ￥{{ calcUsedAndRemaining.remainingAmount }}</span>
          </div>
          <div style="font-weight: bold;">
            <span>已选权益价值</span>
            <span style="color: #FF8C21;"> ￥{{ totalPriceCount }}</span>
          </div>
        </div>
        <!-- 备注信息 -->
        <div class="commentText flex a-c ">
          <el-icon color="#0083FF">
            <InfoFilled />
          </el-icon>
          <span>出单后，计算出可使用金额，录入本次使用金额，可使用该金额为用户购买权益，剩余金额会返回到业务员的钱包，业务员可提现。</span>
        </div>
      </div>
      <div class="mt-[24px]">
        <el-form label-width="60px">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in filterConditions" :key="index">
              <el-form-item :label="item.name">
                <el-select v-model="filterConditions[index].list" placeholder="请选择" multiple collapse-tags
                  collapse-tags-tooltip>
                  <el-option v-for="childrenitem in item.children" :key="childrenitem.id" :label="childrenitem.name"
                    :value="childrenitem.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="flex mt-4  tab-btn">
        <div class="content flex  f-c ">
          <div class="RightselectedList">
            <el-table class="details" :data="privilegeItem" max-height="300px" style="flex: 1;" :header-cell-style="{ color: '#333333' }" border>
               <template #empty>
                <div class="flex f-c a-c ">
                  <img src="@/assets/images/empty.png" alt="" >
                  <span style="font-size: 14px;color: #909399;">暂无数据</span>
                </div>
              </template>
              <el-table-column prop="rightsName" label="权益名称" align="center">
                <template #default="scope">
                  <el-popover placement="right" trigger="hover" :width="324">
                    <div class="iframe-container" v-show="!iframeLoading">
                      <iframe :src="iframeUrl" frameborder="0" class="external-iframe"></iframe>
                    </div>
                    <div class="iframe-loading" v-show="iframeLoading">加载中...</div>
                    <template #reference>
                      <span class="rights-name-link" @mouseenter="benefitDetail(scope.row)">
                        {{ scope.row.rightsName }}
                      </span>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="contractRate" label="价格" align="center"></el-table-column>
              <el-table-column prop="marketPrice" label="价值" align="center"></el-table-column>
              <el-table-column prop="shareableStoreNum" label="适用门店" align="center">
                <template #default="scope">
                  {{ scope.row.shareableStoreNum || 0 }}家门店可用
                </template>
              </el-table-column>
              <el-table-column prop="number" label="数量" align="center">
                <template #default="scope">
                  <el-input-number class="rights-count-input" size="small" :model-value="scope.row.rightsCount"
                    style="width: 80px;"
                    @update:model-value="val => onRightsCountChange(val, scope.$index, 'privilegeItem', 'contractRate')"
                    :min="0" />
                </template>
              </el-table-column>
              <el-table-column prop="total" label="总价" align="center">
                <template #default="scope">
                  {{ new Decimal(scope.row.contractRate || 0).times(scope.row.rightsCount || 0).toFixed(2) }}
                </template>
              </el-table-column>

            </el-table>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer flex a-c j-c ">
          <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">
            确定
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { ref, reactive, computed, onBeforeMount, watch } from 'vue'
import api from '@/api'
import { ElMessage, DrawerProps } from 'element-plus'
import Decimal from 'decimal.js'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const direction = ref<DrawerProps['direction']>('rtl')
const props = defineProps<{
  show: boolean,
  recipientInfo: Array<any>,//接收人信息
  EquitiesInfo: any,//权益信息参数
}>();
console.log(props.EquitiesInfo)
const emits = defineEmits(['update:show', 'cancel', 'save']);
watch(() => props.recipientInfo, (newVal) => {
  recipientOptions.value = newVal;
});
// 组件挂载时获取地区数据
onBeforeMount(async () => {
  await queryTreeQuery();
  await getRightsCategory();
  await getPrivilegeItem();
  provinceoptions.value = []

});

const queryInfo = ref({
  countryAll: '', //山西省太原太原市  //省市区
  minPrice: 0,
  maxPrice: 1000,
  sortType: 0, //排序  0 默认 1低价  2高价
  pageNo: 1,
  pageSize: 20,
});
const benefitPackageList = ref([]); //权益套餐列表
const privilegeItem = ref([]); //权益单品列表
const totalPriceCount = computed(() => {
  // 计算权益单品的总价
  const itemTotal = privilegeItem.value?.reduce((sum: Decimal, item: any) => {
    if (item.rightsCount > 0) {
      const itemTotal = new Decimal(item.contractRate || 0).times(new Decimal(item.rightsCount || 0));
      return sum.plus(itemTotal);
    }
    return sum;
  }, new Decimal(0)) || new Decimal(0);

  // 合并所有总价
  const sum = new Decimal(itemTotal);
  return sum.toString(); // 返回字符串
});
// 根据可用金额与已选权益价值，高精度计算已使用/剩余金额
// 已使用金额 = 已选权益价值；剩余金额 = 可用金额 - 已使用金额
const calcUsedAndRemaining = computed(() => {
  const available = new Decimal(props.EquitiesInfo.insFeeOrders.availableAmount || 0)
  const selectedValue = new Decimal(totalPriceCount.value || 0)
  const usedAmount = selectedValue
  const remainingAmount = available.minus(usedAmount)
  return {
    usedAmount: usedAmount.toFixed(2),
    remainingAmount: remainingAmount.toFixed(2),
  }
});


const onRightsCountChange = (e: any, index: any, name: any, field: string) => {
  // 根据数组名称获取对应的数组
  let targetArray: any[] = [];
  if (name === 'benefitPackageList') {
    targetArray = benefitPackageList.value || [];
  } else if (name === 'privilegeItem') {
    targetArray = privilegeItem.value || [];
  }
  // 获取当前项
  const item = targetArray[index];
  if (!item) {
    console.error('无法找到对应数据，数组:', name, '索引:', index)
    return
  }
  // 获取当前数量和新数量
  const currentCount = item.rightsCount || 0;
  const newCount = e;
  // 计算价格
  const price = parseFloat(item[field] || 0);
  // 计算当前总价
  const currentTotalPrice = parseFloat(totalPriceCount.value || 0);
  // 计算数量变化和价格变化
  const countChange = newCount - currentCount;
  const priceChange = countChange * price;
  // 计算新总价
  const newTotalPrice = currentTotalPrice + priceChange;
  console.log(countChange)
  // 如果是增加数量，检查是否超过可用金额
  if (countChange > 0 && newTotalPrice > props.EquitiesInfo.insFeeOrders.availableAmount) {
    ElMessage({
      type: 'success',
      message: `权益总价不能超过可用金额${props.EquitiesInfo.insFeeOrders.availableAmount}元`,
      plain: true,
    })
  } else {
    // 无论是减少数量还是增加数量且未超过限制，都允许更新
    item.rightsCount = newCount;
  }
}
// 表单数据
const form = reactive({
  recipient: '',
  otherRecipient: '',//其它接收人名称
  region: []
});
const areaProps = {
  expandTrigger: 'hover' as const,
  value: 'areaCode',
  label: 'areaCname',
  children: 'child'
}
// 接收人选项
const recipientOptions = ref()
// 获取权益单品列表
const getPrivilegeItem = async () => {
  queryInfo.value.maxPrice = props.EquitiesInfo.insFeeOrders.availableAmount;
  try {
    const response = await api.additionalApi.rightsList(queryInfo.value);
    privilegeItem.value = response.data.records || [];
  } catch (error) {
    console.error('获取权益单品列表失败:', error);
  }
}
// 获取权益分类
const filterConditions = ref([]);
const getRightsCategory = async () => {
  try {
    const response = await api.additionalApi.rightsCategory();
    filterConditions.value = response.data || [];
    console.log(filterConditions.value)
    filterConditions.value.forEach((item: any) => {
      item.list = [];
    })
    console.log(filterConditions.value)
  } catch (error) {
    console.error('获取权益分类失败:', error);
  }
}

// 地区选项
const regionOptions = ref();
const provinceoptions = ref();

// 获取地区数据
const queryTreeQuery = () => {
  api.areaApi.areaList({}).then((res: any) => {
    if (res.code == '200') {
      regionOptions.value = res.data;
    } else {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
    }
  });
}
const provinceChange = (value: any) => {
  if (value && value[0] != null && value[1] != null && value[2] != null) {
    queryInfo.value.countryAll = value[0] + value[1] + value[2];
    getPrivilegeItem()
  } else {
    queryInfo.value.countryAll = '';
    getPrivilegeItem()
  }
}
const cancel = () => {
  // 重置表单
  form.recipient = '';
  form.region = [];
  emits('update:show', false);
}

const iframeUrl = ref('');//权益单品详情
const iframeLoading = ref(false); // 详情加载中，显示加载占位
const rightsUrlCache = new Map<string | number, string>(); // 权益详情地址缓存
let latestRequestId = 0; // 竞态标记：只让最后一次移入的请求生效
const benefitDetail = (item: any) => {
  // 缓存命中：直接显示，不发请求，不闪
  const cachedUrl = rightsUrlCache.get(item.id);
  if (cachedUrl) {
    iframeUrl.value = cachedUrl;
    return;
  }
  // 未命中：显示加载占位并请求详情（不清空 iframeUrl，保留旧内容直到新内容就绪）
  const requestId = ++latestRequestId;
  iframeLoading.value = true;
  api.additionalApi.rightsProduct({
    rightsId: item.id,
  }).then((res: any) => {
    if (requestId !== latestRequestId) {
      return; // 已有更新的移入，丢弃过期响应
    }
    if (res.code == '200') {
      const url = `https://life.baoxianzhanggui.com/custh5/#/packageF/pages/home/details-channel?productId=${res.data[0].productId}`
      rightsUrlCache.set(item.id, url);
      iframeUrl.value = url;
    }
    iframeLoading.value = false;
  });
  console.log(item)
}
const save = () => {
  console.log(privilegeItem.value)
  const selectedItems = privilegeItem.value?.filter((item: any) => item.rightsCount > 0) || []
  if(selectedItems.length == 0){
    ElMessage({
      type: 'warning',
      message: '请选择后再提交，不能直接提交',
      plain: true,
    })
    return
  }
  // 发送表单数据
  emits("save", selectedItems)
  emits('update:show', false);
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.tab-btn {

  >.content {
    flex: 1;

    .tabs {
      .item {
        cursor: pointer;
        padding: 5px 12px;
        box-sizing: border-box;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #E5E5E5;
        font-size: 14px;
        color: #333;
      }

      .item.active {
        background: #0083FF;
        border: 1px solid #0083FF;
        color: #fff;

      }
    }
  }
}






.orderIssueFee {
  background: #F5F5F5;
  border-radius: 4px 4px 4px 4px;
  margin-top: 20px;
  padding: 12px 16px;
  box-sizing: border-box;

  .expenseInfo {
    >div span:first-child {
      font-size: 12px;
      color: #666;
    }

    >div span:last-child {
      font-size: 14px;
      color: #333;
      margin-left: 4px;
    }
  }

  .commentText {
    margin-top: 10px;

    span {
      font-size: 12px;
      color: #333;
      margin-left: 2px;
    }
  }
}

.PackageselectedList {
  .view-card {
    width: 250px;

    .view-item {
      cursor: pointer;
      background: #F7F7F7;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 4px 4px 4px 4px;
    }

    .view-item:hover {
      background: #dfdfdf;
    }

  }

  .view-card .active {
    background: #dfdfdf;
    color: #fff;
  }
}

// 自定义抽屉样式
:deep(.el-drawer__header) {
  padding: 18px 24px;
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  font-size: 20px;
  color: #333;
  font-weight: bold;
  margin-bottom: 0;
}

:deep(.el-drawer) {
  border-radius: 8px 0 0 8px;
}

:deep(.el-drawer__body) {
  padding: 24px;
  box-sizing: border-box;
}

:deep(.el-drawer__footer) {
  box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05);
}

.iframe-container {
  width: 100%;
  height: 600px;
  /* 固定高度 */
}

.external-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

// 权益详情加载占位
.iframe-loading {
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

// 移入权益名称变色效果
.rights-name-link {
  cursor: pointer;

  &:hover {
    color: #409EFF;
  }
}

// 移入权益名称时当前单元格背景色（!important 压过 el-table 行 hover 背景）
:deep(.el-table__body td.el-table__cell:has(.rights-name-link:hover)) {
  background-color: #F6FBFF !important;
}

// 权益数量步进器：加减号背景白色、图标固定蓝色（默认和悬停均为蓝色）
.rights-count-input {
  :deep(.el-input-number__increase),
  :deep(.el-input-number__decrease) {
    background-color: #fff !important;
    color: #0083FF !important;

    .el-icon {
      color: #0083FF !important;
    }

    &:hover {
      background-color: #fff !important;
      color: #0083FF !important;

      .el-icon {
        color: #0083FF !important;
      }
    }
  }

  // 去掉鼠标移入时的蓝色边框，保持原灰色边框
  :deep(.el-input__wrapper) {
    &:hover {
      box-shadow: 0 0 0 1px var(--el-input-border-color, #dcdfe6) inset;
    }
  }
}
</style>