我的页面

src/pages.json

@@ -254,6 +254,15 @@
 						"enablePullDownRefresh": false
 					}
 				},
+				{
+					"path": "setting/index",
+					"style": {
+						"navigationStyle": "custom",
+						"navigationBarTitleText": "设置",
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
+				},
 				{
 					"path": "warehouse/index",
 					"style": {

src/pages/index/mine.vue

@@ -6,23 +6,31 @@
 		</u-navbar>
 		<view class="mine-content">
 			<view class="header-view">
+				<view class="header-left-view">
 					<view class="head-image">
 						<image :style="headImageStyle" :src="headImageUrl"></image>
 					</view>
 					<view class="header-content">
 						<view class="name-view" @click="handleClickName">{{name || "点击登录"}}</view>
-					<view :class="['tel-view', {'active': mobile}]" @click="handleClickTel">
+						<view :class="['tel-view', {'active': mobile}]" @click="$u.throttle(handleClickTel, 500)">
 							<text>{{telTip}}</text>
 							<u-icon class="tel-arrow-icon" name="arrow-up-fill"></u-icon>
 						</view>
 					</view>
-				<view v-if="showSuperButton" class="super-button"><u-button@click="handleSuperButton">切换用户</u-button></view>
+					<view v-if="showSuperButton" class="super-button"><u-button@click="$u.throttle(handleSuperButton, 500)">切换用户</u-button></view>
+				</view>
+				<view class="header-right-view" @click="$u.throttle(handleClickSetting, 500)">
+					<image :src="shezhiImage" class="right-image-view"></image>
+					<text>设置</text>
+				</view>
 			</view>
 			<view class="ware-house-view">
-				<view class="ware-house-title">我的仓库</view>
+				<view class="ware-house-title">仓配功能</view>
 				<view class="ware-house-content">
 					<view v-for="(item, index) in warehouseItems" :key="index" class="ware-house-content-item" @click="handleClick(item.pathName)">
-						<image :src="item.icon" class="ware-house-image"></image>
+						<view class="ware-house-image">
+							<image :src="item.icon" :style="item.imageStyle"></image>
+						</view>
 						<view>{{item.title}}</view>
 					</view>
 				</view>
@@ -133,25 +141,29 @@
 						pathName: 'warehouse/index',
 						title: '我的配件',
 						value: '',
-						icon: process.uniEnv.qn_base_url + 'cangku.png',
+						icon: process.uniEnv.qn_base_url + 'wodepeijian.png',
+						imageStyle: 'width:60rpx;height:54rpx'
 					},
 					{
 						pathName: 'warehouse/spare',
 						title: '我的备件',
 						value: '',
-						icon: process.uniEnv.qn_base_url + 'cangku.png',
+						icon: process.uniEnv.qn_base_url + 'wodebeijian.png',
+						imageStyle: 'width:60rpx;height:54rpx'
 					},
 					{
 						pathName: 'warehouse/return',
 						title: '返件信息',
 						value: '',
-						icon: process.uniEnv.qn_base_url + 'cangku.png',
+						icon: process.uniEnv.qn_base_url + 'fanjianxinxi.png',
+						imageStyle: 'width:56rpx;height:54rpx'
 					},
 					{
 						pathName: 'warehouse/records',
 						title: '出入库记录',
 						value: '',
-						icon: process.uniEnv.qn_base_url + 'cangku.png',
+						icon: process.uniEnv.qn_base_url + 'churuku.png',
+						imageStyle: 'width:50rpx;height:54rpx'
 					},
 					]
 			},
@@ -162,10 +174,13 @@
 				return this.avatar || this.placeholderImage
 			},
 			headImageStyle() {
-				return this.avatar ? 'width:136rpx; height:136rpx;border-radius:68rpx' : 'width:144rpx; height:144rpx;border-radius:72rpx'
+				return this.avatar ? 'width:112rpx; height:112rpx;border-radius:56rpx' : 'width:120rpx; height:120rpx;border-radius:60rpx'
 			},
 			headSize() {
-				return this.avatar ? 136 : 144
+				return this.avatar ? 112 : 120
+			},
+			shezhiImage() {
+				return process.uniEnv.qn_base_url + 'shezhi.png'
 			}
 		},
 		async onLoad() {
@@ -179,7 +194,7 @@
 					this.getData()
 				}
 			}
-			this.wodebeijingImage = this.qnFile('wodebeijing.png')
+			this.wodebeijingImage = this.qnFile('wodebeijing-jb.png')
 			this.placeholderImage = this.qnFile('touxiang.png')
 		},
 		methods: {
@@ -199,6 +214,9 @@
 					this.$u.route({url: "pages/login/index"})
 				}
 			},
