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 @@
/>
<div class="shopping_cell_msg">
<div class="shopping_cell_name">
{{ cellItem.name + ccce }}
{{ cellItem.name }}
<span
v-if="cellItem.mapService"
class="tags map_service"
......@@ -34,31 +34,33 @@
<el-col :span="5">
<div class="shopping_cell_specification">
<div class="shopping_cell_specification_val">
<div class="shopping_cell_specification_val_specification">规格：访问次数：20/日，访问量：100/日</div>
<div class="shopping_cell_specification_val_type">申请方式：按月</div>
<div class="shopping_cell_specification_val_specification">规格：{{ specificationBtns[specification] }}</div>
<div class="shopping_cell_specification_val_type">申请方式：{{ specificationApplicationBtns[specificationApplication] }}</div>
<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 class="shopping_cell_specification_title">规格：</div>
<div>
<el-button
v-for="(item, index) in specificationBtns"
: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"
>{{ item }}</el-button>
@click="changeSpecification(index)"
>{{ index + 1 + ". " + item }}</el-button>
</div>
<div class="shopping_cell_specification_title">申请方式：</div>
<div>
<el-button
v-for="(item, index) in specificationApplicationBtns"
: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"
>{{ item }}</el-button>
@click="changeSpecificationApplication(index)"
>{{ item }}购买</el-button>
</div>
</div>
<div style="text-align: right; margin: 0">
<div class="pop_footer">
<el-button
class="shopping_cell_specification_cancel"
size="mini"
......@@ -68,7 +70,7 @@
<el-button
class="shopping_cell_specification_submit"
size="mini"
@click="visible = false"
@click="submitPop"
>确定</el-button>
</div>
<el-button v-if="!readOnly" circle size="mini" slot="reference">
......@@ -108,9 +110,8 @@ export default {
}
},
watch: {
cellCheck(newV, oldV) {
// do something
console.log(newV, oldV);
cellCheck: function(val) {
this.checkedItem = val;
}
},
data: () => ({
......@@ -121,18 +122,34 @@ export default {
visible: false,
specification: 1,
specificationApplication: 0,
specificationPop: 1,
specificationApplicationPop: 0,
specificationBtns: [
"1.访问次数：20/日 访问量：100/日",
"2.访问次数：200/日 访问量：1000/日",
"3.访问次数：无上限 访问量：无上限"
"访问次数：20/日 访问量：100/日",
"访问次数：200/日 访问量：1000/日",
"访问次数：无上限 访问量：无上限"
],
specificationApplicationBtns: ["按月购买", "按年购买"]
specificationApplicationBtns: ["按月", "按年"]
}),
computed: {},
watch: {},
methods: {
getState(val) {
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() {}
......@@ -286,6 +303,10 @@ export default {
.shopping_cell_specification_cancel {
color: #58617a;
}
.pop_footer {
text-align: right;
margin: 30px 5px 5px;
}
</style>
<style>
.shopping_cell_specification_edit .el-button {
......@@ -316,7 +337,7 @@ export default {
color: #8890a7;
}
.shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label {
color: #687087;
color: #586077;
}
.shopping_cell_options .el-checkbox__inner:hover {
border-color: #d0d6f4;
......
src/components/shopping-cart/shopping-cart-com.vue
View file @ 107005a7
<template>
<div>
<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 class="shopping_list shopping_list_fail">
<div class="expired_service">已失效服务</div>
<ShoppingCartList :showHead="false" :readOnly="true" class="shopping_all_list" />
<ShoppingCartList :readOnly="true" class="shopping_all_list" />
</div>
<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>
</template>
<script>
import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
import ShoppingCartOptions from "@/components/shopping-cart/shopping-cart-options";
export default {
components: {
ShoppingCartList,
ShoppingCartOptions
ShoppingCartList
},
props: {},
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() {},
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>
<style scoped>
......@@ -38,7 +132,6 @@ export default {
margin-bottom: 20px;
}
.shopping_list_all {
}
.shopping_list_fail {
}
......@@ -48,7 +141,7 @@ export default {
}
.shopping_fail_head {
background-color: #eff1f8;
height: 40px;
height: 40px;
}
.shopping_options {
height: 84px;
......@@ -61,4 +154,92 @@ export default {
line-height: 28px;
background-color: #eff1f8;
}
</style>
\ No newline at end of file
.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 {
}
.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>
<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">
<ShoppingCartCell
v-for="(item, index) in list"
:cellItem="item"
:cellIndex="index"
:cellCheck="checkList[index]"
:cellCheck="checkLists[index]"
:key="item.id"
:readOnly="readOnly"
@changeState="changeState"
......@@ -32,97 +21,44 @@ export default {
ShoppingCartCell
},
props: {
showHead: {
type: Boolean,
default: false
},
readOnly: {
type: Boolean,
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: () => ({
checkedAll: 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
}
]
checkLists: []
}),
mounted() {},
methods: {
changeState(val) {
console.log(val)
this.checkList[val.index] = val.state;
console.log(this.checkList)
if (this.checkList.indexOf(false) == -1) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
this.$emit("changeState", val);
},
checkAll(val) {
console.log(val)
for (let i = 0; i < this.checkList.length; i++) {
this.checkList[i] = val;
setAllState(val) {
for (let i = 0; i < this.checkLists.length; i++) {
this.$set(this.checkLists, i, val)
}
console.log(this.checkList)
}
}
};
</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