429 lines
9.8 KiB
Vue
429 lines
9.8 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="保洁计划"
|
||
:options="dropdownOptions"
|
||
></u-dropdown-item>
|
||
</u-dropdown>
|
||
</view>
|
||
</u-navbar>
|
||
<view class="area-info">
|
||
<view class="name">2024年11月21号</view>
|
||
<view class="position"> 08：30~11：30</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">
|
||
<view class="block-info">
|
||
<view class="schedule">待保洁</view>
|
||
<view class="name">
|
||
<u-icon size="40" :name="posIcon"></u-icon>
|
||
<view class="text">东大门北侧_门2</view>
|
||
</view>
|
||
<view class="type">
|
||
<view class="value">区域类型</view>
|
||
<u-tag
|
||
text="室外"
|
||
class="tag"
|
||
border-color="transparent"
|
||
type="success"
|
||
/>
|
||
<u-tag text="特殊" border-color="transparent" type="warning" />
|
||
</view>
|
||
<view class="illustrate">
|
||
{{ "需要清理整个户外通道/保持跑道整洁花坛边落叶清扫" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button @click="nfcResFn">
|
||
{{errorShow}}
|
||
</button>
|
||
<!-- nfc刷卡成功弹窗 -->
|
||
<u-popup v-model="successShow" mode="center" :round="30" >
|
||
<view class="success-box">
|
||
<view class="box-content">
|
||
<view class="logo"></view>
|
||
<view class="content-title">刷卡成功</view>
|
||
<view class="btn-box">
|
||
<view class="btn-cancel" @click="successShow = false">暂不</view>
|
||
<view class="btn-success" @click="uploadFn">上传图片</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"></view>
|
||
<view class="content-title">刷卡失败</view>
|
||
<view class="btn-box">
|
||
<view class="btn-cancel" @click="errorShow = false">暂不</view>
|
||
<view class="btn-success" @click="exceptionReportFn">异常上报</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { GetPlanInfoAreaList } from "@/api/apiList";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
posIcon: require("@/static/images/pos-icon.png"),
|
||
selectIdx: 0,
|
||
dropdownValue: 1,
|
||
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,
|
||
};
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.paramsId = options.id;
|
||
window.nfcFn = this.nfcResFn;
|
||
// this.nfcResFn();
|
||
},
|
||
|
||
created() {
|
||
// this.getPlanInfoAreaList();
|
||
},
|
||
|
||
methods: {
|
||
nfcResFn(data){
|
||
if(false){
|
||
console.log('%c%s', 'color:red', 'nfc刷卡成功');
|
||
this.successShow = true;
|
||
}else{
|
||
console.log('%c%s', 'color:red', '刷卡失败');
|
||
this.errorShow = true;
|
||
}
|
||
},
|
||
// 上传图片
|
||
uploadFn(){
|
||
console.log('%c%s', 'color:red', '上传图片');
|
||
uni.navigateTo({
|
||
url: "/pages/index/uploadPhoto",
|
||
});
|
||
},
|
||
// 异常上报
|
||
exceptionReportFn(){
|
||
console.log('%c%s', 'color:red', '异常上报');
|
||
},
|
||
openFn(){},
|
||
closeFn(){},
|
||
changeTab(i) {
|
||
console.log(i);
|
||
this.selectIdx = i;
|
||
},
|
||
|
||
// 获取计划区域列表
|
||
async getPlanInfoAreaList() {
|
||
const res = await GetPlanInfoAreaList({
|
||
id: this.paramsId,
|
||
// isCompleted: false,
|
||
});
|
||
if (res.succeed) {
|
||
console.log("res...", res);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
height: 100vh;
|
||
background: #f7f8fc;
|
||
.slot-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
/deep/ .u-dropdown-item__options {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.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;
|
||
.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; /* 切角 */
|
||
}
|
||
.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;
|
||
background-color:red;
|
||
}
|
||
.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, #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;
|
||
background-color:red;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .u-mode-center-box{
|
||
margin-top:-500rpx !important;
|
||
background-color:transparent !important;
|
||
}
|
||
</style>
|