style: 今日计划、异常上报样式调整
This commit is contained in:
parent
d07f1f5992
commit
a0f7ce2067
|
|
@ -1,9 +1,19 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<u-navbar :is-back="false" title="" :background="{ backgroundColor: '#DFEEFD' }" :border-bottom="false">
|
||||
<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-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> -->
|
||||
|
|
@ -23,14 +33,27 @@
|
|||
</span>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<view @click="changeTab(i)" class="tab-item" v-for="(v, i) in selectTabs" :key="i" :class="{ select: selectIdx === i }">
|
||||
<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
|
||||
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">
|
||||
|
|
@ -39,13 +62,18 @@
|
|||
</view>
|
||||
<view class="type">
|
||||
<view class="value">区域类型</view>
|
||||
<u-tag :text="item.areaType" class="tag" border-color="transparent" :type="
|
||||
<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>
|
||||
|
|
@ -66,7 +94,11 @@
|
|||
<view class="success-box">
|
||||
<view class="box-content">
|
||||
<view class="logo">
|
||||
<image style="width: 100%; height: 100%" src="/static/images/msg-success.png" alt="" />
|
||||
<image
|
||||
style="width: 100%; height: 100%"
|
||||
src="/static/images/msg-success.png"
|
||||
alt=""
|
||||
/>
|
||||
</view>
|
||||
<view class="content-title">刷卡成功</view>
|
||||
<view class="btn-box">
|
||||
|
|
@ -81,7 +113,11 @@
|
|||
<view class="error-box">
|
||||
<view class="box-content">
|
||||
<view class="logo">
|
||||
<image style="width: 100%; height: 100%" src="/static/images/msg-error.png" alt="" />
|
||||
<image
|
||||
style="width: 100%; height: 100%"
|
||||
src="/static/images/msg-error.png"
|
||||
alt=""
|
||||
/>
|
||||
</view>
|
||||
<view class="content-title">
|
||||
{{ errorMsg }}
|
||||
|
|
@ -98,57 +134,61 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { GetPlanInfoAreaList, GetTodayPlanList, GetAwaitUploadAreaApi } from '@/api/apiList'
|
||||
import {
|
||||
GetPlanInfoAreaList,
|
||||
GetTodayPlanList,
|
||||
GetAwaitUploadAreaApi,
|
||||
} from "@/api/apiList";
|
||||
|
||||
import { minutesToTime } from '@/utils/utils'
|
||||
import { minutesToTime } from "@/utils/utils";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
posIcon: require('@/static/images/pos-icon.png'),
|
||||
posIcon: require("@/static/images/pos-icon.png"),
|
||||
selectIdx: 0,
|
||||
dropdownValue: '',
|
||||
dropdownValue: "",
|
||||
dropdownOptions: [
|
||||
{
|
||||
label: '保洁计划1',
|
||||
value: 1
|
||||
label: "保洁计划1",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '保洁计划2',
|
||||
value: 2
|
||||
label: "保洁计划2",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '保洁计划3',
|
||||
value: 3
|
||||
label: "保洁计划3",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: '保洁计划4',
|
||||
value: 4
|
||||
}
|
||||
label: "保洁计划4",
|
||||
value: 4,
|
||||
},
|
||||
],
|
||||
selectTabs: [
|
||||
{
|
||||
name: '全部',
|
||||
value: 0
|
||||
name: "全部",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: '待保洁',
|
||||
value: 1
|
||||
}
|
||||
name: "待保洁",
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
|
||||
paramsId: '',
|
||||
paramsId: "",
|
||||
// 刷卡成功弹窗
|
||||
successShow: false,
|
||||
// 刷卡失败弹窗
|
||||
errorShow: false,
|
||||
errorMsg: 'NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息',
|
||||
errorMsg: "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息",
|
||||
dataInfo: {
|
||||
planName: '',
|
||||
areas: []
|
||||
planName: "",
|
||||
areas: [],
|
||||
},
|
||||
areaRes:{}
|
||||
}
|
||||
areaRes: {},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
@ -163,14 +203,14 @@ export default {
|
|||
|
||||
onLoad(options) {
|
||||
// this.paramsId = options.id;
|
||||
this.dropdownValue = options.id
|
||||
window.nfcFn = this.nfcResFn
|
||||
this.dropdownValue = options.id;
|
||||
window.nfcFn = this.nfcResFn;
|
||||
// this.nfcResFn();
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getTodayPlanList()
|
||||
this.getPlanInfoAreaList()
|
||||
this.getTodayPlanList();
|
||||
this.getPlanInfoAreaList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -179,12 +219,12 @@ export default {
|
|||
backFn() {
|
||||
// console.log("%c%s", "color:red", "返回");
|
||||
|
||||
uni.navigateBack()
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
async nfcResFn(data) {
|
||||
if (!data) {
|
||||
return uni.showToast({ title: '未传入参数 initFn', icon: 'none' })
|
||||
return uni.showToast({ title: "未传入参数 initFn", icon: "none" });
|
||||
}
|
||||
// uni.showModal({
|
||||
// title: "开发调试查看nimei",
|
||||
|
|
@ -192,16 +232,16 @@ export default {
|
|||
// showCancel: true,
|
||||
// success: function (res) {},
|
||||
// });
|
||||
let cardID = data.cardID
|
||||
let cardID = data.cardID;
|
||||
// let nimei = data.nimei;
|
||||
let nimei = data.uuid
|
||||
let nimei = data.uuid;
|
||||
const req = {
|
||||
Nimei: nimei
|
||||
Nimei: nimei,
|
||||
// Nimei:'"78F04BC3E9A6DE4782C11A2346F39C68'
|
||||
}
|
||||
const res = await GetAwaitUploadAreaApi(req)
|
||||
console.log(res, 'res---')
|
||||
this.areaRes = res.data
|
||||
};
|
||||
const res = await GetAwaitUploadAreaApi(req);
|
||||
console.log(res, "res---");
|
||||
this.areaRes = res.data;
|
||||
// uni.showModal({
|
||||
// title: "开发调试查看",
|
||||
// content: JSON.stringify(res) || "未传入参数 initFn",
|
||||
|
|
@ -210,94 +250,97 @@ export default {
|
|||
// });
|
||||
// 刷卡失败
|
||||
if (!res.succeed) {
|
||||
console.log('%c%s', 'color:red', '刷卡失败')
|
||||
console.log("%c%s", "color:red", "刷卡失败");
|
||||
// 提示信息
|
||||
this.errorMsg = res.error || 'NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息'
|
||||
this.errorShow = true
|
||||
this.errorMsg =
|
||||
res.error || "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息";
|
||||
this.errorShow = true;
|
||||
// 同时关闭成功弹窗
|
||||
this.successShow = false
|
||||
return
|
||||
this.successShow = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 刷卡成功
|
||||
this.successShow = true
|
||||
this.successShow = true;
|
||||
// 同时关闭失败弹窗
|
||||
this.errorShow = false
|
||||
this.errorShow = false;
|
||||
},
|
||||
// 上传图片
|
||||
toUploadPage() {
|
||||
console.log('%c%s', 'color:red', '上传图片')
|
||||
console.log("%c%s", "color:red", "上传图片");
|
||||
|
||||
const params = {
|
||||
planName: this.areaRes.planName,
|
||||
id: this.areaRes.id,
|
||||
aeraNmae: this.areaRes.name
|
||||
}
|
||||
console.log(params)
|
||||
aeraNmae: this.areaRes.name,
|
||||
};
|
||||
console.log(params);
|
||||
|
||||
// 先关闭弹窗再跳转
|
||||
this.successShow = false
|
||||
this.successShow = false;
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/uploadPhoto?params=' + encodeURIComponent(JSON.stringify(params))
|
||||
})
|
||||
url:
|
||||
"/pages/index/uploadPhoto?params=" +
|
||||
encodeURIComponent(JSON.stringify(params)),
|
||||
});
|
||||
},
|
||||
// 异常上报
|
||||
exceptionReportFn() {
|
||||
console.log('%c%s', 'color:red', '异常上报')
|
||||
console.log("%c%s", "color:red", "异常上报");
|
||||
|
||||
// 先关闭弹窗再跳转
|
||||
this.errorShow = false
|
||||
this.errorShow = false;
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list'
|
||||
})
|
||||
url: "/pages/index/list",
|
||||
});
|
||||
},
|
||||
|
||||
toItemPage(item) {
|
||||
console.log('%c%s', 'color:red', '跳转至详情页', item)
|
||||
console.log("%c%s", "color:red", "跳转至详情页", item);
|
||||
|
||||
const combinedData = {
|
||||
...item, // 展开 item 的所有属性
|
||||
planName: this.dataInfo.planName // 添加 planName 属性
|
||||
}
|
||||
planName: this.dataInfo.planName, // 添加 planName 属性
|
||||
};
|
||||
|
||||
const params = encodeURIComponent(JSON.stringify(combinedData))
|
||||
const params = encodeURIComponent(JSON.stringify(combinedData));
|
||||
|
||||
if (item.isCompleted) {
|
||||
// 已保洁
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/cleanDetails?params=' + params
|
||||
})
|
||||
return
|
||||
url: "/pages/index/cleanDetails?params=" + params,
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
// 未保洁
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list?params=' + params
|
||||
})
|
||||
url: "/pages/index/list?params=" + params,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
openFn() {},
|
||||
closeFn() {},
|
||||
changeTab(i) {
|
||||
this.selectIdx = i
|
||||
this.selectIdx = i;
|
||||
|
||||
this.getPlanInfoAreaList()
|
||||
this.getPlanInfoAreaList();
|
||||
},
|
||||
|
||||
changeDropdown(e) {
|
||||
this.dropdownValue = e
|
||||
this.dropdownValue = e;
|
||||
|
||||
this.getPlanInfoAreaList()
|
||||
this.getPlanInfoAreaList();
|
||||
},
|
||||
|
||||
// 获取今日计划
|
||||
async getTodayPlanList() {
|
||||
const res = await GetTodayPlanList()
|
||||
const res = await GetTodayPlanList();
|
||||
if (res.succeed) {
|
||||
this.dropdownOptions = res.data.map(item => ({
|
||||
this.dropdownOptions = res.data.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}))
|
||||
value: item.id,
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -305,14 +348,20 @@ export default {
|
|||
async getPlanInfoAreaList() {
|
||||
const res = await GetPlanInfoAreaList({
|
||||
id: this.dropdownValue,
|
||||
isCompleted: this.selectIdx === 0 ? true : false
|
||||
})
|
||||
isCompleted: this.selectIdx === 0 ? true : false,
|
||||
});
|
||||
if (res.succeed) {
|
||||
this.dataInfo = res.data
|
||||
this.dataInfo = res.data;
|
||||
if (this.dataInfo.areas?.length > 0) {
|
||||
// 将 areas 中的 isCompleted 字段为 false 的 展示在前面
|
||||
this.dataInfo.areas = this.dataInfo.areas.sort(
|
||||
(a, b) => a.isCompleted - b.isCompleted
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -354,7 +403,7 @@ page {
|
|||
padding-top: 72rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: url('@/static/images/plan-icon-bg2.png') no-repeat 95% 40%;
|
||||
background: url("@/static/images/plan-icon-bg2.png") no-repeat 95% 40%;
|
||||
background-size: 40%;
|
||||
background-color: #dfeefd;
|
||||
.name {
|
||||
|
|
@ -390,7 +439,7 @@ page {
|
|||
}
|
||||
}
|
||||
}
|
||||
.empty-box{
|
||||
.empty-box {
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
.arealist {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,12 @@
|
|||
</u-form-item>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<u-form-item label="图片" prop="images" label-position="top">
|
||||
<u-form-item
|
||||
label="图片"
|
||||
prop="images"
|
||||
label-position="top"
|
||||
:border-bottom="false"
|
||||
>
|
||||
<!-- <u-upload
|
||||
v-model="form.images"
|
||||
:max-count="3"
|
||||
|
|
|
|||
Loading…
Reference in New Issue