ry_app/package_a/settings/settings.vue

<template>
  <view class="settings-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">设置</text>
    </view>
    
    <!-- 通用模块 -->
    <view class="settings-section">
      <view class="section-header">
        <text class="section-title">通用</text>
      </view>
      <view class="settings-list">
        <view class="list-item" @click="navigateTo('个人信息')">
          <text class="item-text">个人信息</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
        <view class="list-item" @click="navigateTo('店铺信息')">
          <text class="item-text">店铺信息</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
        <view class="list-item" @click="navigateTo('子账号管理')">
          <text class="item-text">子账号管理</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
      </view>
    </view>
    
    <!-- 门店模块 -->
    <view class="settings-section">
      <view class="section-header">
        <text class="section-title">门店</text>
      </view>
      <view class="settings-list">
        <view class="list-item" @click="navigateTo('开关门设置')">
          <text class="item-text">开关门设置</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
        <view class="list-item" @click="navigateTo('进店语音设置')">
          <text class="item-text">进店语音设置</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
        <view class="list-item" @click="navigateTo('推荐设置')">
          <text class="item-text">推荐设置</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
      </view>
    </view>
    
    <!-- 交易模块 -->
    <view class="settings-section">
      <view class="section-header">
        <text class="section-title">交易</text>
      </view>
      <view class="settings-list">
        <view class="list-item" @click="navigateTo('支付方式认证')">
          <text class="item-text">支付方式认证</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
        <view class="list-item" @click="navigateTo('自动化扣')">
          <text class="item-text">自动化扣</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
        <view class="list-item" @click="navigateTo('音频级别设置')">
          <text class="item-text">音频级别设置</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
        <view class="list-item" @click="navigateTo('非值守期间现金收银')">
          <text class="item-text">非值守期间现金收银</text>
          <text class="iconfont icon-arrow">›</text>
        </view>
      </view>
    </view>
	<view class="logout-module">
		<view class="logout-btn" @click="handleLogout">
			<text class="logout-text">退出登录</text>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
    }
  },
  methods: {
    navigateTo(pageName) {
      // 实际项目中，这里会跳转到对应页面
      uni.showToast({
        title: `跳转到${pageName}`,
        icon: 'none',
        duration: 1000
      });
      
    },
	handleLogout() {
	  this.$modal.confirm('确定注销并退出系统吗？').then(() => {
	    this.$store.dispatch('LogOut').then(() => {}).finally(()=>{
	      this.$tab.reLaunch('/pages/index')
	    })
	  })
	}
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
  
  .page-header {
    padding: 30rpx 40rpx;
    background-color: #ffffff;
    border-bottom: 1rpx solid #e0e0e0;
    
    .page-title {
      font-size: 40rpx;
      font-weight: 600;
      color: #333333;
    }
  }
  .logout-text {
  	font-size: 34rpx;
  	color: red;
  }
  .logout-btn {
  	width: 100%;
  	height: 88rpx;
  	background-color: #ffffff;
  	border-radius: 12rpx;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	cursor: pointer;
  }
  
  /* ========== 退出登录模块 ========== */
  .logout-module {
  	margin-top: 40rpx;
  	padding: 0 40rpx;
  }
  .settings-section {
    margin-top: 30rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    margin-left: 30rpx;
    margin-right: 30rpx;
    
    .section-header {
      padding: 28rpx 32rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
      }
    }
    
    .settings-list {
      .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 32rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background-color: #f8f8f8;
        }
        
        .item-text {
          font-size: 30rpx;
          color: #333333;
        }
        
        .iconfont {
          font-size: 36rpx;
          color: #999999;
        }
      }
    }
  }
}

/* 响应式适配 */
@media (min-width: 768px) {
  .settings-container {
    max-width: 750px;
    margin: 0 auto;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
  }
}
</style>