You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
279 lines
8.2 KiB
279 lines
8.2 KiB
<!-- 智慧模式 --> |
|
<template> |
|
<div class="smart-wrapper"> |
|
<div class="swiper swiper-container"> |
|
<div class="swiper-wrapper"> |
|
<div class="swiper-slide" v-for="(item, index) in modeList"> |
|
<div class="swiper-item"> |
|
{{ item.name }} |
|
</div> |
|
</div> |
|
</div> |
|
<div class="select-wrapper"> |
|
<img src="@/assets/imgs/device-detail/smart-mode/select@2x.png"> |
|
</div> |
|
</div> |
|
|
|
<!-- 底部 --> |
|
<div class="smart-btm"> |
|
<div class="illustrate"> |
|
<img src="@/assets/imgs/device-detail/smart-mode/illustrate@2x.png"> |
|
</div> |
|
<div class="switch-btn-container"> |
|
<div class="switch-btn" @click="changeSwitch()"> |
|
<img :src="getImgSrc(onOffImg)" alt=""> |
|
</div> |
|
<div class="btn-text">开关</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { ref, toRefs, onMounted, onActivated, nextTick } from 'vue'; |
|
import { Swiper, Navigation, Pagination } from "swiper"; |
|
import "swiper/swiper-bundle.css"; |
|
import { SmartModeEnum } from './enmu/smart-mode'; |
|
import { $commonService } from '@/services/framework/dependency-injection-service'; |
|
|
|
const getImgSrc = $commonService.$imgService.getImgSrc; |
|
let mySwiper: Swiper; // 声明swiper |
|
/** 智慧模式数组 */ |
|
const modeList = ref<any[]>([ |
|
{ |
|
id: SmartModeEnum.COLD, |
|
name: '偏冷' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cold@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cold@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.COOL, |
|
name: '凉爽' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cool@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cool@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.COMFORT, |
|
name: '舒适' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_comfort@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_comfort@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.WARM, |
|
name: '温暖' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_warm@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_warm@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.HOT, |
|
name: '偏热' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_hot@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_hot@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.COLD, |
|
name: '偏冷' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cold@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cold@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.COOL, |
|
name: '凉爽' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cool@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cool@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.COMFORT, |
|
name: '舒适' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_comfort@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_comfort@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.WARM, |
|
name: '温暖' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_warm@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_warm@2x.png' |
|
}, |
|
{ |
|
id: SmartModeEnum.HOT, |
|
name: '偏热' , |
|
bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_hot@2x.png', |
|
onOffImg: '/assets/imgs/device-detail/smart-mode/switch_hot@2x.png' |
|
}, |
|
]) |
|
/** 传参 */ |
|
const props = defineProps<{ |
|
/** 开关机状态 */ |
|
ifRun: boolean; |
|
/** 当前智慧模式 */ |
|
mode: number; |
|
}>() |
|
const { ifRun, mode } = toRefs(props); |
|
/** 开关机状态 */ |
|
const onOff = ref(ifRun); |
|
/** 开关机图片 */ |
|
const onOffImg = ref(''); |
|
/** 当前的智慧模式 */ |
|
const smartMode = ref(mode); |
|
/** 向父组件传递事件 */ |
|
const emit = defineEmits(['changeBg', 'changeSwitch', 'changeSmartMode']); |
|
|
|
onMounted(() => { |
|
initSwiper(); |
|
// 获取开关机状态图片 |
|
getShowImg(); |
|
}) |
|
|
|
/** 初始化swiper */ |
|
const initSwiper = () => { |
|
const currentModeIndex = modeList.value.findIndex(item => item.id === smartMode.value); |
|
console.log('smartMode.value', smartMode.value) |
|
console.log('currentModeIndex', currentModeIndex) |
|
mySwiper = new Swiper('.swiper', { |
|
loop: true, // 循环模式选项 |
|
slidesPerView: 5, // slide可展示的数量 |
|
centeredSlides: true, |
|
observer: true, |
|
observeParents: true, |
|
initialSlide: currentModeIndex, // 初始时展示的位置 |
|
on: { |
|
touchStart: () => { |
|
}, |
|
touchMove: () => { |
|
}, |
|
slideChangeTransitionEnd: () => { |
|
mySwiper && emit("changeSmartMode", modeList.value[mySwiper.realIndex].id); |
|
nextTick(() => { |
|
getShowImg(); |
|
}) |
|
}, |
|
} |
|
}) |
|
} |
|
|
|
/** 获取展示的背景 */ |
|
const getShowImg = () => { |
|
if (onOff.value) { |
|
const smartModeData = modeList.value.find(item => item.id === smartMode.value); |
|
// 获取开关机状态图片 |
|
onOffImg.value = smartModeData.onOffImg; |
|
// 向父组件发送事件，展示背景图 |
|
emit('changeBg', smartModeData.bgImg); |
|
} else { |
|
// 获取开关机状态图片 |
|
onOffImg.value = "/assets/imgs/device-detail/smart-mode/switch_shutdown@2x.png"; |
|
// 向父组件发送事件，展示背景图 |
|
emit('changeBg', "/assets/imgs/device-detail/smart-mode/smart_bg_shutdown@2x.png"); |
|
} |
|
} |
|
|
|
/** 开关切换 */ |
|
const changeSwitch = () => { |
|
emit('changeSwitch', !onOff.value); |
|
nextTick(() => { |
|
getShowImg(); |
|
}) |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.smart-wrapper { |
|
width: 100%; |
|
height: 100%; |
|
position: relative; |
|
|
|
.swiper-container { |
|
position: relative; |
|
width: 100%; |
|
height: 426px; |
|
|
|
.select-wrapper { |
|
position: absolute; |
|
width: 212px; |
|
height: 416px; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
|
|
img { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
.swiper-slide { |
|
text-align: center; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
transition: 300ms; |
|
transform: scale(0.6); |
|
color: rgba($color: #FFF, $alpha: .2); |
|
} |
|
|
|
.swiper-slide-active,.swiper-slide-duplicate-active{ |
|
transform: scale(1); |
|
color: rgba($color: #FFF, $alpha: .7); |
|
} |
|
|
|
.swiper-slide-prev, .swiper-slide-next { |
|
transform: scale(0.8); |
|
color: rgba($color: #FFF, $alpha: .4); |
|
} |
|
|
|
.swiper-item { |
|
font-size: 60px; |
|
width: 65px; |
|
text-align: center; |
|
} |
|
|
|
.smart-btm { |
|
width: 100%; |
|
position: absolute; |
|
left: 0; |
|
bottom: 70px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
z-index: 99; |
|
|
|
.illustrate { |
|
margin-left: 91px; |
|
width: 56px; |
|
height: 56px; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
|
|
.switch-btn-container { |
|
margin-right: 64px; |
|
position: relative; |
|
.switch-btn { |
|
width: 110px; |
|
height: 110px; |
|
border-radius: 50%; |
|
background: url('@/assets/imgs/device-detail/smart-mode/circle-bg@2x.png') no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
img { |
|
width: 56px; |
|
} |
|
} |
|
.btn-text { |
|
position: absolute; |
|
color: #FFF; |
|
font-size: 28px; |
|
width: 100%; |
|
text-align: center; |
|
margin-top: 20px; |
|
} |
|
} |
|
} |
|
} |
|
</style> |