chunwan/pages/users/meiyan/index.vue

<template>
	<view class="meiyan">
		<view class="meiyan-hd">
			<cover-view class="box">
				<video src="https://api.lyiyuan.cn/profile/upload/ExpressBeauty.mp4"
				:muted="true" :loop="true" :autoplay="true" object-fit="cover" :controls="false"></video>
			</cover-view>
		</view>
		<view class="meiyan-bd">
			<view class="a">
				<u-slider inactive-color="#E8EAEB" active-color="#000000" min="0" max="100" :use-slot="true" v-model="value" @end="sliderEnd">
					<view class="">
						<view class="badge-button">
							{{value}}
						</view>
					</view>
				</u-slider>
			</view>
			<view class="b">
				<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">磨皮</view>
				<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">美白</view>
				<view class="item" :class="tabIndex == 2?'item-on':''" @click="tabItem(2)">红润</view>
				<view class="item" :class="tabIndex == 3?'item-on':''" @click="tabItem(3)">锐化</view>
			</view>
			<view class="c" @click="toSave">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 50,
				tabIndex: 0
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			async toSave() {
				const {code, data, msg} = await this.$api.editUser({
					id: uni.getStorageSync("userInfo").id,
					reserved5: this.userInfo.reserved5,
					reserved6: this.userInfo.reserved6,
					reserved7: this.userInfo.reserved7,
					reserved8: this.userInfo.reserved8,
				})
				if(code == 200){
					uni.showToast({
						title: "保存成功"
					})
					this.getUserInfo(1);
				}else{
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: msg
					})
				}
			},
			sliderEnd(e) {
				if(this.tabIndex == 0){
					this.userInfo.reserved5 = this.value;
				}else if(this.tabIndex == 1){
					this.userInfo.reserved6 = this.value;
				}else if(this.tabIndex == 2){
					this.userInfo.reserved7 = this.value;
				}else if(this.tabIndex == 3){
					this.userInfo.reserved8 = this.value;
				}
			},
			async getUserInfo(type) {
				const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
				if(code == 200){
					this.userInfo = data;
					if(type !=1){
						this.value = data.reserved5
					}
					
					this.reserved5 = data.reserved5; //磨皮
					this.reserved6 = data.reserved6; //美白
					this.reserved7 = data.reserved7; //红润
					this.reserved8 = data.reserved8; //锐化
				}else{
					uni.showToast({
						title: msg,
						position: "bottom",
						icon: "none",
					})
				}
			},
			tabItem(index){
				this.tabIndex = index;
				if(index == 0){
					this.value = this.userInfo.reserved5;
				}else if(index == 1){
					this.value = this.userInfo.reserved6;
				}else if(index == 2){
					this.value = this.userInfo.reserved7;
				}else if(index == 3){
					this.value = this.userInfo.reserved8;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.meiyan{
	&-hd{
		display: flex;
		align-items: center;
		justify-content: center;
		.box{
			width: 400rpx;
			height: 400rpx;
			border-radius: 50%;
			margin-top: 100rpx;
			overflow: hidden;
		}
		video{
			width: 400rpx;
			height: 400rpx;
			border-radius: 50%;
		}
	}
	&-bd{
		width: 100%;
		background-color: #fff;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 2;
		.a{
			padding: 20px 50rpx;
			.badge-button {
					padding: 4rpx 6rpx;
					background-color: #000000;
					color: #fff;
					border-radius: 10rpx;
					font-size: 22rpx;
					line-height: 1;
				}
		}
		.c{
			width: 100%;
			line-height: 80rpx;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			border-radius: 20rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			text-align: center;
			margin-top: 50rpx;
		}
		.b{
			padding: 0 0 50rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			.item{
				width: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
				margin-right: 30rpx;
				&-on{
					color: #FFFFFF;
					background: linear-gradient(0deg, #000000, #3D3B38);
					box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
					border-radius: 20rpx;
				}
			}
		}
	}
}
</style>