|
@@ -8,31 +8,40 @@
|
|
|
alt=""
|
|
|
/>
|
|
|
<div class="top-right">
|
|
|
- <Switch class="switch-btn" inactive-color="rgba(0, 0, 0, 0.3)" v-model="isOpen" />
|
|
|
+ <Switch
|
|
|
+ @change="getvolumnStatus"
|
|
|
+ class="switch-btn"
|
|
|
+ inactive-color="rgba(0, 0, 0, 0.3)"
|
|
|
+ v-model="isOpen"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
- <div class="air-info">
|
|
|
+ <div class="volumn-info">
|
|
|
<div class="left">
|
|
|
<div class="text">音量</div>
|
|
|
<div class="status">已关闭</div>
|
|
|
</div>
|
|
|
- <div class="temp" v-if="isOpen">26</div>
|
|
|
+ <div class="temp" v-if="isOpen">{{ volumnData.volumnTemp }}</div>
|
|
|
</div>
|
|
|
- <div class="temp-box" v-if="isOpen">
|
|
|
+ <div class="temp-box" id="slidervolumnId" v-if="isOpen">
|
|
|
<div class="bar">
|
|
|
- <div class="text text-left active-text">12</div>
|
|
|
- <div class="active-bar">
|
|
|
- <div class="line"></div>
|
|
|
+ <div class="text text-left active-text">{{ volumnData.minTempSet }}</div>
|
|
|
+ <div class="active-bar" :style="{ width: barWidth + 'px' }" id="barvolumnId">
|
|
|
+ <div class="hand-box" id="handvolumnId">
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text text-right" :class="isWhite ? 'active-text' : ''">
|
|
|
+ {{ volumnData.maxTempSet }}
|
|
|
</div>
|
|
|
- <div class="text text-right">100</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
+<script>
|
|
|
import {
|
|
|
defineComponent,
|
|
|
onMounted,
|
|
@@ -43,10 +52,11 @@ import {
|
|
|
onUnmounted,
|
|
|
onBeforeMount,
|
|
|
onBeforeUnmount,
|
|
|
+ nextTick,
|
|
|
} from "vue";
|
|
|
import { Switch, Dialog, Loading, Toast } from "vant";
|
|
|
-import { parseImgUrl } from "@/utils";
|
|
|
-import any = jasmine.any;
|
|
|
+import { parseImgUrl, fix } from "@/utils";
|
|
|
+import { swiper } from "@/utils/swiper";
|
|
|
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
@@ -58,6 +68,152 @@ export default defineComponent({
|
|
|
const proxyData = reactive({
|
|
|
parseImgUrl: parseImgUrl,
|
|
|
isOpen: false,
|
|
|
+ volumnData: {
|
|
|
+ minTempSet: 0,
|
|
|
+ maxTempSet: 100,
|
|
|
+ volumnTemp: 30,
|
|
|
+ },
|
|
|
+ part: 1,
|
|
|
+ realTemp: 30,
|
|
|
+ isWhite: false,
|
|
|
+ barWidth: 30,
|
|
|
+ getvolumnStatus() {
|
|
|
+ if (proxyData.isOpen) {
|
|
|
+ nextTick(() => {
|
|
|
+ proxyData.endBoxSwiper();
|
|
|
+ proxyData.setBarNowPerstion();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ contx.emit("getStatus", proxyData.isOpen);
|
|
|
+ },
|
|
|
+ getEleWidth(ele) {
|
|
|
+ // debugger;
|
|
|
+ if (ele) {
|
|
|
+ return ele.getBoundingClientRect().width;
|
|
|
+ } else {
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setBarNowPerstion() {
|
|
|
+ proxyData.realTemp = proxyData.volumnData.volumnTemp;
|
|
|
+ let barBox = document.querySelector("#barvolumnId");
|
|
|
+ if (!barBox) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let sliderBox = document.querySelector("#slidervolumnId");
|
|
|
+ let sliderWidth = proxyData.getEleWidth(sliderBox);
|
|
|
+ if (
|
|
|
+ proxyData.volumnData.volumnTemp >= proxyData.volumnData.minTempSet &&
|
|
|
+ proxyData.volumnData.volumnTemp <= proxyData.volumnData.maxTempSet
|
|
|
+ ) {
|
|
|
+ let barWidth =
|
|
|
+ (proxyData.volumnData.volumnTemp - proxyData.volumnData.minTempSet) /
|
|
|
+ proxyData.part;
|
|
|
+ // left = Math.floor(left);
|
|
|
+ if (barBox) {
|
|
|
+ barBox.style.width = barWidth + "px";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!proxyData.volumnData.volumnTemp) {
|
|
|
+ // barBox.style.width = 30 + "px";
|
|
|
+ proxyData.barWidth = 30;
|
|
|
+ } else if (proxyData.volumnData.volumnTemp < proxyData.volumnData.minTempSet) {
|
|
|
+ // barBox.style.width = 30 + "px";
|
|
|
+ proxyData.barWidth = 30;
|
|
|
+ } else if (proxyData.volumnData.volumnTemp > proxyData.volumnData.maxTempSet) {
|
|
|
+ let barWidth = barBox.offsetWidth;
|
|
|
+ // barBox.style.width = sliderWidth + "px";
|
|
|
+ proxyData.barWidth = barWidth;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ endBoxSwiper() {
|
|
|
+ let sliderBox = document.querySelector("#slidervolumnId");
|
|
|
+ let handBox = document.querySelector("#handvolumnId");
|
|
|
+ let barBox = document.querySelector("#barvolumnId");
|
|
|
+ let isMove = false;
|
|
|
+ let sliderWidth = proxyData.getEleWidth(sliderBox);
|
|
|
+ let startBarWidth = proxyData.getEleWidth(barBox);
|
|
|
+ if (sliderWidth > 1) {
|
|
|
+ sliderWidth = sliderWidth;
|
|
|
+ }
|
|
|
+ let tempPart =
|
|
|
+ (proxyData.volumnData.maxTempSet - proxyData.volumnData.minTempSet) /
|
|
|
+ (sliderWidth - 30);
|
|
|
+ let part = tempPart;
|
|
|
+ proxyData.part = part;
|
|
|
+ if (!handBox) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ handBox.addEventListener("touchstart", function (e) {
|
|
|
+ let oldBarWidth = (barBox && barBox.style && barBox.style.width) || 0;
|
|
|
+ startBarWidth = isNaN(parseInt(oldBarWidth)) ? 0 : parseInt(oldBarWidth);
|
|
|
+ isMove = true;
|
|
|
+ });
|
|
|
+ handBox.addEventListener("touchend", function (e) {
|
|
|
+ isMove = false;
|
|
|
+ proxyData.volumnData.volumnTemp = proxyData.realTemp;
|
|
|
+ //
|
|
|
+ });
|
|
|
+ swiper(handBox, {
|
|
|
+ swipeLeft: function (e) {
|
|
|
+ if (isMove) {
|
|
|
+ let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
|
|
|
+ moveRealX = parseInt(moveRealX);
|
|
|
+ let barWidth = startBarWidth - moveRealX;
|
|
|
+ barWidth = parseInt(barWidth);
|
|
|
+ barWidth = barWidth < 30 ? 30 : barWidth;
|
|
|
+ if (barWidth >= sliderWidth) {
|
|
|
+ proxyData.isWhite = true;
|
|
|
+ } else {
|
|
|
+ proxyData.isWhite = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // barBox.style.width = barWidth + "px";
|
|
|
+ proxyData.barWidth = barWidth;
|
|
|
+ let realTemp = proxyData.volumnData.minTempSet + barWidth * part;
|
|
|
+ if (realTemp > proxyData.volumnData.maxTempSet) {
|
|
|
+ realTemp = proxyData.volumnData.maxTempSet;
|
|
|
+ }
|
|
|
+ if (realTemp) {
|
|
|
+ proxyData.realTemp = fix(realTemp.toFixed(1));
|
|
|
+ }
|
|
|
+ console.log("barWidth===", barWidth);
|
|
|
+ if (barWidth <= 30) {
|
|
|
+ proxyData.realTemp = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ swipeRight: function (e) {
|
|
|
+ if (isMove) {
|
|
|
+ let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
|
|
|
+ moveRealX = parseInt(moveRealX);
|
|
|
+ let barWidth = startBarWidth + moveRealX;
|
|
|
+ console.log("moveRealX==", moveRealX);
|
|
|
+
|
|
|
+ barWidth = parseInt(barWidth);
|
|
|
+ barWidth = barWidth = barWidth > sliderWidth ? sliderWidth : barWidth;
|
|
|
+ if (barWidth >= sliderWidth) {
|
|
|
+ proxyData.isWhite = true;
|
|
|
+ } else {
|
|
|
+ proxyData.isWhite = false;
|
|
|
+ }
|
|
|
+ // barBox.style.width = barWidth + "px";
|
|
|
+ proxyData.barWidth = barWidth;
|
|
|
+
|
|
|
+ console.log("barWidth===", barWidth);
|
|
|
+ let realTemp = barWidth * part + proxyData.volumnData.minTempSet;
|
|
|
+ if (realTemp > proxyData.volumnData.maxTempSet) {
|
|
|
+ realTemp = proxyData.volumnData.maxTempSet;
|
|
|
+ }
|
|
|
+ if (realTemp) {
|
|
|
+ proxyData.realTemp = fix(realTemp.toFixed(1));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
});
|
|
|
onBeforeUnmount(() => {});
|
|
|
onMounted(() => {});
|
|
@@ -91,7 +247,7 @@ export default defineComponent({
|
|
|
.bottom {
|
|
|
// margin-top: 18vh;
|
|
|
// margin-top: 109px;
|
|
|
- .air-info {
|
|
|
+ .volumn-info {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: end;
|
|
@@ -173,11 +329,17 @@ export default defineComponent({
|
|
|
width: 73px;
|
|
|
height: 30px;
|
|
|
border-radius: 10px;
|
|
|
- .line {
|
|
|
+ .hand-box {
|
|
|
+ padding-left: 6px;
|
|
|
+ padding-right: 6px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
- right: 9px;
|
|
|
+ right: 0px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ margin-top: 9px;
|
|
|
height: 12px;
|
|
|
width: 2px;
|
|
|
background: rgba(255, 255, 255, 0.8);
|