前言：使用Mint-UI做的一个静态页面实例（Mint-UI是基于Vue开发的UI组件库）
1.App.vue:
<template>
<div id="app" v-bind:style="appstyle" style="margin:-3% -3% -3% -3%;">
<mt-popup v-model="shitangVisible" position="left" style="border:2px solid;border-radius:25px;">
<mt-radio title="" v-model="shitang" :options="shitangs" style="margin:8px 8px 8px 8px;"></mt-radio>
</mt-popup>
<div style="padding:10% 10% 0 10%;">
<mt-header title="员工自助报餐单" style="color:black;font-size:100%;opacity:0.2;"></mt-header>
</div>
<div style="padding:0% 10% 0 10%;">
<mt-field label="工号" placeholder="请输入工号" v-model="workcode" style="padding:5% 5% 0% 5%;"></mt-field>
<mt-field label="用户名" placeholder="请输入用户名" v-model="username" style="padding:5% 5% 0% 5%;"></mt-field>
</div>
<div style="padding:0 10% 0 10%;">
<mt-cell title="就餐食堂" :value="shitang" @click.native="handleClick1" style="padding:5% 5% 0% 5%;"></mt-cell>
<mt-cell title="餐别选择" :value="canbieStr" @click.native="handleClick2" style="padding:5% 5% 0% 5%;"></mt-cell>
</div>
<div style="padding:0% 10% 0 10%;">
<mt-cell title="开始日期" :value="startStr" @click.native="openPicker1" @confirm="handleChange1" style="padding:5% 5% 0% 5%"></mt-cell>
<mt-cell title="结束日期" :value="endStr" @click.native="openPicker2" style="padding:5% 5% 0% 5%"></mt-cell>
</div>
<mt-popup v-model="canbieVisible" position="right" style="border:2px solid;border-radius:25px;">
<mt-checklist title="" v-model="canbie" :options="canbies" style="margin:12px 12px 12px 12px;"></mt-checklist>
</mt-popup>
<br style="height:1%"/>
<mt-datetime-picker style="border:2px solid;border-radius:25px;margin:0 0 0 -40%;" ref="picker1" type="date" confirm-text="开始日期" cancel-text="" :startDate ="startShow" :endDate = "endShow" v-model="startDate" year-format="{value} 年" date-format="{value} 日" month-format="{value} 月"></mt-datetime-picker>
<mt-datetime-picker style="border:2px solid;border-radius:25px;margin:0 0 0 -40%;height:36%;" ref="picker2" type="date" confirm-text="结束日期" cancel-text="" :startDate ="startDate" :endDate = "endShow" v-model="endDate" year-format="{value} 年" date-format="{value} 日" month-format="{value} 月"></mt-datetime-picker>
<span style="padding:0% 10% 0% 10%;color:red;">*灰色字体为可编辑状态</span>
<div style="padding:0% 10% 100% 10%;">
<mt-button type="default" size="large" v-bind:style="buttonstyle" style="border-radius:50%;width:100px;height:100px;margin-left:35%;color:black;" @click.native='submitClick'>点我报餐</mt-button>
</div>
<mt-popup v-model="submitVisible" position="bottom" style="border:2px solid;border-radius:25px;">
<mt-checklist title="餐别选择" v-model="canbie" :options="canbies"></mt-checklist>
</mt-popup>
</div>
</template>
<script>
import {formatDate} from '../common/js/date.js'
import {getNextMonth} from '../common/js/date.js'
import {getPreMonth} from '../common/js/date.js'
import { Toast } from 'mint-ui';
export default {
data () {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let days = new Date(year,month,0).getDate();
return {
appstyle:{
background:"url(" + require("../common/img/timg.jpg") + ")",
backgroundPosition:'0px 0px'
},
buttonstyle:{
background:"url(" + require("../common/img/pure1.jpg") + ")",
backgroundPosition:'-2px -5px'
},
show: true,
count: '',
timer: null,
begindate:'2001-01-01',
workcode:'',
username:'',
shitangVisible:false,
canbieVisible:false,
submitVisible:false,
startDate:new Date(date.getFullYear(),date.getMonth()+1,1),
endDate:new Date(date.getFullYear(),date.getMonth()+1,days-1),
startShow:new Date(date.getFullYear(),date.getMonth()+1,1),
endShow:new Date(date.getFullYear(),date.getMonth()+1,days-1),
shitang: 'xx食堂',
shitangs: ['xx食堂', 'xx餐厅', 'x食x堂', 'x食堂', 'xx食堂', 'x食堂', 'xx餐厅', 'xx厂', 'xx食堂'],
canbie: ['早餐', '午餐', '晚餐'],
canbies: ['早餐', '午餐', '晚餐']
}
},
methods: {
handleClick1: function() {
this.shitangVisible = true
},
handleClick2: function() {
this.canbieVisible = true
},
openPicker1() {
this.$refs.picker1.open();
},
openPicker2() {
this.$refs.picker2.open();
},
handleChange1(value) {
this.startDate = value.toString();
},
moveImg() {
const TIME_COUNT = 500;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
let posStr = "-"+(this.count)+"px -"+(this.count-300)+"px";
this.appstyle.backgroundPosition=posStr;
}, 300)
}
},
submitClick() {
Toast({
message: '您的报餐信息已经提交，请稍候...',
position: 'middle',
duration: 5000
})
}
},
computed:{
startStr:function() {
return formatDate(this.startDate,'yyyy-MM-dd')
},
endStr:function() {
return formatDate(this.endDate,'yyyy-MM-dd')
},
canbieStr:function() {
return new Array(this.canbie).join(',')
}
},
mounted: function(){
this.moveImg()
}
}
</script>
<style>
html,body{
overflow: hidden;
height: 100%;
}
</style>
2.mian.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'mint-ui/lib/style.min.css'
import { Field } from 'mint-ui';
import { Cell } from 'mint-ui';
import { Popup } from 'mint-ui';
import { Button } from 'mint-ui';
import { Checklist } from 'mint-ui';
import { DatetimePicker } from 'mint-ui';
import { Radio } from 'mint-ui';
import { Toast } from 'mint-ui';
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
Vue.component(Radio.name, Radio);
Vue.component(DatetimePicker.name, DatetimePicker);
Vue.component(Checklist.name, Checklist);
Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);
Vue.component(Cell.name, Cell);
Vue.component(Field.name, Field);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})