aluminium-trading-uniapp-240925/pages_order/center/systemSet.vue

<template>
	<view class="page">

		<navbar :title="$t('pageTitle.systemSettings')" leftClick @leftClick="$utils.navigateBack" />

		<view class="frame">
			<view class="content" v-for="(item, index) in list" :key="index">
				<view class="title">{{ item.title }}</view>
				<view class="item" v-for="(item2, index) in item.itemList" :key="index" @click="tapItem(item2, index)">
					<view class="key">
						<view class="img">
							<img :src="item2.leftIcon" style="width: 100%; height: 100%;" />
						</view>
						<view class="text">
							{{ item2.text }}
						</view>
					</view>
					<view class="value">
						{{ item.rightIcon }}
					</view>
				</view>
			</view>
		</view>

		<!-- 语言切换 -->
		<!--<view style="padding: 20rpx;"-->
		<!--      @click="$refs.changeLanguage.open()">-->
		<!--  {{ $t('pages.index.index.language') }}-->
		<!--</view>-->
		<changeLanguage ref="changeLanguage" />

	</view>
</template>
<script>
	import topbar from "@/components/base/topbar.vue";
	import tabber from "@/components/base/tabbar.vue";
	import ChangeLanguage from "@/components/base/changeLanguage.vue";
	import {
		navigateTo
	} from "@/utils/utils";

	export default {
		name: "systemSet",
		components: {
			ChangeLanguage,
			tabber,
			topbar
		},
		data() {
			return {
				list: [{
						title: `${this.$t('pageTitle.accountSetting')}`,
						itemList: [
							// text: `${this.$t('pageTitle.switchAccount')}`
							{
								leftIcon: "../../static/image/center/1.svg",
								text: `${this.$t('pageTitle.switchAccount')}`,
								rightIcon: ">"
							},
							{
								leftIcon: "../../static/image/center/2.svg",
								text: `${this.$t('pageTitle.changePassword')}`,
								rightIcon: ">"
							},
							{
								leftIcon: "../../static/image/center/3.svg",
								text: this.$t('pageTitle.logout'),
								rightIcon: ">",
								type : 'logout',
							},
							{
								leftIcon: "../../static/image/center/4.svg",
								text: this.$t('pageTitle.addressList'),
								rightIcon: ">",
								toUrl: '/pages_order/center/addressListManage'
							},
						]
					},
					{
						title: `${this.$t('pageTitle.systemSetting')}`,
						itemList: [{
								leftIcon: "../../static/image/center/1.svg",
								text: `${this.$t('pageTitle.languageSwitch')}`,
								rightIcon: ">"
							},
							{
								leftIcon: "../../static/image/center/2.svg",
								text: `${this.$t('pageTitle.versionUpdate')}`,
								rightIcon: ">"
							},
							{
								leftIcon: "../../static/image/center/3.svg",
								text: this.$t('pageTitle.clearCache'),
								rightIcon: ">"
							},
						]
					},
					{
						title: `${this.$t('pageTitle.identitySetting')}`,
						itemList: [{
							leftIcon: "../../static/image/center/1.svg",
							text: this.$t('pageTitle.switchIdentity'),
							rightIcon: ">"
						}, ]
					}
				],
			}
		},

		methods: {
			tapItem(item, index) {
				if (item.text === this.$t('pageTitle.languageSwitch')) {
					this.$refs.changeLanguage.open();
				}else if(item.type){
					this[item.type]()
				}else{
					uni.navigateTo({
						url: item.toUrl
					})
				}
			},
			logout(){
				this.$store.commit('logout')
			},
		},
	}
</script>


<style scoped lang="scss">
	.page {
		background-color: #FFF;
		height: 100vh;

		.frame {
			padding: 40rpx;

			.content {
				margin-bottom: 40rpx;

				.title {
					font-size: 30rpx;
					color: #b0b0b0;
				}

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 40rpx;

					.key {
						display: flex;
						justify-content: center;
						align-items: center;
						color: #333333;
						font-size: 32rpx;

						.img {
							width: 40rpx;
							height: 40rpx;
						}

						.text {
							margin-left: 20rpx;
						}


					}

					.value {
						color: #999999;
						font-size: 36rpx;
					}
				}
			}

		}
	}
</style>