hldy_app_mini/pages/NursingNew/component/leftcontent/swipes.vue

819 lines
28 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>
<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
<view class="tower-item" :class="item.zIndex<item.max-1?'none':item.zIndex==item.max-1?'no20':'nono'" v-for="(item,index) in swiperList" :key="index"
:style="[{'--index': item.zIndex,'--left':item.mLeft},'left:'+(item.mLeft*20)+'vw','transform:scale('+(item.zIndex==item.max-1?0.7:1)+')']" :data-direction="direction">
<view class="swiper-item">
<image :src="serverUrl + item?.previewFile" mode="aspectFill" ></image>
<!-- <image :src="uni.getStorageSync('imagebase')+item.url" mode="aspectFill" ></image> -->
<!-- <image :src=" item.url" mode="aspectFill" ></image> -->
</view>
</view>
</view>
</view>
</template>
<script >
export default {
props:{
indexmessage:{ }
},
data() {
return {
serverUrl: uni.getStorageSync('imagebase'),
cardCur: 0,
// swiperList: [{
// id: 0,
// type: 'image',
// url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
// }, {
// id: 1,
// type: 'image',
// url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
// }, {
// id: 2,
// type: 'image',
// url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
// }, ],
dotStyle: false,
towerStart: 0,
direction: '',
swiperList:[
{
"id": "2031972207135035393",
"orderNo": "HL101202603120103",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031972202819096577",
"bizId": "2031612800945623041",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428134096899",
"directiveName": "鼻饲喂药",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/协助喂药/鼻饲喂药(2)_1772784662941.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": "床头摇起45度角准备温水.灌注器.药物.匀速灌注.",
"timeoutDuration": "83",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 14:00:00",
"endTime": "2026-03-12 14:15:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 13:55:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031974724057174017",
"orderNo": "HL101202603120112",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031974719414079490",
"bizId": "2031651480573841409",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428117319682",
"directiveName": "肢体障碍(半侧)",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/更换衣物/肢体障碍(半侧)(大体重)(3)_1772781469942.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": null,
"timeoutDuration": "78",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 14:10:00",
"endTime": "2026-03-12 14:25:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:05:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031975982004441089",
"orderNo": "HL101202603120114",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031975977696890882",
"bizId": "2029441180621606914",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428117319682",
"directiveName": "肢体障碍(半侧)",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/更换衣物/肢体障碍(半侧)(大体重)(3)_1772781469942.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": null,
"timeoutDuration": "78",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 14:15:00",
"endTime": "2026-03-12 14:30:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:10:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031975982121881601",
"orderNo": "HL101202603120115",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031975977734639618",
"bizId": "2031650175751032834",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428050210818",
"directiveName": "放松按摩",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/按摩保健/放松按摩(2)_1773033863468.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": "手法放松.舒筋活血.",
"timeoutDuration": "63",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 14:15:00",
"endTime": "2026-03-12 14:30:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:10:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031977240626991106",
"orderNo": "HL101202603120118",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031977236038422529",
"bizId": "2031924117086670850",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428050210818",
"directiveName": "放松按摩",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/按摩保健/放松按摩(2)_1773033863468.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": "手法放松.舒筋活血.",
"timeoutDuration": "63",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 14:20:00",
"endTime": "2026-03-12 14:35:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:15:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031977240744431618",
"orderNo": "HL101202603120119",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031977236071976962",
"bizId": "2031924162750058498",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428188622850",
"directiveName": "被褥调整",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/睡眠照料/体位调整/被褥调整(2)_1772784549145.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": "老人踢蹬被褥,调整被褥",
"timeoutDuration": "96",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 14:20:00",
"endTime": "2026-03-12 14:35:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:15:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031978498582646786",
"orderNo": "HL101202603120123",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031978494283485185",
"bizId": "2029804189525217282",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428117319682",
"directiveName": "肢体障碍(半侧)",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/更换衣物/肢体障碍(半侧)(大体重)(3)_1772781469942.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": null,
"timeoutDuration": "78",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 14:25:00",
"endTime": "2026-03-12 14:40:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:20:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031979756894818306",
"orderNo": "HL101202603120125",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031979752578879489",
"bizId": "2029804201583841281",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428117319683",
"directiveName": "肢体障碍(全测)",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/更换衣物/肢体障碍(全身)(大体重)(2)_1772781479420.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": null,
"timeoutDuration": "79",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 14:30:00",
"endTime": "2026-03-12 14:45:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:25:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031987306633629698",
"orderNo": "HL101202603120132",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031987302334468098",
"bizId": "2031612614764662785",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428050210821",
"directiveName": "遗体净身",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/殡仪服务/遗体净身(2)_1773035098789.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": null,
"timeoutDuration": "66",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 15:00:00",
"endTime": "2026-03-12 15:15:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:55:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
},
{
"id": "2031987306763653122",
"orderNo": "HL101202603120133",
"orderType": "1",
"optType": "1",
"optTypeName": null,
"izTimeout": "N",
"optIds": "2020688543455690753",
"optNames": "滕昊达",
"poolId": "2031987302368022530",
"bizId": "2031652790551449601",
"bizType": null,
"nuId": "2512101009",
"nuName": "护理单元09",
"elderId": "101d827c99cf43b4266925996a0b872f261",
"elderName": "王伟东",
"employeeId": "2020688543455690753",
"employeeName": "滕昊达",
"directiveId": "2021428428125708290",
"directiveName": "轮椅防护",
"cycleTypeId": "1",
"cycleType": "日常",
"cycleValue": null,
"previewFile": "2026/03/directive/护理类/日常照料/轮椅防护/轮椅防护(4)_1772784808001.png",
"previewFileSmall": null,
"mp3File": null,
"mp4File": null,
"serviceDuration": "15",
"serviceContent": "准备好安全带.坐垫..1小内将长者抬起..放松肌肉.",
"timeoutDuration": "81",
"packageId": null,
"packageName": null,
"izPackage": "N",
"tollPrice": null,
"comPrice": null,
"realComPrice": null,
"startTime": "2026-03-12 15:00:00",
"endTime": "2026-03-12 15:15:00",
"startTimeStr": null,
"endTimeStr": null,
"beginEmp": null,
"beginTime": null,
"finishEmp": null,
"finishTime": null,
"izStart": "N",
"izFinish": "N",
"initiatorId": null,
"initiatorName": null,
"createEmp": null,
"createTime": "2026-03-12 14:55:01",
"updateEmp": null,
"updateTime": null,
"delFlag": "0",
"remarks": null,
"workType": null,
"triggerMode": null,
"infoList": null,
"executeStatus": null,
"manuallyPicPath": null,
"manuallyMp4Path": null,
"immediateFile": null,
"immediateFileFocus": null,
"flag": false,
"servebao": [],
"chaoshitime": true
}
]
}
},
created() {
this.TowerSwiper('swiperList');
// 初始化towerSwiper 传已有的数组名即可
console.log(this.indexmessage)
},
methods:{
TowerSwiper(name) {
let list = this[name];
for (let i = 0; i < list.length; i++) {
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
list[i].mLeft = i - parseInt(list.length / 2);
list[i].max = parseInt(list.length / 2) + 1;
}
this.swiperList = list
console.log(this.swiperList)
},
// towerSwiper触摸开始
TowerStart(e) {
this.towerStart = e.touches[0].pageX
},
// towerSwiper计算方向
TowerMove(e) {
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
},
// towerSwiper计算滚动
TowerEnd(e) {
let direction = this.direction;
let list = this.swiperList;
if (direction == 'right') {
let mLeft = list[0].mLeft;
let zIndex = list[0].zIndex;
for (let i = 1; i < this.swiperList.length; i++) {
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
}
this.swiperList[list.length - 1].mLeft = mLeft;
this.swiperList[list.length - 1].zIndex = zIndex;
} else {
let mLeft = list[list.length - 1].mLeft;
let zIndex = list[list.length - 1].zIndex;
for (let i = this.swiperList.length - 1; i > 0; i--) {
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
}
this.swiperList[0].mLeft = mLeft;
this.swiperList[0].zIndex = zIndex;
}
this.direction = ""
this.swiperList = this.swiperList
},
}
}
</script>
<style>
.tower-swiper .tower-item {
/* transform: scale(calc(0.5 + var(--index) / 10)); */
/* margin-left: calc(var(--left) * 100rpx - 150rpx); */
z-index: var(--index);
}
</style>
<style lang="less" scoped>
.swiper-item image,
.swiper-item video {
width: 100%;
display: block;
height: 100%;
margin: 0;
pointer-events: none;
border-radius: 30rpx;
overflow: hidden;
}
.tower-swiper {
position: relative;
width:42vw;
height: 24vw;
margin: 0 auto;
left: -1vw;
}
.tower-swiper .tower-item {
position: absolute;
width: 25.4vw;
height: 24.4vw;
top: 0;
bottom: 0;
left: 0%;
right: 0;
margin: auto;
transition: all 0.2s ease-in 0s;
opacity: 1;
}
.tower-swiper .tower-item.none {
opacity: 0;
}
.no20{
opacity:0.2 !important;
// filter: blur(4px);
}
.nono{
margin-left: 1.5vw;
}
.tower-swiper .tower-item .swiper-item {
width: 100%;
height: 100%;
border-radius: 16rpx;
overflow: hidden;
}
</style>