This commit is contained in:
魏啾
parent
08597b3c9f
commit
b37811ced5
|
|
@ -50,7 +50,7 @@ const menus = ref([
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '会员',
|
label: '会员',
|
||||||
path: '/user',
|
path: '/member',
|
||||||
icon: 'User'
|
icon: 'User'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,14 @@ const routes = [
|
||||||
index: 1,
|
index: 1,
|
||||||
},
|
},
|
||||||
component: () => import("@/views/order/index.vue"),
|
component: () => import("@/views/order/index.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/member",
|
||||||
|
name: "member",
|
||||||
|
meta: {
|
||||||
|
index: 1,
|
||||||
|
},
|
||||||
|
component: () => import("@/views/member/index.vue"),
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,314 @@
|
||||||
|
<template>
|
||||||
|
<div class="orderbox">
|
||||||
|
<div class="orderbox_left">
|
||||||
|
<div class="demo_tabs">
|
||||||
|
<div class="demo_tabs_div">
|
||||||
|
<el-input v-model="firstinput" placeholder="请输入手机号或编号" clearable />
|
||||||
|
<el-button style="margin-left: 10px;" type="primary" @click="onSubmit">添加</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-table :data="tableData" height="90%" style="width: 100%;margin-top: 10px;">
|
||||||
|
<el-table-column prop="date" label="昵称" width="" />
|
||||||
|
<el-table-column prop="name" label="手机" width="" />
|
||||||
|
<el-table-column prop="address" label="编号" />
|
||||||
|
<el-table-column prop="address" label="等级" />
|
||||||
|
|
||||||
|
<el-table-column prop="address" label="积分" />
|
||||||
|
<el-table-column prop="address" label="余额" />
|
||||||
|
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right">
|
||||||
|
<div class="orderbox_right_top">
|
||||||
|
<div class="orderbox_right_topdiv">
|
||||||
|
<span>会员昵称：</span>
|
||||||
|
<span>admin</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_topdiv">
|
||||||
|
<span>手机号码：</span>
|
||||||
|
<span>1999999999999</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_topdiv">
|
||||||
|
<span>会员编号：</span>
|
||||||
|
<span>1245</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_topdiv">
|
||||||
|
<span>会员等级：</span>
|
||||||
|
<span>未设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item">
|
||||||
|
<div class="orderbox_right_top_item_one">
|
||||||
|
<el-icon :size="24" style="color:#ffbc42 ;">
|
||||||
|
<Money />
|
||||||
|
</el-icon>
|
||||||
|
<span class="orderbox_right_top_item_onespan">会员积分</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item_tow">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item">
|
||||||
|
<div class="orderbox_right_top_item_one">
|
||||||
|
<el-icon :size="24" style="color:#00b58d ;">
|
||||||
|
<Box />
|
||||||
|
</el-icon>
|
||||||
|
<span class="orderbox_right_top_item_onespan">储值会员</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item_tow">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item">
|
||||||
|
<div class="orderbox_right_top_item_one">
|
||||||
|
<el-icon :size="24" style="color:#00b58d ;">
|
||||||
|
<CopyDocument />
|
||||||
|
</el-icon>
|
||||||
|
<span class="orderbox_right_top_item_onespan">优惠券</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item_tow">0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_button">
|
||||||
|
<el-button style="width: 100%;" type="primary" @click="onSubmit">点单</el-button>
|
||||||
|
<el-button style="width: 100%; margin-top: 10px; margin-left:0px;" type="danger"
|
||||||
|
@click="onSubmit">取消</el-button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRoute } from "vue-router"
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
const route = useRoute()
|
||||||
|
console.log(route)
|
||||||
|
const itemboxshow = ref(false)
|
||||||
|
const handleClick = (Name) => {
|
||||||
|
console.log(Name)
|
||||||
|
}
|
||||||
|
const firstinput = ref('')//搜索输入框
|
||||||
|
const tableData = [
|
||||||
|
{
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.orderbox {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.orderbox_left {
|
||||||
|
width: 60%;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 16px 0;
|
||||||
|
|
||||||
|
.demo_tabs {
|
||||||
|
.demo_tabs_div {
|
||||||
|
padding: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo_tabs_box {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 20px;
|
||||||
|
|
||||||
|
.demo_tabs_boxitem {
|
||||||
|
width: 100%;
|
||||||
|
padding: 6px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
// background: #eeeeee;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
|
||||||
|
.demo_tabs_boxitem_one {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
.demo_tabs_boxitem_oneone {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 20px;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 70px;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo_tabs_boxitem_onetow {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 20px;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 70px;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo_tabs_boxitem_tow {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 70px;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_rightbox {
|
||||||
|
position: relative;
|
||||||
|
width: 40%;
|
||||||
|
padding: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.orderbox_rightbox_top:nth-child(1) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_rightbox_top {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 16px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #e7e5e5;
|
||||||
|
|
||||||
|
.orderbox_rightbox_top_div {
|
||||||
|
margin-left: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right {
|
||||||
|
position: relative;
|
||||||
|
width: 40%;
|
||||||
|
padding: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.orderbox_right_top {
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
background: #8b008b;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.orderbox_right_topdiv:nth-child(1) {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_topdiv {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
// .orderbox_right_top_item::after:nth-child(1){
|
||||||
|
// position: absolute;
|
||||||
|
// top: 2px;
|
||||||
|
// content: '';
|
||||||
|
// display: inline-block;
|
||||||
|
// height: 2px;
|
||||||
|
// width: 100%;
|
||||||
|
// background: #fff;
|
||||||
|
// }
|
||||||
|
.orderbox_right_top_item {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
padding: 6px 10px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.orderbox_right_top_item_one {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.orderbox_right_top_item_onespan {
|
||||||
|
color: black;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_top_item_tow {
|
||||||
|
color: black;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.orderbox_right_list_item {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
div:nth-child(1) {
|
||||||
|
text-align: left;
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:nth-child(2) {
|
||||||
|
width: 15%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:nth-child(3) {
|
||||||
|
width: 15%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:nth-child(4) {
|
||||||
|
text-align: right;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_button {
|
||||||
|
position: absolute;
|
||||||
|
width: 90%;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 16px;
|
||||||
|
transform: translateX(-50%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}</style>
|
||||||
Loading…
Reference in New Issue