+			handleClickSetting() {
+				this.$u.route({url: 'pages/mine/setting/index'})
+			},
 			handleClickName() {
 				if(this.vuex_token && this.settled) {
 					return false
@@ -252,16 +270,20 @@
 
 		.mine-content {
 			position: relative;
-			padding: 30rpx;
+			padding: 26rpx 30rpx 30rpx 20rpx;
 			.header-view {
 				display: flex;
-				align-items: center;
+				align-items: flex-start;
+				justify-content: space-between;
 				margin-bottom: 60rpx;
+				.header-left-view {
+					display: flex;
+					align-items: center;
 					.head-image {
-					width: 144rpx;
-					height: 144rpx;
+						width: 120rpx;
+						height: 120rpx;
 						background-color: #FFFFFF;
-					border-radius: 72rpx;
+						border-radius: 56rpx;
 						display: flex;
 						align-items: center;
 						justify-content: center;
@@ -273,10 +295,10 @@
 						margin-left: 24rpx;
 					
 						.name-view {
-						font-size: 44rpx;
+							font-size: 40rpx;
 							font-weight: bold;
-						margin-bottom: 14rpx;
-						margin-top: 6rpx;
+							margin-bottom: 6rpx;
+							margin-top: -4rpx;
 						}
 					
 						.tel-view {
@@ -306,16 +328,31 @@
 						margin-left: 20rpx;
 					}
 				}
+				.header-right-view {
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
+					color: #FFFFFF;
+					margin-right: 4rpx;
+					font-size: 26rpx;
+					margin-top: -26rpx;
+					.right-image-view {
+						width: 34rpx;
+						height: 32rpx;
+						margin-right: 10rpx;
+					}
+				}
+			}
 			.ware-house-view {
 				background-color: #FFFFFF;
 				border-radius: 12rpx;
-				padding: 30rpx;
+				padding: 30rpx 30rpx 40rpx 30rpx;
 				height: 240rpx;
 				.ware-house-title {
 					color: #333333;
 					font-weight: bold;
 					font-size: 32rpx;
-					margin-bottom: 12rpx;
+					margin-bottom: 30rpx;
 				}
 				.ware-house-content {
 					display: flex;
@@ -324,11 +361,17 @@
 					.ware-house-content-item {
 						color: #333333;
 						font-size: 26rpx;
-						text-align: center;
+						display: flex;
+						justify-content: center;
+						flex-direction: column;
+						align-items: center;
 						.ware-house-image {
 							width: 60rpx;
 							height: 60rpx;
-							margin-bottom: 12rpx;
+							margin-bottom: 14rpx;
+							display: flex;
+							justify-content: center;
+							align-items: center;
 						}
 					}
 					

src/pages/mine/setting/index.vue

+<template>
+	<!-- 设置 -->
+	<view class="setting-view">
+		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="设置" titleColor="#333333"
+			:border-bottom="false" title-bold></u-navbar>
+		<view class="list-view">
+			<u-cell-group :border="false">
+				<view v-for="(item, index) in items" :key="index">
+					<u-cell-item :value="item.value" :border-bottom="false" @click="handleClick(item.pathName)">
+						<image slot="icon" :src="item.icon" :style="item.imageStyle"></image>
+						<view slot="title" class="item-title">{{item.title}}</view>
+						<view slot="value" class="item-value">{{value}}</view>
+					</u-cell-item>
+				</view>
+			</u-cell-group>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			};
+		},
+		computed: {
+			items() {
+				return [
+					{
+						pathName: 'about',
+						title: '当前版本',
+						value: process.uniEnv.version,
+						icon: process.uniEnv.qn_base_url + 'version.png',
+						imageStyle: 'width:32rpx;height:32rpx'
+					}
+				]
+			}
+		},
+		onLoad() {
+			getApp().trackPage('设置')
+		},
+		methods: {
+			handleClick(path) {
+				if(this.vuex_token) {
+					if (path === 'about') {
+						 getApp().updateApp(1)
+						return
+					}
+					this.$u.route({
+						url: 'pages/mine/' + path + '/index'
+					})
+				} else {
+					this.$u.route({url: "pages/login/index"})
+				}
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.setting-view {
+		padding-bottom: 44px;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		background-color: #F4F5F7;
+		.list-view {
+			height: 100%;
+			margin-top: 30rpx;
+
+				.item-title {
+					font-size: 32rpx;
+					color: #333333;
+					margin-left: 16rpx;
+					line-height: 32rpx;
+				}
+				
+				.item-value {
+					font-size: 26rpx;
+					color: #999999;
+				}
+				
+				.line-view {
+					height: 2rpx;
+					background-color: #F4F5F7;
+					margin: 30rpx;
+				}
+			
+		}
+	}
+</style>