dingdong-master/pages/index/index-home.vue

343 lines
9.9 KiB
Vue

<template>
<view>
<!-- <view class="padding bg-gradual-color" :style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'"> -->
<view class="padding bg-gradual-color" :style="'padding-top: ' + pageContentTop + 'px;'">
<!-- 个人信息栏 -->
<view class="flex justify-between padding-bottom align-center solid-bottom">
<view class="flex justify-start align-center">
<view class="cu-avatar round"
:style="'width: 120rpx; height: 120rpx; background-image:url(' + curUserInfo.bannerUrl + ');'">
</view>
<view class="margin-lr-sm">
<view class="text-xl margin-bottom-xs" v-if="curUserInfo && curUserInfo.openId">{{curUserInfo.deptName}}</view>
<view class="text-xl margin-bottom-xs" v-else @click="authLogin">请先登录</view>
<!-- <view class="padding-xs text-sm">
<view class='cu-tag bg-white radius'>编辑</view>
</view> -->
</view>
</view>
<!-- <view class="right-tag padding-lr padding-tb-xs" @click="showMasterRule">师傅规则</view> -->
</view>
<!-- 未预约,未派单,上门超时 -->
<view class="cu-list grid no-border col-3 margin-top-sm" style="background-color: inherit;">
<view class="cu-item">
<view class="margin-bottom-xs text-xxl">0</view>
<view>未预约</view>
</view>
<view class="cu-item">
<view class="margin-bottom-xs text-xxl">0</view>
<view>未排单</view>
</view>
<view class="cu-item">
<view class="margin-bottom-xs text-xxl">0</view>
<view>上门超时</view>
</view>
</view>
</view>
<view class="margin-lr-sm margin-bottom-with-bar">
<!-- 今日待上门 -->
<view class="bg-white padding-lr shadow-warp">
<view class="cu-bar margin-top-sm solid-bottom">
<view class="action bar-first-action">
<view class="cuIcon-title text-main-color"></view>
<text>今日待上门({{waitServOrderToday.length}})</text>
</view>
<view class="flex justify-end text-sm align-center"
@click="clickServModule({
pageUrl: '/pages/order-manage/order-manage'
})">
<text>即将上门订单</text>
<text class="cuIcon-right"></text>
</view>
</view>
<!-- 轮播 -->
<swiper v-if="curUserInfo && curUserInfo.workerId" class="screen-swiper" :autoplay="true" :circular="true">
<swiper-item v-for="(item,index) in waitServOrderToday" :key="index">
<view class="padding-sm">
<view class="flex justify-between align-center margin-bottom-xs">
<view class="text-lg">{{item.goodsName}}</view>
</view>
<view>
时间:<text class="text-red">{{item.expectTimeStart + ' - ' + item.expectTimeEnd}}</text>
</view>
<view>地址:{{item.address}}</view>
</view>
</swiper-item>
</swiper>
<view v-else class="screen-swiper padding text-center">
未登录
</view>
</view>
<!-- 每周公告 -->
<!-- <view class="padding bg-white shadow-warp margin-top-sm" v-if="curUserInfo && curUserInfo.workerId">
<view class="flex justify-between align-center">
<view class="">
<text class="text-main-color">[每周公告]</text>
<text>{{myInfo.weekNotice.title}}</text>
</view>
<view class="flex justify-end">
<view class="cu-tag badge" v-if="myInfo.weekNotice.ifHasNoReadNotice"></view>
<view class="cuIcon-right"></view>
</view>
</view>
</view> -->
<!-- 功能模块 -->
<view class="margin-lr-sm margin-top">
<view class="text-lg">服务中心</view>
<view class="nav-list-panel float-clear clearfix">
<view hover-class="none" class="nav-li serv-module" @click="clickServModule(item)"
:class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
v-for="(item,index) in servModules " :key="index">
<view :class="index === 0 ? 'text-xxl' : 'text-xl'">{{item.title}}</view>
<!-- <view class="nav-name">{{item.name}}</view> -->
<text :class="'cuIcon-' + item.cuIcon"></text>
</view>
</view>
</view>
</view>
<!-- 首页引导 -->
<vertify-worker-type ref="vertifyWorkerType"></vertify-worker-type>
<!-- 登录校验弹窗 -->
<vertify-login ref="vertifyLogin" @reload="authLogin"></vertify-login>
<vertify-phone ref="vertifyPhone" @reload="authLogin"></vertify-phone>
</view>
</template>
<script>
export default {
name: 'index',
emits: ['changeCurPageCode'],
data() {
return {
pageContentTop: this.CustomBar,
servModules: [{
id: 1,
title: '需求大厅',
name: '查看详情',
color: 'blue',
cuIcon: 'list',
pageUrl: '',
checkLogin: true
}, {
id: 2,
title: '我的订单',
name: '查看详情',
color: 'orange',
cuIcon: 'text',
pageUrl: '/pages/order-manage/order-manage',
checkLogin: true
}, {
id: 3,
title: '叮咚学院',
name: '查看详情',
color: 'cyan',
cuIcon: 'emoji',
pageUrl: ''
}, {
id: 4,
title: '邀请师傅',
name: '查看详情',
color: 'pink',
cuIcon: 'profile',
pageUrl: ''
}, {
id: 5,
title: '区域代理',
name: '查看详情',
color: 'olive',
cuIcon: 'group',
pageUrl: '/pages/area-proxy/my-team',
checkLogin: true
}],
curUserInfo: {},
myInfo: {},
waitServOrderToday: [],
isShowSteer: false,
isAuthWxLoginModal: false,
isAuthWxPhoneModal: false,
showTakeCertifiedModal: false
}
},
onReady() {
this.loadData();
},
methods: {
async authLogin() {
// 更新缓存中的userInfo
let res = await this.$request.storageExistUser();
// 获取缓存中的userInfo
let curUserInfo = this.$request.getCurUserInfo();
// 校验提示登录
if (!curUserInfo || !curUserInfo.openId) {
this.$refs.vertifyLogin.showModal();
return false;
} else {
this.$refs.vertifyLogin.hideModal();
}
// 校验提示获取手机号码
if (!curUserInfo.phone) {
this.$refs.vertifyPhone.showModal();
return false;
} else {
this.$refs.vertifyPhone.hideModal();
}
// 提示选择师傅类型
if (curUserInfo.type == null) {
this.$refs.vertifyWorkerType.showModal();
}
this.loadData();
return true;
},
async loadData() {
// 获取缓存中的userInfo
this.curUserInfo = this.$request.getCurUserInfo();
this.myInfo = await this.$api.data('myInfo');
// this.isShowSteer = !this.myInfo.entryType;
let newServModules = this.servModules.concat();
if (this.myInfo.hasCheckedRule) {
newServModules[0].pageUrl = '/pages/demand-center/accept-demand-center';
} else {
let paramObj = {
hasCheckedRule: this.myInfo.hasCheckedRule,
navigate: true
}
newServModules[0].pageUrl = '/pages/demand-center/rule?paramObj=' + encodeURIComponent(JSON
.stringify(paramObj));
}
this.servModules = newServModules;
// 获取今日待上门单
this.loadTodayWaitServOrder();
},
async loadTodayWaitServOrder() {
let date = new Date();
let waitServRes = await this.$request.qryDetailOrderPage({
orderStatus: 2,
expectTimeStart: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00",
expectTimeEnd: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 23:59:59"
});
this.waitServOrderToday = waitServRes.rows;
},
async chooseEntryType(typeCode) {
let status = 1;
if (typeCode === 1) {
status = 0;
}
await this.$request.updateWorker({
type: typeCode,
status: status
});
if (typeCode === 1) {
this.$emit('changeCurPageCode', 'supplyChainPage');
} else if (typeCode === 0) {
uni.navigateTo({
url: '/pages/my/master-settled-info'
})
}
},
hideModal(e) {
this[e.currentTarget.dataset.modal] = false;
},
showMasterRule() {
let paramObj = {
hasCheckedRule: this.myInfo.hasCheckedRule,
navigate: false
}
uni.navigateTo({
url: '/pages/demand-center/rule?paramObj=' + encodeURIComponent(JSON.stringify(paramObj))
})
},
async clickServModule(pageObj) {
if (pageObj.checkLogin) {
let res = await this.authLogin();
if (res) {
uni.navigateTo({
url: pageObj.pageUrl
})
}
} else {
uni.navigateTo({
url: pageObj.pageUrl
})
}
}
},
}
</script>
<style scoped>
.bg-main-color .solid-bottom::after {
border-bottom: 1upx solid rgba(255, 255, 255, 0.5);
}
.cu-list.grid.no-border>.solid-left.cu-item:after {
border-left: 1upx solid rgba(255, 255, 255, 0.5);
}
.cu-list.grid.no-border>.solid-right.cu-item:after {
border-right: 1upx solid rgba(255, 255, 255, 0.5);
}
.paper-drawer-bar {
position: relative;
top: -100rpx;
}
.screen-swiper {
height: 210rpx;
min-height: unset;
}
.bar-first-action {
margin-left: unset !important;
font-size: 30rpx !important;
}
.nav-list-panel {
font-weight: 300;
}
.nav-list-panel>.serv-module:first-child {
width: 46%;
height: 249rpx;
line-height: 195rpx;
}
.nav-li {
padding: 30rpx;
border-radius: 12rpx;
width: 46%;
background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
height: 116rpx;
margin: 10rpx;
float: left;
}
.right-tag {
background-color: rgba(0, 0, 0, 0.3);
position: relative;
right: -30rpx;
border-radius: 40rpx 0 0 40rpx;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.modal-bottom-oper {
height: 70rpx;
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>