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> |