585 lines
15 KiB
Vue
585 lines
15 KiB
Vue
<template>
|
||
<view class="content">
|
||
<u-navbar :is-back="false" title="" :background="{ backgroundColor: '#DFEEFD' }" :border-bottom="false">
|
||
<view class="slot-wrap">
|
||
<u-dropdown :title-size="42" active-color="#211D2F">
|
||
<u-dropdown-item v-model="dropdownValue" :title="dataInfo.planName" :options="dropdownOptions" @change="changeDropdown"></u-dropdown-item>
|
||
</u-dropdown>
|
||
<view class="back-icon" @click="backFn">
|
||
<!-- <u-icon name="arrow-left" size="50rpx" color="#606266"></u-icon> -->
|
||
<uni-icons type="left" size="50rpx" color="#606266"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
<view class="area-info">
|
||
<view class="name">{{
|
||
dataInfo.planDate ? dataInfo.planDate.split("T")[0] : ""
|
||
}}</view>
|
||
<view class="position">
|
||
<span v-if="dataInfo.beginTime && dataInfo.endTime">
|
||
{{ minutesToTime(dataInfo.beginTime) }}~{{
|
||
minutesToTime(dataInfo.endTime)
|
||
}}
|
||
</span>
|
||
</view>
|
||
<view class="tabs">
|
||
<view @click="changeTab(i)" class="tab-item" v-for="(v, i) in selectTabs" :key="i" :class="{ select: selectIdx === i }">
|
||
{{ v.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="arealist" v-if="dataInfo.areas.length > 0">
|
||
<view class="block-info" v-for="item in dataInfo.areas" :key="item.id" @click="toItemPage(item)">
|
||
<view v-if="!item.isCompleted" class="schedule schedule-wait">待保洁</view>
|
||
<view v-else class="schedule schedule-completed">已完成</view>
|
||
|
||
<view class="name">
|
||
<u-icon size="40" :name="posIcon"></u-icon>
|
||
<view class="text">{{ item.aeraNmae }}</view>
|
||
</view>
|
||
<view class="type">
|
||
<view class="value">区域类型</view>
|
||
<u-tag :text="item.areaType" class="tag" border-color="transparent" :type="
|
||
item.areaType === '室外'
|
||
? 'success'
|
||
: item.areaType === '特殊'
|
||
? 'warning'
|
||
: 'primary'
|
||
" />
|
||
<!-- 特殊先隐藏，没有这个字段 -->
|
||
<!-- <u-tag text="特殊" border-color="transparent" type="warning" /> -->
|
||
</view>
|
||
<view class="illustrate">
|
||
{{ item.note }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <button @click="successShow = true">刷卡成功</button> -->
|
||
<!-- <button @click="nfcResFn(false)">刷卡失败</button> -->
|
||
<!-- nfc刷卡成功弹窗 -->
|
||
<u-popup v-model="successShow" mode="center" :round="30">
|
||
<view class="success-box">
|
||
<view class="box-content">
|
||
<view class="logo">
|
||
<image style="width: 100%; height: 100%" src="/static/images/msg-success.png" alt="" />
|
||
</view>
|
||
<view class="content-title">刷卡成功</view>
|
||
<view class="btn-box">
|
||
<view class="btn-cancel" @click="successShow = false">暂不</view>
|
||
<view class="btn-success" @click="toUploadPage">上传图片</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- nfc刷卡失败弹窗 -->
|
||
<u-popup v-model="errorShow" mode="center" :round="30">
|
||
<view class="error-box">
|
||
<view class="box-content">
|
||
<view class="logo">
|
||
<image style="width: 100%; height: 100%" src="/static/images/msg-error.png" alt="" />
|
||
</view>
|
||
<view class="content-title">
|
||
{{ errorMsg }}
|
||
</view>
|
||
<view class="btn-box">
|
||
<view class="btn-cancel" @click="errorShow = false">关闭</view>
|
||
<!-- <view class="btn-success" @click="errorShow = false">异常上报</view> -->
|
||
<!-- <view class="btn-success" @click="exceptionReportFn">异常上报</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { GetPlanInfoAreaList, GetTodayPlanList, GetAwaitUploadAreaApi } from '@/api/apiList'
|
||
|
||
import { minutesToTime } from '@/utils/utils'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
posIcon: require('@/static/images/pos-icon.png'),
|
||
selectIdx: 0,
|
||
dropdownValue: '',
|
||
dropdownOptions: [
|
||
{
|
||
label: '保洁计划1',
|
||
value: 1
|
||
},
|
||
{
|
||
label: '保洁计划2',
|
||
value: 2
|
||
},
|
||
{
|
||
label: '保洁计划3',
|
||
value: 3
|
||
},
|
||
{
|
||
label: '保洁计划4',
|
||
value: 4
|
||
}
|
||
],
|
||
selectTabs: [
|
||
{
|
||
name: '全部',
|
||
value: 0
|
||
},
|
||
{
|
||
name: '待保洁',
|
||
value: 1
|
||
}
|
||
],
|
||
|
||
paramsId: '',
|
||
// 刷卡成功弹窗
|
||
successShow: false,
|
||
// 刷卡失败弹窗
|
||
errorShow: false,
|
||
errorMsg: 'NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息',
|
||
dataInfo: {
|
||
planName: '',
|
||
areas: []
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// dropdownTitle() {
|
||
// // 通过 dropdownValue 匹配 对应的项，展示 label
|
||
// const item = this.dropdownOptions.find(
|
||
// (item) => item.value === this.dropdownValue
|
||
// );
|
||
// return item ? item.label : "";
|
||
// },
|
||
},
|
||
|
||
onLoad(options) {
|
||
// this.paramsId = options.id;
|
||
this.dropdownValue = options.id
|
||
window.nfcFn = this.nfcResFn
|
||
// this.nfcResFn();
|
||
},
|
||
|
||
created() {
|
||
this.getTodayPlanList()
|
||
this.getPlanInfoAreaList()
|
||
},
|
||
|
||
methods: {
|
||
minutesToTime,
|
||
|
||
backFn() {
|
||
// console.log("%c%s", "color:red", "返回");
|
||
|
||
uni.navigateBack()
|
||
},
|
||
|
||
async nfcResFn(data) {
|
||
if (!data) {
|
||
return uni.showToast({ title: '未传入参数 initFn', icon: 'none' })
|
||
}
|
||
// uni.showModal({
|
||
// title: "开发调试查看nimei",
|
||
// content: JSON.stringify(data) || "未传入参数 initFn",
|
||
// showCancel: true,
|
||
// success: function (res) {},
|
||
// });
|
||
let cardID = data.cardID
|
||
// let nimei = data.nimei;
|
||
let nimei = data.uuid
|
||
const req = {
|
||
Nimei: nimei
|
||
// Nimei:'"78F04BC3E9A6DE4782C11A2346F39C68'
|
||
}
|
||
const res = await GetAwaitUploadAreaApi(req)
|
||
console.log(res, 'res---')
|
||
// 刷卡失败
|
||
if (!res.succeed) {
|
||
console.log('%c%s', 'color:red', '刷卡失败')
|
||
// 提示信息
|
||
this.errorMsg = res.error || 'NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息'
|
||
this.errorShow = true
|
||
// 同时关闭成功弹窗
|
||
this.successShow = false
|
||
return
|
||
}
|
||
// 刷卡成功
|
||
this.successShow = true
|
||
// 同时关闭失败弹窗
|
||
this.errorShow = false
|
||
return
|
||
if (data) {
|
||
console.log('%c%s', 'color:red', 'nfc刷卡成功')
|
||
this.successShow = true
|
||
// 同时关闭失败弹窗
|
||
this.errorShow = false
|
||
} else {
|
||
console.log('%c%s', 'color:red', '刷卡失败')
|
||
this.errorShow = true
|
||
// 同时关闭成功弹窗
|
||
this.successShow = false
|
||
}
|
||
},
|
||
// 上传图片
|
||
toUploadPage() {
|
||
console.log('%c%s', 'color:red', '上传图片')
|
||
|
||
const params = {
|
||
planName: this.dataInfo.planName,
|
||
id: this.dataInfo.areas[this.dataInfo.areas.length - 1].id,
|
||
aeraNmae: this.dataInfo.areas[this.dataInfo.areas.length - 1].aeraNmae
|
||
}
|
||
console.log(params)
|
||
|
||
// 先关闭弹窗再跳转
|
||
this.successShow = false
|
||
uni.navigateTo({
|
||
url: '/pages/index/uploadPhoto?params=' + encodeURIComponent(JSON.stringify(params))
|
||
})
|
||
},
|
||
// 异常上报
|
||
exceptionReportFn() {
|
||
console.log('%c%s', 'color:red', '异常上报')
|
||
|
||
// 先关闭弹窗再跳转
|
||
this.errorShow = false
|
||
uni.navigateTo({
|
||
url: '/pages/index/list'
|
||
})
|
||
},
|
||
|
||
toItemPage(item) {
|
||
console.log('%c%s', 'color:red', '跳转至详情页', item)
|
||
|
||
const combinedData = {
|
||
...item, // 展开 item 的所有属性
|
||
planName: this.dataInfo.planName // 添加 planName 属性
|
||
}
|
||
|
||
const params = encodeURIComponent(JSON.stringify(combinedData))
|
||
|
||
if (item.isCompleted) {
|
||
// 已保洁
|
||
uni.navigateTo({
|
||
url: '/pages/index/cleanDetails?params=' + params
|
||
})
|
||
return
|
||
} else {
|
||
// 未保洁
|
||
uni.navigateTo({
|
||
url: '/pages/index/list?params=' + params
|
||
})
|
||
}
|
||
},
|
||
|
||
openFn() {},
|
||
closeFn() {},
|
||
changeTab(i) {
|
||
this.selectIdx = i
|
||
|
||
this.getPlanInfoAreaList()
|
||
},
|
||
|
||
changeDropdown(e) {
|
||
this.dropdownValue = e
|
||
|
||
this.getPlanInfoAreaList()
|
||
},
|
||
|
||
// 获取今日计划
|
||
async getTodayPlanList() {
|
||
const res = await GetTodayPlanList()
|
||
if (res.succeed) {
|
||
this.dropdownOptions = res.data.map(item => ({
|
||
label: item.name,
|
||
value: item.id
|
||
}))
|
||
}
|
||
},
|
||
|
||
// 获取计划区域列表
|
||
async getPlanInfoAreaList() {
|
||
const res = await GetPlanInfoAreaList({
|
||
id: this.dropdownValue,
|
||
isCompleted: this.selectIdx === 0 ? true : false
|
||
})
|
||
if (res.succeed) {
|
||
this.dataInfo = res.data
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #f3f5fa !important;
|
||
}
|
||
.content {
|
||
// height: 100vh;
|
||
background: #f7f8fc;
|
||
.slot-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
/deep/ .u-dropdown-item__options {
|
||
width: 100%;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 100rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
left: 12rpx;
|
||
top: 12rpx;
|
||
z-index: 20;
|
||
}
|
||
}
|
||
.title {
|
||
line-height: 1;
|
||
border-left: 10rpx solid #5a7ee9;
|
||
padding-left: 16rpx;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
}
|
||
.area-info {
|
||
padding: 24rpx 32rpx;
|
||
padding-top: 72rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: url('@/static/images/plan-icon-bg2.png') no-repeat 95% 40%;
|
||
background-size: 40%;
|
||
background-color: #dfeefd;
|
||
.name {
|
||
font-weight: 800;
|
||
font-size: 48rpx;
|
||
color: #1d1d1d;
|
||
}
|
||
.position {
|
||
margin-top: 40rpx;
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #465161;
|
||
}
|
||
.tabs {
|
||
margin-top: 38rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.tab-item {
|
||
z-index: 99;
|
||
pointer-events: auto; /* 确保可点击 */
|
||
background: #ffffff;
|
||
border-radius: 30rpx;
|
||
padding: 12rpx 0;
|
||
width: 48%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #383535;
|
||
}
|
||
.select {
|
||
color: #ffffff;
|
||
background: #4278f4;
|
||
}
|
||
}
|
||
}
|
||
.arealist {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 32rpx;
|
||
.block-info {
|
||
position: relative;
|
||
background: #ffffff;
|
||
border-radius: 18rpx;
|
||
padding: 65rpx 46rpx;
|
||
margin-bottom: 32rpx;
|
||
.schedule {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// background-color: #feeded; /* 背景颜色 */
|
||
color: white;
|
||
width: 160rpx;
|
||
height: 45rpx;
|
||
font-size: 30rpx;
|
||
// color: #db3636;
|
||
border-bottom-left-radius: 500rpx; /* 切角 */
|
||
}
|
||
|
||
.schedule-completed {
|
||
color: #4278f4;
|
||
background-color: #e5ebff;
|
||
}
|
||
|
||
.schedule-wait {
|
||
color: #db3636;
|
||
background-color: #feeded;
|
||
}
|
||
|
||
.name {
|
||
display: flex;
|
||
align-items: center;
|
||
.text {
|
||
margin-left: 20rpx;
|
||
font-size: 38rpx;
|
||
color: #32353b;
|
||
}
|
||
}
|
||
.type {
|
||
display: flex;
|
||
margin: 38rpx 0;
|
||
.value {
|
||
margin-right: 10rpx;
|
||
font-size: 32rpx;
|
||
color: #8896b4;
|
||
}
|
||
.tag {
|
||
margin: 0 16rpx;
|
||
}
|
||
}
|
||
.illustrate {
|
||
padding: 46rpx;
|
||
background: #f3f6f7;
|
||
border-radius: 21rpx;
|
||
font-size: 32rpx;
|
||
color: #353535;
|
||
line-height: 57rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.success-box {
|
||
// overflow:hidden;
|
||
width: 650rpx;
|
||
padding-top: 50rpx;
|
||
background-color: transparent;
|
||
.box-content {
|
||
height: 450rpx;
|
||
background-color: #ffffff;
|
||
background: linear-gradient(to bottom, #a7dafc, white 60%, white);
|
||
border-radius: 30rpx;
|
||
// border:1px solid red;
|
||
position: relative;
|
||
.logo {
|
||
position: absolute;
|
||
top: -50rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
.content-title {
|
||
position: absolute;
|
||
top: 40%;
|
||
width: 100%;
|
||
color: black;
|
||
font-size: 40rpx;
|
||
text-align: center;
|
||
}
|
||
.btn-box {
|
||
position: absolute;
|
||
bottom: 10%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
.btn-cancel {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #f3f6f7;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #32353b;
|
||
}
|
||
.btn-success {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #4278f4;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.error-box {
|
||
// overflow:hidden;
|
||
width: 650rpx;
|
||
padding-top: 50rpx;
|
||
background-color: transparent;
|
||
.box-content {
|
||
height: 450rpx;
|
||
background-color: #ffffff;
|
||
background: linear-gradient(to bottom, #ffeddf, white 60%, white);
|
||
border-radius: 30rpx;
|
||
// border:1px solid red;
|
||
position: relative;
|
||
.logo {
|
||
position: absolute;
|
||
top: -50rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
// background-color:red;
|
||
}
|
||
.content-title {
|
||
position: absolute;
|
||
top: 40%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80%;
|
||
color: black;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
}
|
||
.btn-box {
|
||
position: absolute;
|
||
bottom: 10%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
.btn-cancel {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #f3f6f7;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #32353b;
|
||
}
|
||
.btn-success {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #f76590;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .u-mode-center-box {
|
||
margin-top: -500rpx !important;
|
||
background-color: transparent !important;
|
||
}
|
||
</style>
|