Skip to content

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

修复购物车中逻辑混乱问题，增加导航栏中购物车功能

parent 107005a7
Hide whitespace changes
Inline Side-by-side
Showing with 440 additions and 151 deletions
docs/shopping_cart_list.json 0 → 100644
View file @ 7fa5db70
{
"data": {
"list": [
{
"id": 0,
"name": "水路货物周转量情况",
"type": "基础数据服务",
"creator": "贵州省交通运输厅0",
"state": 1,
"mapService": 1,
"num": 2,
"checkedSubscription": false,
"specification": 1,
"specificationApplication": 2
},
{
"id": 1,
"name": "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
"type": "基础数据服务",
"creator": "贵州省交通运输厅1",
"state": 1,
"num": 2,
"checkedSubscription": false,
"specification": 1,
"specificationApplication": 2
},
{
"id": 2,
"name": "水路货物周转量情况水路货物周转量情况",
"type": "基础数据服务",
"creator": "贵州省交通运输厅2",
"state": 1,
"mapService": 1,
"num": 2,
"checkedSubscription": true,
"specification": 1,
"specificationApplication": 2
}
]
}
}
\ No newline at end of file
src/components/commodity-cell.vue
View file @ 7fa5db70
...@@ -150,7 +150,7 @@ export default { ...@@ -150,7 +150,7 @@ export default {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 12px; line-height: 12px;
border-radius: 15px; border-radius: 4px;
position: relative; position: relative;
top: -2px; top: -2px;
} }
......
src/components/menu.vue
View file @ 7fa5db70
<template> <template>
<div class="menu"> <div class="menu">
<img src="../assets/imgs/home_img_logo.png" alt="" class="logo"> <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
<div style="float:right;cursor: pointer;position:relative;" class="user_hover"> <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
<span class="user">用户</span> <span class="user">用户</span>
<img src="../assets/imgs/home_ic_user.png" alt="" class="user_pic"> <img src="../assets/imgs/home_ic_user.png" alt class="user_pic" />
<div class="user_menu"> <div class="user_menu">
<div v-for="(item,index) in user_arr" :key="index+700" @click="gotopage(index)">{{item}}</div> <div v-for="(item,index) in user_arr" :key="index+700" @click="gotopage(index)">{{item}}</div>
</div> </div>
<div class="sj"></div> <div class="sj"></div>
</div>
<div style="float:right;cursor: pointer;position:relative;" class="shop_hover">
<div class="number">99+</div>
<img src="../assets/imgs/home_ic_shop.png" alt class="car" />
<div class="shop_menu">
<div class="shop_list_title">最近加入的服务：</div>
<div
v-for="(item,index) in shopping_list"
:key="'shopping' + index"
class="shop_list_cell shop_line"
>
<img
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
class="shop_img"
/>
<div class="shop_cell_msgs">
<p @click="getDetail(item.id)" class="shop_cell_name over_one">{{ item.name }}</p>
<p class="shop_cell_msg bover_one">{{ item.type }}</p>
<p class="shop_cell_msg over_one">{{ item.creator }}</p>
</div>
<div>
<img @click="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
</div>
</div> </div>
<div class="number">99+</div> <div class="shop_footer">
<img src="../assets/imgs/home_ic_shop.png" alt="" class="car"> <el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
<div style="float:right">
<div v-for="(item,index) in menu_arr" :key="index+200" class="menu_box" @click="now_menu = index" :style="now_menu==index?{color:'#fff'}:{}">{{item}}
<div class="bottom_show" v-if="now_menu==index"></div>
</div>
</div> </div>
</div>
<div class="shop_sj"></div>
</div>
<div style="float:right">
<div
v-for="(item,index) in menu_arr"
:key="index+200"
class="menu_box"
@click="now_menu = index"
:style="now_menu==index?{color:'#fff'}:{}"
>
{{item}}
<div class="bottom_show" v-if="now_menu==index"></div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return{ return {
menu_arr:['工作台','技术支持','服务超市'], menu_arr: ["工作台", "技术支持", "服务超市"],
now_menu:0, now_menu: 0,
user_arr:['个人档案','消息通知','收银中心','关于BD-aPaaS','退出登录'], user_arr: [
"个人档案",
"消息通知",
"收银中心",
"关于BD-aPaaS",
"退出登录"
],
shopping_list: [
{
id: 0,
name: "水路货物周转量情况",
type: "基础数据服务",
creator: "贵州省交通运输厅0",
state: 1,
mapService: 1,
num: 2,
checkedSubscription: false,
specification: 1,
specificationApplication: 2
},
{
id: 1,
name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
type: "基础数据服务",
creator: "贵州省交通运输厅1",
state: 1,
num: 2,
checkedSubscription: false,
specification: 1,
specificationApplication: 2
},
{
id: 2,
name: "水路货物周转量情况水路货物周转量情况",
type: "基础数据服务",
creator: "贵州省交通运输厅2",
state: 1,
mapService: 1,
num: 2,
checkedSubscription: true,
specification: 1,
specificationApplication: 2
} }
]
};
},
methods: {
gotopage(n) {
console.log(n);
}, },
methods:{ settlement() {
gotopage(n){ this.$router.push({name: "shoppingCart"});
console.log(n); },
} deleteItem() {},
getDetail() {
// if you want goto detail page, you should give me the type at first
} }
} }
};
</script> </script>
<style scoped> <style scoped>
.menu{ .menu {
width: 100%; width: 100%;
height: 84px; height: 84px;
background-color: #0f2683; background-color: #0f2683;
color: #8390ee; color: #8390ee;
line-height: 84px; line-height: 84px;
}
.logo {
float: left;
margin: 30px 0 0 40px;
}
.user {
float: right;
margin-right: 113px;
font-size: 16px;
}
.user_pic {
float: right;
margin-right: 15px;
margin-top: 30px;
}
.number {
float: right;
margin-right: 43px;
margin-top: 30px;
width: 40px;
height: 22px;
background-color: #e56600;
border-radius: 11px;
color: #fcefd6;
line-height: 22px;
text-align: center;
}
.car {
float: right;
margin-right: 15px;
margin-top: 30px;
}
.menu_box {
float: right;
width: 185px;
text-align: center;
cursor: pointer;
position: relative;
}
.menu_box:nth-of-type(1) {
margin-right: 52px;
}
.bottom_show {
width: 24px;
height: 5px;
background-color: #e56600;
border-radius: 3px;
position: absolute;
bottom: 0px;
left: calc(50% - 12px);
}
.user_menu {
width: 135px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 8px;
position: absolute;
top: 80px;
left: -20px;
overflow: hidden;
display: none;
z-index: 1;
}
.shop_menu {
width: 280px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 8px;
position: absolute;
top: 80px;
left: -20px;
overflow: hidden;
display: none;
z-index: 1;
padding: 10px 20px;
}
.user_hover:hover .user_menu {
display: block;
}
.user_hover:hover .sj {
display: block;
}
.shop_hover {
height: 100%;
}
.shop_hover:hover .shop_menu {
display: block;
}
.shop_hover:hover .shop_sj {
display: block;
}
.user_menu div {
width: 135px;
height: 44px;
line-height: 44px;
text-align: center;
color: #0d1847;
}
.user_menu div:hover {
background-color: #e56600;
color: #fff;
}
.sj {
width: 16px;
height: 16px;
background-color: #e56600;
position: absolute;
top: 72px;
transform: rotate(45deg);
display: none;
}
.shop_sj {
width: 16px;
height: 16px;
background-color: #fff;
position: absolute;
top: 72px;
transform: rotate(45deg);
display: none;
}
.shop_list_title {
color: #8890a7;
font-size: 14px;
height: 30px;
line-height: 30px;
}
.shop_list_cell {
height: 80px;
padding: 10px 0;
display: flex;
line-height: 26px;
}
.shop_line {
border-bottom: #f4f7fc 2px solid;
}
.shop_line:nth-last-child(2) {
border-bottom: 0;
}
.shop_img {
width: 60px;
height: 60px;
border-radius: 8px;
}
.shop_footer {
width: 100%;
height: 50px;
text-align: right;
padding: 15px 0;
line-height: 30px;
}
.shop_settlement {
background-color: #e56600;
color: #fcefd6;
}
.shop_cell_msgs {
width: calc(100% - 80px);
margin-left: 10px;
}
.shop_cell_name {
color: #2d3867;
font-size: 14px;
line-height: 24px;
}
.shop_cell_name:hover {
color: #0d0807;
}
.shop_cell_msg {
color: #8890a7;
font-size: 12px;
line-height: 18px;
} }
.logo{ .over_one {
float: left; overflow: hidden;
margin: 30px 0 0 40px; text-overflow: ellipsis;
} white-space: nowrap;
.user{
float: right;
margin-right: 113px;
font-size: 16px;
}
.user_pic{
float: right;
margin-right: 15px;
margin-top: 30px;
}
.number{
float: right;
margin-right: 43px;
margin-top: 30px;
width: 40px;
height: 22px;
background-color: #e56600;
border-radius: 11px;
color: #fcefd6;
line-height: 22px;
text-align: center;
}
.car{
float: right;
margin-right: 15px;
margin-top: 30px;
}
.menu_box{
float: right;
width: 185px;
text-align: center;
cursor: pointer;
position: relative;
}
.menu_box:nth-of-type(1){
margin-right: 52px;
}
.bottom_show{
width: 24px;
height: 5px;
background-color: #e56600;
border-radius: 3px;
position: absolute;
bottom: 0px;
left: calc(50% - 12px);
}
.user_menu{
width: 135px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 8px;
position: absolute;
top: 80px;
left: -20px;
overflow: hidden;
display: none;
z-index: 1;
}
.user_hover:hover .user_menu{
display: block;
}
.user_hover:hover .sj{
display: block;
}
.user_menu div{
width: 135px;
height: 44px;
line-height: 44px;
text-align: center;
color: #0d1847;
}
.user_menu div:hover{
background-color: #e56600;
color: #fff;
}
.sj{
width: 16px;
height: 16px;
background-color: #e56600;
position: absolute;
top: 72px;
transform:rotate(45deg);
display: none;
} }
</style> </style>
\ No newline at end of file
src/components/shopping-cart/shopping-cart-cell.vue
View file @ 7fa5db70
...@@ -15,18 +15,18 @@ ...@@ -15,18 +15,18 @@
/> />
<div class="shopping_cell_msg"> <div class="shopping_cell_msg">
<div class="shopping_cell_name"> <div class="shopping_cell_name">
{{ cellItem.name }} {{ cellItems.name }}
<span <span
v-if="cellItem.mapService" v-if="cellItems.mapService"
class="tags map_service" class="tags map_service"
>mapService</span> >mapService</span>
<span v-if="cellItem.state == 1" class="tags shared">共享</span> <span v-if="cellItems.state == 1" class="tags shared">共享</span>
<span v-else-if="cellItem.state == 2" class="tags restricted">受限</span> <span v-else-if="cellItems.state == 2" class="tags restricted">受限</span>
<span v-else class="tags sensitive">敏感</span> <span v-else class="tags sensitive">敏感</span>
</div> </div>
<div class="shopping_cell_msg_other"> <div class="shopping_cell_msg_other">
<div class="shopping_cell_type">{{ cellItem.type }}</div> <div class="shopping_cell_type">{{ cellItems.type }}</div>
<div class="shopping_cell_creator">{{ cellItem.creator }}</div> <div class="shopping_cell_creator">{{ cellItems.creator }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -34,10 +34,19 @@ ...@@ -34,10 +34,19 @@
<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">规格：{{ specificationBtns[specification] }}</div> <div
<div class="shopping_cell_specification_val_type">申请方式：{{ specificationApplicationBtns[specificationApplication] }}</div> class="shopping_cell_specification_val_specification"
>规格：{{ specificationBtns[cellItems.specification] }}</div>
<div
class="shopping_cell_specification_val_type"
>申请方式：{{ specificationApplicationBtns[cellItems.specificationApplication] }}</div>
<div class="shopping_cell_specification_edit"> <div class="shopping_cell_specification_edit">
<el-popover placement="right" width="280" v-model="visible" @after-leave="setSpecificationPop"> <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>
...@@ -56,7 +65,7 @@ ...@@ -56,7 +65,7 @@
:key="'specification' + index" :key="'specification' + index"
:class="specificationApplicationPop == 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"
@click="changeSpecificationApplication(index)" @click="changeSpecificationApplication(index)"
>{{ item }}购买</el-button> >{{ item }}购买</el-button>
</div> </div>
</div> </div>
...@@ -82,12 +91,22 @@ ...@@ -82,12 +91,22 @@
</div> </div>
</el-col> </el-col>
<el-col :span="4" class="shopping_cell_num"> <el-col :span="4" class="shopping_cell_num">
<el-input-number :disabled="readOnly" v-model="numItem" size="mini" :min="1"></el-input-number> <el-input-number
:disabled="readOnly"
v-model="cellItems.num"
@change="changeNum"
size="mini"
:min="1"
></el-input-number>
</el-col> </el-col>
<el-col :span="4" class="shopping_cell_options"> <el-col :span="4" class="shopping_cell_options">
<el-checkbox v-if="!readOnly" v-model="checkedSubscription">订阅该服务</el-checkbox> <el-checkbox
v-if="!readOnly"
v-model="cellItems.checkedSubscription"
@change="changeSubscription"
>订阅该服务</el-checkbox>
<div class="shopping_cell_options_del"> <div class="shopping_cell_options_del">
<el-button size="mini">删除</el-button> <el-button @click="delCellItem" size="mini">删除</el-button>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -112,16 +131,20 @@ export default { ...@@ -112,16 +131,20 @@ export default {
watch: { watch: {
cellCheck: function(val) { cellCheck: function(val) {
this.checkedItem = val; this.checkedItem = val;
},
cellItem: {
immediate: true, // 这句重要
handler(val) {
this.cellItems = val;
}
} }
}, },
data: () => ({ data: () => ({
cellItems: {},
checkedItem: false, checkedItem: false,
numItem: 1,
specificationEdit: require("../../assets/imgs/ic_edit.png"), specificationEdit: require("../../assets/imgs/ic_edit.png"),
checkedSubscription: false, checkedSubscription: false,
visible: false, visible: false,
specification: 1,
specificationApplication: 0,
specificationPop: 1, specificationPop: 1,
specificationApplicationPop: 0, specificationApplicationPop: 0,
specificationBtns: [ specificationBtns: [
...@@ -143,13 +166,32 @@ export default { ...@@ -143,13 +166,32 @@ export default {
this.specificationApplicationPop = val; this.specificationApplicationPop = val;
}, },
submitPop() { submitPop() {
this.specification = this.specificationPop; this.cellItems.specification = this.specificationPop;
this.specificationApplication = this.specificationApplicationPop; this.cellItems.specificationApplication = this.specificationApplicationPop;
this.visible = false; this.visible = false;
this.changeCellItem();
}, },
setSpecificationPop() { setSpecificationPop() {
this.specificationPop = this.specification; this.specificationPop = this.cellItems.specification;
this.specificationApplicationPop = this.specificationApplication; this.specificationApplicationPop = this.cellItems.specificationApplication;
},
changeSubscription(val) {
this.changeCellItem();
},
changeNum(val) {
this.changeCellItem();
},
changeCellItem() {
this.$emit("changeCellMsg", {
index: this.cellIndex,
data: this.cellItems
});
},
delCellItem() {
this.$emit("deleteItem", {
index: this.cellIndex,
data: this.cellItems
});
} }
}, },
mounted() {} mounted() {}
...@@ -229,7 +271,7 @@ export default { ...@@ -229,7 +271,7 @@ export default {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 12px; line-height: 12px;
border-radius: 15px; border-radius: 4px;
position: relative; position: relative;
top: -2px; top: -2px;
} }
......
src/components/shopping-cart/shopping-cart-com.vue
View file @ 7fa5db70
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</el-col> </el-col>
<el-col :span="9" class="shopping_all_head_item">服务信息</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="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-col :span="4" class="shopping_all_head_item">操作</el-col> <el-col :span="4" class="shopping_all_head_item">操作</el-col>
</el-row> </el-row>
</div> </div>
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
:checkList="checkList" :checkList="checkList"
:readOnly="false" :readOnly="false"
@changeState="changeState" @changeState="changeState"
@changeCellMsg="changeCellMsg"
@deleteItem="deleteItem"
class="shopping_all_list" class="shopping_all_list"
/> />
</div> </div>
...@@ -45,8 +47,12 @@ ...@@ -45,8 +47,12 @@
<span>{{ getNum }}</span> 项 <span>{{ getNum }}</span> 项
</el-col> </el-col>
<el-col :span="4" class="shopping_cart_options_cell"> <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
<el-button v-else class="shopping_cart_options_cell_btn_act">一键申请</el-button> v-if="getNum == 0"
:disabled="true"
class="shopping_cart_options_cell_btn"
>一键申请</el-button>
<el-button v-else @click="oneClickApplication" class="shopping_cart_options_cell_btn_act">一键申请</el-button>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -71,14 +77,22 @@ export default { ...@@ -71,14 +77,22 @@ export default {
type: "基础数据服务", type: "基础数据服务",
creator: "贵州省交通运输厅0", creator: "贵州省交通运输厅0",
state: 1, state: 1,
mapService: 1 mapService: 1,
num: 2,
checkedSubscription: false,
specification: 1,
specificationApplication: 2
}, },
{ {
id: 1, id: 1,
name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周", name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
type: "基础数据服务", type: "基础数据服务",
creator: "贵州省交通运输厅1", creator: "贵州省交通运输厅1",
state: 1 state: 1,
num: 2,
checkedSubscription: false,
specification: 1,
specificationApplication: 2
}, },
{ {
id: 2, id: 2,
...@@ -86,7 +100,11 @@ export default { ...@@ -86,7 +100,11 @@ export default {
type: "基础数据服务", type: "基础数据服务",
creator: "贵州省交通运输厅2", creator: "贵州省交通运输厅2",
state: 1, state: 1,
mapService: 1 mapService: 1,
num: 2,
checkedSubscription: true,
specification: 1,
specificationApplication: 2
} }
] ]
}), }),
...@@ -119,6 +137,19 @@ export default { ...@@ -119,6 +137,19 @@ export default {
console.log(this.list[index]); console.log(this.list[index]);
} }
}); });
},
changeCellMsg(val) {
console.log(val);
},
deleteItem(val) {
console.log(val);
},
oneClickApplication() {
this.checkList.forEach((item, index) => {
if (item === true) {
console.log(this.list[index]);
}
});
} }
} }
}; };
...@@ -194,7 +225,7 @@ export default { ...@@ -194,7 +225,7 @@ export default {
.shopping_all_head { .shopping_all_head {
background-color: #e5f0ff; background-color: #e5f0ff;
height: 48px; height: 48px;
padding: 0 20px; padding: 0;
font-weight: 700; font-weight: 700;
line-height: 48px; line-height: 48px;
} }
......
src/components/shopping-cart/shopping-cart-list.vue
View file @ 7fa5db70
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
:key="item.id" :key="item.id"
:readOnly="readOnly" :readOnly="readOnly"
@changeState="changeState" @changeState="changeState"
@changeCellMsg="changeCellMsg"
@deleteItem="deleteItem"
/> />
</div> </div>
</div> </div>
...@@ -58,6 +60,12 @@ export default { ...@@ -58,6 +60,12 @@ export default {
for (let i = 0; i < this.checkLists.length; i++) { for (let i = 0; i < this.checkLists.length; i++) {
this.$set(this.checkLists, i, val) this.$set(this.checkLists, i, val)
} }
},
changeCellMsg(val) {
this.$emit("changeCellMsg", val)
},
deleteItem(val) {
this.$emit("deleteItem", val)
} }
} }
}; };
......
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