Skip to content

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

购物车，服务列表

parent aa916a7c
Hide whitespace changes
Inline Side-by-side
Showing with 684 additions and 16 deletions
src/components/commodity-card.vue
View file @ 5671b633
......@@ -14,7 +14,7 @@
</div>
<div class="com_card_btn">
<el-button size="small">加入购物车</el-button>
<el-button size="small">查看详情</el-button>
<el-button size="small" @click="goUrl(cellData.id)">查看详情</el-button>
</div>
</div>
</template>
......@@ -32,7 +32,7 @@ export default {
methods: {
goUrl(parame) {
if (this.url != "") {
this.$router.push(this.url + parame);
this.$router.push(this.url + "/" + parame);
}
}
},
......@@ -42,11 +42,10 @@ export default {
<style scoped>
.com_card {
width: 200px;
width: 290px;
height: 300px;
padding: 10px;
background-color: #ddd;
margin: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
......
src/components/commodity-cell.vue
View file @ 5671b633
......@@ -67,7 +67,7 @@ export default {
methods: {
goUrl(parame) {
if (this.url != "") {
this.$router.push(this.url + parame);
this.$router.push(this.url + "/" + parame);
}
}
},
......@@ -149,12 +149,14 @@ export default {
padding: 1px 8px 2px;
font-size: 12px;
font-weight: 500;
line-height: 12px;
border-radius: 15px;
position: relative;
top: -2px;
}
.map_service {
background-color: #626DE9;
border: solid 1px #626DE9;
color: #fff;
}
.shared {
......
src/components/commodity-list.vue
View file @ 5671b633
......@@ -2,8 +2,12 @@
<div>
<div v-if="name=='应用商店'" ref="commodityList" class="commodity_card">
<div ref="commodityCardIn" class="commodity_card_list">
<commodity-card v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-card>
<commodity-card v-for="item in datas" :cellData="item" :url="url" :key="'s' + item.id"></commodity-card>
<div v-for="item in datas" :key="item.id" class="commodity_card_item">
<commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
</div>
<div v-for="item in datas" :key="'s' + item.id" class="commodity_card_item">
<commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
</div>
</div>
</div>
<div v-else class="commodity_cell">
......@@ -115,11 +119,13 @@ export default {
this.pagination.total = this.datas.length;
},
pageResize() {
let listWidth = this.$refs.commodityList.clientWidth;
let rowCardNum = Math.floor(listWidth / 220);
this.$refs.commodityCardIn.style.width = rowCardNum * 220 + "px";
this.$refs.commodityCardIn.style.marginLeft =
(listWidth - rowCardNum * 220) / 2 + "px";
let listWidth = this.$refs.commodityCardIn.clientWidth;
let rowCardNum = Math.floor(listWidth / 310);
let cardArr = this.$refs.commodityCardIn.children;
console.log(rowCardNum, listWidth / rowCardNum);
for (let i = 0; i < cardArr.length; i++) {
cardArr[i].style.width = (listWidth / rowCardNum) - 1 + "px";
}
console.log(this.$refs.commodityCardIn);
}
},
......@@ -166,9 +172,16 @@ export default {
.commodity_card {
}
.commodity_card_list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.commodity_card_item {
margin: 10px 0;
}
.commodity_card_item_in {
margin: 0 auto;
}
</style>
<style>
.com_page_control .el-button {
......
src/components/shopping-cart/shopping-cart-cell.vue 0 → 100644
View file @ 5671b633
<template>
<div class="shopping_cell">
<el-row class="shopping_cell_row">
<el-col :span="2" class="shopping_cell_check">
<el-checkbox v-if="!readOnly" v-model="checkedItem" @change="getState"></el-checkbox>
<div v-else class="shopping_cell_expired">
<span>已下架</span>
</div>
</el-col>
<el-col :span="9">
<div class="shopping_cell_item">
<img
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
class="shopping_cell_img"
/>
<div class="shopping_cell_msg">
<div class="shopping_cell_name">
{{ cellItem.name + ccce }}
<span
v-if="cellItem.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-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>
</div>
</div>
</el-col>
<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_edit">
<el-popover placement="right" width="280" v-model="visible">
<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'"
size="mini"
>{{ 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'"
size="mini"
>{{ item }}</el-button>
</div>
</div>
<div style="text-align: right; margin: 0">
<el-button
class="shopping_cell_specification_cancel"
size="mini"
type="text"
@click="visible = false"
>取消</el-button>
<el-button
class="shopping_cell_specification_submit"
size="mini"
@click="visible = false"
>确定</el-button>
</div>
<el-button v-if="!readOnly" circle size="mini" slot="reference">
<img :src="specificationEdit" />
</el-button>
</el-popover>
</div>
</div>
</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-col>
<el-col :span="4" class="shopping_cell_options">
<el-checkbox v-if="!readOnly" v-model="checkedSubscription">订阅该服务</el-checkbox>
<div class="shopping_cell_options_del">
<el-button size="mini">删除</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
components: {},
props: {
cellItem: { type: Object, default: {} },
cellIndex: { type: Number, default: null },
cellCheck: {
type: Boolean,
default: false
},
readOnly: {
type: Boolean,
default: false
}
},
watch: {
cellCheck(newV, oldV) {
// do something
console.log(newV, oldV);
}
},
data: () => ({
checkedItem: false,
numItem: 1,
specificationEdit: require("../../assets/imgs/ic_edit.png"),
checkedSubscription: false,
visible: false,
specification: 1,
specificationApplication: 0,
specificationBtns: [
"1.访问次数：20/日 访问量：100/日",
"2.访问次数：200/日 访问量：1000/日",
"3.访问次数：无上限 访问量：无上限"
],
specificationApplicationBtns: ["按月购买", "按年购买"]
}),
computed: {},
watch: {},
methods: {
getState(val) {
this.$emit("changeState", { state: val, index: this.cellIndex });
}
},
mounted() {}
};
</script>
<style scoped>
.shopping_cell {
height: 110px;
border-bottom: 2px #f4f7fc solid;
margin: 10px 0;
}
.shopping_cell:nth-last-child(1) {
border-bottom: 0;
margin: 10px 0;
}
.shopping_cell_row {
}
.shopping_cell_item {
display: flex;
justify-content: flex-start;
}
.shopping_cell_check {
text-align: center;
padding-top: 35px;
}
.shopping_cell_expired {
display: inline-block;
text-align: center;
padding: 2px 6px;
width: 50px;
background-color: #e3e5ef;
border-radius: 5px;
font-size: 12px;
color: #8890a7;
}
.shopping_cell_img {
width: 100px;
height: 100px;
border-radius: 8px;
}
.shopping_cell_msg {
width: calc(100% - 120px);
margin-left: 10px;
position: relative;
}
.shopping_cell_name {
width: 100%;
line-height: 24px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 16px;
}
.shopping_cell_msg_other {
position: absolute;
bottom: 0;
}
.shopping_cell_type {
color: #8890a7;
font-size: 14px;
line-height: 22px;
}
.shopping_cell_creator {
color: #8890a7;
font-size: 14px;
line-height: 22px;
}
.tags {
display: inline-block;
margin-left: 10px;
padding: 1px 8px 2px;
font-size: 12px;
font-weight: 500;
line-height: 12px;
border-radius: 15px;
position: relative;
top: -2px;
}
.map_service {
background-color: #626de9;
border: solid 1px #626de9;
color: #fff;
}
.shared {
background-color: #e7fdfc;
border: solid 1px #8bd6d0;
color: #25bdb1;
}
.restricted {
background-color: #fffee8;
border: solid 1px #e4c884;
color: #ef9433;
}
.sensitive {
background-color: #ffefef;
border: solid 1px #d7a4a9;
color: #e15260;
}
.shopping_cell_specification {
width: 80%;
height: 100px;
margin: 0 10%;
background-color: #f9fafc;
border-radius: 8px;
padding: 10px;
position: relative;
}
.shopping_cell_specification_val {
color: #8890a7;
font-size: 14px;
}
.shopping_cell_specification_val_type {
margin-top: 10px;
}
.shopping_cell_num {
text-align: center;
padding-top: 32px;
}
.shopping_cell_options {
text-align: center;
padding-top: 20px;
}
.shopping_cell_specification_edit {
position: absolute;
right: 10px;
bottom: 10px;
}
.shopping_cell_options_del {
margin-top: 15px;
}
.shopping_cell_specification_title {
margin: 10px 0;
}
.shopping_cell_specification_btn {
margin: 0 10px 10px;
}
.shopping_cell_specification_btn.active {
background-color: #515fe7;
color: #f4f7fc;
}
.shopping_cell_specification_submit {
background-color: #e56600;
color: #f4f7fc;
margin-left: 20px;
}
.shopping_cell_specification_cancel {
color: #58617a;
}
</style>
<style>
.shopping_cell_specification_edit .el-button {
border: 0;
width: 28px;
height: 28px;
}
.shopping_cell_num .el-input-number--mini {
width: 100px;
}
.shopping_cell_num .el-input-number__decrease {
border-radius: 8px 0 0 8px;
color: #8390ee;
font-size: 16px;
}
.shopping_cell_num .el-input-number__increase {
border-radius: 0 8px 8px 0;
color: #8390ee;
font-size: 16px;
}
.shopping_cell_options .el-button {
border: 0;
font-size: 14px;
font-weight: 700;
color: #77192d;
}
.shopping_cell_options .el-checkbox {
color: #8890a7;
}
.shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label {
color: #687087;
}
.shopping_cell_options .el-checkbox__inner:hover {
border-color: #d0d6f4;
}
.shopping_cell_options .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #d0d6f4;
}
.shopping_cell_options .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #d0d6f4;
border-color: #d0d6f4;
}
.shopping_cell_options .el-checkbox__inner::after {
border: 1px solid #666;
border-left: 0;
border-top: 0;
}
.shopping_cell_check .el-checkbox__inner:hover {
border-color: #626de9;
}
.shopping_cell_check .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
.shopping_cell_check .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #626de9;
}
.el-popover,
.el-radio-button:first-child:last-child .el-radio-button__inner {
border-radius: 8px;
}
</style>
\ No newline at end of file
src/components/shopping-cart/shopping-cart-com.vue 0 → 100644
View file @ 5671b633
<template>
<div>
<div class="shopping_list shopping_list_all">
<ShoppingCartList :showHead="true" :readOnly="false" 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" />
</div>
<div class="shopping_list shopping_list_options">
<ShoppingCartOptions />
</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
},
props: {},
data: () => ({
}),
mounted() {},
methods: {}
};
</script>
<style scoped>
.shopping_list {
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
overflow: hidden;
margin-bottom: 20px;
}
.shopping_list_all {
}
.shopping_list_fail {
}
.shopping_list_options {
}
.shopping_all_list {
}
.shopping_fail_head {
background-color: #eff1f8;
height: 40px;
}
.shopping_options {
height: 84px;
}
.expired_service {
height: 48px;
font-size: 14px;
font-weight: 700;
padding: 10px 50px;
line-height: 28px;
background-color: #eff1f8;
}
</style>
\ No newline at end of file
src/components/shopping-cart/shopping-cart-list.vue 0 → 100644
View file @ 5671b633
<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]"
:key="item.id"
:readOnly="readOnly"
@changeState="changeState"
/>
</div>
</div>
</template>
<script>
import ShoppingCartCell from "@/components/shopping-cart/shopping-cart-cell";
export default {
components: {
ShoppingCartCell
},
props: {
showHead: {
type: Boolean,
default: false
},
readOnly: {
type: Boolean,
default: false
}
},
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
}
]
}),
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;
}
},
checkAll(val) {
console.log(val)
for (let i = 0; i < this.checkList.length; i++) {
this.checkList[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 0 → 100644
View file @ 5671b633
<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
src/pages/shop_list_app_store.vue
View file @ 5671b633
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="应用商店" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="应用商店" url="yysdDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
......
src/pages/shop_list_comprehensive_app.vue
View file @ 5671b633
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="综合应用" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="综合应用" url="zhyyfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
......
src/pages/shop_list_data.vue
View file @ 5671b633
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="数据服务" url="sjfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="数据服务" url="sjfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
......
src/pages/shop_list_space_time.vue
View file @ 5671b633
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="时空服务" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="时空服务" url="skfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
......
src/pages/shopping_cart.vue 0 → 100644
View file @ 5671b633
<template>
<div class="shopping">
<div class="shopping_title">我的购物车</div>
<ShoppingCart />
</div>
</template>
<script>
// @ is an alias to /src
import ShoppingCart from "@/components/shopping-cart/shopping-cart-com";
export default {
components: {
ShoppingCart
},
data: () => ({
datas: {}
}),
mounted() {},
methods: {}
};
</script>
<style scoped>
.shopping {
width: 1200px;
margin: 0 auto;
}
.shopping_title {
height: 40px;
line-height: 40px;
}
</style>
\ No newline at end of file
src/router/index.js
View file @ 5671b633
......@@ -111,6 +111,11 @@ export default new Router({
name: "shopAppStoreList",
component: () => import("@/pages/shop_list_app_store"),
},
{
path: "/shop/shopping_cart", // 购物车页
name: "shoppingCart",
component: () => import("@/pages/shopping_cart"),
},
],
},
{
......
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