464 lines
9.4 KiB
Vue
464 lines
9.4 KiB
Vue
<template>
|
||
<view class="index-content-other">
|
||
<view class="index-content-right" @click="goback">
|
||
<image class="back-img" :src="`/static/index/settings/back.png`" />
|
||
返回
|
||
</view>
|
||
<view class="saomiao">
|
||
<view class="big-ball" v-if="!allitem.nuName">
|
||
<view class="ball"></view>
|
||
</view>
|
||
<image class="left-img" src="@/static/click.png" v-if="!allitem.nuName" />
|
||
<input class="saoma-input" :password="false" v-model="uuid" placeholder="请手动录入NUID"
|
||
v-if="!allitem.nuName" />
|
||
<image v-show="uuid" class="right-img" src="@/static/x.png" @click="uuid=''" v-if="!allitem.nuName" />
|
||
<view class="blue-button" @click="search" v-if="!allitem.nuName">
|
||
确定
|
||
</view>
|
||
<view class="card" v-if="allitem.nuName">
|
||
|
||
<view class="main-title">
|
||
<view class="main-title-font" style="font-weight: 600;font-size: 40rpx;">
|
||
{{allitem.nuName}}
|
||
</view>
|
||
<view class="video-father">
|
||
<image class="edit-img" @click="" src="/static/index/leida/play.png" />
|
||
</view>
|
||
|
||
</view>
|
||
<view style="display: flex;justify-content: center;width: 100%;">
|
||
<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 50rpx;"
|
||
@click="allitem={} ">
|
||
关闭
|
||
</view>
|
||
<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 50rpx;" @click="rename()">
|
||
重命名
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-tags">
|
||
<view style="margin-left: 80rpx;">
|
||
NUID:{{allitem.nuId}}
|
||
</view>
|
||
|
||
</view>
|
||
<view class="play-img">
|
||
护理单元
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="popup-any" v-show="isshowchange" :style="isdonghua?{opacity:1}:{opacity:0}">
|
||
<view class="mask" @click="isdonghua=false"></view>
|
||
<view class="rename-father">
|
||
<view class="rename-title">
|
||
重命名
|
||
</view>
|
||
<view style="width: 100%;margin-left: 5rpx;margin-bottom: 20rpx;">
|
||
NUID:{{savenuId}}
|
||
</view>
|
||
<view class="rename-input">
|
||
<input class="uni-input" placeholder="请重新命名" v-model="savevalue" @confirm="changename" />
|
||
<image v-show="savevalue" class="right-img" src="@/static/index/quxiao.png" @click="savevalue=``" />
|
||
</view>
|
||
<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 40rpx;" @click="changename">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image class="big-bgc" src="@/static/bgc.png" />
|
||
<image class="big-img" src="@/static/qiu.png" />
|
||
<view class="index-content-down">
|
||
长春市朝阳区久泰开运养老服务有限公司
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, watch, nextTick, vShow } from 'vue'
|
||
import { defineProps, defineEmits } from 'vue'
|
||
|
||
import { getqueryinfoByBuId,updateBaseInfo } from "./api.js"
|
||
const goback = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
const uuid = ref("");
|
||
const allitem = ref({})
|
||
|
||
const search = () => {
|
||
if (uuid.value) {
|
||
// console.log("rucan",uuid.value)
|
||
getqueryinfoByBuId(uuid.value).then((res : any) => {
|
||
// console.log("zzz",res.result)
|
||
if (res.success) {
|
||
allitem.value = res.result
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
const isshowchange = ref(false)
|
||
const isdonghua = ref(false);
|
||
const savevalue = ref("");
|
||
const savenuId = ref("")
|
||
const rename = () => {
|
||
savevalue.value = allitem.value.nuName;
|
||
savenuId.value = allitem.value.nuId;
|
||
isdonghua.value = false;
|
||
isshowchange.value = true;
|
||
// savevalue.value = ""
|
||
setTimeout(()=>{
|
||
isdonghua.value = true;
|
||
},50)
|
||
// console.log("dianji")
|
||
}
|
||
const changename = () => {
|
||
|
||
if (savevalue.value) {
|
||
console.log("????")
|
||
let data = {
|
||
id:allitem.value.id,
|
||
nuName:savevalue.value
|
||
}
|
||
updateBaseInfo(data).then((res:any)=>{
|
||
if(res.success){
|
||
getqueryinfoByBuId(uuid.value).then((res : any) => {
|
||
// console.log("zzz",res.result)
|
||
if (res.success) {
|
||
allitem.value = res.result;
|
||
isshowchange.value = false
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.index-content-other {
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: opacity 1s ease;
|
||
position: relative;
|
||
background-color: #EFF0F4;
|
||
}
|
||
|
||
.index-content-down {
|
||
// width: calc(100% - 60rpx);
|
||
// height: 100rpx;
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.index-content-right {
|
||
width: 100%;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 100rpx;
|
||
font-size: 32rpx;
|
||
position: relative;
|
||
|
||
.index-content-title {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
left: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.shu {
|
||
width: 20rpx;
|
||
height: 50rpx;
|
||
background: linear-gradient(to right, #0052C2, #00B4FF);
|
||
border-radius: 20rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.shu-font {
|
||
color: #415273;
|
||
font-size: 35rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.saomiao {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
z-index: 1;
|
||
|
||
.saoma-input {
|
||
background-color: #fff;
|
||
width: 550rpx;
|
||
height: 90rpx;
|
||
border-radius: 30rpx;
|
||
padding-left: 100rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.left-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 30rpx;
|
||
transform: translateY(-50%);
|
||
z-index: 3;
|
||
}
|
||
|
||
.right-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 220rpx;
|
||
transform: translateY(-50%);
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.blue-button {
|
||
margin-left: 30rpx;
|
||
width: 170rpx;
|
||
height: 90rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #007CFF;
|
||
font-size: 30rpx;
|
||
background-color: #ddf0ff;
|
||
border: 1rpx solid #007CFF;
|
||
}
|
||
|
||
.big-ball {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -55rpx;
|
||
transform: translateY(-50%);
|
||
border-radius: 50%;
|
||
background-color: rgb(219, 228, 246);
|
||
|
||
.ball {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 50%;
|
||
background-color: rgb(207, 221, 241);
|
||
}
|
||
}
|
||
|
||
.back-img {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-left: 100rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.big-bgc {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 1100rpx;
|
||
height: 1100rpx;
|
||
}
|
||
|
||
.big-img {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 900rpx;
|
||
height: 900rpx;
|
||
}
|
||
|
||
.card {
|
||
width: 600rpx;
|
||
margin-left: 4%;
|
||
height: 450rpx;
|
||
box-shadow: 3rpx 6rpx 12rpx 3rpx rgba(206, 206, 206, 0.5);
|
||
background-color: #f4f5f7;
|
||
border-radius: 30rpx;
|
||
margin-top: 5rpx;
|
||
margin-bottom: 35rpx;
|
||
padding: 0 25rpx;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
|
||
|
||
}
|
||
|
||
.card-title {
|
||
width: 100%;
|
||
height: 130rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.main-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 70rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.video-father {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 15rpx;
|
||
}
|
||
|
||
.edit-img {
|
||
width: 40rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.play-img {
|
||
position: absolute;
|
||
top: 50rpx;
|
||
right: 30rpx;
|
||
width: 130rpx;
|
||
height: 55rpx;
|
||
font-size: 26rpx;
|
||
border-radius: 35rpx;
|
||
border: 2rpx solid #999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-tags {
|
||
position: absolute;
|
||
top: 50rpx;
|
||
left: 0rpx;
|
||
width: 200rpx;
|
||
height: 65rpx;
|
||
font-size: 25rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.popup-any {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 999;
|
||
/* 初始透明度 */
|
||
opacity: 0;
|
||
/* 播放动画：名称 fadeIn，时长 0.5s，缓动函数 ease，保持最后状态 */
|
||
transition: opacity 0.5s ease;
|
||
backdrop-filter: blur(1rpx);
|
||
background-color: rgba(236, 237, 241, 0.4);
|
||
/* 添加毛玻璃效果 */
|
||
z-index: 999;
|
||
}
|
||
|
||
.mask {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
|
||
.rename-father {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 600rpx;
|
||
height: 450rpx;
|
||
border-radius: 30rpx;
|
||
box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
|
||
background-color: #fff;
|
||
display: flex;
|
||
// justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
z-index: 999;
|
||
|
||
.rename-title {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
// border-bottom: 2rpx solid rgb(245, 245, 245);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// margin: 30rpx 0;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.rename-gray {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
// justify-content: center;
|
||
color: rgb(167, 167, 167);
|
||
align-items: center;
|
||
}
|
||
|
||
.rename-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
background-color: rgb(245, 246, 250);
|
||
border-radius: 20rpx;
|
||
color: rgb(167, 167, 167);
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
position: relative;
|
||
|
||
.uni-input {
|
||
font-size: 25rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.left-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.right-img {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |