添加页面
This commit is contained in:
闵宪瑞
parent
99b73eb0cf
commit
22f06a8da0
@ -58,15 +58,14 @@
|
||||
v-model="state.buyForm.quantity" :min="1" :max="10" @change="handleChange" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="总价" >
|
||||
<el-input disabled v-model="state.buyForm.total" />
|
||||
<el-input-number disabled
|
||||
v-model="state.buyForm.total" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="buySubmitForm(formRef)">确定</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
54
src/layouts/frontUserInfo.vue
Normal file
54
src/layouts/frontUserInfo.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<!--前端模板-->
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<nav-navigation1></nav-navigation1>
|
||||
</el-header>
|
||||
<el-main class="main">
|
||||
<div class="container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-menu
|
||||
default-active=""
|
||||
router
|
||||
>
|
||||
<el-menu-item v-for="item in state.userMenu" :index="item.path">
|
||||
<span>{{item.name}}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<router-view></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
const state = reactive({
|
||||
userMenu:[
|
||||
{name: '个人中心', path: '/front/user'},
|
||||
{name: '用户订单', path: '/front/user/order'},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.main{
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
background-color: #f3f3f4;
|
||||
}
|
||||
.container{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
90
src/pages/front/user/index.vue
Normal file
90
src/pages/front/user/index.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<!--用户详情-->
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
style="max-width: 600px"
|
||||
:model="state.userInfo"
|
||||
label-width="auto"
|
||||
|
||||
>
|
||||
<el-form-item
|
||||
prop="username"
|
||||
label="用户名"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '用户名不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
|
||||
]"
|
||||
>
|
||||
<el-input v-model="state.userInfo.username" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="nickName"
|
||||
label="用户昵称"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '用户昵称不能为空',
|
||||
trigger: 'blur',
|
||||
}
|
||||
]"
|
||||
>
|
||||
<el-input v-model="state.userInfo.nickName" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="password"
|
||||
label="密码"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '密码不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="state.userInfo.password" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(formRef)">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { reactive } from 'vue'
|
||||
const formRef = ref<FormInstance>()
|
||||
const state = reactive({
|
||||
userInfo: {}
|
||||
})
|
||||
/**
|
||||
* 提交
|
||||
* @param formEl
|
||||
*/
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"layout": "frontUserInfo"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
76
src/pages/front/user/order.vue
Normal file
76
src/pages/front/user/order.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<!--用户详情-->
|
||||
<template>
|
||||
|
||||
<el-tabs v-model="state.activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
|
||||
<el-table
|
||||
:data="state.getList"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
<el-table-column label="操作" min-width="120">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="small" v-if="state.activeName == 1">立即付款</el-button>
|
||||
<el-button link type="primary" size="small" v-if="state.activeName == 3">确认收货</el-button>
|
||||
<el-button link type="primary" size="small" v-if="state.activeName == 4">评价</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
const state = reactive({
|
||||
activeName:1,
|
||||
getOrderStatus:[
|
||||
{name:"待付款",status:1},
|
||||
{name:"未发货",status:2},
|
||||
{name:"待收货",status:3},
|
||||
{name:"待评价",status:4},
|
||||
],
|
||||
getList:[
|
||||
{
|
||||
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',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取列表数据
|
||||
*/
|
||||
function getList() {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"layout": "frontUserInfo"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
Loading…
Reference in New Issue
Block a user