增加小程序更新

App.vue

@@ -1,7 +1,20 @@
 <script>
 	export default {
-		onLaunch: function() {
-			console.log('App Launch')
+		onLaunch: function() {
+			// #ifndef H5 || APP-NVUE || APP-PLUS || APP-PLUS-NVUE
+			const updateManager = uni.getUpdateManager();
+			updateManager.onUpdateReady(function(res) {
+				uni.showModal({
+					title: '更新提示',
+					content: '新版本已经准备好，是否重启应用？',
+					success(res) {
+						if (res.confirm) {
+							updateManager.applyUpdate();
+						}
+					}
+				});
+			});
+			// #endif
 		},
 		onShow: function() {
 			console.log('App Show')

components/fs-card/fs-card.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="fs-card" :class="{'fs-card-full': full, 'fs-card-gutter': gutter}">
 		<view class="fs-card-box" :class="{'fs-card-radius': radius, shadow}">
-			<view class="fs-card-title" v-if="slots.title || title">
+			<view class="fs-card-title" v-if="slots.title || title" :style="titleStyle">
 				<slot name="title">{{title}}</slot>
 			</view>
 			<view class="fs-card-content">
@@ -18,6 +18,12 @@
 import { useSlots } from 'vue'
 const props = defineProps({
 	title: String,
+	titleStyle: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
 	full: Boolean,
 	gutter: Boolean,
 	radius: {

components/fs-cell-group/fs-cell-group.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="fs-cell-group" :class="{full, radius}" :style="{backgroundColor:bgColor || '#fff'}">
+	<view class="fs-cell-group" :class="{full, radius, 'fs-cell-group-gutter': gutter}" :style="{backgroundColor:bgColor || '#fff'}">
 		<slot />
 	</view>
 </template>
@@ -22,6 +22,7 @@ const props = defineProps({
 	},
 	border: Boolean,
 	tighten: Boolean,
+	gutter: Boolean,
 	radius: {
 		type: Boolean,
 		default: true
@@ -72,5 +73,9 @@ provide('cellGroup', props)
 	&.radius{
 		border-radius: var(--radius);
 	}
+	
+	&-gutter{
+		margin-bottom: var(--gutter-v);
+	}
 }
 </style>

pages/my/my.vue

@@ -1,48 +1,65 @@
-<template>
-	<view>
-		<view class="top pr">
-			<image src="/static/images/my/my-bg2.png" mode="widthFix" style="width: 100%;"></image>
-			<view class="userInfo" v-if="userInfo.name">
-				<fs-cell justify="left" bgColor="transparent">
-					<template #title>
-						<fs-avatar border :src="userInfo.photo" size="120rpx" link="./userInfo" v-if="userInfo.photo"></fs-avatar>
-						<fs-wx-avatar v-else></fs-wx-avatar>
-					</template>
-					<template #value>
-						<view class="cell-right">
-							<view class="title">{{userInfo.name || userInfo.nickName}}</view>
-							<view class="sub">{{userInfo.phone}}</view>
-						</view>
-					</template>
-				</fs-cell>
+<template>
+	<view>
+		<fs-avatar src="/static/images/my-bg.png" shape="square" width="100%" height="288rpx"></fs-avatar>
+		<view class="my-box">
+			<view class="layout-box radius-lg top-box">
+				<view class="user-info" v-if="userInfo.name">
+					<fs-avatar size="140rpx" border :src="userInfo.photo" v-if="userInfo.photo"></fs-avatar>
+					<fs-wx-avatar v-else></fs-wx-avatar>
+					
+					<view class="top-box-content">
+						<text class="vm title" style="margin-right: 10rpx;">{{userInfo.name}}</text>
+						<fs-icon type="icon-sex-male" color="#2285FF" v-if="userInfo.sex === '1'"></fs-icon>
+						<fs-icon type="icon-sex-female" colorType="error" v-if="userInfo.sex === '2'"></fs-icon>
+					</view>
+					
+					<fs-icon
+						class="top-box-edit"
+						type="icon-edit"
+						size="40rpx"
+						link="./userInfo">
+					</fs-icon>
+				</view>
+				<view v-else class="user-info">
+					<fs-avatar size="140rpx" link="../login/login4" border>去登录</fs-avatar>
+				</view>
+				
+				<view :style="{'margin-top': userInfo.name ? '80rpx' : '20rpx'}">
+					<fs-divide-list :list="shortcutList">
+						<template #default="{item}">
+							<view class="top-box-hd">{{item.num || 0}}</view>
+							<view class="content">{{item.title}}</view>
+						</template>
+					</fs-divide-list>
+				</view>
 			</view>
-			<navigator url="../login/login" class="login" v-else>登录</navigator>
-			
-			<view class="top-menu">
-				<fs-card>
-					<fs-grid :columnNum="4">
-						<fs-grid-item>
-							<fs-icon type="icon-image" size="40rpx"></fs-icon>
-							<view class="content">菜单1</view>
-						</fs-grid-item>
-						<fs-grid-item>
-							<fs-icon type="icon-image" size="40rpx"></fs-icon>
-							<view class="content">菜单2</view>
-						</fs-grid-item>
-						<fs-grid-item>
-							<fs-icon type="icon-image" size="40rpx"></fs-icon>
-							<view class="content">菜单3</view>
-						</fs-grid-item>
-						<fs-grid-item>
-							<fs-icon type="icon-image" size="40rpx"></fs-icon>
-							<view class="content">菜单4</view>
-						</fs-grid-item>
-					</fs-grid>
-				</fs-card>
-			</view>
-		</view>
-
-		<fs-cell-group arrow border>
+		</view>
+		
+		<fs-card gutter :titleStyle="{padding: '0'}">
+			<template #title>
+				<view class="title-hd" >常用工具</view>
+			</template>
+			<fs-grid :columnNum="4">
+				<fs-grid-item>
+					<fs-avatar src="/static/images/invoice.png" size="80rpx"></fs-avatar>
+					<view class="content">我的发票</view>
+				</fs-grid-item>
+				<fs-grid-item>
+					<fs-avatar src="/static/images/invoice.png" size="80rpx"></fs-avatar>
+					<view class="content">我的发票</view>
+				</fs-grid-item>
+				<fs-grid-item>
+					<fs-avatar src="/static/images/invoice.png" size="80rpx"></fs-avatar>
+					<view class="content">我的发票</view>
+				</fs-grid-item>
+				<fs-grid-item>
+					<fs-avatar src="/static/images/invoice.png" size="80rpx"></fs-avatar>
+					<view class="content">我的发票</view>
+				</fs-grid-item>
+			</fs-grid>
+		</fs-card>
+		
+		<fs-cell-group arrow border gutter>
 			<fs-cell link="./licensePlate/list" value="车辆管理">
 				<template #title>
 					<fs-icon type="icon-car" colorType="primary"></fs-icon>
@@ -63,6 +80,9 @@
 					<fs-icon type="icon-tongxunlu" colorType="primary"></fs-icon>
 				</template>
 			</fs-cell>
+		</fs-cell-group>
+		
+		<fs-cell-group arrow border>
 			<fs-cell link="./notice" value="我的消息">
 				<template #title>
 					<fs-icon type="icon-notice" colorType="primary"></fs-icon>
@@ -81,11 +101,11 @@
 		</fs-cell-group>
 		
 		<fs-gutter height="120rpx"></fs-gutter>
-		<fs-button type="primary" round block @click="handleLogout">退出登录</fs-button>
-		<fs-gutter height="60rpx"></fs-gutter>
-	</view>
-</template>
-
+		<fs-button round block @click="handleLogout">退出登录</fs-button>
+		<fs-gutter height="60rpx"></fs-gutter>
+	</view>
+</template>
+
 <script setup>
 import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
@@ -93,49 +113,55 @@ import { useStore } from 'vuex'
 const store = useStore()
 const userInfo = computed(() => store.state.userInfo)
 
+const shortcutList = ref([
+	{
+		title: '我的访客',
+		num: 10
+	},
+	{
+		title: '我的访客',
+		num: 10
+	}
+])
+
 const handleLogout = () => {
 	store.dispatch('logout').then(res => {
 		console.log('logout')
 	})
 }
-</script>
-
-<style lang="scss" scoped>
-.top{
-	.userInfo {
+</script>
+
+<style lang="scss" scoped>
+.my-box{
+	padding: var(--gutter);
+	margin-top: -200rpx;
+	z-index: 100;
+	position: relative;
+}
+.top-box{
+	position: relative;
+	
+	&-edit{
 		position: absolute;
-		left: 20rpx;
-		top: 40rpx;
+		top: 64rpx;
+		right: 0rpx;
+	}
 	
-		.title,
-		.sub {
-			color: #fff;
-		}
+	&-hd{
+		font-size: 23px;
+		font-weight: bold;
 	}
 	
-	&-menu{
-		margin-top: -70rpx;
-		margin-bottom: 40rpx;
-		position: relative;
-		z-index: 100;
+	&-content{
+		padding: 10rpx 0;
 	}
-}
-
-.login {
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, 50%);
-	margin-top: -50px;
-	color: #fff;
-	border: 1px solid #fff;
-	height: 40px;
-	line-height: 40px;
-	width: 100px;
-	border-radius: 20px;
-	text-align: center;
 }
-.logout{
-	margin: 0 var(--gutter);
-}
+.user-info{
+	position: absolute;
+	z-index: 10;
+	left: 50%;
+	top: -70rpx;
+	transform: translateX(-50%);
+	text-align: center;
+}
 </style>