90 lines
3.7 KiB
Vue
90 lines
3.7 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="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright10.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
defineEmits(['setting'])
|
|
|
|
const items = ref([
|
|
{
|
|
key: 'password',
|
|
label: '修改密码',
|
|
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
|
|
iconWrapClass: 'settings-section__item-icon-wrap--blue'
|
|
},
|
|
{
|
|
key: 'privacy',
|
|
label: '隐私政策',
|
|
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
|
|
iconWrapClass: 'settings-section__item-icon-wrap--green'
|
|
},
|
|
{
|
|
key: 'delete',
|
|
label: '注销账户',
|
|
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
|
|
iconWrapClass: 'settings-section__item-icon-wrap--red',
|
|
labelClass: 'settings-section__item-label--danger'
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-settings.css';
|
|
</style>
|