This commit is contained in:
魏啾
parent
08597b3c9f
commit
b37811ced5
|
|
@ -50,7 +50,7 @@ const menus = ref([
|
|||
},
|
||||
{
|
||||
label: '会员',
|
||||
path: '/user',
|
||||
path: '/member',
|
||||
icon: 'User'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -38,6 +38,14 @@ const routes = [
|
|||
index: 1,
|
||||
},
|
||||
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