188 lines
4.1 KiB
Vue
188 lines
4.1 KiB
Vue
<template>
|
|
<view class="container">
|
|
<uni-section :title="welTitle" type="circle" titleFontSize="15px" titleColor="#0000CD"
|
|
@click="goUserInfo">
|
|
<template v-slot:right>
|
|
<span style="color:gray">{{currentDate}}</span>
|
|
</template>
|
|
</uni-section>
|
|
<image src="/static/banner1.png" mode="widthFix" style="width:100%"></image>
|
|
<view style="height: 12rpx;"></view>
|
|
<uni-row :gutter="12">
|
|
<uni-col :span="12" style="border-radius: 20upx;">
|
|
<navigator class="middleNavigator" url="../wf/index?category=duty">
|
|
<span>待办</span>
|
|
<span class="numSpan">3</span>
|
|
</navigator>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<navigator class="middleNavigator" url="../wf/index?category=owner">
|
|
<span>我的</span>
|
|
<span class="numSpan">3</span>
|
|
</navigator>
|
|
</uni-col>
|
|
</uni-row>
|
|
<view style="height: 12rpx;"></view>
|
|
<uni-section title="功能入口" type="line">
|
|
<uni-grid :column="5" :show-border="false" :square="false">
|
|
<uni-grid-item v-for="(item ,index) in moduleList" :index="index" :key="index">
|
|
<view class="grid-item-box" @click="pageEnter(item)">
|
|
<image class="image" :src="item.url" mode="aspectFill" />
|
|
<text class="text">{{item.text}}</text>
|
|
<view v-if="item.badge" class="grid-dot">
|
|
<uni-badge :text="item.badge" :type="item.type" />
|
|
</view>
|
|
</view>
|
|
</uni-grid-item>
|
|
<uni-grid-item>
|
|
<view class="grid-item-box" @click="cameraClick">
|
|
<image class="image" src="/static/yuding.png" mode="aspectFill" />
|
|
<text class="text">拍照</text>
|
|
</view>
|
|
</uni-grid-item>
|
|
</uni-grid>
|
|
</uni-section>
|
|
|
|
<!-- <uni-section title="列表信息" type="line">
|
|
<uni-list>
|
|
<uni-list-item v-for="(item ,index) in moduleList" :index="index" :key="index" :title="item.text">
|
|
|
|
</uni-list-item>
|
|
</uni-list>
|
|
</uni-section> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tool from "../../utils/tools.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
welTitle: "",
|
|
imageSrc:"",
|
|
currentDate: tool.getTodayDate(),
|
|
moduleList: [{
|
|
navigate:'/pages/ofm/booking',
|
|
url: '/static/yuding.png',
|
|
text: '会议预定',
|
|
type: "primary",
|
|
},
|
|
{
|
|
navigate:'/pages/ofm/bookingRecord',
|
|
url: '/static/meetingRecord.png',
|
|
text: '预定记录',
|
|
type: "success"
|
|
},
|
|
{
|
|
navigate:'/pages/ofm/mroom',
|
|
url: '/static/huiyishi.png',
|
|
text: '会议室',
|
|
type: "warning"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initWelTitle();
|
|
|
|
},
|
|
onShow() {
|
|
// #ifdef MP-WEIXIN
|
|
uni.hideHomeButton()
|
|
// #endif
|
|
},
|
|
methods: {
|
|
initWelTitle() {
|
|
let userInfo = uni.getStorageSync("userInfo")
|
|
let name = userInfo.name;
|
|
this.welTitle = `欢迎您, ${name}!`
|
|
},
|
|
goUserInfo() {
|
|
uni.navigateTo({
|
|
url: "/pages/system/userInfo"
|
|
})
|
|
},
|
|
pageEnter(item){
|
|
uni.navigateTo({
|
|
url:item.navigate
|
|
})
|
|
},
|
|
cameraClick(){
|
|
uni.chooseImage({
|
|
count: 1, // 默认选择1张图片
|
|
sourceType: ['album', 'camera'], // 支持相册和相机
|
|
success: function (res) {
|
|
// 返回选择或拍摄的图片路径
|
|
console.log(res.tempFilePaths[0]);
|
|
},
|
|
fail: function (err) {
|
|
console.log('选择或拍照失败', err);
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.image {
|
|
width: 60upx;
|
|
height: 60upx;
|
|
padding: 5upx;
|
|
border-radius: 20upx;
|
|
background-color: #2979ff;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24upx;
|
|
margin-top: 10upx;
|
|
}
|
|
|
|
.grid-item-box {
|
|
flex: 1;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.grid-dot {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 15px;
|
|
}
|
|
.middleNavigator{
|
|
padding: 28rpx;
|
|
background-color: white;
|
|
display: flex;
|
|
justify-content : space-between;
|
|
border-radius: 10upx;
|
|
}
|
|
.numSpan{
|
|
color: #2979ff;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.swiper {
|
|
height: 420px;
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
@media screen and (min-width: 768px) and (max-width: 1425px) {
|
|
.swiper {
|
|
height: 630px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1425px) {
|
|
.swiper {
|
|
height: 830px;
|
|
}
|
|
}
|
|
|
|
/* #endif */
|
|
</style>
|