时舟年
110 lines
4.3 KiB
Vue
110 lines
4.3 KiB
Vue
<template>
|
|
<view class="settings-section">
|
|
<view class="settings-section__inner">
|
|
<text class="settings-section__title">设置与安全</text>
|
|
<view class="settings-section__list">
|
|
<view class="settings-section__list-inner">
|
|
<view
|
|
v-for="(item, index) in items"
|
|
:key="item.key"
|
|
>
|
|
<view v-if="index > 0" class="settings-section__item-divider"></view>
|
|
<view
|
|
class="settings-section__item"
|
|
:class="{ 'settings-section__item--tall': item.subtitle }"
|
|
hover-class="mi-tap-row--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('setting', item.key)"
|
|
>
|
|
<view class="settings-section__item-inner">
|
|
<view
|
|
class="settings-section__item-icon-wrap"
|
|
:class="item.iconWrapClass"
|
|
>
|
|
<image
|
|
class="settings-section__item-icon"
|
|
:src="item.icon"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
<view
|
|
v-if="item.subtitle"
|
|
class="settings-section__item-texts"
|
|
>
|
|
<text class="settings-section__item-title">{{ item.label }}</text>
|
|
<text class="settings-section__item-desc">{{ item.subtitle }}</text>
|
|
</view>
|
|
<text
|
|
v-else
|
|
class="settings-section__item-label"
|
|
:class="item.labelClass"
|
|
>
|
|
{{ item.label }}
|
|
</text>
|
|
<image
|
|
class="settings-section__item-arrow"
|
|
src="/static/images/chevronright10.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
options: {
|
|
virtualHost: false,
|
|
styleIsolation: 'apply-shared'
|
|
},
|
|
emits: ['setting'],
|
|
data() {
|
|
return {
|
|
items: [
|
|
{
|
|
key: 'notify',
|
|
label: '通知设置',
|
|
icon: '/static/images/bell.png',
|
|
iconWrapClass: ''
|
|
},
|
|
{
|
|
key: 'password',
|
|
label: '修改密码',
|
|
icon: '/static/images/Vector_2_727.png',
|
|
iconWrapClass: 'settings-section__item-icon-wrap--blue'
|
|
},
|
|
{
|
|
key: 'privacy',
|
|
label: '隐私政策',
|
|
icon: '/static/images/shield.png',
|
|
iconWrapClass: 'settings-section__item-icon-wrap--green'
|
|
},
|
|
{
|
|
key: 'nfc',
|
|
label: 'NFC 门禁卡',
|
|
subtitle: '已绑定',
|
|
icon: '/static/images/ticket.png',
|
|
iconWrapClass: ''
|
|
},
|
|
{
|
|
key: 'delete',
|
|
label: '注销账户',
|
|
icon: '/static/images/userx.png',
|
|
iconWrapClass: 'settings-section__item-icon-wrap--red',
|
|
labelClass: 'settings-section__item-label--danger'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-settings.css';
|
|
</style>
|