|
@@ -21,35 +21,35 @@
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
- <el-col :span="4">
|
|
|
|
|
|
|
+<!-- <el-col :span="4">
|
|
|
<el-button type="primary" @click="handleEquitiesSearch">查询</el-button>
|
|
<el-button type="primary" @click="handleEquitiesSearch">查询</el-button>
|
|
|
- </el-col>
|
|
|
|
|
|
|
+ </el-col>-->
|
|
|
</el-row>
|
|
</el-row>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
<div class="change">
|
|
<div class="change">
|
|
|
- <span class="common" :class="{ 'changeActive': changeIndex === index }" v-for="(item, index) in ['权益套餐', '权益单品']" @click="changeIndex = index">{{ item }}</span>
|
|
|
|
|
|
|
+ <span class="common" :class="{ 'changeActive': changeIndex === index }" v-for="(item, index) in ['权益套餐', '权益单品']" @click="initEquities(item, index)">{{ item }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="combo" v-show="changeIndex == 0">
|
|
<div class="combo" v-show="changeIndex == 0">
|
|
|
<el-row :gutter="10">
|
|
<el-row :gutter="10">
|
|
|
<el-col :span="6">
|
|
<el-col :span="6">
|
|
|
<div class="comboList">
|
|
<div class="comboList">
|
|
|
- <div class="comboItem" :class="{'comboActive': comboIndex == index}" v-for="(item, index) in comboList" @click="handleCombo(item, index)">{{ item.name }}</div>
|
|
|
|
|
|
|
+ <div class="comboItem" :class="{'comboActive': comboIndex == index}" v-for="(item, index) in comboList" @click="handleCombo(item, index)">{{ item.equityPackageName }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="tips">1年12次洗车,2次救援,3次小保养</div>
|
|
|
|
|
|
|
+<!-- <div class="tips">1年12次洗车,2次救援,3次小保养</div>-->
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
<div>套餐明细</div>
|
|
<div>套餐明细</div>
|
|
|
<div class="count">
|
|
<div class="count">
|
|
|
- <span>数量:12张</span>
|
|
|
|
|
- <span>价格:200.00元</span>
|
|
|
|
|
|
|
+ <span>数量:{{ comboList?.[comboIndex]?.rightsCount }}张</span>
|
|
|
|
|
+ <span>价格:{{ comboList?.[comboIndex]?.packagePrice }}元</span>
|
|
|
<span style="width: 60px; display: flex; align-items: center">
|
|
<span style="width: 60px; display: flex; align-items: center">
|
|
|
- <span class="countIcon">
|
|
|
|
|
|
|
+ <span class="countIcon" @click="handleSubtract">
|
|
|
<el-icon size="small" color="#0083FF">
|
|
<el-icon size="small" color="#0083FF">
|
|
|
<Minus />
|
|
<Minus />
|
|
|
</el-icon>
|
|
</el-icon>
|
|
|
</span>
|
|
</span>
|
|
|
- <span style="width: calc(100% - 32px); text-align: center">1</span>
|
|
|
|
|
- <span class="countIcon">
|
|
|
|
|
|
|
+ <span style="width: calc(100% - 32px); text-align: center">{{ comboList?.[comboIndex]?.countOne }}</span>
|
|
|
|
|
+ <span class="countIcon" @click="handleAdd">
|
|
|
<el-icon size="small" color="#0083FF">
|
|
<el-icon size="small" color="#0083FF">
|
|
|
<Plus />
|
|
<Plus />
|
|
|
</el-icon>
|
|
</el-icon>
|
|
@@ -61,14 +61,14 @@
|
|
|
:data="comboData"
|
|
:data="comboData"
|
|
|
style="width: 100%"
|
|
style="width: 100%"
|
|
|
>
|
|
>
|
|
|
- <el-table-column prop="a"></el-table-column>
|
|
|
|
|
- <el-table-column prop="b"></el-table-column>
|
|
|
|
|
- <el-table-column prop="c"></el-table-column>
|
|
|
|
|
|
|
+ <el-table-column prop="rightsName"></el-table-column>
|
|
|
|
|
+ <el-table-column prop="rightsCount"></el-table-column>
|
|
|
|
|
+ <el-table-column prop="marketPrice"></el-table-column>
|
|
|
</el-table>
|
|
</el-table>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
<el-col :span="6">
|
|
|
<div class="chosed">
|
|
<div class="chosed">
|
|
|
- <span>已选择:3分驾意险</span>
|
|
|
|
|
|
|
+ <span>已选择:{{ chosedList.length }}份驾意险</span>
|
|
|
<span style="display: flex; align-items: center; cursor: pointer; color: #0083FF;">
|
|
<span style="display: flex; align-items: center; cursor: pointer; color: #0083FF;">
|
|
|
<el-icon size="small" color="#0083FF">
|
|
<el-icon size="small" color="#0083FF">
|
|
|
<Delete />
|
|
<Delete />
|
|
@@ -79,12 +79,12 @@
|
|
|
<div class="chosedList">
|
|
<div class="chosedList">
|
|
|
<div class="chosedItem" v-for="(item, index) in chosedList">
|
|
<div class="chosedItem" v-for="(item, index) in chosedList">
|
|
|
<div class="top">
|
|
<div class="top">
|
|
|
- <span>xxx权益xxx权益xxx权益xxx权益xxx权益</span>
|
|
|
|
|
- <span>x2</span>
|
|
|
|
|
|
|
+ <span>{{ item.equityPackageName }}</span>
|
|
|
|
|
+ <span>x{{ item.countOne }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="bottom">
|
|
<div class="bottom">
|
|
|
- <span>数量:12张</span>
|
|
|
|
|
- <span>价格:200.00元</span>
|
|
|
|
|
|
|
+ <span>数量:{{ item.rightsCount }}张</span>
|
|
|
|
|
+ <span>价格:{{ item.packagePrice }}元</span>
|
|
|
<span style="display: flex; align-items: center; cursor: pointer; color: #0083FF;">
|
|
<span style="display: flex; align-items: center; cursor: pointer; color: #0083FF;">
|
|
|
<el-icon>
|
|
<el-icon>
|
|
|
<Delete />
|
|
<Delete />
|
|
@@ -103,19 +103,21 @@
|
|
|
:data="comboData"
|
|
:data="comboData"
|
|
|
style="width: 100%"
|
|
style="width: 100%"
|
|
|
>
|
|
>
|
|
|
- <el-table-column prop="a" label="权益名称"></el-table-column>
|
|
|
|
|
- <el-table-column prop="b" label="单价"></el-table-column>
|
|
|
|
|
- <el-table-column prop="c" label="发放数量">
|
|
|
|
|
- <template #default>
|
|
|
|
|
- <el-input-number></el-input-number>
|
|
|
|
|
|
|
+ <el-table-column prop="rightsName" label="权益名称"></el-table-column>
|
|
|
|
|
+ <el-table-column prop="marketPrice" label="单价"></el-table-column>
|
|
|
|
|
+ <el-table-column prop="rightsCount" label="发放数量">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <el-input-number v-model="scope.row.rightsCount" />
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <el-table-column prop="d" label="总价"></el-table-column>
|
|
|
|
|
|
|
+ <el-table-column prop="settlePrice" label="总价">
|
|
|
|
|
+ <template #default=""></template>
|
|
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
</el-table>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
<el-col :span="6">
|
|
|
<div class="chosed">
|
|
<div class="chosed">
|
|
|
- <span>已选择:3分驾意险</span>
|
|
|
|
|
|
|
+ <span>已选择:{{ chosedList.length }}份驾意险</span>
|
|
|
<span style="display: flex; align-items: center; cursor: pointer; color: #0083FF;">
|
|
<span style="display: flex; align-items: center; cursor: pointer; color: #0083FF;">
|
|
|
<el-icon size="small" color="#0083FF">
|
|
<el-icon size="small" color="#0083FF">
|
|
|
<Delete />
|
|
<Delete />
|
|
@@ -124,7 +126,7 @@
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="chosedList">
|
|
<div class="chosedList">
|
|
|
- <div class="chosedItem" v-for="(item, index) in chosedList">
|
|
|
|
|
|
|
+ <div class="chosedItem" v-for="(item, index) in singleList">
|
|
|
<div class="top">
|
|
<div class="top">
|
|
|
<span>xxx权益xxx权益xxx权益xxx权益xxx权益</span>
|
|
<span>xxx权益xxx权益xxx权益xxx权益xxx权益</span>
|
|
|
<span>x2</span>
|
|
<span>x2</span>
|
|
@@ -155,6 +157,9 @@
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
|
|
|
|
|
|
|
+import api from '@/api'
|
|
|
|
|
+import {ElMessage} from "element-plus";
|
|
|
|
|
+
|
|
|
let props = defineProps({
|
|
let props = defineProps({
|
|
|
show: {
|
|
show: {
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
@@ -168,35 +173,62 @@ let equitiesForm = ref({
|
|
|
area: ''
|
|
area: ''
|
|
|
})
|
|
})
|
|
|
let changeIndex = ref(0)
|
|
let changeIndex = ref(0)
|
|
|
-const handleEquitiesSearch = ()=> {
|
|
|
|
|
-
|
|
|
|
|
-}
|
|
|
|
|
|
|
+// const handleEquitiesSearch = ()=> {
|
|
|
|
|
+//
|
|
|
|
|
+// }
|
|
|
|
|
|
|
|
-let comboList = ref([
|
|
|
|
|
- {
|
|
|
|
|
- id: 1,
|
|
|
|
|
- name: 'xxx套餐xxx套餐xxx套餐xxx套餐xxx套餐'
|
|
|
|
|
- },{
|
|
|
|
|
- id: 2,
|
|
|
|
|
- name: 'xxx套餐xxx套餐xxx套餐xxx套餐xxx套餐'
|
|
|
|
|
- }
|
|
|
|
|
-])
|
|
|
|
|
|
|
+let comboList = ref([])
|
|
|
let comboIndex = ref(0)
|
|
let comboIndex = ref(0)
|
|
|
const handleCombo = (item, index) => {
|
|
const handleCombo = (item, index) => {
|
|
|
comboIndex.value = index
|
|
comboIndex.value = index
|
|
|
|
|
+ api.additionalApi.rightsGrant(item.rightsId).then((res: any) => {
|
|
|
|
|
+ if(res.code == 200) {
|
|
|
|
|
+ comboData.value = res.data
|
|
|
|
|
+ } else {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const mergeArrays = (originalArr, newArr, key) => {
|
|
|
|
|
+ // 创建 Map 存储原始数组,以指定键为索引
|
|
|
|
|
+ const map = new Map();
|
|
|
|
|
+ originalArr.forEach(item => {
|
|
|
|
|
+ map.set(item[key], item);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 遍历新数组,替换或添加
|
|
|
|
|
+ newArr.forEach(item => {
|
|
|
|
|
+ map.set(item[key], item);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 返回合并后的数组
|
|
|
|
|
+ return Array.from(map.values());
|
|
|
}
|
|
}
|
|
|
-let comboData = ref([
|
|
|
|
|
- {
|
|
|
|
|
- a: 1,
|
|
|
|
|
- b: 2,
|
|
|
|
|
- c: 3
|
|
|
|
|
|
|
+
|
|
|
|
|
+const handleAdd = () => {
|
|
|
|
|
+ comboList.value[comboIndex.value].countOne += 1
|
|
|
|
|
+ let list = comboList.value.filter(item => item.countOne > 0)
|
|
|
|
|
+ if(list.length > 0) {
|
|
|
|
|
+ chosedList.value = mergeArrays(chosedList.value, list, 'rightsId')
|
|
|
|
|
+ console.log(21312321321, chosedList.value)
|
|
|
}
|
|
}
|
|
|
-])
|
|
|
|
|
-let chosedList = ref([
|
|
|
|
|
- {
|
|
|
|
|
- id: 1
|
|
|
|
|
|
|
+}
|
|
|
|
|
+const handleSubtract = () => {
|
|
|
|
|
+ if(comboList.value[comboIndex.value].countOne > 0) {
|
|
|
|
|
+ comboList.value[comboIndex.value].countOne -= 1
|
|
|
|
|
+ } else {
|
|
|
|
|
+ comboList.value[comboIndex.value].countOne = 0
|
|
|
}
|
|
}
|
|
|
-])
|
|
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+let comboData = ref([])
|
|
|
|
|
+let chosedList = ref([]) // 已选的套餐
|
|
|
|
|
+let singleList = ref([]) // 已选的单品
|
|
|
|
|
+
|
|
|
|
|
|
|
|
const handelCancel = () => {
|
|
const handelCancel = () => {
|
|
|
emits('close', false)
|
|
emits('close', false)
|
|
@@ -205,6 +237,49 @@ const handelConfirm = () => {
|
|
|
emits('close', false)
|
|
emits('close', false)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+const initEquities = (str, index) => {
|
|
|
|
|
+ changeIndex.value = index
|
|
|
|
|
+ if(index === 0) {
|
|
|
|
|
+ api.additionalApi.rightsGrantList({
|
|
|
|
|
+ pageNo: 1,
|
|
|
|
|
+ pageSize: 1000
|
|
|
|
|
+ }).then((res: any) => {
|
|
|
|
|
+ if(res.code == 200) {
|
|
|
|
|
+ comboList.value = res.data.records?.map(item => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ ...item,
|
|
|
|
|
+ countOne: 0
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ handleCombo(comboList.value[0], 0)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ } else if (index === 1) {
|
|
|
|
|
+ api.additionalApi.rightsList({
|
|
|
|
|
+ pageNo: 1,
|
|
|
|
|
+ pageSize: 1000
|
|
|
|
|
+ }).then((res: any) => {
|
|
|
|
|
+ if(res.code == 200) {
|
|
|
|
|
+ comboData.value = res.data.records
|
|
|
|
|
+ } else {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ initEquities('', 0)
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
@@ -228,7 +303,7 @@ const handelConfirm = () => {
|
|
|
max-height: 400px;
|
|
max-height: 400px;
|
|
|
.comboList{
|
|
.comboList{
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: calc(100% - 20px);
|
|
|
|
|
|
|
+ height: 100%;
|
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
|
.comboItem{
|
|
.comboItem{
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -273,6 +348,7 @@ const handelConfirm = () => {
|
|
|
background: #F7F7F7;
|
|
background: #F7F7F7;
|
|
|
padding: 10px;
|
|
padding: 10px;
|
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
.top{
|
|
.top{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
align-items: flex-start;
|