parent
9f380ae176
commit
455e8a30ba
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,560 @@
|
||||
<template>
|
||||
<view>
|
||||
<cpn-navbar title="客户列表"></cpn-navbar>
|
||||
|
||||
<view>
|
||||
<view>
|
||||
<u-button :custom-style="{'margin':'24rpx 24rpx 0 24rpx'}" type="warning" @click="refresh">刷新</u-button>
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
<view class="search">
|
||||
<view class="input-content">
|
||||
<u-input :clearable="false" :value="select.keyword" placeholder="请输入要搜索的内容" height="30" :custom-style="inputStyle"
|
||||
@input="searchInput"></u-input>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<u-icon name="search" size="46" color="#ABAEBE"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下拉菜单 -->
|
||||
<view class="drop-down">
|
||||
<u-dropdown @open="calendarShow" @close="calendarHide" ref="uDropdown">
|
||||
<u-dropdown-item v-model="select.status" :title="statusComputed(select.status)"
|
||||
:options="optionsStatus" @change='nursingList = [],select.page = 1,getList()'>
|
||||
</u-dropdown-item>
|
||||
<u-dropdown-item v-model="select.sex" :title="select.sex || '全部'" :options="optionsSex"
|
||||
@change="nursingList = [],select.page = 1,getList()">
|
||||
</u-dropdown-item>
|
||||
<u-dropdown-item title="时间">
|
||||
</u-dropdown-item>
|
||||
</u-dropdown>
|
||||
</view>
|
||||
|
||||
<!-- 护理列表 -->
|
||||
<view class="nursing-list">
|
||||
<view v-if="nursingList && nursingList.length > 0">
|
||||
<view v-for="(item,index) in nursingList" :key="index" class="list-item">
|
||||
<view class="top">
|
||||
<view class="time">{{item.start_time}}</view>
|
||||
<view class="status">
|
||||
<view class="status-icon"
|
||||
:class="{icon1:item.status === 0,icon2:item.status === 2,icon3:item.status === 1}">
|
||||
</view>
|
||||
<view v-if="item.status === 1" class="status-text">护理中</view>
|
||||
<view v-else-if="item.status === 0" class="status-text">待护理</view>
|
||||
<view v-else class="status-text">已护理</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line"></view>
|
||||
|
||||
<view class="center" @click="toDetail(item)">
|
||||
<view class="avatar">
|
||||
<u-image :src="item.customer.sex === '男' ? vuex_male_img : vuex_female_img" height="104"
|
||||
width="104" shape="circle"></u-image>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="name">{{item.customer.name}}</view>
|
||||
<view class="tel">
|
||||
<view>
|
||||
<u-icon name="phone" size="28" color="#1479FF"></u-icon>
|
||||
</view>
|
||||
<view class="text">{{item.customer.phone || '无'}}</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
<view>
|
||||
<u-icon name="map" size="28" color="#1479FF"></u-icon>
|
||||
</view>
|
||||
<view class="text">{{item.customer_address.address || '无'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sex">
|
||||
<view class="sex-text">
|
||||
{{item.customer.sex || '无'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="distance">
|
||||
<view class="distance-icon">
|
||||
<u-image src="/static/todayNursing/distance.png" height="42" width="42"></u-image>
|
||||
</view>
|
||||
<view class="distance-text">{{item.distance}}公里</view>
|
||||
</view>
|
||||
<view class="to-there" @click="toThere(item)">
|
||||
<view class="to-there-text">去那里</view>
|
||||
<view class="to-there-icon">
|
||||
<u-image src="/static/todayNursing/to-there.png" height="46" width="46"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else>
|
||||
<u-empty mode="list" text="暂无护理"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore :status="status" :load-text='loadText' @loadmore='select.page++,getList()' />
|
||||
|
||||
<u-calendar v-model="isShowCalendar" max-date="2100-01-01" mode="range" @change='datePick'>
|
||||
|
||||
</u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShowCalendar: false,
|
||||
inputStyle: {
|
||||
width: "600rpx",
|
||||
fontSize: "28rpx",
|
||||
fontWeight: "500"
|
||||
},
|
||||
optionsStatus: [{
|
||||
label: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '待护理',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
label: '护理中',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '已护理',
|
||||
value: 2,
|
||||
},
|
||||
|
||||
],
|
||||
optionsSex: [{
|
||||
label: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '男',
|
||||
value: '男',
|
||||
},
|
||||
{
|
||||
label: '女',
|
||||
value: '女',
|
||||
},
|
||||
|
||||
],
|
||||
status: 'loadmore',
|
||||
loadText: {
|
||||
loadmore: '轻轻上拉或点击',
|
||||
loading: '努力加载中',
|
||||
nomore: '实在没有了'
|
||||
},
|
||||
nursingList: [],
|
||||
|
||||
|
||||
select: {
|
||||
page_size: 10,
|
||||
page: 1,
|
||||
sex: '',
|
||||
status: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
start_time: this.$moment(new Date()).startOf('month').format('YYYY-MM-DD'),
|
||||
end_time: this.$moment(new Date()).endOf('month').format('YYYY-MM-DD'),
|
||||
keyword: '',
|
||||
sort_name:'start_time',
|
||||
sort_type:'asc'
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh(){
|
||||
this.select = {
|
||||
page_size: 10,
|
||||
page: 1,
|
||||
sex: '',
|
||||
status: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
start_time: this.$moment(new Date()).startOf('month').format('YYYY-MM-DD'),
|
||||
end_time: this.$moment(new Date()).endOf('month').format('YYYY-MM-DD'),
|
||||
keyword: '',
|
||||
sort_name:'start_time',
|
||||
sort_type:'asc'
|
||||
}
|
||||
this.nursingList = []
|
||||
this.getList()
|
||||
},
|
||||
|
||||
calendarShow(e) {
|
||||
if (e === 2) {
|
||||
this.isShowCalendar = true
|
||||
}
|
||||
},
|
||||
calendarHide() {
|
||||
this.isShowCalendar = false
|
||||
},
|
||||
datePick(e) {
|
||||
console.log(e);
|
||||
this.select.page = 1
|
||||
this.select.start_time = `${e.startDate}`
|
||||
this.select.end_time = `${e.endDate}`
|
||||
this.nursingList = []
|
||||
this.getList()
|
||||
},
|
||||
|
||||
searchInput(e) {
|
||||
this.select.keyword = e
|
||||
|
||||
this.nursingList = []
|
||||
this.select.page = 1
|
||||
this.$u.debounce(this.getList, 1000)
|
||||
},
|
||||
async getList() {
|
||||
let res = await this.$u.api.nurseList(this.select)
|
||||
if (res.data.length > 0 && res.data) {
|
||||
this.nursingList.push(...res.data)
|
||||
this.status = 'loadmore'
|
||||
} else {
|
||||
this.status = 'nomore'
|
||||
if (this.select.page > 1) {
|
||||
this.select.page--
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//跳转详情
|
||||
toDetail(item) {
|
||||
uni.$u.throttle(() => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/detailNursing/detailNursing?id=${item.id}`
|
||||
})
|
||||
})
|
||||
},
|
||||
toThere(item) {
|
||||
this.$u.throttle(() => {
|
||||
uni.openLocation({
|
||||
latitude: Number(item.customer.lat),
|
||||
longitude: Number(item.customer.lng),
|
||||
name: item.customer.address
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statusComputed() {
|
||||
return function(status) {
|
||||
switch (status) {
|
||||
case '0':
|
||||
return "待护理"
|
||||
break;
|
||||
case 1:
|
||||
return "护理中"
|
||||
break;
|
||||
case 2:
|
||||
return "已护理"
|
||||
break;
|
||||
default:
|
||||
return '全部'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isShowCalendar(val) {
|
||||
if (!val) {
|
||||
this.$refs.uDropdown.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.select.page++
|
||||
this.status = 'loading';
|
||||
this.getList()
|
||||
},
|
||||
onShow() {
|
||||
this.select.page = 1
|
||||
this.nursingList = []
|
||||
this.select.status = this.vuex_list_status
|
||||
uni.getLocation().then(res => {
|
||||
this.select.lat = res[1]?.latitude
|
||||
this.select.lng = res[1]?.longitude
|
||||
|
||||
this.getList()
|
||||
})
|
||||
console.log(this.vuex_list_status);
|
||||
},
|
||||
onHide() {
|
||||
this.$u.vuex('vuex_list_status', '')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//下拉自定义
|
||||
/deep/.u-dropdown__menu {
|
||||
justify-content: space-evenly !important;
|
||||
}
|
||||
|
||||
/deep/.u-dropdown__menu__item {
|
||||
width: 224rpx !important;
|
||||
flex: none !important;
|
||||
height: 70rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
/deep/.u-dropdown__menu__item .u-flex {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/deep/.u-dropdown__menu__item__text {
|
||||
flex: 1 !important;
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 500 !important;
|
||||
color: #333333 !important;
|
||||
text-align: center;
|
||||
|
||||
padding: 12rpx 0rpx !important;
|
||||
}
|
||||
|
||||
/deep/.u-dropdown__menu__item__arrow {
|
||||
width: 70rpx !important;
|
||||
height: 70rpx !important;
|
||||
background: rgba(20, 121, 255, 0.1) !important;
|
||||
border-radius: 10rpx !important;
|
||||
border: 2rpx solid #FFFFFF !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/deep/.u-load-more-wrap {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 710rpx;
|
||||
height: 70rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #FAFBFC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
margin: 24rpx 24rpx 0 24rpx;
|
||||
|
||||
.input-content {
|
||||
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.drop-down {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.nursing-list {
|
||||
|
||||
margin-top: 10rpx;
|
||||
|
||||
.list-item {
|
||||
width: 710rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
|
||||
|
||||
margin: 0 20rpx 26rpx 22rpx;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 22rpx 0;
|
||||
|
||||
.time {
|
||||
height: 40rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 40rpx;
|
||||
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.status-icon {
|
||||
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
width: 84rpx;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 40rpx;
|
||||
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 670rpx;
|
||||
height: 2rpx;
|
||||
border: 2rpx solid #EEEFF5;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
padding-top: 24rpx;
|
||||
|
||||
.avatar {
|
||||
|
||||
padding-top: 4rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
|
||||
padding-left: 24rpx;
|
||||
|
||||
.name {
|
||||
width: 270rpx;
|
||||
height: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tel {
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
|
||||
margin-top: 18rpx;
|
||||
|
||||
.text {
|
||||
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
|
||||
margin-top: 14rpx;
|
||||
|
||||
.text {
|
||||
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sex {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #FDECEC;
|
||||
opacity: 0.5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-right: 20rpx;
|
||||
|
||||
.sex-text {
|
||||
width: 28rpx;
|
||||
height: 34rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 16rpx;
|
||||
padding-bottom: 26rpx;
|
||||
|
||||
.distance {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.distance-icon {
|
||||
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.distance-text {
|
||||
height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #A7AFBC;
|
||||
line-height: 34rpx;
|
||||
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.to-there {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-right: 20rpx;
|
||||
|
||||
.to-there-text {
|
||||
height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #A7AFBC;
|
||||
line-height: 34rpx;
|
||||
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.to-there-icon {
|
||||
|
||||
margin-left: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +1,296 @@
|
||||
<template>
|
||||
<view>
|
||||
<view style="padding-bottom: 10rpx;">
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-info" :style="{'margin-top':marginTop + 'px'}" @click="toSetting">
|
||||
<view class="head-img">
|
||||
<u-avatar :src="vuex_user.upload.url || (vuex_user.sex === '男' ? vuex_male_img : vuex_female_img)"
|
||||
size="104"></u-avatar>
|
||||
</view>
|
||||
|
||||
<view class="name">
|
||||
您好,{{ vuex_user.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper">
|
||||
<swiper :indicator-dots="false" @change="swiperChange">
|
||||
<swiper-item v-for="(item,index) in 3" :key="index">
|
||||
<view class="bkg">
|
||||
<u-image src="/static/home/swiper-pic.png" width="710" height="324"></u-image>
|
||||
</view>
|
||||
<view class="swiper-content">
|
||||
<view class="swiper-title">
|
||||
四世同堂服务管理
|
||||
</view>
|
||||
<view class="swiper-text">
|
||||
欢迎使用管理小程序
|
||||
</view>
|
||||
<view class="cir1"></view>
|
||||
<view class="cir2"></view>
|
||||
<view class="cir3"></view>
|
||||
</view>
|
||||
<view class="dots">
|
||||
<view v-for="(dot,index1) in 3" :key="index1" class="dot"
|
||||
:class="{activeDot:swiperIndex === index1}"></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="grid">
|
||||
<u-grid :col="3" @click="pageTo">
|
||||
<u-grid-item v-for="(item, index) in grids" :index="item.url" :key="index">
|
||||
<u-icon :name="item.icon || 'list'" :size="46"></u-icon>
|
||||
<view class="grid-text">{{ item.label }}</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
import moment from "@/libs/moment.min.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
marginTop: 96,
|
||||
swiperIndex: 0,
|
||||
grids: [
|
||||
{
|
||||
label: "护理列表",
|
||||
url: "/package_sub/pages/schedule/schedule",
|
||||
icon: ""
|
||||
},
|
||||
{
|
||||
label: "客户列表",
|
||||
url: "/package_sub/pages/customer/customer",
|
||||
icon: "account-fill"
|
||||
},
|
||||
{
|
||||
label: "回访列表",
|
||||
url: "/package_sub/pages/callback/callback",
|
||||
icon: ""
|
||||
},
|
||||
{
|
||||
label: "督查列表",
|
||||
url: "",
|
||||
icon: ""
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pageTo (url) {
|
||||
if (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.swiperIndex = e.detail.current
|
||||
},
|
||||
toSetting() {
|
||||
this.$u.throttle(() => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/setting/setting"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
computed: {
|
||||
dateFormat() {
|
||||
return function(date, fmt = "YYYY-MM-DD") {
|
||||
if (date) {
|
||||
return moment(date).format(fmt)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async onShow() {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const res = uni.getSystemInfoSync()
|
||||
this.marginTop = res.statusBarHeight + 2
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style scoped lang="scss">
|
||||
// 继承类
|
||||
.cir {
|
||||
background: #FFFFFF;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
//margin-top: 96rpx;
|
||||
|
||||
.head-img {
|
||||
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 392rpx;
|
||||
height: 34rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 710rpx;
|
||||
height: 90rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #FAFBFC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
margin: 24rpx 24rpx 0 24rpx;
|
||||
|
||||
.input-content {
|
||||
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
margin: 30rpx 20rpx 0 20rpx;
|
||||
|
||||
swiper {
|
||||
width: 710rpx;
|
||||
height: 324rpx;
|
||||
}
|
||||
|
||||
swiper-item {
|
||||
width: 710rpx;
|
||||
height: 324rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
transform: translateX(-50%);
|
||||
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20rpx;
|
||||
|
||||
.dot {
|
||||
width: 20rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
margin: 0 6rpx;
|
||||
}
|
||||
|
||||
.activeDot {
|
||||
width: 36rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bkg {
|
||||
width: 710rpx;
|
||||
height: 324rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.swiper-content {
|
||||
width: 710rpx;
|
||||
height: 324rpx;
|
||||
position: relative;
|
||||
|
||||
.cir1 {
|
||||
@extend .cir;
|
||||
|
||||
width: 230rpx;
|
||||
height: 230rpx;
|
||||
opacity: 0.06;
|
||||
|
||||
position: absolute;
|
||||
top: 184rpx;
|
||||
right: 652rpx;
|
||||
}
|
||||
|
||||
.cir2 {
|
||||
@extend .cir;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
opacity: 0.1;
|
||||
|
||||
position: absolute;
|
||||
top: 278rpx;
|
||||
right: 552rpx;
|
||||
}
|
||||
|
||||
.cir3 {
|
||||
@extend .cir;
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
opacity: 0.06;
|
||||
|
||||
position: absolute;
|
||||
bottom: 260rpx;
|
||||
right: 150rpx;
|
||||
}
|
||||
|
||||
.swiper-title {
|
||||
width: 302rpx;
|
||||
height: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 50rpx;
|
||||
|
||||
position: absolute;
|
||||
top: 94rpx;
|
||||
left: 44rpx;
|
||||
}
|
||||
|
||||
.swiper-text {
|
||||
width: 500rpx;
|
||||
height: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
|
||||
position: absolute;
|
||||
top: 164rpx;
|
||||
left: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
width: 710rpx;
|
||||
margin: 40rpx auto 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,558 @@
|
||||
<template>
|
||||
<view>
|
||||
<cpn-navbar title="护理列表"></cpn-navbar>
|
||||
|
||||
<view>
|
||||
<view>
|
||||
<u-button :custom-style="{'margin':'24rpx 24rpx 0 24rpx'}" type="warning" @click="refresh">刷新</u-button>
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
<view class="search">
|
||||
<view class="input-content">
|
||||
<u-input :clearable="false" :value="select.keyword" placeholder="请输入要搜索的内容" height="30" :custom-style="inputStyle"
|
||||
@input="searchInput"></u-input>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<u-icon name="search" size="46" color="#ABAEBE"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下拉菜单 -->
|
||||
<view class="drop-down">
|
||||
<u-dropdown @open="calendarShow" @close="calendarHide" ref="uDropdown">
|
||||
<u-dropdown-item v-model="select.status" :title="statusComputed(select.status)"
|
||||
:options="optionsStatus" @change='nursingList = [],select.page = 1,getList()'>
|
||||
</u-dropdown-item>
|
||||
<u-dropdown-item v-model="select.sex" :title="select.sex || '全部'" :options="optionsSex"
|
||||
@change="nursingList = [],select.page = 1,getList()">
|
||||
</u-dropdown-item>
|
||||
<u-dropdown-item title="时间">
|
||||
</u-dropdown-item>
|
||||
</u-dropdown>
|
||||
</view>
|
||||
|
||||
<!-- 护理列表 -->
|
||||
<view class="nursing-list">
|
||||
<view v-if="nursingList && nursingList.length > 0">
|
||||
<view v-for="(item,index) in nursingList" :key="index" class="list-item">
|
||||
<view class="top">
|
||||
<view class="time">{{item.start_time}}</view>
|
||||
<view class="status">
|
||||
<view class="status-icon"
|
||||
:class="{icon1:item.status === 0,icon2:item.status === 2,icon3:item.status === 1}">
|
||||
</view>
|
||||
<view v-if="item.status === 1" class="status-text">护理中</view>
|
||||
<view v-else-if="item.status === 0" class="status-text">待护理</view>
|
||||
<view v-else class="status-text">已护理</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line"></view>
|
||||
|
||||
<view class="center" @click="toDetail(item)">
|
||||
<view class="avatar">
|
||||
<u-image :src="item.customer.sex === '男' ? vuex_male_img : vuex_female_img" height="104"
|
||||
width="104" shape="circle"></u-image>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="name">{{item.customer.name}}</view>
|
||||
<view class="tel">
|
||||
<view>
|
||||
<u-icon name="phone" size="28" color="#1479FF"></u-icon>
|
||||
</view>
|
||||
<view class="text">{{item.customer.phone || '无'}}</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
<view>
|
||||
<u-icon name="map" size="28" color="#1479FF"></u-icon>
|
||||
</view>
|
||||
<view class="text">{{item.customer_address.address || '无'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sex">
|
||||
<view class="sex-text">
|
||||
{{item.customer.sex || '无'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="distance">
|
||||
<view class="distance-icon">
|
||||
<u-image src="/static/todayNursing/distance.png" height="42" width="42"></u-image>
|
||||
</view>
|
||||
<view class="distance-text">{{item.distance}}公里</view>
|
||||
</view>
|
||||
<view class="to-there" @click="toThere(item)">
|
||||
<view class="to-there-text">去那里</view>
|
||||
<view class="to-there-icon">
|
||||
<u-image src="/static/todayNursing/to-there.png" height="46" width="46"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else>
|
||||
<u-empty mode="list" text="暂无护理"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore :status="status" :load-text='loadText' @loadmore='select.page++,getList()' />
|
||||
|
||||
<u-calendar v-model="isShowCalendar" max-date="2100-01-01" mode="range" @change='datePick'>
|
||||
|
||||
</u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShowCalendar: false,
|
||||
inputStyle: {
|
||||
width: "600rpx",
|
||||
fontSize: "28rpx",
|
||||
fontWeight: "500"
|
||||
},
|
||||
optionsStatus: [{
|
||||
label: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '待护理',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
label: '护理中',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '已护理',
|
||||
value: 2,
|
||||
},
|
||||
|
||||
],
|
||||
optionsSex: [{
|
||||
label: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '男',
|
||||
value: '男',
|
||||
},
|
||||
{
|
||||
label: '女',
|
||||
value: '女',
|
||||
},
|
||||
|
||||
],
|
||||
status: 'loadmore',
|
||||
loadText: {
|
||||
loadmore: '轻轻上拉或点击',
|
||||
loading: '努力加载中',
|
||||
nomore: '实在没有了'
|
||||
},
|
||||
nursingList: [],
|
||||
|
||||
|
||||
select: {
|
||||
page_size: 10,
|
||||
page: 1,
|
||||
sex: '',
|
||||
status: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
start_time: this.$moment(new Date()).startOf('month').format('YYYY-MM-DD'),
|
||||
end_time: this.$moment(new Date()).endOf('month').format('YYYY-MM-DD'),
|
||||
keyword: '',
|
||||
is_new_auth: 1,
|
||||
sort_name:'start_time',
|
||||
sort_type:'asc'
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh(){
|
||||
this.select = {
|
||||
page_size: 10,
|
||||
page: 1,
|
||||
sex: '',
|
||||
status: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
//start_time: this.$moment(new Date()).startOf('month').format('YYYY-MM-DD'),
|
||||
//end_time: this.$moment(new Date()).endOf('month').format('YYYY-MM-DD'),
|
||||
keyword: '',
|
||||
sort_name:'start_time',
|
||||
sort_type:'asc'
|
||||
}
|
||||
this.nursingList = []
|
||||
this.getList()
|
||||
},
|
||||
|
||||
calendarShow(e) {
|
||||
if (e === 2) {
|
||||
this.isShowCalendar = true
|
||||
}
|
||||
},
|
||||
calendarHide() {
|
||||
this.isShowCalendar = false
|
||||
},
|
||||
datePick(e) {
|
||||
console.log(e);
|
||||
this.select.page = 1
|
||||
this.select.start_time = `${e.startDate}`
|
||||
this.select.end_time = `${e.endDate}`
|
||||
this.nursingList = []
|
||||
this.getList()
|
||||
},
|
||||
|
||||
searchInput(e) {
|
||||
this.select.keyword = e
|
||||
|
||||
this.nursingList = []
|
||||
this.select.page = 1
|
||||
this.$u.debounce(this.getList, 1000)
|
||||
},
|
||||
async getList() {
|
||||
let res = await this.$u.api.adminScheduleList(this.select)
|
||||
if (res.data.length > 0 && res.data) {
|
||||
this.nursingList.push(...res.data)
|
||||
this.status = 'loadmore'
|
||||
} else {
|
||||
this.status = 'nomore'
|
||||
if (this.select.page > 1) {
|
||||
this.select.page--
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//跳转详情
|
||||
toDetail(item) {
|
||||
uni.$u.throttle(() => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/detailNursing/detailNursing?id=${item.id}`
|
||||
})
|
||||
})
|
||||
},
|
||||
toThere(item) {
|
||||
this.$u.throttle(() => {
|
||||
uni.openLocation({
|
||||
latitude: Number(item.customer.lat),
|
||||
longitude: Number(item.customer.lng),
|
||||
name: item.customer.address
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statusComputed() {
|
||||
return function(status) {
|
||||
switch (status) {
|
||||
case '0':
|
||||
return "待护理"
|
||||
break;
|
||||
case 1:
|
||||
return "护理中"
|
||||
break;
|
||||
case 2:
|
||||
return "已护理"
|
||||
break;
|
||||
default:
|
||||
return '全部'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isShowCalendar(val) {
|
||||
if (!val) {
|
||||
this.$refs.uDropdown.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.select.page++
|
||||
this.status = 'loading';
|
||||
this.getList()
|
||||
},
|
||||
onShow() {
|
||||
this.select.page = 1
|
||||
this.nursingList = []
|
||||
uni.getLocation().then(res => {
|
||||
this.select.lat = res[1]?.latitude
|
||||
this.select.lng = res[1]?.longitude
|
||||
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
onHide() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//下拉自定义
|
||||
/deep/.u-dropdown__menu {
|
||||
justify-content: space-evenly !important;
|
||||
}
|
||||
|
||||
/deep/.u-dropdown__menu__item {
|
||||
width: 224rpx !important;
|
||||
flex: none !important;
|
||||
height: 70rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
/deep/.u-dropdown__menu__item .u-flex {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/deep/.u-dropdown__menu__item__text {
|
||||
flex: 1 !important;
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 500 !important;
|
||||
color: #333333 !important;
|
||||
text-align: center;
|
||||
|
||||
padding: 12rpx 0rpx !important;
|
||||
}
|
||||
|
||||
/deep/.u-dropdown__menu__item__arrow {
|
||||
width: 70rpx !important;
|
||||
height: 70rpx !important;
|
||||
background: rgba(20, 121, 255, 0.1) !important;
|
||||
border-radius: 10rpx !important;
|
||||
border: 2rpx solid #FFFFFF !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/deep/.u-load-more-wrap {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 710rpx;
|
||||
height: 70rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #FAFBFC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
margin: 24rpx 24rpx 0 24rpx;
|
||||
|
||||
.input-content {
|
||||
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.drop-down {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.nursing-list {
|
||||
|
||||
margin-top: 10rpx;
|
||||
|
||||
.list-item {
|
||||
width: 710rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
|
||||
|
||||
margin: 0 20rpx 26rpx 22rpx;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 22rpx 0;
|
||||
|
||||
.time {
|
||||
height: 40rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 40rpx;
|
||||
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.status-icon {
|
||||
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
width: 84rpx;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 40rpx;
|
||||
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 670rpx;
|
||||
height: 2rpx;
|
||||
border: 2rpx solid #EEEFF5;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
padding-top: 24rpx;
|
||||
|
||||
.avatar {
|
||||
|
||||
padding-top: 4rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
|
||||
padding-left: 24rpx;
|
||||
|
||||
.name {
|
||||
width: 270rpx;
|
||||
height: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tel {
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
|
||||
margin-top: 18rpx;
|
||||
|
||||
.text {
|
||||
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
|
||||
margin-top: 14rpx;
|
||||
|
||||
.text {
|
||||
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sex {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #FDECEC;
|
||||
opacity: 0.5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-right: 20rpx;
|
||||
|
||||
.sex-text {
|
||||
width: 28rpx;
|
||||
height: 34rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #36596A;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 16rpx;
|
||||
padding-bottom: 26rpx;
|
||||
|
||||
.distance {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.distance-icon {
|
||||
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.distance-text {
|
||||
height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #A7AFBC;
|
||||
line-height: 34rpx;
|
||||
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.to-there {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-right: 20rpx;
|
||||
|
||||
.to-there-text {
|
||||
height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #A7AFBC;
|
||||
line-height: 34rpx;
|
||||
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.to-there-icon {
|
||||
|
||||
margin-left: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue