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.
99 lines
2.1 KiB
99 lines
2.1 KiB
<template>
|
|
<view class="">
|
|
<div class="card">
|
|
<div class="title">页面主题设置</div>
|
|
<div class="theme_box">
|
|
<div class="color_box" v-for="(item, index) in theme" :key="index" @click="changeActive(item)">
|
|
<div class="bgcBox" :style="{ backgroundColor: item }"></div>
|
|
<image :src="$util.img('/upload/weapp/user/gou.png')" mode="" v-if="activeTheme == item"></image>
|
|
<image :src="$util.img('/upload/weapp/user/un_gou.png')" mode="" v-else></image>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
theme: ['#F33B50', '#21BBF3', '#18c751'],
|
|
activeTheme: uni.getStorageSync('activeTheme')
|
|
};
|
|
},
|
|
methods: {
|
|
changeActive(item) {
|
|
this.activeTheme = item;
|
|
uni.setStorageSync('activeTheme', item);
|
|
uni.switchTab({
|
|
url: '/pages/member/index'
|
|
});
|
|
let obj = uni.getStorageSync('theme_style');
|
|
let bottomObj = uni.getStorageSync('bottomNav');
|
|
|
|
obj.bg_color = this.activeTheme;
|
|
obj.bg_color_shallow = this.activeTheme;
|
|
obj.main_color = this.activeTheme;
|
|
obj.promotion_color = this.activeTheme;
|
|
obj.goods_detail.goods_btn_color = this.activeTheme;
|
|
obj.goods_detail.promotion_tag = this.activeTheme;
|
|
this.$store.commit('setThemeStyle', obj);
|
|
bottomObj.textHoverColor = this.activeTheme;
|
|
bottomObj.list.forEach(item => {
|
|
item.selected_style.iconColor[0] = this.activeTheme
|
|
})
|
|
this.$store.commit('setTabBarList', bottomObj);
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
margin: 32rpx;
|
|
padding: 32rpx;
|
|
background-color: #fff;
|
|
border-radius: 24rpx;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.theme_box {
|
|
margin-top: 28rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.color_box {
|
|
.bgcBox {
|
|
width: 188rpx;
|
|
height: 188rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
image {
|
|
margin-top: 24rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|