deming/pageE/setting/Index.vue
2020-07-10 09:03:19 +08:00

111 lines
2.2 KiB
Vue

<template>
<view class="setting">
<view class="list-item">
<view>消息提醒</view>
<view>
<u-switch v-model="checked" active-color="#FF770F" inactive-color="#A9A7A7" size="35"></u-switch>
</view>
</view>
<view v-for="(item, index) in settingList" :key="index" class="list-item" @click="toNextPage(item.link)">
<view>{{ item.title }}</view>
<image src="../static/mine/21.png"></image>
</view>
<view class="list-item" @click="sheetStatus=true">
<view>退出登录</view>
<image src="../static/mine/21.png"></image>
</view>
<u-action-sheet
v-model="sheetStatus"
:list="list"
:tips="tips"
:border-radius="20"
@click="choiceOption">
</u-action-sheet>
</view>
</template>
<script>
export default {
data() {
return {
checked: false,
tips: {
text: '您可选择以下操作',
color: '#999999',
fontSize: 24
},
sheetStatus: false,
list: [
{
text: '换个账号登录',
color: '#FF780F',
fontSize: 28
},
{
text: '退出登录',
color: '#FF780F',
fontSize: 28
}
],
settingList: [
{
title: '个人信息',
link: '../mine/MineInfo'
},
{
title: '收货地址',
link: '../more/Address'
},
{
title: '证件中心',
link: '../mine/ArticleDetails?type=1'
},
{
title: '屏蔽用户',
link: './ShieldUsers'
},
{
title: '关于我们',
link: '../mine/ArticleDetails?type=2'
},
{
title: '帮助与反馈',
link: './feedback'
},
]
}
},
methods: {
choiceOption(index) {
console.log(index);
// console.log(`点击了第${index + 1}项,内容为:${this.list[index].text}`)
},
toNextPage(url, ...params) {
uni.navigateTo({
url: url
});
}
},
};
</script>
<style lang="scss" scoped>
.setting {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
.list-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 98rpx;
border-top: 2rpx solid #EBEBEB;
background-color: #ffffff;
padding: 0 30rpx;
font-size: 30rpx;
color: rgba(51,51,51,1);
> image {
width: 14rpx;
height: 24rpx;
}
}
}
</style>