Skip to content

A
apaas-ui
Commit 107005a7 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

购物车

parent 379c619d
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 192 deletions
src/components/shopping-cart/shopping-cart-cell.vue
View file @ 107005a7
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
/> />
<div class="shopping_cell_msg"> <div class="shopping_cell_msg">
<div class="shopping_cell_name"> <div class="shopping_cell_name">
{{ cellItem.name + ccce }} {{ cellItem.name }}
<span <span
v-if="cellItem.mapService" v-if="cellItem.mapService"
class="tags map_service" class="tags map_service"
...@@ -34,31 +34,33 @@ ...@@ -34,31 +34,33 @@
<el-col :span="5"> <el-col :span="5">
<div class="shopping_cell_specification"> <div class="shopping_cell_specification">
<div class="shopping_cell_specification_val"> <div class="shopping_cell_specification_val">
<div class="shopping_cell_specification_val_specification">规格：访问次数：20/日，访问量：100/日</div> <div class="shopping_cell_specification_val_specification">规格：{{ specificationBtns[specification] }}</div>
<div class="shopping_cell_specification_val_type">申请方式：按月</div> <div class="shopping_cell_specification_val_type">申请方式：{{ specificationApplicationBtns[specificationApplication] }}</div>
<div class="shopping_cell_specification_edit"> <div class="shopping_cell_specification_edit">
<el-popover placement="right" width="280" v-model="visible"> <el-popover placement="right" width="280" v-model="visible" @after-leave="setSpecificationPop">
<div> <div>
<div class="shopping_cell_specification_title">规格：</div> <div class="shopping_cell_specification_title">规格：</div>
<div> <div>
<el-button <el-button
v-for="(item, index) in specificationBtns" v-for="(item, index) in specificationBtns"
:key="'specification' + index" :key="'specification' + index"
:class="specification == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'" :class="specificationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
size="mini" size="mini"
>{{ item }}</el-button> @click="changeSpecification(index)"
>{{ index + 1 + ". " + item }}</el-button>
</div> </div>
<div class="shopping_cell_specification_title">申请方式：</div> <div class="shopping_cell_specification_title">申请方式：</div>
<div> <div>
<el-button <el-button
v-for="(item, index) in specificationApplicationBtns" v-for="(item, index) in specificationApplicationBtns"
:key="'specification' + index" :key="'specification' + index"
:class="specificationApplication == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'" :class="specificationApplicationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
size="mini" size="mini"
>{{ item }}</el-button> @click="changeSpecificationApplication(index)"
>{{ item }}购买</el-button>
</div> </div>
</div> </div>
<div style="text-align: right; margin: 0"> <div class="pop_footer">
<el-button <el-button
class="shopping_cell_specification_cancel" class="shopping_cell_specification_cancel"
size="mini" size="mini"
...@@ -68,7 +70,7 @@ ...@@ -68,7 +70,7 @@
<el-button <el-button
class="shopping_cell_specification_submit" class="shopping_cell_specification_submit"
size="mini" size="mini"
@click="visible = false" @click="submitPop"
>确定</el-button> >确定</el-button>
</div> </div>
<el-button v-if="!readOnly" circle size="mini" slot="reference"> <el-button v-if="!readOnly" circle size="mini" slot="reference">
...@@ -108,9 +110,8 @@ export default { ...@@ -108,9 +110,8 @@ export default {
} }
}, },
watch: { watch: {
cellCheck(newV, oldV) { cellCheck: function(val) {
// do something this.checkedItem = val;
console.log(newV, oldV);
} }
}, },
data: () => ({ data: () => ({
...@@ -121,18 +122,34 @@ export default { ...@@ -121,18 +122,34 @@ export default {
visible: false, visible: false,
specification: 1, specification: 1,
specificationApplication: 0, specificationApplication: 0,
specificationPop: 1,
specificationApplicationPop: 0,
specificationBtns: [ specificationBtns: [
"1.访问次数：20/日 访问量：100/日", "访问次数：20/日 访问量：100/日",
"2.访问次数：200/日 访问量：1000/日", "访问次数：200/日 访问量：1000/日",
"3.访问次数：无上限 访问量：无上限" "访问次数：无上限 访问量：无上限"
], ],
specificationApplicationBtns: ["按月购买", "按年购买"] specificationApplicationBtns: ["按月", "按年"]
}), }),
computed: {}, computed: {},
watch: {},
methods: { methods: {
getState(val) { getState(val) {
this.$emit("changeState", { state: val, index: this.cellIndex }); this.$emit("changeState", { state: val, index: this.cellIndex });
},
changeSpecification(val) {
this.specificationPop = val;
},
changeSpecificationApplication(val) {
this.specificationApplicationPop = val;
},
submitPop() {
this.specification = this.specificationPop;
this.specificationApplication = this.specificationApplicationPop;
this.visible = false;
},
setSpecificationPop() {
this.specificationPop = this.specification;
this.specificationApplicationPop = this.specificationApplication;
} }
}, },
mounted() {} mounted() {}
...@@ -286,6 +303,10 @@ export default { ...@@ -286,6 +303,10 @@ export default {
.shopping_cell_specification_cancel { .shopping_cell_specification_cancel {
color: #58617a; color: #58617a;
} }
.pop_footer {
text-align: right;
margin: 30px 5px 5px;
}
</style> </style>
<style> <style>
.shopping_cell_specification_edit .el-button { .shopping_cell_specification_edit .el-button {
...@@ -316,7 +337,7 @@ export default { ...@@ -316,7 +337,7 @@ export default {
color: #8890a7; color: #8890a7;
} }
.shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label { .shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label {
color: #687087; color: #586077;
} }
.shopping_cell_options .el-checkbox__inner:hover { .shopping_cell_options .el-checkbox__inner:hover {
border-color: #d0d6f4; border-color: #d0d6f4;
......
src/components/shopping-cart/shopping-cart-com.vue
View file @ 107005a7
<template> <template>
<div> <div>
<div class="shopping_list shopping_list_all"> <div class="shopping_list shopping_list_all">
<ShoppingCartList :showHead="true" :readOnly="false" class="shopping_all_list" /> <div class="shopping_all_head">
<el-row>
<el-col :span="2" class="shopping_all_head_item">
<el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
</el-col>
<el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
<el-col :span="5" class="shopping_all_head_item">规格</el-col>
<el-col :span="4" class="shopping_all_head_item">数量</el-col>
<el-col :span="4" class="shopping_all_head_item">操作</el-col>
</el-row>
</div>
<ShoppingCartList
ref="shoppingList"
:checkShopAll="checkShopAll"
:list="list"
:checkList="checkList"
:readOnly="false"
@changeState="changeState"
class="shopping_all_list"
/>
</div> </div>
<div class="shopping_list shopping_list_fail"> <div class="shopping_list shopping_list_fail">
<div class="expired_service">已失效服务</div> <div class="expired_service">已失效服务</div>
<ShoppingCartList :showHead="false" :readOnly="true" class="shopping_all_list" /> <ShoppingCartList :readOnly="true" class="shopping_all_list" />
</div> </div>
<div class="shopping_list shopping_list_options"> <div class="shopping_list shopping_list_options">
<ShoppingCartOptions /> <div class="shopping_cart_options">
<el-row>
<el-col :span="2" class="shopping_cart_options_cell">
<el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
</el-col>
<el-col :span="3" class="shopping_cart_options_del">
<span v-if="getNum == 0" class="shopping_cart_options_del_service">删除选中服务</span>
<span
v-else
@click="delSelectService"
class="shopping_cart_options_del_service_act"
>删除选中服务</span>
</el-col>
<el-col :span="15" class="shopping_cart_options_num">
共 {{ checkList.length }} 项服务，已选择
<span>{{ getNum }}</span> 项
</el-col>
<el-col :span="4" class="shopping_cart_options_cell">
<el-button v-if="getNum == 0" :disabled="true" class="shopping_cart_options_cell_btn">一键申请</el-button>
<el-button v-else class="shopping_cart_options_cell_btn_act">一键申请</el-button>
</el-col>
</el-row>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list"; import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
import ShoppingCartOptions from "@/components/shopping-cart/shopping-cart-options";
export default { export default {
components: { components: {
ShoppingCartList, ShoppingCartList
ShoppingCartOptions
}, },
props: {}, props: {},
data: () => ({ data: () => ({
checkShopAll: false,
checkList: [false, false, false],
list: [
{
id: 0,
name: "水路货物周转量情况",
type: "基础数据服务",
creator: "贵州省交通运输厅0",
state: 1,
mapService: 1
},
{
id: 1,
name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
type: "基础数据服务",
creator: "贵州省交通运输厅1",
state: 1
},
{
id: 2,
name: "水路货物周转量情况水路货物周转量情况",
type: "基础数据服务",
creator: "贵州省交通运输厅2",
state: 1,
mapService: 1
}
]
}), }),
mounted() {}, mounted() {},
methods: {} computed: {
getNum() {
let num = this.checkList.reduce(
(a, v) => (v === true ? a + 1 : a + 0),
0
);
return num;
}
},
methods: {
checkAll(val) {
this.$refs.shoppingList.setAllState(val);
},
changeState(val) {
console.log(val);
this.$set(this.checkList, val.index, val.state);
if (this.checkList.indexOf(false) == -1) {
this.checkShopAll = true;
} else {
this.checkShopAll = false;
}
},
delSelectService() {
this.checkList.forEach((item, index) => {
if (item === true) {
console.log(this.list[index]);
}
});
}
}
}; };
</script> </script>
<style scoped> <style scoped>
...@@ -38,7 +132,6 @@ export default { ...@@ -38,7 +132,6 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
} }
.shopping_list_all { .shopping_list_all {
} }
.shopping_list_fail { .shopping_list_fail {
} }
...@@ -48,7 +141,7 @@ export default { ...@@ -48,7 +141,7 @@ export default {
} }
.shopping_fail_head { .shopping_fail_head {
background-color: #eff1f8; background-color: #eff1f8;
height: 40px; height: 40px;
} }
.shopping_options { .shopping_options {
height: 84px; height: 84px;
...@@ -61,4 +154,92 @@ export default { ...@@ -61,4 +154,92 @@ export default {
line-height: 28px; line-height: 28px;
background-color: #eff1f8; background-color: #eff1f8;
} }
</style> .shopping_cart_options {
\ No newline at end of file height: 80px;
padding: 0 20px;
font-weight: 700;
line-height: 80px;
}
.shopping_cart_options_cell {
text-align: center;
}
.shopping_cart_options_del {
}
.shopping_cart_options_del_service {
color: #c8d0e7;
}
.shopping_cart_options_del_service_act {
cursor: pointer;
color: #0f2683;
}
.shopping_cart_options_num {
text-align: right;
font-size: 14px;
font-weight: 500;
color: #58617a;
}
.shopping_cart_options_num span {
color: #e56600;
}
.shopping_cart_options_cell_btn {
width: 90%;
margin: 0 10%;
}
.shopping_cart_options_cell_btn_act {
width: 90%;
margin: 0 10%;
background-color: #e56600;
color: #fcefd6;
}
.shopping_all_head {
background-color: #e5f0ff;
height: 48px;
padding: 0 20px;
font-weight: 700;
line-height: 48px;
}
.shopping_all_head_item {
text-align: center;
}
.shopping_list_page {
padding: 10px 20px 0;
}
</style>
<style>
.shopping_cart_options_cell .el-checkbox {
font-weight: 700;
}
.shopping_cart_options_cell .el-checkbox__inner:hover {
border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #626de9;
}
.shopping_cart_options_cell
.el-checkbox__input.is-checked
+ .el-checkbox__label {
color: #626de9;
}
.shopping_all_head_item .el-checkbox {
font-weight: 700;
}
.shopping_all_head_item .el-checkbox__inner:hover {
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
color: #626de9;
}
</style>
src/components/shopping-cart/shopping-cart-list.vue
View file @ 107005a7
<template> <template>
<div> <div>
<div v-if="showHead" class="shopping_all_head">
<el-row>
<el-col :span="2" class="shopping_all_head_item">
<el-checkbox v-model="checkedAll" @change="checkAll">全选</el-checkbox>
</el-col>
<el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
<el-col :span="5" class="shopping_all_head_item">规格</el-col>
<el-col :span="4" class="shopping_all_head_item">数量</el-col>
<el-col :span="4" class="shopping_all_head_item">操作</el-col>
</el-row>
</div>
<div class="shopping_list_page"> <div class="shopping_list_page">
<ShoppingCartCell <ShoppingCartCell
v-for="(item, index) in list" v-for="(item, index) in list"
:cellItem="item" :cellItem="item"
:cellIndex="index" :cellIndex="index"
:cellCheck="checkList[index]" :cellCheck="checkLists[index]"
:key="item.id" :key="item.id"
:readOnly="readOnly" :readOnly="readOnly"
@changeState="changeState" @changeState="changeState"
...@@ -32,97 +21,44 @@ export default { ...@@ -32,97 +21,44 @@ export default {
ShoppingCartCell ShoppingCartCell
}, },
props: { props: {
showHead: {
type: Boolean,
default: false
},
readOnly: { readOnly: {
type: Boolean, type: Boolean,
default: false default: false
},
checkShopAll: {
type: Boolean
},
list: {
type: Array
},
checkList: {
type: Array,
default: ()=> {[]}
}
},
watch: {
checkList: {
immediate: true, // 这句重要
handler(val) {
console.log("ss")
this.checkLists = val;
}
} }
}, },
data: () => ({ data: () => ({
checkedAll: false, checkedAll: false,
checkList: [false, false, false], checkLists: []
list: [
{
id: 0,
name: "水路货物周转量情况",
type: "基础数据服务",
creator: "贵州省交通运输厅0",
state: 1,
mapService: 1
},
{
id: 1,
name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
type: "基础数据服务",
creator: "贵州省交通运输厅1",
state: 1
},
{
id: 2,
name: "水路货物周转量情况水路货物周转量情况",
type: "基础数据服务",
creator: "贵州省交通运输厅2",
state: 1,
mapService: 1
}
]
}), }),
mounted() {}, mounted() {},
methods: { methods: {
changeState(val) { changeState(val) {
console.log(val) this.$emit("changeState", val);
this.checkList[val.index] = val.state;
console.log(this.checkList)
if (this.checkList.indexOf(false) == -1) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
}, },
checkAll(val) { setAllState(val) {
console.log(val) for (let i = 0; i < this.checkLists.length; i++) {
for (let i = 0; i < this.checkList.length; i++) { this.$set(this.checkLists, i, val)
this.checkList[i] = val;
} }
console.log(this.checkList)
} }
} }
}; };
</script> </script>
<style scoped>
.shopping_all_head {
background-color: #e5f0ff;
height: 48px;
padding: 0 20px;
font-weight: 700;
line-height: 48px;
}
.shopping_all_head_item {
text-align: center;
}
.shopping_list_page {
padding: 10px 20px 0;
}
</style>
<style>
.shopping_all_head_item .el-checkbox {
font-weight: 700;
}
.shopping_all_head_item .el-checkbox__inner:hover {
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
color: #626de9;
}
</style>
\ No newline at end of file
src/components/shopping-cart/shopping-cart-options.vue deleted 100644 → 0
View file @ 379c619d
<template>
<div class="shopping_cart_options">
<el-row>
<el-col :span="2" class="shopping_cart_options_cell">
<el-checkbox v-model="checkedAll">全选</el-checkbox>
</el-col>
<el-col :span="3" class="shopping_cart_options_del">删除选中服务</el-col>
<el-col :span="15" class="shopping_cart_options_num">共 4 项服务，已选择 <span>3</span> 项</el-col>
<el-col :span="4" class="shopping_cart_options_cell">
<el-button class="shopping_cart_options_cell_btn">一键申请</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
components: {},
props: {},
data: () => ({
checkedAll: false
}),
mounted() {},
methods: {}
};
</script>
<style scoped>
.shopping_cart_options {
height: 80px;
padding: 0 20px;
font-weight: 700;
line-height: 80px;
}
.shopping_cart_options_cell {
text-align: center;
}
.shopping_cart_options_del {
color: #0f2683;
}
.shopping_cart_options_num {
text-align: right;
font-size: 14px;
font-weight: 500;
color: #58617a;
}
.shopping_cart_options_num span {
color: #e56600;
}
.shopping_cart_options_cell_btn {
width: 90%;
margin: 0 10%;
background-color: #e56600;
color: #fcefd6;
}
</style>
<style>
.shopping_cart_options_cell .el-checkbox {
font-weight: 700;
}
.shopping_cart_options_cell .el-checkbox__inner:hover {
border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-checked+.el-checkbox__label {
color: #626de9;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment