Skip to content

H
h5
Commit 67f83abd by wangyalan-git
Options

页面完成

parent bdf1e755
Showing with 106 additions and 194 deletions
src/assets/less/common.less
......@@ -149,150 +149,6 @@ a:link, a:active, a:visited, a:hover {
box-sizing: border-box;
}
.cursor {
cursor: pointer;
}
.flexRow {
display: flex;
justify-content: space-between;
align-items: center;
}
.flexRowStart{
display: flex;
justify-content: flex-start;
align-items: center;
}
.flexCol {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.font15 {
font-size: 15px;
}
.font16{
font-size: 16px;
}
.plr20 {
padding: 0 20px;
}
.ml10{
margin-left: 10px;
}
.mr10{
margin-right: 10px;
}
.mb10 {
margin-bottom: 10px;
}
.price_color {
color: #FD5836
}
.align_center {
text-align: center;
}
.align_left {
text-align: left;
}
//按钮
.btn {
width: 110px;
line-height: 33px;
height: 33px;
}
.mini_btn{
width: 75px;
height: 33px;
line-height: 33px;
}
.small_btn{
width: 90px;
height: 33px;
line-height: 33px;
}
.large_btn {
width: 348px;
height: 44px;
margin: 8px 0;
}
/*商品列表*/
.list {
background: #ffffff;
margin-bottom: 55px;
}
.list .title {
img {
vertical-align: middle;
display: inline-block;
margin-right: 5px;
width: 16px;
}
span {
font-size: 15px;
}
}
.list .content {
font-size: 15px;
padding: 15px 0;
border-bottom: 0.5px solid #DCDCDC;
.download {
width: 33px;
margin-right: 8px;
}
}
/*通用设置*/
.imgs {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.good {
width: 109px;
margin-bottom: 10px;
}
}
//商品列表
.sing_good{
font-size: 14px;
background: #ffffff;
.good_content{
flex: 1;
}
.img{
width: 84px;
}
.name{
color: #101010;
}
.sku{
font-size: 11px;
color:#CCCCCC;
}
}
/*自定义单元格cell*/
.cell_group {
.van-cell{
font-size: 15px;
padding: 17px 20px;
}
.van-cell__value{
font-size: 14px;
color: #999999;
}
}
/*文字两侧有横线*/
.wrap {
......@@ -327,3 +183,19 @@ a:link, a:active, a:visited, a:hover {
.wrap p:after {
right: 0;
}
//菜单栏
.menu {
width: 100%;
background: #ffffff;
color: #999999;
}
.menu-dropdown{
flex: 1;
}
.menu .checked{
color: @green;
}
.list{
width: 100%;
}
src/main.js
......@@ -4,9 +4,12 @@ import router from './router'
import store from './store'
import '@/assets/less/common.less'
import MyNavBar from '@/components/NavBar'
import { Button, DropdownMenu, DropdownItem, Tabbar, TabbarItem, Cell, CellGroup, Popup, Search, Swipe, SwipeItem, Grid, GridItem, Image, Tab, Tabs, NavBar, Icon, List, Card, Checkbox, CheckboxGroup, Stepper, Sticky, Divider, RadioGroup, Radio, Field } from 'vant'
import { Col, Row, Button, PullRefresh, DropdownMenu, DropdownItem, Tabbar, TabbarItem, Cell, CellGroup, Popup, Search, Swipe, SwipeItem, Grid, GridItem, Image, Tab, Tabs, NavBar, Icon, List, Card, Checkbox, CheckboxGroup, Stepper, Sticky, Divider, RadioGroup, Radio, Field } from 'vant'
Vue.component('navbar', MyNavBar)
Vue.config.productionTip = false
Vue.use(PullRefresh)
Vue.use(Col)
Vue.use(Row)
Vue.use(Cell).use(CellGroup)
Vue.use(Button)
Vue.use(Tabbar).use(TabbarItem)
......
src/views/Admin/inventory.vue
......@@ -24,12 +24,15 @@
<p class="notice">总库存</p>
</van-grid-item>
</van-grid>
<van-dropdown-menu class="menu">
<van-dropdown-item title="全部库存" ref="item" disabled>
</van-dropdown-item>
<van-dropdown-item v-model="value2" :options="option2"/>
<van-dropdown-item v-model="value3" :options="option3"/>
</van-dropdown-menu>
<van-row type="flex" align="center" class="menu">
<van-col span="8" :class="defaultValue?'checked': ''">全部库存</van-col>
<van-col span="16" class="menu-dropdown"> <van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1"/>
<van-dropdown-item v-model="value2" :options="option2"/>
</van-dropdown-menu></van-col>
</van-row>
<table>
<tr>
<th>物品名称</th>
......@@ -57,13 +60,10 @@ export default {
components: {},
data () {
return {
value1: '全部记录',
defaultValue: 1,
value1: 'a',
value2: 'a',
value3: 'a',
// option1: [
// { text: '全部记录', value: 0 }
// ],
option2: [
option1: [
{
text: '物品类别',
value: 'a'
......@@ -77,7 +77,7 @@ export default {
value: 'c'
}
],
option3: [
option2: [
{
text: '库存预警',
value: 'a'
......@@ -113,7 +113,6 @@ export default {
color: #8B8C90;
}
.menu {
width: 100%;
margin-top: 10px;
}
.my-grid {
......
src/views/Admin/receiveAdmin.vue
......@@ -2,13 +2,16 @@
<div class="page">
<navbar title="领用记录"></navbar>
<div class="container">
<van-dropdown-menu class="menu">
<van-dropdown-item title="全部记录" ref="item" disabled>
</van-dropdown-item>
<van-dropdown-item v-model="value2" :options="option2"/>
<van-dropdown-item v-model="value3" :options="option3"/>
<van-dropdown-item v-model="value4" :options="option4"/>
</van-dropdown-menu>
<van-row type="flex" align="center" class="menu">
<van-col span="5" :class="defaultValue?'checked': ''">全部记录</van-col>
<van-col span="19" class="menu-dropdown"> <van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1"/>
<van-dropdown-item v-model="value2" :options="option2"/>
<van-dropdown-item v-model="value3" :options="option3"/>
</van-dropdown-menu></van-col>
</van-row>
<div class="row" v-for="(item,index) in 3" :key="index">
<p class="title">
<span>研发部：98293023</span>
......@@ -39,14 +42,11 @@ export default {
components: {},
data () {
return {
value1: '全部记录',
value2: 0,
defaultValue: 1,
value1: 0,
value2: 'a',
value3: 'a',
value4: 'a',
// option1: [
// { text: '全部记录', value: 0 }
// ],
option2: [
option1: [
{
text: '所属部门',
value: 0
......@@ -60,7 +60,7 @@ export default {
value: 2
}
],
option3: [
option2: [
{
text: '物品类别',
value: 'a'
......@@ -74,7 +74,7 @@ export default {
value: 'c'
}
],
option4: [
option3: [
{
text: '领用日期',
value: 'a'
......@@ -97,9 +97,6 @@ export default {
</script>
<style lang='scss' scoped>
.menu {
width: 100%;
}
.row {
width: 100%;
......
src/views/Admin/scan.vue
<template>
<div class="page">
<navbar title="扫码出库" :leftArrow="false" rightText="完成" @rightClick="submit"></navbar>
<navbar title="扫码出库" rightText="完成" @rightClick="submit"></navbar>
<div class="container">
<div class="info">
<p>申领人： <span>王志军</span></p>
......
src/views/Employee/receiveRecords.vue
<template>
<div class="page">
<navbar title="领用记录" @rightClick="goRecords"></navbar>
<div class="container" >
<div class="row" v-for="(item,index) in 8" :key="index">
<p class="title">
<span>领用编号：98293023</span>
<span>2020-03-02 19:30</span>
</p>
<div class="info" v-for="(item,index) in 2" :key="index">
<p>16开记事本</p>
<p>
<span class="num">数量：</span>
<span>3</span>
</p>
</div>
</div>
<div class="container">
<van-pull-refresh class="list" v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div class="row" v-for="(item,index) in list" :key="index">
<p class="title">
<span>领用编号：98293023</span>
<span>2020-03-02 19:30</span>
</p>
<div class="info" v-for="(item,index) in 4" :key="index">
<p>16开记事本</p>
<p>
<span class="num">数量：</span>
<span>3</span>
</p>
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
......@@ -24,13 +34,44 @@ export default {
name: 'index',
components: {},
data () {
return {}
return {
list: [],
loading: false,
finished: false,
refreshing: false
}
},
mounted () {
},
methods: {
goRecords () {
console.log(1111)
},
onLoad () {
setTimeout(() => {
if (this.refreshing) {
this.list = []
this.refreshing = false
}
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1)
}
this.loading = false
if (this.list.length >= 10) {
this.finished = true
}
}, 1000)
},
onRefresh () {
// 清空列表数据
this.finished = false
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true
this.onLoad()
}
}
}
......
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