495 lines
9.9 KiB
Vue
495 lines
9.9 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="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>
|
|||
|
|
</view>
|
|||
|
|
<image class="big-bgc" src="@/static/kuai.png" v-if="!allitem.nuName" />
|
|||
|
|
<view class="big-img" @click="onScan" v-if="!allitem.nuName">
|
|||
|
|
<image style="width: 100%;height: 100%;" src="@/static/sao.png" />
|
|||
|
|
<view class="big-font">
|
|||
|
|
点击扫描区域二维码
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<image class="big-QR" src="@/static/qr.png" @click="onScan" v-if="!allitem.nuName" />
|
|||
|
|
<view class="index-content-down">
|
|||
|
|
长春市朝阳区久泰开运养老服务有限公司
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, watch, nextTick } from 'vue'
|
|||
|
|
import { getqueryinfoByBuId, updateBaseInfo } from "./api.js"
|
|||
|
|
const goback = () => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
const allitem = ref({})
|
|||
|
|
function onScan() {
|
|||
|
|
uni.scanCode({
|
|||
|
|
// 仅使用相机扫码，设置为 false 则可以从相册选择图片扫码（部分平台可能不支持）
|
|||
|
|
onlyFromCamera: true,
|
|||
|
|
scanType: ['qrCode', 'barCode'],
|
|||
|
|
success(res) {
|
|||
|
|
if (res.result) {
|
|||
|
|
uuid.value = res.result
|
|||
|
|
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'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
console.log("chenggong", res.result)
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
uni.showToast({ title: '扫码失败：' + err.errMsg, icon: 'none' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const uuid = ref("")
|
|||
|
|
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) {
|
|||
|
|
|
|||
|
|
let data = {
|
|||
|
|
id:allitem.value.id,
|
|||
|
|
nuName:savevalue.value
|
|||
|
|
}
|
|||
|
|
console.log("????",data)
|
|||
|
|
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;
|
|||
|
|
isdonghua.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blue-button {
|
|||
|
|
// margin-top: 20rpx;
|
|||
|
|
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: 1800rpx;
|
|||
|
|
height: 900rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.big-img {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 350rpx;
|
|||
|
|
height: 350rpx;
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
animation: scanMove 1.3s ease-in-out infinite;
|
|||
|
|
z-index: 1001;
|
|||
|
|
height: 80rpx; // 尾巴长度
|
|||
|
|
background: linear-gradient(to bottom,
|
|||
|
|
rgba(5, 170, 254, 0.6),
|
|||
|
|
rgba(5, 170, 254, 0.1),
|
|||
|
|
transparent);
|
|||
|
|
will-change: transform;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.big-QR {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 300rpx;
|
|||
|
|
height: 300rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.big-font {
|
|||
|
|
position: absolute;
|
|||
|
|
// bottom: -50rpx;
|
|||
|
|
color: #888A8B;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: -80rpx;
|
|||
|
|
// width: 300rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
// transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 扫描动画关键帧
|
|||
|
|
@keyframes scanMove {
|
|||
|
|
0% {
|
|||
|
|
top: 5%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
top: 95%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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>
|