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 { ...@@ -149,150 +149,6 @@ a:link, a:active, a:visited, a:hover {
box-sizing: border-box; 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 { .wrap {
...@@ -327,3 +183,19 @@ a:link, a:active, a:visited, a:hover { ...@@ -327,3 +183,19 @@ a:link, a:active, a:visited, a:hover {
.wrap p:after { .wrap p:after {
right: 0; 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' ...@@ -4,9 +4,12 @@ import router from './router'
import store from './store' import store from './store'
import '@/assets/less/common.less' import '@/assets/less/common.less'
import MyNavBar from '@/components/NavBar' 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.component('navbar', MyNavBar)
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(PullRefresh)
Vue.use(Col)
Vue.use(Row)
Vue.use(Cell).use(CellGroup) Vue.use(Cell).use(CellGroup)
Vue.use(Button) Vue.use(Button)
Vue.use(Tabbar).use(TabbarItem) Vue.use(Tabbar).use(TabbarItem)
......
src/views/Admin/inventory.vue
...@@ -24,12 +24,15 @@ ...@@ -24,12 +24,15 @@
<p class="notice">总库存</p> <p class="notice">总库存</p>
</van-grid-item> </van-grid-item>
</van-grid> </van-grid>
<van-dropdown-menu class="menu"> <van-row type="flex" align="center" class="menu">
<van-dropdown-item title="全部库存" ref="item" disabled> <van-col span="8" :class="defaultValue?'checked': ''">全部库存</van-col>
</van-dropdown-item> <van-col span="16" class="menu-dropdown"> <van-dropdown-menu>
<van-dropdown-item v-model="value2" :options="option2"/> <van-dropdown-item v-model="value1" :options="option1"/>
<van-dropdown-item v-model="value3" :options="option3"/> <van-dropdown-item v-model="value2" :options="option2"/>
</van-dropdown-menu> </van-dropdown-menu></van-col>
</van-row>
<table> <table>
<tr> <tr>
<th>物品名称</th> <th>物品名称</th>
...@@ -57,13 +60,10 @@ export default { ...@@ -57,13 +60,10 @@ export default {
components: {}, components: {},
data () { data () {
return { return {
value1: '全部记录', defaultValue: 1,
value1: 'a',
value2: 'a', value2: 'a',
value3: 'a', option1: [
// option1: [
// { text: '全部记录', value: 0 }
// ],
option2: [
{ {
text: '物品类别', text: '物品类别',
value: 'a' value: 'a'
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
value: 'c' value: 'c'
} }
], ],
option3: [ option2: [
{ {
text: '库存预警', text: '库存预警',
value: 'a' value: 'a'
...@@ -113,7 +113,6 @@ export default { ...@@ -113,7 +113,6 @@ export default {
color: #8B8C90; color: #8B8C90;
} }
.menu { .menu {
width: 100%;
margin-top: 10px; margin-top: 10px;
} }
.my-grid { .my-grid {
......
src/views/Admin/receiveAdmin.vue
...@@ -2,13 +2,16 @@ ...@@ -2,13 +2,16 @@
<div class="page"> <div class="page">
<navbar title="领用记录"></navbar> <navbar title="领用记录"></navbar>
<div class="container"> <div class="container">
<van-dropdown-menu class="menu"> <van-row type="flex" align="center" class="menu">
<van-dropdown-item title="全部记录" ref="item" disabled> <van-col span="5" :class="defaultValue?'checked': ''">全部记录</van-col>
</van-dropdown-item> <van-col span="19" class="menu-dropdown"> <van-dropdown-menu>
<van-dropdown-item v-model="value2" :options="option2"/> <van-dropdown-item v-model="value1" :options="option1"/>
<van-dropdown-item v-model="value3" :options="option3"/> <van-dropdown-item v-model="value2" :options="option2"/>
<van-dropdown-item v-model="value4" :options="option4"/> <van-dropdown-item v-model="value3" :options="option3"/>
</van-dropdown-menu> </van-dropdown-menu></van-col>
</van-row>
<div class="row" v-for="(item,index) in 3" :key="index"> <div class="row" v-for="(item,index) in 3" :key="index">
<p class="title"> <p class="title">
<span>研发部：98293023</span> <span>研发部：98293023</span>
...@@ -39,14 +42,11 @@ export default { ...@@ -39,14 +42,11 @@ export default {
components: {}, components: {},
data () { data () {
return { return {
value1: '全部记录', defaultValue: 1,
value2: 0, value1: 0,
value2: 'a',
value3: 'a', value3: 'a',
value4: 'a', option1: [
// option1: [
// { text: '全部记录', value: 0 }
// ],
option2: [
{ {
text: '所属部门', text: '所属部门',
value: 0 value: 0
...@@ -60,7 +60,7 @@ export default { ...@@ -60,7 +60,7 @@ export default {
value: 2 value: 2
} }
], ],
option3: [ option2: [
{ {
text: '物品类别', text: '物品类别',
value: 'a' value: 'a'
...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
value: 'c' value: 'c'
} }
], ],
option4: [ option3: [
{ {
text: '领用日期', text: '领用日期',
value: 'a' value: 'a'
...@@ -97,9 +97,6 @@ export default { ...@@ -97,9 +97,6 @@ export default {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.menu {
width: 100%;
}
.row { .row {
width: 100%; width: 100%;
......
src/views/Admin/scan.vue
<template> <template>
<div class="page"> <div class="page">
<navbar title="扫码出库" :leftArrow="false" rightText="完成" @rightClick="submit"></navbar> <navbar title="扫码出库" rightText="完成" @rightClick="submit"></navbar>
<div class="container"> <div class="container">
<div class="info"> <div class="info">
<p>申领人： <span>王志军</span></p> <p>申领人： <span>王志军</span></p>
......
src/views/Employee/receiveRecords.vue
<template> <template>
<div class="page"> <div class="page">
<navbar title="领用记录" @rightClick="goRecords"></navbar> <navbar title="领用记录" @rightClick="goRecords"></navbar>
<div class="container" > <div class="container">
<div class="row" v-for="(item,index) in 8" :key="index"> <van-pull-refresh class="list" v-model="refreshing" @refresh="onRefresh">
<p class="title"> <van-list
<span>领用编号：98293023</span> v-model="loading"
<span>2020-03-02 19:30</span> :finished="finished"
</p> finished-text="没有更多了"
<div class="info" v-for="(item,index) in 2" :key="index"> @load="onLoad"
<p>16开记事本</p> >
<p> <div class="row" v-for="(item,index) in list" :key="index">
<span class="num">数量：</span> <p class="title">
<span>3</span> <span>领用编号：98293023</span>
</p> <span>2020-03-02 19:30</span>
</div> </p>
</div> <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>
</div> </div>
</template> </template>
...@@ -24,13 +34,44 @@ export default { ...@@ -24,13 +34,44 @@ export default {
name: 'index', name: 'index',
components: {}, components: {},
data () { data () {
return {} return {
list: [],
loading: false,
finished: false,
refreshing: false
}
}, },
mounted () { mounted () {
}, },
methods: { methods: {
goRecords () { goRecords () {
console.log(1111) 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