This commit is contained in:
Teng 2026-01-29 17:31:41 +08:00
commit 061528a711
5 changed files with 588 additions and 195 deletions

View File

@ -7,10 +7,14 @@
{{ Math.floor(bottomTime / 60) }}
</view>
<view class="flip_back child text" :style="backZindex&&transformInfomin ? { zIndex: backZindex } : {}" id="flip_back" >
{{ Math.floor(topTime / 60) }}
{{ Math.floor(topTime / 60) }}
<text>MIN</text>
</view>
</view>
<view class="bottom child text" id="bottom" >
{{ Math.floor(bottomTime / 60) }}
<text>MIN</text>
</view>
</view>
<view class="bottom child text" id="bottom" >{{ Math.floor(bottomTime / 60) }}</view>
</view>
:
<view class="box" id="box_minute" :class="!isDown?'red':''">
@ -21,9 +25,13 @@
</view>
<view class="flip_back child text" :style="backZindex ? { zIndex: backZindex } : {}" id="flip_back" >
{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}
<text >SEC</text>
</view>
</view>
<view class="bottom child text" id="bottom">{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60) }}</view>
<view class="bottom child text" id="bottom">
{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60) }}
<text >SEC</text>
</view>
</view>
</view>
</template>
@ -36,21 +44,21 @@ export default {
type: Number,
default:185,
},
// isDown: {
// //
// type: Boolean,
// default: true,
// },
threshold: {
//
type: Number,
default: 0,
},
timeoutDuration:{
//
type: Number,
default: 0,
}
},
data() {
return {
topTime: this.initTime,
bottomTime: this.initTime,
topTime: Math.abs(this.initTime),
bottomTime: Math.abs(this.initTime),
faceZindex: 1,
backZindex: 0,
transformInfo: "perspective(500rpx) rotateX(0deg)",
@ -85,12 +93,11 @@ export default {
clearInterval(this.timer);
return;
}
if (num === 1) {
if (this.isDown) {
this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 0
this.mintime = Math.floor(this.topTime / 60)
if(minutes != this.mintime ){
if(minutes != this.mintime &&!this.transformInfomin){
this.transformInfomin = true;
}else{
this.transformInfomin = false;
@ -98,7 +105,7 @@ export default {
} else {
this.topTime = n + 1 > this.threshold ? n : n + 1;
this.mintime = Math.floor(this.topTime / 60)
if(minutes != this.mintime ){
if(minutes != this.mintime &&!this.transformInfomin){
this.transformInfomin = true;
}else{
this.transformInfomin = false;
@ -106,16 +113,17 @@ export default {
}
}
this.faceZindex = num <= 10 ? 1 : 0;
this.backZindex = num <= 10 ? 0 : 1;
this.faceZindex = num <= 25? 1 : 0;
this.backZindex = num <= 25? 0 : 1;
this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) / 50}deg)`;
},5); // 50
},10); // 50
},
cycle() {
let minutes = Math.floor(this.initTime / 60);
let time = this.initTime;
this.isDown = this.initTime>0?true:false
let time = Math.abs(this.initTime);
// console.log(minutes,time)
this.timerTwo = setInterval(() => {
const flag = this.isDown ? time - 1 : time + 1;
@ -124,6 +132,11 @@ export default {
// clearInterval(this.timerTwo);
// clearInterval(this.timer);
}
if(flag == this.timeoutDuration){
clearInterval(this.timerTwo);
clearInterval(this.timer);
this.$emit('timeend')
}
this.OneCycle(time);
this.isDown ? time-- : time++;
}, 1000);
@ -145,14 +158,14 @@ export default {
}
.box .child {
width: 3.4vw;
height: 1.6vw;
min-width: 3.4vw;
height: 2vw;
overflow: hidden;
}
.box > .top {
background-color: #DCDCDC;
line-height: 3.2vw;
line-height: 4vw;
border-bottom: 2rpx solid #fff;
border-radius: 4rpx 4rpx 0 0;
}
@ -168,7 +181,7 @@ export default {
.box .flip .flip_face {
position: absolute;
background-color: #DCDCDC;
line-height: 3.2vw;
line-height: 4vw;
z-index: 1;
border-bottom: 2rpx solid #fff;
}
@ -193,5 +206,15 @@ export default {
font-size: 2.2vw;
font-weight: 900;
color: #666;
position: relative;
>text{
position: absolute;
width: 100%;
text-align: center;
bottom: 0vw;
line-height:1vw;
left: 0;
font-size: 0.3vw;
}
}
</style>

View File

@ -1,149 +1,212 @@
<template>
<view>
<view class="fixed-card" :style="openleft?{}:{right:`-34vw`}" >
<view class="fixed-card-left">
<image class="card-left-img"
:src="qcobj?.previewFile? serverUrl + qcobj?.previewFile: `/static/index/newindex/wendu/2.png`" mode="aspectFill"/>
<view class="">
{{qcobj.directiveName}}
</view>
<view v-if="flag">
<view class="fixed-card" :style="openleft?{}:{right:`-34vw`}">
<view class="btn les" @click="swip(-1)" v-if="plsbuy.length>1" >
<image class="pao-img" :src="`/static/index/newindex/states/ris.png`"
style="transform: rotate(180deg);" />
</view>
<view style="height: 78%;">
<view class="big-time">
<view>
{{qcobj.startTime?.slice(11, 16) }}
<!-- - {{qcobj.endTime?.slice(11, 16) }} -->
</view>
<view>
<timeing></timeing>
</view>
</view>
<view class="names">
{{ qcobj?.directiveName }}
</view>
<view class="icon-people">
<image class="people-img" src="/static/index/newindex/leftmenu/iconleft.png" />
<text v-if="qcobj.optType == 1" style="white-space: nowrap;">单人执行</text>
<text v-if="qcobj.optType == 2" style="white-space: nowrap;">协助执行</text>
<image style="margin-left: 1vw;" class="people-img"
src="/static/index/newindex/leftmenu/iconright.png" />
<text v-if="qcobj.optType == 1">{{qcobj.employeeName}}</text>
<text v-if="qcobj.optType == 2">{{qcobj.optNames}}</text>
</view>
<view class="icon-button">
<view class="" :class="qcobj.izStart=='N'?'button-right':'button-left'" @click="start()">
开始服务
</view>
<view :class="(qcobj.izFinish=='N'&&qcobj.izStart=='Y')?'button-right':'button-left'" @click="end()">
结束服务
</view>
</view>
<view class="btn ris" @click="swip(1)"v-if="plsbuy.length>1" >
<image class="pao-img" :src="`/static/index/newindex/states/ris.png`" />
</view>
<view class="bots" v-if="plsbuy.length>1" >
<view v-for="(v,i) in plsbuy" :key='i' :class="current==i?'dot':''"></view>
</view>
<swiper class="swiper" :circular="true" :indicator-dots="false" easing-function="easeInOutCubic"
:autoplay="false" :interval="3000" :duration="500" :current="current" @change="change">
<swiper-item v-for="(qcobj,i) in plsbuy" :key="i" class="swper">
<view class="fixed-card-left">
<image class="card-left-img" v-if="qcobj.izPackage=='Y' "src="/static/zlb.png" mode="aspectFill" />
<image class="card-left-img" v-if="qcobj.izPackage=='N'" :src="qcobj?.previewFile? serverUrl + qcobj?.previewFile: `/static/index/newindex/wendu/2.png`"
mode="aspectFill" />
<view >
{{qcobj.directiveName}}
</view>
</view>
<view style="height: 78%;">
<view class="big-time">
<view>
{{qcobj.startTime?.slice(11, 16) }}
<!-- - {{qcobj.endTime?.slice(11, 16) }} -->
</view>
<view>
<timeing v-if="current==i&&qcobj?.izStart=='Y'" :initTime="djstinme" :timeoutDuration="Number(qcobj.timeoutDuration)" @timeend="timeend"></timeing>
</view>
</view>
<view class="names">
{{ qcobj?.directiveName }}
</view>
<view class="icon-people">
<image class="people-img" src="/static/index/newindex/leftmenu/iconleft.png" />
<text v-if="qcobj.optType == 1" style="white-space: nowrap;">单人执行</text>
<text v-if="qcobj.optType == 2" style="white-space: nowrap;">协助执行</text>
<image style="margin-left: 1vw;" class="people-img"
src="/static/index/newindex/leftmenu/iconright.png" />
<text v-if="qcobj.optType == 1">{{qcobj.employeeName}}</text>
<text v-if="qcobj.optType == 2">{{qcobj.optNames}}</text>
</view>
<view class="icon-button">
<view class="" :class="qcobj.izStart=='N'?'button-right':'button-left'" @click="start()">
开始服务
</view>
<view :class="(qcobj.izFinish=='N'&&qcobj.izStart=='Y')?'button-right':'button-left'"
@click="end()">
结束服务
</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="left-open" @click="openleft = !openleft">
<image :style="openleft?{}:{transform: `rotate(180deg)`}" class="open-img"
src="/static/index/newindex/leftmenu/openleft.png" />
</view>
</view>
<tanchuang :show="open>0" font="是否结束服务指令?" @back="open = 0" @right="ends()"> </tanchuang>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent,watch } from 'vue';
import { queryOrderlist,startDirectiveServe,finishDirectiveServe,queryOrderInfoList } from '@/pages/procurement/api/lunpan.js'
import { startOrder,endOrder,editSubPicPath,editSubMp4,queryEmpList,transferOrder,assistOrder} from '@/pages/NursingNew/component/doctorask/api/api.js'
import timeing from './newgame/sxy-Timeing.vue'
const qcobj = ref({})
const openleft = ref(true)
const open = ref(0);
const zdcont = ref('');
const serverUrl = ref(uni.getStorageSync('imagebase'))
const emit = defineEmits([ 'start' ,'end'])
const form = reactive({
pageNo: 1,
pageSize: 10,
employeeId:uni.getStorageSync('userInfo').employessId,
nuId:uni.getStorageSync('nuId'),
workType:2
})
onMounted(()=>{
firstgetqueryCgdList()
})
const firstgetqueryCgdList = () => {
queryOrderlist(form).then(res => {
if(res.result.records.length>0){
qcobj.value = res.result.records[0];
openleft.value = qcobj.value.izStart=='Y'?true:false;
// clickLeftMenu(0,res.result.records[0])
}else{
qcobj.value = {};
}
})
}
const clickLeftMenu = (index : any, item : object) => {
queryOrderInfoList({ mainId: item.id }).then(res => {
if(res.result.length>0){
qcobj.value = res.result[0];
openleft.value = qcobj.value.izStart=='Y'?true:false;
}else{
qcobj.value = {};
}
})
}
const start = () => {
if(qcobj.value.izStart!='N'){return}
startOrder({ id: qcobj.value.id }).then(res => {
if (res.success) {
qcobj.value.izStart = 'Y';
clickLeftMenu(0,{id:qcobj.value.mainId})
} else {
uni.showToast({
icon: 'none',
title: res.message
})
}
})
}
// const end = () => {
// if(qcobj.value.izFinish!='N'&&qcobj.value.izStart!='Y'){return}
// finishDirectiveServe({ id: qcobj.value.id }).then(res => {
// if (res.success) {
// qcobj.value.izFinish = 'Y';
// firstgetqueryCgdList()
// } else {
// uni.showToast({
// icon: 'none',
// title: res.message
// })
// }
// })
// }
const end = ()=>{
if(qcobj.value.izStart=='Y'&& qcobj.value.izFinish=='N'){
open.value=3;
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, watch } from 'vue';
import { queryOrderlist, startDirectiveServe, finishDirectiveServe, queryOrderInfoList } from '@/pages/procurement/api/lunpan.js'
import { startOrder, endOrder, editSubPicPath, editSubMp4, queryEmpList, transferOrder, assistOrder } from '@/pages/NursingNew/component/doctorask/api/api.js'
import timeing from './newgame/sxy-Timeing.vue'
const flag = ref(false)
const qcobj = ref({})
const openleft = ref(true)
const open = ref(0);
const zdcont = ref('');
const serverUrl = ref(uni.getStorageSync('imagebase'))
const emit = defineEmits(['start', 'end'])
const form = reactive({
pageNo: 1,
pageSize: 10,
employeeId: uni.getStorageSync('userInfo').employessId,
nuId: uni.getStorageSync('nuId'),
workType: 2
})
onMounted(() => {
firstgetqueryCgdList()
})
const swip = (e) => {
if (current.value == 0 && e == -1) {
current.value = 4
return
}
if (current.value == 4 && e == 1) {
current.value = 0
return
}
current.value += e;
}
const ends = ()=>{
endOrder({id:qcobj.value.id}).then(res=>{
if(res.success){
open.value=0;
firstgetqueryCgdList()
}else{
const current = ref(0)
const change = (e) => {
current.value = e.detail.current;
plsbuy.value.forEach((v, i) => {
if (i != current.value && v.izPackage == 'Y') {
v.flag = false
}
})
if (plsbuy.value[current.value].izStart == 'Y' && plsbuy.value[current.value].izFinish == 'N') {
timeacde()
}
}
const timeend = () =>{
//
firstgetqueryCgdList()
}
const djstinme = ref(0)
const timeacde = () => {
let obj = plsbuy.value[current.value];
let timestampMs = new Date(obj.endTime).getTime();
let times = new Date().getTime();
let djs = timestampMs - times;
// let timeendamp = timestampMs + (Number(plsbuy.value[current.value].timeoutDuration)*60);
console.log(timestampMs, '结束时间戳')
console.log(times, '当前时间戳')
console.log(Math.round(djs / 1000), '倒计时时间戳')
djstinme.value = Math.round(djs / 1000)
}
const plsbuy = ref([])
const firstgetqueryCgdList = () => {
queryOrderlist(form).then(res => {
plsbuy.value = res.result.records
plsbuy.value.forEach((item, i) => {
console.log(item)
if (item.izStart == 'Y'&&flag.value == false) {
openleft.value = true;
flag.value = true;
current.value = i;
change({detail:{current:current.value}})
}
})
// clickLeftMenu(0,res.result.records[0])
})
}
const clickLeftMenu = (index : any, item : object) => {
queryOrderInfoList({ mainId: item.id }).then(res => {
if (res.result.length > 0) {
qcobj.value = res.result[0];
openleft.value = qcobj.value.izStart == 'Y' ? true : false;
} else {
qcobj.value = {};
}
})
}
const start = () => {
if (qcobj.value.izStart != 'N') { return }
startOrder({ id: qcobj.value.id }).then(res => {
if (res.success) {
qcobj.value.izStart = 'Y';
clickLeftMenu(0, { id: qcobj.value.mainId })
} else {
uni.showToast({
icon: 'none',
title: res.message
})
}
})
}
// const end = () => {
// if(qcobj.value.izFinish!='N'&&qcobj.value.izStart!='Y'){return}
// finishDirectiveServe({ id: qcobj.value.id }).then(res => {
// if (res.success) {
// qcobj.value.izFinish = 'Y';
// firstgetqueryCgdList()
// } else {
// uni.showToast({
// icon: 'none',
// title: res.message
// })
// }
// })
// }
const end = () => {
if (qcobj.value.izStart == 'Y' && qcobj.value.izFinish == 'N') {
open.value = 3;
}
}
const ends = () => {
endOrder({ id: qcobj.value.id }).then(res => {
if (res.success) {
open.value = 0;
firstgetqueryCgdList()
} else {
}
})
}
defineExpose({
firstgetqueryCgdList
firstgetqueryCgdList
})
</script>
<style lang="less" scoped>
.left-open {
.left-open {
position: absolute;
left: -1.5vw;
top: 50%;
@ -158,58 +221,120 @@
justify-content: center;
align-items: center;
transition: all 0.5s ease;
.open-img {
width: 3vw;
height: 3vw;
}
}
.fixed-card {
position: fixed;
right: 1vw;
top: 2vh;
width: 35vw;
height: 28vh;
height: 17.5vw;
background-color: rgba(239, 246, 255, 0.95);
border-radius: 1.5vw;
border: 1rpx solid #638DFF;
box-shadow: 0 2rpx 6rpx #A0B9FF;
display: flex;
align-items: center;
transition: all 0.5s ease;
z-index: 999;
.bots {
width: 60%;
position: absolute;
height: 30rpx;
bottom: 2.2vw;
left: 20%;
display: flex;
justify-content: center;
view {
width: 1.3vw;
height: 0.6vw;
background: #DCDCDC;
border-radius: 0.2vw;
margin: 0.7vw;
}
.dot {
background: #0193F4;
}
}
.btn {
width: 2.4vw;
height: 2.4vw;
background: #F8F8F8;
border-radius: 50%;
position: absolute;
top:6.4vw;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
image {
width: 60%;
height: 60%;
}
}
.les {
left: 0.5vw;
}
.ris {
right: 0.5vw;
}
.swiper{
width: 100%;
height: 100%;
.swper{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
}
}
.fixed-card-left {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 2vw;
.card-left-img {
width: 12vw;
height: 8vw;
width: 9vw;
height: 8.7vw;
margin-bottom: 0.5vw;
}
}
.names{
.names {
font-weight: 400;
font-size: 1.5vw;
color: #333333;
margin-top: 1.4vw;
padding-left: 1vw;
}
.big-time {
font-weight: 600;
font-size: 2.3vw;
font-weight: 800;
font-size: 2.6vw;
padding-left: 1vw;
width: 18vw;
display: flex;
justify-content: space-between;
align-items: center;
>view{
>view {
display: flex;
align-items: center;
}
}
.icon-people {
display: flex;
margin: 0.3vw 0;
@ -217,6 +342,7 @@
width: 18vw;
padding-left: 1vw;
white-space: nowrap;
.people-img {
width: 1.5vw;
height: 1.5vw;
@ -224,14 +350,14 @@
margin-top: 0.1vw;
}
}
.icon-button {
display: flex;
margin-top: 1vw;
font-size: 1.5vw;
width: 18vw;
justify-content: space-around;
.button-left {
width: 8vw;
height: 3.3vw;
@ -242,21 +368,19 @@
border-radius: 1.2vw;
border: 1rpx solid #C7D2E4;
color: #333333;
}
.button-right {
width: 8vw;
height: 3.3vw;
background-color: #fff;
background: linear-gradient(to bottom, #009DEF, #0076FF);
display: flex;
justify-content: center;
align-items: center;
border-radius: 1.2vw;
border: 1rpx solid #5AAEFF;
color: #249BFA;
background: linear-gradient(to bottom, #fff, #D1EAFF);
color: #fff;
}
}
}
</style>
</style>

View File

@ -17,17 +17,19 @@
<view class="photo-father">
<!-- {filter: `grayscale(60%)`} -->
<view class="juzhong" :style="indexmessage?.startTime?{}:''">
<donghua :width="`1300rpx`" :height="`900rpx`" :links="blueArray" :playing="photoplay"
<donghua :width="`1000rpx`" :height="`700rpx`" :links="blueArray" :playing="current==i"
:loop="true" :interval="120" />
</view>
<view class="timedjs">
<text>服务倒计时</text>
<timeing></timeing>
<timeing v-if="current==i&&indexmessage?.izStart=='Y'" :initTime="djstinme" :timeoutDuration="Number(indexmessage.timeoutDuration)" @timeend="timeend"></timeing>
</view>
<view class="weight-time">
<view>
{{ indexmessage?.startTime.slice(11, 16) }}
<text style="font-size: 1.5vw;font-weight: 400;">|&nbsp; 30分钟</text>
<text style="font-size: 1.8vw;font-weight: 500;" v-if="indexmessage?.serviceDuration">
|&nbsp; {{indexmessage?.serviceDuration}}分钟
</text>
</view>
<view style="height: 4vw;"> </view>
<view class="pao-father">
@ -98,28 +100,28 @@
<view class="left-menu">
<view @click="errmsgclk(0,1,indexmessage)">
<view class="left-ball"
:style="indexmessage?.serviceContent!=''?' ':'opacity: 0.5'">
:style="indexmessage?.serviceContent!=''?' ':'opacity: 0.4'">
<image class="left-menu-img"
:src="'/static/index/newindex/leftmenu/left'+0+'.png'" />
</view>
</view>
<view @click="errmsgclk(1,1,indexmessage)">
<view class="left-ball"
:style="indexmessage?.mp3File!=''?' ':'opacity: 0.5'">
:style="indexmessage?.mp3File!=''?' ':'opacity: 0.4'">
<image class="left-menu-img"
:src="'/static/index/newindex/leftmenu/left'+1+'.png'" />
</view>
</view>
<view @click="errmsgclk(2,1,indexmessage)" >
<view class="left-ball"
:style="indexmessage?.mp4File!=''?' ':'opacity: 0.5'">
:style="indexmessage?.mp4File!=''?' ':'opacity: 0.4'">
<image class="left-menu-img"
:src="'/static/index/newindex/leftmenu/left'+2+'.png'" />
</view>
</view>
<view v-for="(item,index) in [3,4]" :key="index" @click="errmsgclk(item,2,indexmessage)">
<view class="left-ball"
:style="indexmessage?.izStart=='Y'?' ':'opacity: 0.5'">
:style="indexmessage?.izStart=='Y'?' ':'opacity: 0.4'">
<image class="left-menu-img"
:src="'/static/index/newindex/leftmenu/left'+item+'.png'" />
</view>
@ -128,11 +130,10 @@
<view class="right-menu">
<view class="zhezhao-top"></view>
<view class="zhezhao-bottom"></view>
<image class="top-img" :src="`/static/index/newindex/rightmenu/top.png`" />
<!-- <image class="top-img" :src="`/static/index/newindex/rightmenu/top.png`" /> -->
<view class="right-scroll">
<view style="margin:1.5vw 0;width: 4vw;margin-left: 20rpx;" @click="zhixing(1,indexmessage)">
<view class="white-circle"
:style="indexmessage?.izStart=='Y'?'opacity: 0.7' : ''">
<view class="white-circle" :style="indexmessage?.izStart=='Y'?'opacity: 0.4' : ''">
<image class="right-menu-img" :src="'/static/index/newindex/rightmenu/1.png'" />
<view class="right-menu-name">
转单执行
@ -148,7 +149,7 @@
</view>
</view>
</view>
<image class="top-img" :src="`/static/index/newindex/rightmenu/bottom.png`" />
<!-- <image class="top-img" :src="`/static/index/newindex/rightmenu/bottom.png`" /> -->
</view>
</view>
@ -264,7 +265,7 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
import { onBackPress, onShow, onHide } from "@dcloudio/uni-app"
import timeing from '@/component/public/newgame/sxy-Timeing.vue'
import timeing from './sxy-Timeing.vue'
import { queryOrderList, queryOrderInfoList, startOrder, endOrder, editSubPicPath, editSubMp4, queryEmpList, transferOrder, assistOrder, generateInstant } from '../../component/doctorask/api/api.js'
const open = ref(0)
const donghuaopo = ref(false);
@ -284,12 +285,31 @@
init
})
const change = (e) => {
current.value = e.detail.current
current.value = e.detail.current;
plsbuy.value.forEach((v,i)=>{
if(i!=current.value&&v.izPackage=='Y'){
v.flag = false
}
})
if(plsbuy.value[current.value].izStart=='Y'&&plsbuy.value[current.value].izFinish=='N'){
timeacde()
}
}
const djstinme = ref(0)
const timeacde = ()=>{
let obj = plsbuy.value[current.value];
let timestampMs = new Date(obj.endTime).getTime();
let times = new Date().getTime();
let djs = timestampMs - times;
// let timeendamp = timestampMs + (Number(plsbuy.value[current.value].timeoutDuration)*60);
console.log(timestampMs,'结束时间戳')
console.log(times,'当前时间戳')
console.log(Math.round(djs/1000),'倒计时时间戳')
djstinme.value = Math.round(djs/1000)
}
const timeend = () =>{
//
firstgetqueryCgdList(form.nuId)
}
const swip = (e) => {
if (current.value == 0 && e == -1) {
@ -431,11 +451,13 @@
const firstgetqueryCgdList = (nuId) => {
form.nuId = nuId;
queryOrderList(form).then(res => {
console.log(res.result.records)
if (res.result.records.length > 0) {
res.result.records.forEach(item=>{
item.flag = false
})
plsbuy.value = res.result.records
plsbuy.value = res.result.records;
change({detail:{current:current.value}})
// indexmessage.value = res.result.records[0]
// clickLeftMenu(0,res.result.records[0])
} else {
@ -794,7 +816,7 @@
.btn {
width: 2.4vw;
height: 2.4vw;
background: #E9EAED;
background: #F8F8F8;
border-radius: 50%;
position: absolute;
top: 36vh;
@ -876,7 +898,7 @@
.timedjs {
position: absolute;
width: 7vw;
right: 4vw;
right: 5.2vw;
top: 0vw;
display: flex;
flex-direction: column;
@ -892,9 +914,9 @@
.juzhong {
position: absolute;
top: 0%;
top: 15%;
left: 50%;
transform: translate(-50%, -20%);
transform: translate(-50%, -25%);
z-index: -1;
}
@ -902,7 +924,7 @@
width: 40vw;
height: 30vh;
position: relative;
top: -5vh;
top: -3vh;
z-index: 55;
left: 2vw;
@ -1053,8 +1075,8 @@
.pao-father {
position: absolute;
top: -20rpx;
right: -110rpx;
top: -12rpx;
right: -99rpx;
font-size: 22rpx;
width: 100rpx;
height: 50rpx;
@ -1072,14 +1094,13 @@
}
}
.left-menu {
position: absolute;
top: 40%;
left:6vw;
top: 37%;
left:5.3vw;
transform: translateY(-50%);
>view{
margin: 1.1vw 0;
margin: 0.8vw 0;
}
}
@ -1090,8 +1111,8 @@
}
.left-ball {
width: 80rpx;
height: 80rpx;
width: 3.6vw;
height: 3.6vw;
border-radius: 50%;
display: flex;
justify-content: center;
@ -1107,7 +1128,7 @@
.right-menu {
position: absolute;
top: 43%;
top: 40%;
right: 6vw;
transform: translateY(-50%);
display: flex;

View File

@ -0,0 +1,225 @@
<template>
<view style="display: flex;align-items: center;" :class="!isDown?'red':''">
<view class="box" id="box_minute" @click="chongzhi()">
<view class="top child text" id="top" >{{ Math.floor(topTime / 60) }}</view>
<view class="flip child" id="flip" :style="{ transform: transformInfomin?transformInfo:'' }">
<view class="flip_face child text" :style="{ zIndex: faceZindexmin || 0 }" id="flip_face" >
{{ Math.floor(bottomTime / 60) }}
</view>
<view class="flip_back child text" :style="backZindex&&transformInfomin ? { zIndex: backZindex } : {}" id="flip_back" >
{{ Math.floor(topTime / 60) }}
<text>MIN</text>
</view>
</view>
<view class="bottom child text" id="bottom" >
{{ Math.floor(bottomTime / 60) }}
<text>MIN</text>
</view>
</view>
<text style="color: #959595;font-size: 1.9vw;padding: 0 5rpx;">:</text>
<view class="box" id="box_minute" :class="!isDown?'red':''">
<view class="top child text" id="top">{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}</view>
<view class="flip child" id="flip" :style="{ transform: transformInfo }" >
<view class="flip_face child text" :style="{ zIndex: faceZindex || 0 }" id="flip_face" >
{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60)}}
</view>
<view class="flip_back child text" :style="backZindex ? { zIndex: backZindex } : {}" id="flip_back" >
{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}
<text >SEC</text>
</view>
</view>
<view class="bottom child text" id="bottom">
{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60) }}
<text >SEC</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
initTime: {
//
type: Number,
default:185,
},
// isDown: {
// //
// type: Boolean,
// default: true,
// },
threshold: {
//
type: Number,
default: 0,
},
timeoutDuration:{
//
type: Number,
default: 0,
}
},
data() {
return {
topTime: Math.abs(this.initTime),
bottomTime: Math.abs(this.initTime),
faceZindex: 1,
backZindex: 0,
transformInfo: "perspective(500rpx) rotateX(0deg)",
transformInfomin: false,
faceZindexmin: 1,
backZindexmin: 0,
mintime:0,
timer: null,
timerTwo: null,
isDown:true
};
},
mounted() {
this.cycle();
},
methods: {
OneCycle(n) {
//
let num = 0;
this.transformInfo = "perspective(500rpx) rotateX(0deg)";
this.faceZindex = 1;
this.backZindex = 0;
this.bottomTime = this.isDown? n : n-1;
let minutes = Math.floor(n / 60);
if (this.timer) {
clearInterval(this.timer);
}
this.timer = setInterval(() => {
num++;
if (num > 50) {
num = 0;
clearInterval(this.timer);
return;
}
if (num === 1) {
if (this.isDown) {
this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 0
this.mintime = Math.floor(this.topTime / 60)
if(minutes != this.mintime &&!this.transformInfomin){
this.transformInfomin = true;
}else{
this.transformInfomin = false;
}
} else {
this.topTime = n + 1 > this.threshold ? n : n + 1;
this.mintime = Math.floor(this.topTime / 60)
if(minutes != this.mintime &&!this.transformInfomin){
this.transformInfomin = true;
}else{
this.transformInfomin = false;
}
}
}
this.faceZindex = num <= 25? 1 : 0;
this.backZindex = num <= 25? 0 : 1;
this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) / 50}deg)`;
},10); // 50
},
cycle() {
let minutes = Math.floor(this.initTime / 60);
this.isDown = this.initTime>0?true:false
let time = Math.abs(this.initTime);
// console.log(minutes,time)
this.timerTwo = setInterval(() => {
const flag = this.isDown ? time - 1 : time + 1;
if (flag === this.threshold) {
this.isDown = false
// clearInterval(this.timerTwo);
// clearInterval(this.timer);
}
if(flag == this.timeoutDuration&&this.isDown == false){
clearInterval(this.timerTwo);
clearInterval(this.timer);
this.$emit('timeend')
}
this.OneCycle(time);
this.isDown ? time-- : time++;
}, 1000);
},
},
};
</script>
<style scoped lang="less">
.red{
color: red !important;
view{
color: red !important;
}
}
.box {
position: relative;
box-sizing: border-box;
}
.box .child {
min-width: 5.1vw;
height: 2.5vw;
overflow: hidden;
}
.box > .top {
background-color: #eaeaea;
line-height: 5vw;
border-bottom: 2rpx solid #fff;
border-radius: 4px 4px 0 0;
}
.box .flip {
position: absolute;
top: 0rpx;
z-index: 1;
transform-origin: bottom;
border-radius: 4rpx 4rpx 0 0;
}
.box .flip .flip_face {
position: absolute;
background: #eaeaea;
line-height: 5vw;
z-index: 1;
border-bottom: 2rpx solid #fff;
}
.box .flip .flip_back {
position: absolute;
background-color: #eaeaea;
line-height: 0rpx;
transform: perspective(500rpx) rotateX(0deg) rotateY(-180deg) rotate(180deg);
border-top: 2rpx solid #fff;
}
.box .bottom {
background-color: #f4f4f4;
line-height: 0rpx;
border-top: 1rpx solid #fff;
border-radius: 0 0 4px 4px;
}
.text {
text-align: center;
font-size: 3.4vw;
font-weight: 900;
color: #666;
position: relative;
>text{
position: absolute;
width: 100%;
text-align: center;
bottom: 0vw;
line-height:1vw;
left: 0;
font-size: 0.7vw;
}
}
</style>

View File

@ -527,7 +527,7 @@
height: 100vh;
overflow: hidden;
z-index: 99;
background-color: #F2F3F8;
background-color: #f4f4f4;
}
.nomessageclass {