|
@@ -1,140 +1,181 @@
|
|
|
<!-- 模板区域 -->
|
|
<!-- 模板区域 -->
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
- <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="选择权益" width="60%" @close="cancel">
|
|
|
|
|
- <el-form :model="form" label-width="120px">
|
|
|
|
|
|
|
+ <el-drawer :model-value="show" @update:model-value="$emit('update:show', $event)" title="权益选择"
|
|
|
|
|
+ :direction="direction" size="1100px">
|
|
|
|
|
+
|
|
|
|
|
+ <el-form :model="form" label-width="80px" label-position="left">
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="10">
|
|
|
|
|
|
|
+ <el-col :span="24">
|
|
|
<el-form-item label="接收人">
|
|
<el-form-item label="接收人">
|
|
|
- <el-select v-model="form.recipient" placeholder="请选择接收人" style="width: 100%">
|
|
|
|
|
- <el-option v-for="item in props.recipientInfo" :key="item.title"
|
|
|
|
|
- :label="`${item.title}--${item.mobile}`" :value="item.title" />
|
|
|
|
|
- </el-select>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <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-radio-group v-model="form.recipient">
|
|
|
|
|
+ <el-radio v-for="item in props.recipientInfo" :key="item.title" :value="item.title">{{ item.title
|
|
|
|
|
+ }}</el-radio>
|
|
|
|
|
+ <el-radio :value="'other'">其它
|
|
|
|
|
+ <el-input class="ml-2" v-model="form.otherRecipient" style="width: 200px" placeholder="请输入" />
|
|
|
|
|
+ </el-radio>
|
|
|
|
|
+ </el-radio-group>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
- <!-- tab切换 -->
|
|
|
|
|
- <div class="tabs mt-5 flex a-c j-c">
|
|
|
|
|
- <div class="item" @click="changeTab(index)" v-for="(item, index) in tabslist" :key="index"
|
|
|
|
|
- :class="{ 'active': index == changeTabIndex }">{{ item.label }}</div>
|
|
|
|
|
|
|
+ <!-- 出单费用信息 -->
|
|
|
|
|
+ <div class="orderIssueFee">
|
|
|
|
|
+ <div class="expenseInfo flex a-c j-s">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>出单费用</span>
|
|
|
|
|
+ <span>¥{{ insFeeOrders.totalExportPremium || 0 }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>可用金额</span>
|
|
|
|
|
+ <span>¥{{ insFeeOrders.availableAmount || 0 }}<span
|
|
|
|
|
+ style="color: #409EFF;font-weight: 400; cursor: pointer;" @click="adjustDiscountAmount"
|
|
|
|
|
+ v-if="insFeeOrders.totalExportKeepPointPremium == 0">修改</span>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>已使用金额</span>
|
|
|
|
|
+ <span>¥{{ insFeeOrders.usedAmount || 0 }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>剩余金额</span>
|
|
|
|
|
+ <span style="color: #FF8C21;"> ¥{{ insFeeOrders.remainingAmount || 0 }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>已选权益价值</span>
|
|
|
|
|
+ <span style="color: #FF8C21;"> ¥{{insOrderRightsPackageList.length > 0 ? totalPriceCount : totalPriceCount1 || 0 }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- 备注信息 -->
|
|
|
|
|
+ <div class="commentText flex a-c ">
|
|
|
|
|
+ <el-icon color="#0083FF">
|
|
|
|
|
+ <InfoFilled />
|
|
|
|
|
+ </el-icon>
|
|
|
|
|
+ <span>出单后,计算出可使用金额,录入本次使用金额,可使用该金额为用户购买权益,剩余金额会返回到业务员的钱包,业务员可提现。</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="flex mt-4">
|
|
|
|
|
- <div class="tab-content">
|
|
|
|
|
- <template v-if="changeTabIndex == 0">
|
|
|
|
|
- <!-- 权益套餐 -->
|
|
|
|
|
- <div class="flex ">
|
|
|
|
|
- <div class="flex f-c a-c benefit">
|
|
|
|
|
- <div class="benefitList flex f-c">
|
|
|
|
|
- <span class="item " v-for="(item, index) in benefitPackageList"
|
|
|
|
|
- :class="{ 'active': item.id == selectedPackageDetail.id }" :key="item.id"
|
|
|
|
|
- @click="rightsDetails(item, index)">{{
|
|
|
|
|
- item.equityPackageName }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <el-pagination size="small" v-model:current-page="pageInfo.pageNum"
|
|
|
|
|
- v-model:page-size="pageInfo.pageSize" :page-sizes="pageInfo.sizes" layout="prev,pager,next,total"
|
|
|
|
|
- :total="pageInfo.total" />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="benefitDetails" v-if="selectedPackageDetail.id">
|
|
|
|
|
- <div class="header">
|
|
|
|
|
- <span class="title">套餐明细</span>
|
|
|
|
|
- <div class="configuration flex a-c j-s ">
|
|
|
|
|
- <span>数量:{{ selectedPackageDetail.totalNumber }}张</span>
|
|
|
|
|
- <span>价格:{{ selectedPackageDetail.packagePrice }}元</span>
|
|
|
|
|
- <el-input-number :model-value="selectedPackageDetail.rightsCount" :min="0"
|
|
|
|
|
- @update:model-value="val => onRightsCountChange(val, benefitPackageIndex, 'benefitPackageList', 'packagePrice')">
|
|
|
|
|
- <template #decrease-icon>
|
|
|
|
|
- <el-icon>
|
|
|
|
|
- <Remove />
|
|
|
|
|
- </el-icon>
|
|
|
|
|
- </template>
|
|
|
|
|
- <template #increase-icon>
|
|
|
|
|
- <el-icon>
|
|
|
|
|
- <CirclePlus />
|
|
|
|
|
- </el-icon>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-input-number>
|
|
|
|
|
|
|
+ <div class="flex mt-4 tab-btn">
|
|
|
|
|
+ <div class="left">已选权益</div>
|
|
|
|
|
+ <div class="content flex f-c ">
|
|
|
|
|
+ <div class="tabs flex a-c ">
|
|
|
|
|
+ <div class="item" :class="{ 'active': insOrderRightsPackageList.length > 0 }" @click="PackageBenefits">
|
|
|
|
|
+ 选择套餐权益</div>
|
|
|
|
|
+ <div class="item ml-[24px]" :class="{ 'active': insOrderRightsList.length > 0 }" @click="RightsBenefits">
|
|
|
|
|
+ 选择单品权益</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span class="text-[14px] text-[#666] mt-[8px]">使用可用金额,可为接收人选购权益套餐 和 权益单品,2选1</span>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="PackageselectedList mt-[16px] flex " v-if="insOrderRightsPackageList.length > 0">
|
|
|
|
|
+ <div class="view-card mr-[20px]">
|
|
|
|
|
+ <div class="view-item mb-[10px] " :class="{ 'active': index === benefitPackageIndex }"
|
|
|
|
|
+ v-for="(item, index) in insOrderRightsPackageList" :key="index" @click="rightsDetails(item, index)">
|
|
|
|
|
+ <div class="flex f-c ">
|
|
|
|
|
+ <div class="flex a-c j-s">
|
|
|
|
|
+ <span class="equityPackageName text-[14px] text-[#333]">{{ item.equityPackageName }}</span>
|
|
|
|
|
+ <span class="rightsCount text-[14px] text-[#333]">x{{ item.rightsCount }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- <div style="overflow-y: auto; max-height: 250px;"
|
|
|
|
|
- v-if="selectedPackageDetail.rightsDetailsList && selectedPackageDetail.rightsDetailsList.length > 0">
|
|
|
|
|
- <div class="Details-list">
|
|
|
|
|
- <div class="view flex a-c " v-for="item in selectedPackageDetail.rightsDetailsList">
|
|
|
|
|
- <div class="item">{{ item.rightsName }}</div>
|
|
|
|
|
- <div class="item">¥{{ item.contractRate }}元</div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="mt-5 flex a-c j-s">
|
|
|
|
|
+ <span v-if="item.totalNumber" class="text-[12px] text-[#666]">数量:{{ item.totalNumber }}张</span>
|
|
|
|
|
+ <span class="text-[12px] text-[#666]">价格:{{ item.packagePrice }}元</span>
|
|
|
|
|
+ <el-icon @click="removeSelectedRight(index)" color="#666">
|
|
|
|
|
+ <Delete />
|
|
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </template>
|
|
|
|
|
- <template v-else>
|
|
|
|
|
- <!-- 权益单品 -->
|
|
|
|
|
- <el-table :data="privilegeItem" style="width: 100%" max-height="300px" overflow="auto">
|
|
|
|
|
|
|
+ <el-table class="details" :data="selectedPackageDetail.rightsDetailsList" max-height="300px"
|
|
|
|
|
+ style="flex: 1;" border>
|
|
|
<el-table-column prop="rightsName" label="权益名称" width="180" align="center" />
|
|
<el-table-column prop="rightsName" label="权益名称" width="180" align="center" />
|
|
|
- <el-table-column prop="contractRate" label="单价" width="180" align="center" />
|
|
|
|
|
- <el-table-column prop="rightsCount" label="发放数量" align="center">
|
|
|
|
|
|
|
+ <el-table-column prop="number" label="数量" align="center" />
|
|
|
|
|
+ <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" width="180">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
- <el-input-number size="small" :model-value="scope.row.rightsCount"
|
|
|
|
|
- @update:model-value="val => onRightsCountChange(val, scope.$index, 'privilegeItem', 'contractRate')"
|
|
|
|
|
|
|
+ {{ scope.row.shareableStoreNum }}家门店可用
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="RightselectedList mt-[16px] " v-if="insOrderRightsList.length > 0">
|
|
|
|
|
+ <el-table class="details" :data="insOrderRightsList" max-height="300px" style="flex: 1;cursor: pointer;"
|
|
|
|
|
+ border>
|
|
|
|
|
+ <el-table-column prop="rightsName" label="权益名称" align="center">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <el-popover placement="right" trigger="click" :width="324">
|
|
|
|
|
+ <div class="iframe-container">
|
|
|
|
|
+ <iframe :src="iframeUrl" frameborder="0" class="external-iframe"></iframe>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <template #reference>
|
|
|
|
|
+ <span @click="benefitDetail(scope.row)" :class="{ 'clicked': clickedRightsId === scope.row.id }">
|
|
|
|
|
+ {{ 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 }}家门店可用
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="number" label="数量" align="center">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <el-input-number size="small" :model-value="scope.row.rightsCount" style="width: 80px;"
|
|
|
|
|
+ @update:model-value="val => onRightsCountChange(val, scope.$index, 'insOrderRightsList', 'contractRate')"
|
|
|
:min="0" />
|
|
:min="0" />
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <el-table-column prop="totalsum" label="总价" align="center">
|
|
|
|
|
|
|
+ <el-table-column prop="total" label="总价" align="center">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
- <span>{{ scope.row.contractRate * scope.row.rightsCount }}</span>
|
|
|
|
|
|
|
+ {{ new Decimal(scope.row.contractRate || 0).times(scope.row.rightsCount || 0).toFixed(2) }}
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
</el-table>
|
|
</el-table>
|
|
|
- </template>
|
|
|
|
|
-
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 已选择权益 -->
|
|
|
|
|
- <div class="displaySelected ">
|
|
|
|
|
- <span>可用金额:{{ props.availableAmount }}元</span>
|
|
|
|
|
- <div class="header-sum flex a-c j-s ">
|
|
|
|
|
- <span>已选{{ selectedRights.length }}个,共计{{ totalPriceCount }}元</span>
|
|
|
|
|
- <el-button type="primary" size="small" link @click="clearSelectedRights">
|
|
|
|
|
- <el-icon>
|
|
|
|
|
- <Delete />
|
|
|
|
|
- </el-icon>
|
|
|
|
|
- 清空</el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 已选列表视图 -->
|
|
|
|
|
- <div class="selectedList flex f-c">
|
|
|
|
|
- <div v-for="item in selectedRights" :key="item.rightsId" class="item">
|
|
|
|
|
- <div class="flex f-c ">
|
|
|
|
|
- <div class="flex a-c j-s">
|
|
|
|
|
- <span class="equityPackageName">{{ item.equityPackageName || item.rightsName }}</span>
|
|
|
|
|
- <span class="rightsCount">x{{ item.rightsCount }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="mt-5 flex a-c j-s">
|
|
|
|
|
- <span v-if="item.totalNumber">数量:{{ item.totalNumber }}张</span>
|
|
|
|
|
- <span>价格:{{ item.packagePrice || item.contractRate }}元</span>
|
|
|
|
|
- <el-icon @click="removeSelectedRight(item)">
|
|
|
|
|
- <Delete />
|
|
|
|
|
- </el-icon>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<template #footer>
|
|
<template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
|
|
|
|
+ <div class="dialog-footer flex a-c j-c ">
|
|
|
<el-button class="border-[#0083FF] color-[#0083FF]" plain @click="cancel">取消</el-button>
|
|
<el-button class="border-[#0083FF] color-[#0083FF]" plain @click="cancel">取消</el-button>
|
|
|
<el-button type="primary" @click="save">
|
|
<el-button type="primary" @click="save">
|
|
|
确定
|
|
确定
|
|
|
</el-button>
|
|
</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+ </el-drawer>
|
|
|
|
|
+ <!-- 权益金额调整弹窗 -->
|
|
|
|
|
+ <el-dialog v-model="adjustDiscountAmountShow" title="设置可用金额" width="420" draggable>
|
|
|
|
|
+ <div class="description flex ">
|
|
|
|
|
+ <el-icon color="#FAA21E" size="16" class="mr-[12px] mt-[3px]">
|
|
|
|
|
+ <Warning />
|
|
|
|
|
+ </el-icon>
|
|
|
|
|
+ <span>本次订单共计优惠<span class="font-size-[16px] font-bold">{{ insFeeOrders.availableAmount ||
|
|
|
|
|
+ 0}}</span>元,您可使用部分优惠金额为客户购买车主服务。</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="flex a-c mt-[24px]">
|
|
|
|
|
+ <span style="flex-shrink: 0;" class="mr-[12px]">可用金额</span>
|
|
|
|
|
+ <el-input v-model="availableAmount" placeholder="请输入" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <template #footer>
|
|
|
|
|
+ <div class="dialog-footer">
|
|
|
|
|
+ <el-button @click="adjustDiscountAmountShow = false">取消</el-button>
|
|
|
|
|
+ <el-button type="primary" @click="adjustDiscountAmountconfirm">
|
|
|
|
|
+ 确定
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
|
+ <!-- 权益套餐子弹窗 -->
|
|
|
|
|
+ <EquitiesPage v-model:show="equitiesPageShow" :recipientInfo="recipientInfo" :EquitiesInfo="EquitiesInfo"
|
|
|
|
|
+ @save="saveEquitiesPage" />
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 权益单品子弹窗 -->
|
|
|
|
|
+ <EquitiesItem v-model:show="equitiesItemShow" :recipientInfo="recipientInfo" :EquitiesInfo="EquitiesInfo"
|
|
|
|
|
+ @save="handleEquitiesItemSave" />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -142,28 +183,33 @@
|
|
|
<script lang='ts' setup>
|
|
<script lang='ts' setup>
|
|
|
import { ref, reactive, computed, onBeforeMount, watch } from 'vue'
|
|
import { ref, reactive, computed, onBeforeMount, watch } from 'vue'
|
|
|
import api from '@/api'
|
|
import api from '@/api'
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
|
|
|
|
+import { ElMessage, DrawerProps } from 'element-plus'
|
|
|
import Decimal from 'decimal.js'
|
|
import Decimal from 'decimal.js'
|
|
|
|
|
+import EquitiesItem from './EquitiesItem.vue' // 权益单品模块
|
|
|
|
|
+import EquitiesPage from './EquitiesPage.vue' // 权益套餐模块
|
|
|
|
|
+
|
|
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
|
|
+const direction = ref<DrawerProps['direction']>('rtl')
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
|
show: boolean,
|
|
show: boolean,
|
|
|
recipientInfo: Array<any>,//接收人信息
|
|
recipientInfo: Array<any>,//接收人信息
|
|
|
- availableAmount: number
|
|
|
|
|
|
|
+ EquitiesInfo: any,//权益信息参数
|
|
|
}>();
|
|
}>();
|
|
|
-console.log(props.availableAmount)
|
|
|
|
|
-// 使用本地变量管理对话框显示状态
|
|
|
|
|
-const dialogVisible = ref(false);
|
|
|
|
|
-// 监听props.show变化,同步到本地变量
|
|
|
|
|
-watch(() => props.show, (newVal) => {
|
|
|
|
|
- dialogVisible.value = newVal;
|
|
|
|
|
-}, { immediate: true });
|
|
|
|
|
|
|
+console.log(props.EquitiesInfo)
|
|
|
|
|
+const emits = defineEmits(['update:show', 'cancel', 'save']);
|
|
|
|
|
+
|
|
|
|
|
+// 子弹窗状态
|
|
|
|
|
+const equitiesItemShow = ref(false);
|
|
|
|
|
+const equitiesPageShow = ref(false);
|
|
|
watch(() => props.recipientInfo, (newVal) => {
|
|
watch(() => props.recipientInfo, (newVal) => {
|
|
|
recipientOptions.value = newVal;
|
|
recipientOptions.value = newVal;
|
|
|
});
|
|
});
|
|
|
|
|
+watch(() => props.EquitiesInfo?.insFeeOrders, (newVal) => {
|
|
|
|
|
+ insFeeOrders.value = newVal || {};
|
|
|
|
|
+}, { deep: true });
|
|
|
// 组件挂载时获取地区数据
|
|
// 组件挂载时获取地区数据
|
|
|
onBeforeMount(async () => {
|
|
onBeforeMount(async () => {
|
|
|
await queryTreeQuery();
|
|
await queryTreeQuery();
|
|
|
- await getBenefitPackageList();
|
|
|
|
|
- await getPrivilegeItem();
|
|
|
|
|
provinceoptions.value = ['110000', '110100', '110101']
|
|
provinceoptions.value = ['110000', '110100', '110101']
|
|
|
|
|
|
|
|
});
|
|
});
|
|
@@ -181,25 +227,29 @@ const queryInfo = ref({
|
|
|
pageNo: 1,
|
|
pageNo: 1,
|
|
|
pageSize: 20,
|
|
pageSize: 20,
|
|
|
});
|
|
});
|
|
|
|
|
+const adjustDiscountAmountShow = ref(false)
|
|
|
|
|
+const availableAmount = ref('')//可用金额
|
|
|
|
|
+const insFeeOrders = ref(props.EquitiesInfo.insFeeOrders || {})
|
|
|
const benefitPackageList = ref(); //权益套餐列表
|
|
const benefitPackageList = ref(); //权益套餐列表
|
|
|
const privilegeItem = ref(); //权益单品列表
|
|
const privilegeItem = ref(); //权益单品列表
|
|
|
const insOrderRightsPackageList = ref([]); //权益套餐选中列表
|
|
const insOrderRightsPackageList = ref([]); //权益套餐选中列表
|
|
|
const insOrderRightsList = ref([]); //权益单品选中列表
|
|
const insOrderRightsList = ref([]); //权益单品选中列表
|
|
|
-const benefitPackageIndex = ref(0); //选中的权益套餐索引
|
|
|
|
|
|
|
+const benefitPackageIndex = ref(null); //选中的权益套餐索引
|
|
|
const selectedPackageDetail = ref<any>({}) //选中的权益套餐详情
|
|
const selectedPackageDetail = ref<any>({}) //选中的权益套餐详情
|
|
|
-const emits = defineEmits(["cancel", 'save']);
|
|
|
|
|
-const changeTabIndex = ref(0);
|
|
|
|
|
const totalPriceCount = computed(() => {
|
|
const totalPriceCount = computed(() => {
|
|
|
// 计算权益套餐的总价
|
|
// 计算权益套餐的总价
|
|
|
- const packageTotal = benefitPackageList.value?.reduce((sum: Decimal, item: any) => {
|
|
|
|
|
|
|
+ const packageTotal = insOrderRightsPackageList.value?.reduce((sum: Decimal, item: any) => {
|
|
|
if (item.rightsCount > 0) {
|
|
if (item.rightsCount > 0) {
|
|
|
const itemTotal = new Decimal(item.packagePrice || 0).times(new Decimal(item.rightsCount || 0));
|
|
const itemTotal = new Decimal(item.packagePrice || 0).times(new Decimal(item.rightsCount || 0));
|
|
|
return sum.plus(itemTotal);
|
|
return sum.plus(itemTotal);
|
|
|
}
|
|
}
|
|
|
return sum;
|
|
return sum;
|
|
|
}, new Decimal(0)) || new Decimal(0);
|
|
}, new Decimal(0)) || new Decimal(0);
|
|
|
- // 计算权益单品的总价
|
|
|
|
|
- const itemTotal = privilegeItem.value?.reduce((sum: Decimal, item: any) => {
|
|
|
|
|
|
|
+ const sum = new Decimal(packageTotal);
|
|
|
|
|
+ return sum.toString(); // 返回字符串
|
|
|
|
|
+});
|
|
|
|
|
+const totalPriceCount1 = computed(() => {
|
|
|
|
|
+ const itemTotal = insOrderRightsList.value?.reduce((sum: Decimal, item: any) => {
|
|
|
if (item.rightsCount > 0) {
|
|
if (item.rightsCount > 0) {
|
|
|
const itemTotal = new Decimal(item.contractRate || 0).times(new Decimal(item.rightsCount || 0));
|
|
const itemTotal = new Decimal(item.contractRate || 0).times(new Decimal(item.rightsCount || 0));
|
|
|
return sum.plus(itemTotal);
|
|
return sum.plus(itemTotal);
|
|
@@ -208,40 +258,27 @@ const totalPriceCount = computed(() => {
|
|
|
}, new Decimal(0)) || new Decimal(0);
|
|
}, new Decimal(0)) || new Decimal(0);
|
|
|
|
|
|
|
|
// 合并所有总价
|
|
// 合并所有总价
|
|
|
- const sum = new Decimal(packageTotal).plus(itemTotal);
|
|
|
|
|
|
|
+ const sum = new Decimal(itemTotal);
|
|
|
return sum.toString(); // 返回字符串
|
|
return sum.toString(); // 返回字符串
|
|
|
});
|
|
});
|
|
|
//合并所有已选权益套餐和权益单品
|
|
//合并所有已选权益套餐和权益单品
|
|
|
const selectedRights = computed(() => {
|
|
const selectedRights = computed(() => {
|
|
|
- const selectedPackages = benefitPackageList.value?.filter((item: any) => item.rightsCount > 0) || []
|
|
|
|
|
- insOrderRightsPackageList.value = selectedPackages
|
|
|
|
|
|
|
+ const selectedPackages = insOrderRightsPackageList.value?.filter((item: any) => item.rightsCount > 0) || []
|
|
|
// 收集选择的权益单品
|
|
// 收集选择的权益单品
|
|
|
- const selectedItems = privilegeItem.value?.filter((item: any) => item.rightsCount > 0) || []
|
|
|
|
|
- insOrderRightsList.value = selectedItems
|
|
|
|
|
|
|
+ const selectedItems = insOrderRightsList.value?.filter((item: any) => item.rightsCount > 0) || []
|
|
|
return selectedPackages.concat(selectedItems)
|
|
return selectedPackages.concat(selectedItems)
|
|
|
})
|
|
})
|
|
|
-// 清空已选权益套餐和权益单品
|
|
|
|
|
-const clearSelectedRights = () => {
|
|
|
|
|
- benefitPackageList.value.forEach((item: any) => {
|
|
|
|
|
- item.rightsCount = 0;
|
|
|
|
|
- });
|
|
|
|
|
- privilegeItem.value.forEach((item: any) => {
|
|
|
|
|
- item.rightsCount = 0;
|
|
|
|
|
- });
|
|
|
|
|
-}
|
|
|
|
|
// 移除已选权益套餐或权益单品
|
|
// 移除已选权益套餐或权益单品
|
|
|
-const removeSelectedRight = (item: any) => {
|
|
|
|
|
- if (item.rightsCount > 0) {
|
|
|
|
|
- item.rightsCount = 0;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+const removeSelectedRight = (index: any) => {
|
|
|
|
|
+ insOrderRightsPackageList.value.splice(index, 1);
|
|
|
}
|
|
}
|
|
|
const onRightsCountChange = (e: any, index: any, name: any, field: string) => {
|
|
const onRightsCountChange = (e: any, index: any, name: any, field: string) => {
|
|
|
// 根据数组名称获取对应的数组
|
|
// 根据数组名称获取对应的数组
|
|
|
let targetArray: any[] = [];
|
|
let targetArray: any[] = [];
|
|
|
- if (name === 'benefitPackageList') {
|
|
|
|
|
- targetArray = benefitPackageList.value || [];
|
|
|
|
|
- } else if (name === 'privilegeItem') {
|
|
|
|
|
- targetArray = privilegeItem.value || [];
|
|
|
|
|
|
|
+ if (name === 'insOrderRightsPackageList') {
|
|
|
|
|
+ targetArray = insOrderRightsPackageList.value || [];
|
|
|
|
|
+ } else if (name === 'insOrderRightsList') {
|
|
|
|
|
+ targetArray = insOrderRightsList.value || [];
|
|
|
}
|
|
}
|
|
|
// 获取当前项
|
|
// 获取当前项
|
|
|
const item = targetArray[index];
|
|
const item = targetArray[index];
|
|
@@ -249,24 +286,29 @@ const onRightsCountChange = (e: any, index: any, name: any, field: string) => {
|
|
|
console.error('无法找到对应数据,数组:', name, '索引:', index)
|
|
console.error('无法找到对应数据,数组:', name, '索引:', index)
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
+ if (e == 0) {
|
|
|
|
|
+ targetArray.splice(index, 1);
|
|
|
|
|
+ }
|
|
|
// 获取当前数量和新数量
|
|
// 获取当前数量和新数量
|
|
|
const currentCount = item.rightsCount || 0;
|
|
const currentCount = item.rightsCount || 0;
|
|
|
const newCount = e;
|
|
const newCount = e;
|
|
|
// 计算价格
|
|
// 计算价格
|
|
|
const price = parseFloat(item[field] || 0);
|
|
const price = parseFloat(item[field] || 0);
|
|
|
|
|
+ console.log(price)
|
|
|
// 计算当前总价
|
|
// 计算当前总价
|
|
|
- const currentTotalPrice = parseFloat(totalPriceCount.value || 0);
|
|
|
|
|
|
|
+ const currentTotalPrice = parseFloat(name === 'insOrderRightsPackageList' ? totalPriceCount.value : totalPriceCount1.value);
|
|
|
// 计算数量变化和价格变化
|
|
// 计算数量变化和价格变化
|
|
|
const countChange = newCount - currentCount;
|
|
const countChange = newCount - currentCount;
|
|
|
const priceChange = countChange * price;
|
|
const priceChange = countChange * price;
|
|
|
// 计算新总价
|
|
// 计算新总价
|
|
|
const newTotalPrice = currentTotalPrice + priceChange;
|
|
const newTotalPrice = currentTotalPrice + priceChange;
|
|
|
- console.log(countChange)
|
|
|
|
|
// 如果是增加数量,检查是否超过可用金额
|
|
// 如果是增加数量,检查是否超过可用金额
|
|
|
- if (countChange > 0 && newTotalPrice > props.availableAmount) {
|
|
|
|
|
|
|
+ console.log(newTotalPrice)
|
|
|
|
|
+ console.log(insFeeOrders.value.availableAmount)
|
|
|
|
|
+ if (countChange > 0 && newTotalPrice > parseFloat(insFeeOrders.value.availableAmount)) {
|
|
|
ElMessage({
|
|
ElMessage({
|
|
|
type: 'success',
|
|
type: 'success',
|
|
|
- message: `权益总价不能超过可用金额${props.availableAmount}元`,
|
|
|
|
|
|
|
+ message: `权益总价不能超过可用金额${insFeeOrders.value.availableAmount}元`,
|
|
|
plain: true,
|
|
plain: true,
|
|
|
})
|
|
})
|
|
|
} else {
|
|
} else {
|
|
@@ -277,6 +319,7 @@ const onRightsCountChange = (e: any, index: any, name: any, field: string) => {
|
|
|
// 表单数据
|
|
// 表单数据
|
|
|
const form = reactive({
|
|
const form = reactive({
|
|
|
recipient: '',
|
|
recipient: '',
|
|
|
|
|
+ otherRecipient: '',//其它接收人名称
|
|
|
region: []
|
|
region: []
|
|
|
});
|
|
});
|
|
|
const areaProps = {
|
|
const areaProps = {
|
|
@@ -297,24 +340,7 @@ const tabslist = ref([
|
|
|
]);
|
|
]);
|
|
|
// 地区选择器改变时触发
|
|
// 地区选择器改变时触发
|
|
|
// 获取权益套餐列表
|
|
// 获取权益套餐列表
|
|
|
-const getBenefitPackageList = async () => {
|
|
|
|
|
- try {
|
|
|
|
|
- const response = await api.additionalApi.rightsGrantList(queryInfo.value);
|
|
|
|
|
- benefitPackageList.value = response.data.records || [];
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('获取权益套餐列表失败:', error);
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
|
|
|
|
|
-// 获取权益单品列表
|
|
|
|
|
-const getPrivilegeItem = async () => {
|
|
|
|
|
- try {
|
|
|
|
|
- const response = await api.additionalApi.rightsList(queryInfo.value);
|
|
|
|
|
- privilegeItem.value = response.data.records || [];
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('获取权益单品列表失败:', error);
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
// 选中的权益套餐详情
|
|
// 选中的权益套餐详情
|
|
|
const rightsDetails = async (item: any, index: any) => {
|
|
const rightsDetails = async (item: any, index: any) => {
|
|
|
selectedPackageDetail.value = item;
|
|
selectedPackageDetail.value = item;
|
|
@@ -350,18 +376,79 @@ const provinceChange = (value: any) => {
|
|
|
} else {
|
|
} else {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-// 切换tab
|
|
|
|
|
-const changeTab = (index: number) => {
|
|
|
|
|
- changeTabIndex.value = index;
|
|
|
|
|
|
|
+const PackageBenefits = () => {
|
|
|
|
|
+ if (insOrderRightsList.value.length > 0) {
|
|
|
|
|
+ return ElMessage({
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ message: '套餐和单品只能选择其中1种',
|
|
|
|
|
+ plain: true,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ equitiesPageShow.value = true;
|
|
|
|
|
+}
|
|
|
|
|
+const RightsBenefits = () => {
|
|
|
|
|
+ if (insOrderRightsPackageList.value.length > 0) {
|
|
|
|
|
+ return ElMessage({
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ message: '套餐和单品只能选择其中1种',
|
|
|
|
|
+ plain: true,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ equitiesItemShow.value = true;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
const cancel = () => {
|
|
const cancel = () => {
|
|
|
- // 重置表单
|
|
|
|
|
form.recipient = '';
|
|
form.recipient = '';
|
|
|
form.region = [];
|
|
form.region = [];
|
|
|
- emits("cancel")
|
|
|
|
|
|
|
+ emits('update:show', false);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 权益单品保存回调
|
|
|
|
|
+const handleEquitiesItemSave = (selectedItems: any[]) => {
|
|
|
|
|
+ insOrderRightsList.value = selectedItems;
|
|
|
|
|
+}
|
|
|
|
|
+const saveEquitiesPage = (selectedItems: any[]) => {
|
|
|
|
|
+ insOrderRightsPackageList.value = selectedItems;
|
|
|
|
|
+}
|
|
|
|
|
+const adjustDiscountAmount = () => {
|
|
|
|
|
+ adjustDiscountAmountShow.value = true;
|
|
|
|
|
+}
|
|
|
|
|
+const adjustDiscountAmountconfirm = () => {
|
|
|
|
|
+ if (!availableAmount.value) {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ message: '请输入可用金额',
|
|
|
|
|
+ plain: true,
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ if (parseFloat(availableAmount.value) > parseFloat(insFeeOrders.value.availableAmount || 0)) {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ message: `可用金额不能大于优惠金额`,
|
|
|
|
|
+ plain: true,
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ api.additionalApi.updateAvailableAmount({
|
|
|
|
|
+ orderNo: props.EquitiesInfo.ordersNo,
|
|
|
|
|
+ availableAmount: availableAmount.value,
|
|
|
|
|
+ }).then((res: any) => {
|
|
|
|
|
+ if (res.code == '200') {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ type: 'success',
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ plain: true,
|
|
|
|
|
+ })
|
|
|
|
|
+ api.insurancePolicyApi.getOrderDetail(props.EquitiesInfo.ordersNo).then((res: any) => {
|
|
|
|
|
+ if (res.code == '200') {
|
|
|
|
|
+ insFeeOrders.value = res.data?.insFeeOrders || {}
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ adjustDiscountAmountShow.value = false
|
|
|
|
|
+ } else {
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+}
|
|
|
const save = () => {
|
|
const save = () => {
|
|
|
if (!form.recipient) {
|
|
if (!form.recipient) {
|
|
|
ElMessage({
|
|
ElMessage({
|
|
@@ -374,130 +461,184 @@ const save = () => {
|
|
|
let info = props.recipientInfo.find((item: any) => item.title == form.recipient);
|
|
let info = props.recipientInfo.find((item: any) => item.title == form.recipient);
|
|
|
let insOrderRightsInfoDto = {
|
|
let insOrderRightsInfoDto = {
|
|
|
length: selectedRights.value.length,
|
|
length: selectedRights.value.length,
|
|
|
- totalPriceCount: totalPriceCount.value,
|
|
|
|
|
- recipient: info.title,
|
|
|
|
|
|
|
+ totalPriceCount: insOrderRightsPackageList.value.length > 0 ? totalPriceCount.value : totalPriceCount1.value,
|
|
|
|
|
+ recipient: info ? info.title : '',
|
|
|
insOrderRightsPackageList: insOrderRightsPackageList.value,
|
|
insOrderRightsPackageList: insOrderRightsPackageList.value,
|
|
|
insOrderRightsList: insOrderRightsList.value,
|
|
insOrderRightsList: insOrderRightsList.value,
|
|
|
rightsGrantReceiverDTO: {
|
|
rightsGrantReceiverDTO: {
|
|
|
- receiverType: info.policyPersonType,
|
|
|
|
|
- receiverName: info.name,
|
|
|
|
|
- receiverMobile: info.mobile
|
|
|
|
|
|
|
+ receiverType: info ? info.policyPersonType : '',
|
|
|
|
|
+ receiverName: info ? info.name : '',
|
|
|
|
|
+ receiverMobile: info ? info.mobile : ''
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
// 发送表单数据
|
|
// 发送表单数据
|
|
|
|
|
+ console.log(insOrderRightsInfoDto)
|
|
|
emits("save", insOrderRightsInfoDto)
|
|
emits("save", insOrderRightsInfoDto)
|
|
|
}
|
|
}
|
|
|
|
|
+const iframeUrl = ref('');//权益单品详情
|
|
|
|
|
+const clickedRightsId = ref<string | number | null>(null); // 记录点击的权益ID
|
|
|
|
|
+const benefitDetail = (item: any) => {
|
|
|
|
|
+ clickedRightsId.value = item.id; // 设置点击状态
|
|
|
|
|
+ api.additionalApi.rightsProduct({
|
|
|
|
|
+ rightsId: item.id,
|
|
|
|
|
+ }).then((res: any) => {
|
|
|
|
|
+ if (res.code == '200') {
|
|
|
|
|
+ iframeUrl.value = `https://life.baoxianzhanggui.com/custh5/#/packageF/pages/home/details-channel?productId=${res.data[0].productId}`
|
|
|
|
|
+ } else {
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(item)
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
<!-- 样式区域 -->
|
|
<!-- 样式区域 -->
|
|
|
<style lang='scss' scoped>
|
|
<style lang='scss' scoped>
|
|
|
-.tabs {
|
|
|
|
|
- .item {
|
|
|
|
|
- padding: 5px 12px;
|
|
|
|
|
- border: 1px solid #E5E5E5;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- border-radius: 2px 0px 0px 2px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .item:last-child {
|
|
|
|
|
- border-left: none;
|
|
|
|
|
- border-radius: 0px 2px 2px 0px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .item.active {
|
|
|
|
|
- background: linear-gradient(93deg, #4FCAFF 0%, #2B62FF 100%), #0083FF;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- border-color: #4FCAFF;
|
|
|
|
|
|
|
+.tab-btn {
|
|
|
|
|
+ >.left {
|
|
|
|
|
+ width: 80px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-top: 6px;
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.tab-content {
|
|
|
|
|
- width: 70%;
|
|
|
|
|
- flex: 1;
|
|
|
|
|
-
|
|
|
|
|
- .benefit {
|
|
|
|
|
- width: 35%;
|
|
|
|
|
|
|
|
|
|
- .benefitList {
|
|
|
|
|
- height: 300px;
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
|
|
+ >.content {
|
|
|
|
|
+ margin-left: 16px;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
|
|
|
|
|
+ .tabs {
|
|
|
.item {
|
|
.item {
|
|
|
- margin-bottom: 5px;
|
|
|
|
|
- padding: 6px 8px;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
+ padding: 5px 12px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
|
|
+ border: 1px solid #E5E5E5;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.item.active {
|
|
.item.active {
|
|
|
- background: #F6FBFF;
|
|
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
|
|
- color: #0083FF;
|
|
|
|
|
|
|
+ background: #0083FF;
|
|
|
|
|
+ border: 1px solid #0083FF;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- .benefitDetails {
|
|
|
|
|
- margin-left: 20px;
|
|
|
|
|
- flex: 1;
|
|
|
|
|
|
|
|
|
|
- .title {
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- color: #333;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .configuration {
|
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .Details-list {
|
|
|
|
|
- margin-top: 20px;
|
|
|
|
|
- border-top: 1px solid #E5E5E5;
|
|
|
|
|
- border-left: 1px solid #E5E5E5;
|
|
|
|
|
|
|
|
|
|
- .view {
|
|
|
|
|
- border-bottom: 1px solid #E5E5E5;
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .item {
|
|
|
|
|
- padding: 6px 15px;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- border-right: 1px solid #E5E5E5;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.orderIssueFee {
|
|
|
|
|
+ background: #F5F5F5;
|
|
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
|
|
+ margin-top: 20px;
|
|
|
|
|
+ padding: 12px 16px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
|
|
- .item:first-child {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .expenseInfo {
|
|
|
|
|
+ >div span:first-child {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .item:last-child {}
|
|
|
|
|
|
|
+ >div span:last-child {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-left: 4px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
|
|
|
-.displaySelected {
|
|
|
|
|
- width: 30%;
|
|
|
|
|
- margin-left: 30px;
|
|
|
|
|
|
|
+ .commentText {
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
|
|
|
- .header-sum {
|
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- color: #333;
|
|
|
|
|
|
|
+ span {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-left: 2px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- .selectedList {
|
|
|
|
|
- height: 300px;
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
|
|
+.PackageselectedList {
|
|
|
|
|
+ .view-card {
|
|
|
|
|
+ width: 250px;
|
|
|
|
|
|
|
|
- .item {
|
|
|
|
|
|
|
+ .view-item {
|
|
|
|
|
+ cursor: pointer;
|
|
|
background: #F7F7F7;
|
|
background: #F7F7F7;
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
|
|
padding: 10px;
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
|
|
+ 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);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+:deep(.el-popover) {
|
|
|
|
|
+ width: auto !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.iframe-container {
|
|
|
|
|
+ width: 300px;
|
|
|
|
|
+ height: 600px;
|
|
|
|
|
+ /* 固定高度 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.external-iframe {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 点击权益名称变色效果
|
|
|
|
|
+.clicked {
|
|
|
|
|
+ color: #409EFF;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 权益金额调整弹窗
|
|
|
|
|
+.description {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ background: #FFFAEF;
|
|
|
|
|
+ border-radius: 6px 6px 6px 6px;
|
|
|
|
|
+ border: 1px solid #FAA21E;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ padding: 10px 16px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|