hldy_xcx/pages/index/index.vue

714 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="login-container">
<!-- <u-modal title="驳回原因" v-model="show" :content="content"></u-modal> -->
<model :show="show" @close="show=false" :content="content" />
<swiper style="width: 100%;" :duration="500" :style="{height: `100vh`}" :current="which" @change="swiperchange">
<view v-for="(item,index) in menuArray" :key="index">
<swiper-item style="position: relative;">
<view class="index-up">
<image class="index-up-img" src="https://www.focusnu.com/media/directive/index/indexgif.gif"
mode="widthFix" lazy-load="false" />
</view>
<view class="white-content-father-time">
<view class="white-content" v-if="item.comName">
<view class="white-bgc" style="font-size: 32rpx;">
{{item.comName}}
</view>
</view>
</view>
<view class="white-content-father">
<image
class="chuo-img" v-if="item.status!=`-1`&&item.status!=`2`"
:src=" `https://www.focusnu.com/media/directive/index/${statusarray[Number(item.status) - 1]}.png`"
/>
<view class="white-content" v-if="item.status==`1`">
<image class="white-content-img"
src="https://www.focusnu.com/media/directive/index/addjiji/shenhezhong.png"
lazy-load="false" />
<view class="white-font">
您提交的
<!-- <text style="font-weight: 600;">
"{{item.comName}}"
</text> -->
</view>
<view class="second-font">
<text>
"{{item.comName}}"
</text>
</view>
<view class="second-font">
加盟申请
<text style="color: #01A5FF;">
正在审核中
</text>
</view>
<view class="button-blue" @click="look(item)">
查看
</view>
</view>
<!-- </swiper-item> -->
<!-- <swiper-item v-if="item.status==`3`"> -->
<view class="white-content" v-if="item.status==`3`">
<image class="white-content-img"
src="https://www.focusnu.com/media/directive/index/addjiji/shenheshibai.png"
lazy-load="false" />
<!-- <view class="white-font" style="margin-top: 320rpx;">
您提交的
</view>
<view class="second-font">
{{item.comName}}
</view>
<view class="second-font">
加盟申请
<text style="color: #FF7744;">
审核不通过
</text>
</view> -->
<view class="white-font">
您提交的
</view>
<view class="second-font">
<text>
"{{item.comName}}"
</text>
</view>
<view class="second-font">
加盟申请
<text style="color: #FF7744;">
审核不通过
</text>
</view>
<view class="button-blue-spec" @click="again(item)">
重新提交
</view>
<view class="button-white-spec" @click="jumptolist(item.content)">
驳回原因
</view>
</view>
<!-- </swiper-item> -->
<!-- <swiper-item v-if="item.status==`2`"> -->
<view style="z-index: 1;width: 100%;" v-if="item.status==`2`">
<view class="zhiling-box">
<view class="">
单元清洁服务指令已执行完毕,点击查看
</view>
<image class="zhiling-img"
src="https://www.focusnu.com/media/directive/index/index/back.png" />
</view>
<view class="white-box-father">
<view v-for="(item,index) in buttonArray" :key="index" class="white-box">
<image class="box-img"
:src="`https://www.focusnu.com/media/directive/index/addjiji/${index}.png`" />
<view class="box-font">{{item}}</view>
</view>
<view class="white-box">
<view style="font-weight: 600;font-size: 80rpx;">+</view>
</view>
</view>
</view>
<!-- </swiper-item> -->
</view>
<!-- <swiper-item> -->
<view class="white-content" style="margin: 0 auto;margin-top: 110rpx;" v-if="item.status==`-1`">
<image class="white-content-secondimg"
src="https://www.focusnu.com/media/directive/index/addjiji/addjigou.png"
lazy-load="false" />
<view class="button-blue" @click="addjigou">
添加机构
</view>
</view>
<!-- </swiper-item> -->
</swiper-item>
</view>
</swiper>
<view
style="z-index:999;position: fixed;bottom: 70rpx; width: 100%;display: flex;justify-content: center;margin-top: -25rpx;height: 100rpx;">
<view class="jia-box">
<view v-for="(item,index) in menuArray" :key="index" @click="changecard(index)">
<view :class="whichMenu==index? `black-box` :`gray-box`" v-if="index != menuArray.length - 1">
</view>
<view class="jia" @click="moveend" v-if="index == menuArray.length - 1">
<image class="jia-img" :src="`https://www.focusnu.com/media/directive/index/bluejia.png`" />
</view>
</view>
</view>
</view>
<downMenu :itemTarget="0" />
</view>
</template>
<script setup>
import {
reactive,
ref,
onMounted,
onUnmounted
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import {
getMessageList
} from '@/pages/addjigou/api/addjigou.js'
// import tu from 'https://www.focusnu.com/media/directive/index/tu.png'
import request from '@/request/index.js' // 您封装的 uni.request
import downMenu from '@/compontent/public/downmenu.vue'
import model from "@/compontent/public/model.vue"
const tu = 'https://www.focusnu.com/media/directive/index/tu.png'
const show = ref(false);
const content = ref("");
// const itemArray = ["NU", "动态", "我的"];
const buttonArray = ref(["单元", "仓库", "后勤", "工区", "办公室 ", "员工", "机构维护"])
const statusarray = ["loading", "success", "fail"]
// const itemTarget = ref(0);
const which = ref(0);
// const scaning = ref(false)
const changecard = (e) => {
which.value = e
whichMenu.value = which.value
}
const moveend = () => {
which.value = menuArray.value.length
whichMenu.value = which.value
}
const addjigou = () => {
uni.setStorageSync('specicalid', "");
uni.setStorageSync("baddata", "")
uni.setStorageSync("backhuancun", {})
uni.navigateTo({
url: `/pages/addjigou/name`
});
}
const look = (element) => {
uni.navigateTo({
url: `/pages/addjigou/all?element=${JSON.stringify(element)}`
});
}
const jumptolist = (res) => {
// uni.navigateTo({
// url: `/pages/login/workjoin?type=1`
// });
if (res) {
content.value = res;
show.value = true
}
}
const again = (item) => {
console.log("????", item)
uni.setStorageSync("baddata", item)
uni.setStorageSync('specicalid', item.id);
uni.setStorageSync("backhuancun", {})
uni.navigateTo({
url: `/pages/addjigou/name`
});
}
const jumpTo = () => {
uni.navigateTo({
url: `/pages/login/index`
});
}
const whichMenu = ref(0);
const swiperchange = (res) => {
whichMenu.value = res.detail.current
which.value = res.detail.current
// console.log("res",res.detail.current)
}
// const addoldman = () => {
// uni.navigateTo({
// url: "/pages/addoldman/IDcard"
// });
// }
// const gotoPay = () => {
// uni.navigateTo({
// url: "/pages/pay/index"
// });
// }
// const qrResult = ref('')
// const scanning = ref(false)
// let html5QrCode = null
// async function cancelScan() {
// if (html5QrCode && scanning.value) {
// try {
// await html5QrCode.stop()
// } catch (e) {
// console.warn('停止扫码出错', e)
// }
// }
// scanning.value = false
// }
// function scanQrCode() {
// // 如果正在扫描,先停止一次
// if (html5QrCode && scanning.value) {
// html5QrCode.stop().catch(() => {}).finally(() => {
// scanning.value = false
// })
// return
// }
// // 标记为正在扫描,显示容器
// scanning.value = true
// qrResult.value = ''
// // 创建扫码实例指定容器ID
// html5QrCode = new Html5Qrcode("reader")
// // 扫码配置:每秒 10 帧,识别框大小 250×250
// const config = {
// fps: 10,
// qrbox: {
// width: 350,
// height: 350
// }
// }
// html5QrCode.start({
// facingMode: "environment"
// }, // 后置摄像头
// config,
// decodedText => {
// // 扫码成功回调
// qrResult.value = decodedText
// // 停止扫描并隐藏容器
// html5QrCode.stop().catch(console.warn).finally(() => {
// scanning.value = false
// })
// },
// errorMessage => {
// // 解析过程中报错,不用处理
// }
// ).catch(err => {
// console.error("扫码启动失败", err)
// scanning.value = false
// })
// }
const gotoWindy = () => {
uni.navigateTo({
url: "/pages/selectunit/map"
});
}
const goback = () => {
uni.navigateBack()
}
onMounted(async () => {
})
onUnmounted(() => {
// html5QrCode && html5QrCode.stop().catch(console.warn)
})
const menuArray = ref([])
onLoad(() => {
uni.getStorage({
key: 'openid',
success: function(res) {
getMessageList(res.data).then(res => {
menuArray.value = res.result
menuArray.value.push({
status: `-1`
})
// workArray.value = res.result
// console.log("????",res.result)
})
}
});
})
</script>
<style lang="scss" scoped>
.login-container {
display: flex;
flex-direction: column;
min-height: calc(100vh + 90rpx);
width: 100%;
background-color: rgb(239, 241, 252);
position: relative;
// padding-top: 550rpx;
}
.index-up {
position: absolute;
top: 0rpx;
left: 0;
width: 100%;
.index-up-img {
width: 100%;
height: 20rpx;
}
}
.index-ball-father {
width: 100%;
display: flex;
justify-content: flex-end;
// margin-top: 35rpx;
position: fixed;
top: 120rpx;
left: 0;
z-index: 999;
margin-top: 120rpx;
.white-ball {
width: 60rpx;
height: 60rpx;
background-color: #fff;
border-radius: 50%;
margin-right: 20rpx;
box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
}
.super-white-ball {
width: 70rpx;
height: 60rpx;
background-color: #fff;
border-radius: 50%;
margin-right: 40rpx;
box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
}
.small-img {
width: 25rpx;
height: 25rpx;
}
}
.index-smallPhoto {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 480rpx;
margin-bottom: 50rpx;
.photo-box {
margin-right: 40rpx;
height: 180rpx;
width: 250rpx;
// background-color: #fff;
z-index: 2;
position: relative;
.photo-box-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
.white-content {
z-index: 1;
height: 650rpx;
width: 90%;
// margin-left: 2%;
background-color: #fff;
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
border-radius: 30rpx;
z-index: 2;
display: flex;
// justify-content: space-evenly;
align-items: center;
flex-direction: column;
position: relative;
.white-content-img {
position: absolute;
top: 90rpx;
left: 50%;
transform: translateX(-50%);
width: 420rpx;
height: 320rpx;
}
.white-content-secondimg {
position: absolute;
top: 20rpx;
left: 34%;
transform: translateX(-34%);
width: 610rpx;
height: 450rpx;
z-index: 1;
}
.white-font {
margin-top: 350rpx;
font-size: 30rpx;
// color: #222222;
}
.second-font {
margin-top: 10rpx;
font-size: 30rpx;
// color: #222222;
}
}
.white-content-father {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30rpx;
z-index: 1;
position: relative;
}
.bottom-text {
font-size: 22rpx;
}
.white-content-father-time {
width: 100%;
display: flex;
justify-content: center;
margin-top: 600rpx;
.white-bgc {
width: 100%;
height: 100%;
background-color: #fff;
padding-left: 50rpx;
display: flex;
align-items: center;
// justify-content: center;
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
border: 2rpx solid #fff;
}
.white-content {
// margin-left: 30rpx;
height: 110rpx;
width: 92%;
overflow: hidden;
// background-repeat: no-repeat;
// background-position: center top;
/* 2. 水平方向拉满容器,垂直方向保持原始比例 */
background-size: 100% auto;
border-radius: 35rpx;
z-index: 2;
}
.white-shu {
height: 100%;
width: 2rpx;
background-color: #fff;
margin: 0 20rpx;
}
}
.bad-button {
width: 100%;
margin-top: 40rpx;
display: flex;
justify-content: flex-end;
.blue-button {
background: linear-gradient(to right, #00C9FF, #0076FF);
color: #fff;
font-size: 25rpx;
padding: 10rpx 20rpx;
border-radius: 35rpx;
margin-right: 40rpx;
}
}
.zhiling-box {
display: flex;
justify-content: space-around;
align-items: center;
width: 92%;
margin-left: 4%;
height: 110rpx;
background-color: #fff;
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
// margin-top: 20rpx;
border-radius: 35rpx;
.zhiling-img {
width: 25rpx;
height: 25rpx;
}
}
.white-box-father {
display: flex;
width: 100%;
flex-wrap: wrap;
// margin-top: 10rpx;
.white-box {
margin-top: 35rpx;
width: 20%;
margin-left: 4%;
height: 220rpx;
background-color: #fff;
border-radius: 35rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
.box-img {
width: 55rpx;
height: 55rpx;
margin-bottom: 25rpx;
}
.box-font {
font-size: 30rpx;
}
}
}
.result {
margin: 0 auto;
}
.jia-box {
position: absolute;
top: 0rpx;
left: 0;
display: flex;
height: 80rpx;
width: 100%;
justify-content: center;
}
.jia {
margin-top: -5rpx;
width: 25rpx;
height: 25rpx;
border-radius: 50%;
// background-color: rgb(1, 168, 255);
background-color: #fff;
// border: 1rpx black solid;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
.jia-img {
width: 18rpx;
height: 18rpx;
z-index: 2;
}
}
.gray-box {
border-radius: 20rpx;
height: 20rpx;
width: 35rpx;
margin-right: 15rpx;
background-color: #fff;
// border: 1rpx black solid;
}
.black-box {
border-radius: 20rpx;
height: 20rpx;
width: 35rpx;
margin-right: 15rpx;
background-color: black;
}
.button-blue {
position: absolute;
bottom: 30rpx;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
height: 90rpx;
border-radius: 37rpx;
background: linear-gradient(to right, #00C9FF, #0076FF);
color: #fff;
font-size: 33rpx;
margin-top: 80rpx;
}
.button-blue-spec {
position: absolute;
bottom: 30rpx;
left: 8%;
width: 40%;
display: flex;
justify-content: center;
align-items: center;
height: 90rpx;
border-radius: 37rpx;
background: linear-gradient(to right, #00C9FF, #0076FF);
color: #fff;
font-size: 33rpx;
margin-top: 80rpx;
}
.button-white-spec {
position: absolute;
bottom: 30rpx;
right: 8%;
width: 40%;
display: flex;
justify-content: center;
align-items: center;
height: 90rpx;
border-radius: 37rpx;
background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
border: 2rpx solid #b1c0ca;
// color: #fff;
font-size: 33rpx;
margin-top: 80rpx;
}
.chuo-img{
position: absolute;
top: 30rpx;
right: 70rpx;
width: 160rpx;
height: 140rpx;
z-index: 3;
}
</style>