androidCnToWechatGrt/pagesHome/components/TemperatureControl/index.vue

<template>
	<view class="box" v-if="tLength">
		<div class="pre" :style="{'transform':'rotate('+(-30+tGrap*i)+'deg)'}" v-for="(a,i) in tLength" :key="i">
			<div class="tou">
				<div class="jd" :style="{'width':i<=tIdx?'100%':'0rpx'}"></div>
			</div>
		</div>
		<div class="center">
			<div class="nei"></div>
		</div>
		<div class="control">
			<image :src="imgBase+'home/kongtiao_jian.png'" @tap="changeTemperature(1)"></image>
			<p>{{sjTemperature}}<span>℃</span></p>
			<image :src="imgBase+'home/kongtiao_jia.png'" @tap="changeTemperature(2)"></image>
		</div>
	</view>
</template>

<script>
	export default {
		props:{
			temperature:{
				typeof:Number,
				default:0
			},
			minT:{
				typeof:Number,
				default:16
			},
			maxT:{
				typeof:Number,
				default:30
			}
		},
		mounted() {
			this.sjTemperature = this.$props.temperature;
			this.$nextTick(()=>{
				this.init();
			})
		},
		data(){
			return {
				status:'',
				sjTemperature:0,
				tLength:0,
				tGrap:0,
				tIdx:-1
			}
		},
		methods:{
			init(){
				this.tLength = (this.$props.maxT-this.$props.minT)*2+1;
				this.tGrap = (240/(this.tLength-1)).toFixed(2);
				if(this.sjTemperature<=this.$props.maxT&&this.sjTemperature>=this.$props.minT){
					if(this.sjTemperature==this.$props.minT) this.tIdx = 0;
					else if(this.sjTemperature==this.$props.maxT) this.tIdx = this.tLength-1;
					else this.tIdx = (this.sjTemperature-this.$props.minT)/0.5
				} 
			},
			changeTemperature(type){
				if(this.status==0) return;
				if(type==1){
					if(this.sjTemperature==this.$props.minT) return
					this.sjTemperature-=1
				} else if(type==2){
					if(this.sjTemperature==this.$props.maxT) return
					this.sjTemperature+=1
				}
				this.init();
				this.$emit('changeTemperature',this.sjTemperature)
			}
		}
	}
</script>

<style scoped lang="less">
	.box{
		width: 100%;
		height: 100%;
		position: relative;
		.pre{
			width: 100%;
			height: 12rpx;
			background: transparent;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -5rpx;
			.tou{
				width: 50rpx;
				height: 100%;
				background: #D8D8D8;
				box-shadow: 0rpx 4rpx 16rpx 4rpx #EFEFEF;
				border-radius: 7.5rpx;
				.jd{
					height: 100%;
					border-radius: 7.5rpx;
					background: linear-gradient( 270deg, #3A8DFF 0%, #0BC6FF 100%);
				}
			}
		}
		.center{
			width: calc(100% - 120rpx);
			height: calc(100% - 120rpx);
			border-radius: 50%;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 8rpx #EDF4FF;
			position: absolute;
			left: 60rpx;
			top: 60rpx;
			z-index: 2;
			padding: 15rpx;
			box-sizing: border-box;
			.nei{
				width: calc(100% - 60rpx);
				height: calc(100% - 60rpx);
				border-radius: 50%;
				background: #FFFFFF;
				border: 20rpx solid #EDF4FF;
				position: absolute;
				left: 10rpx;
				top: 10rpx;
				z-index: 3;
			}
		}
		.control{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 4;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			p{
				margin: 0 35rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 80rpx;
				color: #1D2129;
				line-height: 112rpx;
				span{
					font-weight: 400;
					font-size: 48rpx;
				}
			}
		}
	}
</style>