369 lines
11 KiB
Vue
369 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view class="padding bg-gradual-color"
|
||
:style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
|
||
<!-- 个人信息栏 -->
|
||
<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.deptLogoUrl + ');'">
|
||
</view>
|
||
<view class="margin-lr-sm">
|
||
<view class="text-xl margin-bottom-xs">{{curUserInfo.deptName}}</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">{{myInfo.order.noReservation}}</view>
|
||
<view>未预约</view>
|
||
</view>
|
||
<view class="cu-item">
|
||
<view class="margin-bottom-xs text-xxl">{{myInfo.order.noSchedule}}</view>
|
||
<view>未排单</view>
|
||
</view>
|
||
<view class="cu-item">
|
||
<view class="margin-bottom-xs text-xxl">{{myInfo.order.onsiteTimeout}}</view>
|
||
<view>上门超时</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="margin-lr-sm paper-drawer-bar 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>今日待上门({{myInfo.order.onsiteToday.length}})</text>
|
||
</view>
|
||
<view class="flex justify-end text-sm align-center">
|
||
<text>即将上门订单</text>
|
||
<text class="cuIcon-right"></text>
|
||
</view>
|
||
</view>
|
||
<!-- 轮播 -->
|
||
<swiper class="screen-swiper" :autoplay="true" :circular="true">
|
||
<swiper-item v-for="(item,index) in myInfo.order.onsiteToday" :key="index">
|
||
<view class="padding-sm">
|
||
<view class="flex justify-between align-center margin-bottom-xs">
|
||
<view class="text-lg">{{item.work}}</view>
|
||
<view class="text-red">{{item.datetime}}</view>
|
||
</view>
|
||
<view>地址：{{item.address}}</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- 每周公告 -->
|
||
<view class="padding bg-white shadow-warp margin-top-sm">
|
||
<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">
|
||
<navigator hover-class="none" :url="item.pageUrl" class="nav-li" navigateTo
|
||
: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>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 首页引导 -->
|
||
<view class="cu-modal" :class="isShowSteer?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="padding-xl">
|
||
<view class="cuIcon-discover big-icon padding-tb text-main-color"></view>
|
||
<view>请您选择入驻类型！到家服务类请选择-服务商；商品销售类请选择-配件商。</view>
|
||
</view>
|
||
<view class="cu-bar bg-white">
|
||
<view class="action margin-0 flex-sub text-black" @tap="hideModal" data-modal="isShowSteer" @click="chooseEntryType(1)">配件商
|
||
</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
|
||
data-modal="isShowSteer" @click="chooseEntryType(0)">服务商</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 接单认证模态框 -->
|
||
<view class="cu-modal" :class="showTakeCertifiedModal?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="padding-xl">
|
||
<view class="cuIcon-profile big-icon padding-tb text-main-color"></view>
|
||
<view>您还未进行认证</view>
|
||
</view>
|
||
<view class="cu-bar bg-white solid-top">
|
||
<view class="action margin-0 flex-sub text-black" data-modal="showTakeCertifiedModal"
|
||
@tap="hideModal">以后认证</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left"
|
||
data-modal="showTakeCertifiedModal" @tap="hideModal" @click="chooseEntryType(0)">立即认证</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 强制要求用户授权登录的弹窗 -->
|
||
<view class="cu-modal" :class="isAuthWxLoginModal?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="padding-xl text-left">
|
||
<view>需先授权微信登录才可正常使用功能，小程序将获取并使用以下信息：</view>
|
||
<view>1.微信昵称</view>
|
||
<view>2.微信头像</view>
|
||
</view>
|
||
<view class="cu-bar bg-white">
|
||
<navigator class="modal-bottom-oper margin-0 flex-sub text-black" open-type="exit"
|
||
target="miniProgram">拒绝授权
|
||
</navigator>
|
||
<view class="modal-bottom-oper margin-0 flex-sub text-main-color solid-left" @tap="authWxLogin">确认授权
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 手机号授予 -->
|
||
<view class="cu-modal" :class="isAuthWxPhoneModal?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="padding-xl">
|
||
<view>授予小程序绑定微信手机号码的权限</view>
|
||
</view>
|
||
<view class="cu-bar bg-white">
|
||
<navigator class="modal-bottom-oper margin-0 flex-sub text-black solid-right" open-type="exit"
|
||
target="miniProgram">拒绝授权
|
||
</navigator>
|
||
<view class="margin-0 flex-sub">
|
||
<button class="margin-0 flex-sub cu-btn bg-white text-main-color" open-type="getPhoneNumber"
|
||
@getphonenumber="getPhoneNumber">确认授权</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'index',
|
||
emits: ['changeCurPageCode'],
|
||
data() {
|
||
return {
|
||
pageContentTop: this.CustomBar,
|
||
servModules: [{
|
||
id: 1,
|
||
title: '需求大厅',
|
||
name: '查看详情',
|
||
color: 'blue',
|
||
cuIcon: 'list',
|
||
pageUrl: ''
|
||
}, {
|
||
id: 2,
|
||
title: '我的订单',
|
||
name: '查看详情',
|
||
color: 'orange',
|
||
cuIcon: 'text',
|
||
pageUrl: '/pages/order-manage/order-manage'
|
||
}, {
|
||
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'
|
||
}],
|
||
curUserInfo: {},
|
||
myInfo: {},
|
||
isShowSteer: false,
|
||
isAuthWxLoginModal: false,
|
||
isAuthWxPhoneModal: false,
|
||
showTakeCertifiedModal: false
|
||
}
|
||
},
|
||
onReady() {
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
// 更新缓存中的userInfo
|
||
let res = await this.$request.storageExistUser();
|
||
// 获取缓存中的userInfo
|
||
let curUserInfo = this.$request.getCurUserInfo();
|
||
this.isAuthWxLoginModal = curUserInfo && curUserInfo.openId ? false : true;
|
||
if (this.isAuthWxLoginModal) {
|
||
return;
|
||
}
|
||
this.isAuthWxPhoneModal = !curUserInfo.phone ? true : false;
|
||
if (this.isAuthWxPhoneModal) {
|
||
return;
|
||
}
|
||
this.curUserInfo = curUserInfo;
|
||
|
||
// 是否展示选择入驻类型的模态框
|
||
this.isShowSteer = this.curUserInfo.type == null ? true : false;
|
||
// 是否展示认证提示模态框
|
||
this.showTakeCertifiedModal = this.curUserInfo.type === 0 && this.curUserInfo.status !== 0 ? true : false;
|
||
|
||
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;
|
||
},
|
||
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))
|
||
})
|
||
},
|
||
authWxLogin() {
|
||
this.$request.login().then(res => {
|
||
if (res) {
|
||
this.loadData();
|
||
}
|
||
})
|
||
},
|
||
getPhoneNumber(e) {
|
||
this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
|
||
if (res) {
|
||
this.loadData();
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</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: 180rpx;
|
||
min-height: unset;
|
||
}
|
||
|
||
.bar-first-action {
|
||
margin-left: unset !important;
|
||
font-size: 30rpx !important;
|
||
}
|
||
|
||
.nav-list-panel {
|
||
font-weight: 300;
|
||
}
|
||
|
||
.nav-list-panel>navigator: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>
|