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.
183 lines
4.3 KiB
183 lines
4.3 KiB
<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>
|
|
|