Skip to content

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

Merge branch 'ldx' into dev

parents 2e8cb24c 7fa5db70
Show whitespace changes
Inline Side-by-side
Showing with 440 additions and 151 deletions
docs/shopping_cart_list.json 0 → 100644
View file @ b1032fcd
{
"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 @ b1032fcd
......@@ -150,7 +150,7 @@ export default {
font-size: 12px;
font-weight: 500;
line-height: 12px;
border-radius: 15px;
border-radius: 4px;
position: relative;
top: -2px;
}
......
src/components/menu.vue
View file @ b1032fcd
<template>
<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">
<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 v-for="(item,index) in user_arr" :key="index+700" @click="gotopage(index)">{{item}}</div>
</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">
<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 class="shop_footer">
<el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
</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
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>
</template>
<script>
export default {
data(){
return{
menu_arr:['工作台','技术支持','服务超市'],
now_menu:0,
user_arr:['个人档案','消息通知','收银中心','关于BD-aPaaS','退出登录'],
data() {
return {
menu_arr: ["工作台", "技术支持", "服务超市"],
now_menu: 0,
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){
methods: {
gotopage(n) {
console.log(n);
},
settlement() {
this.$router.push({name: "shoppingCart"});
},
deleteItem() {},
getDetail() {
// if you want goto detail page, you should give me the type at first
}
}
}
};
</script>
<style scoped>
.menu{
.menu {
width: 100%;
height: 84px;
background-color: #0f2683;
color: #8390ee;
line-height: 84px;
}
.logo{
.logo {
float: left;
margin: 30px 0 0 40px;
}
.user{
.user {
float: right;
margin-right: 113px;
font-size: 16px;
}
.user_pic{
.user_pic {
float: right;
margin-right: 15px;
margin-top: 30px;
}
.number{
.number {
float: right;
margin-right: 43px;
margin-top: 30px;
......@@ -74,22 +155,22 @@ export default {
line-height: 22px;
text-align: center;
}
.car{
.car {
float: right;
margin-right: 15px;
margin-top: 30px;
}
.menu_box{
.menu_box {
float: right;
width: 185px;
text-align: center;
cursor: pointer;
position: relative;
}
.menu_box:nth-of-type(1){
.menu_box:nth-of-type(1) {
margin-right: 52px;
}
.bottom_show{
.bottom_show {
width: 24px;
height: 5px;
background-color: #e56600;
......@@ -98,11 +179,10 @@ export default {
bottom: 0px;
left: calc(50% - 12px);
}
.user_menu{
.user_menu {
width: 135px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 8px;
position: absolute;
top: 80px;
......@@ -111,30 +191,117 @@ export default {
display: none;
z-index: 1;
}
.user_hover:hover .user_menu{
.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{
.user_hover:hover .sj {
display: block;
}
.shop_hover {
height: 100%;
}
.shop_hover:hover .shop_menu {
display: block;
}
.user_menu div{
.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{
.user_menu div:hover {
background-color: #e56600;
color: #fff;
}
.sj{
.sj {
width: 16px;
height: 16px;
background-color: #e56600;
position: absolute;
top: 72px;
transform:rotate(45deg);
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;
}
.over_one {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
\ No newline at end of file
src/components/shopping-cart/shopping-cart-cell.vue
View file @ b1032fcd
......@@ -15,18 +15,18 @@
/>
<div class="shopping_cell_msg">
<div class="shopping_cell_name">
{{ cellItem.name }}
{{ cellItems.name }}
<span
v-if="cellItem.mapService"
v-if="cellItems.mapService"
class="tags map_service"
>mapService</span>
<span v-if="cellItem.state == 1" class="tags shared">共享</span>
<span v-else-if="cellItem.state == 2" class="tags restricted">受限</span>
<span v-if="cellItems.state == 1" class="tags shared">共享</span>
<span v-else-if="cellItems.state == 2" class="tags restricted">受限</span>
<span v-else class="tags sensitive">敏感</span>
</div>
<div class="shopping_cell_msg_other">
<div class="shopping_cell_type">{{ cellItem.type }}</div>
<div class="shopping_cell_creator">{{ cellItem.creator }}</div>
<div class="shopping_cell_type">{{ cellItems.type }}</div>
<div class="shopping_cell_creator">{{ cellItems.creator }}</div>
</div>
</div>
</div>
......@@ -34,10 +34,19 @@
<el-col :span="5">
<div class="shopping_cell_specification">
<div class="shopping_cell_specification_val">
<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_val_specification"
>规格：{{ specificationBtns[cellItems.specification] }}</div>
<div
class="shopping_cell_specification_val_type"
>申请方式：{{ specificationApplicationBtns[cellItems.specificationApplication] }}</div>
<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 class="shopping_cell_specification_title">规格：</div>
<div>
......@@ -82,12 +91,22 @@
</div>
</el-col>
<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 :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">
<el-button size="mini">删除</el-button>
<el-button @click="delCellItem" size="mini">删除</el-button>
</div>
</el-col>
</el-row>
......@@ -112,16 +131,20 @@ export default {
watch: {
cellCheck: function(val) {
this.checkedItem = val;
},
cellItem: {
immediate: true, // 这句重要
handler(val) {
this.cellItems = val;
}
}
},
data: () => ({
cellItems: {},
checkedItem: false,
numItem: 1,
specificationEdit: require("../../assets/imgs/ic_edit.png"),
checkedSubscription: false,
visible: false,
specification: 1,
specificationApplication: 0,
specificationPop: 1,
specificationApplicationPop: 0,
specificationBtns: [
......@@ -143,13 +166,32 @@ export default {
this.specificationApplicationPop = val;
},
submitPop() {
this.specification = this.specificationPop;
this.specificationApplication = this.specificationApplicationPop;
this.cellItems.specification = this.specificationPop;
this.cellItems.specificationApplication = this.specificationApplicationPop;
this.visible = false;
this.changeCellItem();
},
setSpecificationPop() {
this.specificationPop = this.specification;
this.specificationApplicationPop = this.specificationApplication;
this.specificationPop = this.cellItems.specification;
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() {}
......@@ -229,7 +271,7 @@ export default {
font-size: 12px;
font-weight: 500;
line-height: 12px;
border-radius: 15px;
border-radius: 4px;
position: relative;
top: -2px;
}
......
src/components/shopping-cart/shopping-cart-com.vue
View file @ b1032fcd
......@@ -8,7 +8,7 @@
</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-col :span="4" class="shopping_all_head_item">操作</el-col>
</el-row>
</div>
......@@ -19,6 +19,8 @@
:checkList="checkList"
:readOnly="false"
@changeState="changeState"
@changeCellMsg="changeCellMsg"
@deleteItem="deleteItem"
class="shopping_all_list"
/>
</div>
......@@ -45,8 +47,12 @@
<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-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-row>
</div>
......@@ -71,14 +77,22 @@ export default {
type: "基础数据服务",
creator: "贵州省交通运输厅0",
state: 1,
mapService: 1
mapService: 1,
num: 2,
checkedSubscription: false,
specification: 1,
specificationApplication: 2
},
{
id: 1,
name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
type: "基础数据服务",
creator: "贵州省交通运输厅1",
state: 1
state: 1,
num: 2,
checkedSubscription: false,
specification: 1,
specificationApplication: 2
},
{
id: 2,
......@@ -86,7 +100,11 @@ export default {
type: "基础数据服务",
creator: "贵州省交通运输厅2",
state: 1,
mapService: 1
mapService: 1,
num: 2,
checkedSubscription: true,
specification: 1,
specificationApplication: 2
}
]
}),
......@@ -119,6 +137,19 @@ export default {
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 {
.shopping_all_head {
background-color: #e5f0ff;
height: 48px;
padding: 0 20px;
padding: 0;
font-weight: 700;
line-height: 48px;
}
......
src/components/shopping-cart/shopping-cart-list.vue
View file @ b1032fcd
......@@ -9,6 +9,8 @@
:key="item.id"
:readOnly="readOnly"
@changeState="changeState"
@changeCellMsg="changeCellMsg"
@deleteItem="deleteItem"
/>
</div>
</div>
......@@ -58,6 +60,12 @@ export default {
for (let i = 0; i < this.checkLists.length; i++) {
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