【feat】【第一版开发】

1.完善代码

App.vue

@@ -9,6 +9,12 @@
 		},
 		onHide: function() {
 			console.log('App Hide')
+		},
+		onMounted: function() {
+			console.log('App mounted')
+		},
+		onUnmounted: function() {
+			console.log('App unmounted')
 		}
 	}
 	

manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "PunchSettle-MiniProgram",
-    "appid" : "",
+    "appid" : "__UNI__7BDCB3C",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
@@ -52,7 +52,7 @@
     "mp-weixin" : {
         "appid" : "wx6468ace33a6de441",
         "setting" : {
-            "urlCheck" : false,
+            "urlCheck" : true,
             "minified" : true
         },
         "usingComponents" : true

package.json

@@ -27,7 +27,7 @@
 				"title": "微信小程序 uat-测试环境",
 				"env": {
 					"UNI_PLATFORM": "mp-weixin",
-					"BASE_API_URL": "https://api-punchSettle.zhixinghe1.top"
+					"BASE_API_URL": "https://api-punchsettle.zhixinghe1.top"
 				}
 			}
 		}

pages/index/index.vue

@@ -2,27 +2,29 @@
 	<view class="layout-container">
 		<!-- 顶部填充区 -->
 		<view class="top-fill" :style="{height: safeArea.statusBarHeight+'px'}"></view>
-		
+
 		<!-- 顶部胶囊区 -->
-		<view class="capsule-container" 
-		:style="{
+		<view class="capsule-container" :style="{
 			height: safeArea.capsuleBarHeight+'px',
 			width: safeArea.capsuleBarLeft+'px',
-			'padding-top': safeArea.capsuleBarMarginTop+'px', 
+			'padding-top': safeArea.capsuleBarMarginTop+'px',
 			'padding-bottom': safeArea.capsuleBarMarginBottom+'px'}">
-			<view class="user-info" @click="goUserInfoPage" :style="{
-				height: safeArea.capsuleBarContentHeight+'px',
-				width: safeArea.capsuleBarContentHeight+'px',
-			}">
-				<!-- <uni-icons type="person" :size="safeArea.capsuleBarContentHeight" color="#FFFFFF"></uni-icons> -->
-				<image :style="{
-					height: safeArea.capsuleBarContentHeight+'px',
-					width: safeArea.capsuleBarContentHeight+'px',
-				}"
-			mode="aspectFill" src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"></image>
+			
+			<view class="user-info-container" @click="goUserInfoPage">
+				<view class="user-info" 
+					:style="{height: safeArea.capsuleBarContentHeight+'px',width: safeArea.capsuleBarContentHeight+'px'}">
+					<image v-if="userInfo" :style="{
+						height: safeArea.capsuleBarContentHeight+'px',
+						width: safeArea.capsuleBarContentHeight+'px',
+					}" mode="aspectFill" :src="userInfo.avatar"></image>
+					<uni-icons v-else type="person" :size="safeArea.capsuleBarContentHeight" color="#FFFFFF"></uni-icons>
+				</view>
+				
+				<view class="nickname" v-if="userInfo">{{userInfo.nickname}}</view>
+				<view class="nickname" v-else>登录</view>
 			</view>
 		</view>
-		
+
 		<!-- 内容区 -->
 		<view class="content-container">
 			<view class="settle-container">
@@ -34,7 +36,8 @@
 			</view>
 			<view class="task-container">
 				<view class="task-header">
-					<view class="task-title" v-if="punchIns.length > 0">任务（{{punchIns.lengt}}个）</view>
+					<view class="task-title" v-if="punchIns.length && punchIns.length > 0">任务（{{punchIns.lengt}}个）
+					</view>
 					<view class="task-title" v-else>任务</view>
 					<view class="task-add-btn" @click="goPunchInDetailPage">
 						<uni-icons type="plusempty" size="30" color="#406CE7"></uni-icons>
@@ -53,76 +56,101 @@
 						<view class="item-btn" @click="doPunchIn(punchIn.punchInId)">完成</view>
 					</view>
 					<view class="item-detail-list">
-						<view class="item-detail" v-for="punchInRecord in punchIn.punchInRecords" :key="punchInRecord.punchInDate">
+						<view class="item-detail" v-for="punchInRecord in punchIn.punchInRecords"
+							:key="punchInRecord.punchInDate">
 							<view class="detail-text">
 								<uni-dateformat :date="punchInRecord.punchInDate" format="M月d日"></uni-dateformat>
 							</view>
-							<view class="detail-box" style="background-color: #E5E5E5;" v-if="punchInRecord.punchInStatus == 'uncreated'"></view>
-							<view class="detail-box" style="background-color: #A5D63F;" v-if="punchInRecord.punchInStatus == 'punchIn'"></view>
-							<view class="detail-box" style="background-color: #D43030;" v-if="punchInRecord.punchInStatus == 'unPunchIn'"></view>
-							<view class="detail-box" v-if="punchInRecord.punchInStatus == 'futureTime' || punchInRecord.punchInStatus == 'todayUnknown'"></view>
+							<view class="detail-box" style="background-color: #E5E5E5;"
+								v-if="punchInRecord.punchInStatus == 'uncreated'"></view>
+							<view class="detail-box" style="background-color: #A5D63F;"
+								v-if="punchInRecord.punchInStatus == 'punchIn'"></view>
+							<view class="detail-box" style="background-color: #D43030;"
+								v-if="punchInRecord.punchInStatus == 'unPunchIn'"></view>
+							<view class="detail-box"
+								v-if="punchInRecord.punchInStatus == 'futureTime' || punchInRecord.punchInStatus == 'todayUnknown'">
+							</view>
 						</view>
 					</view>
 				</view>
 			</view>
 		</view>
-		
+
 		<!-- 弹出框 -->
 		<view>
 			<uni-popup ref="claimRewardDialog" type="dialog">
-				<uni-popup-dialog ref="inputClose" mode="input" title="领取奖励" value="对话框预置提示内容!"
-					placeholder="请输入领取的奖励数" @confirm="claimRewardConfirm"></uni-popup-dialog>
+				<uni-popup-dialog ref="inputClose" mode="input" title="领取奖励" value="对话框预置提示内容!" placeholder="请输入领取的奖励数"
+					@confirm="claimRewardConfirm"></uni-popup-dialog>
 			</uni-popup>
 		</view>
-		
+
 		<!-- 底部填充区 -->
 		<view class="bottom-fill" :style="{height: safeArea.bottomHeight+'px'}"></view>
 	</view>
 </template>
 
 <script setup>
-	import { onMounted, ref } from 'vue';
-	import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
-	import { rewardApi, punchInApi } from '@/service/apis.js';
-	import { getSafeArea } from '@/utils/system.js';
-	
+	import {
+		onMounted,
+		ref
+	} from 'vue';
+	import {
+		onLoad,
+		onPullDownRefresh,
+		onShow
+	} from "@dcloudio/uni-app";
+	import {
+		rewardApi,
+		punchInApi
+	} from '@/service/apis.js';
+	import {
+		getSafeArea
+	} from '@/utils/system.js';
+
 	/**
 	 * 可领取奖励
 	 */
 	const reward = ref(0);
-	
+
 	/**
 	 * 打卡任务
 	 */
 	const punchIns = ref([]);
-	
+
 	/**
 	 * 领取奖励对话框
 	 */
 	const claimRewardDialog = ref(null);
-	
+
 	/**
 	 * 安全区
 	 */
 	const safeArea = ref({});
-	
-	
+
+	/**
+	 * 用户信息
+	 */
+	const userInfo = ref(null);
+
+
 	/**
 	 * 领取奖励
 	 */
 	const claimReward = () => {
 		claimRewardDialog.value.open();
 	}
-	
+
 	/**
 	 * 确认领取奖励
 	 */
 	const claimRewardConfirm = async (val) => {
-		await rewardApi.claimReward({"claimRewardNum": val});
+		await rewardApi.claimReward({
+			"claimRewardNum": val
+		});
 		getReward();
 		claimRewardDialog.value.close();
 	}
-	
+
 	/**
 	 * 获取奖励
 	 */
@@ -130,7 +158,7 @@
 		let res = await rewardApi.queryReward();
 		reward.value = res.unclaimedRewardNum;
 	}
-	
+
 	/**
 	 * 获取打卡
 	 */
@@ -138,15 +166,17 @@
 		let res = await punchInApi.queryPunchIn();
 		punchIns.value = res;
 	}
-	
+
 	/**
 	 * 打卡
 	 */
 	const doPunchIn = async (id) => {
-		await punchInApi.doPunchIn({id});
+		await punchInApi.doPunchIn({
+			id
+		});
 		getPunchIn();
 	}
-	
+
 	/**
 	 * 跳转用户用心
 	 */
@@ -155,7 +185,7 @@
 			url: "/pages/userInfo/userInfo"
 		});
 	}
-	
+
 	/**
 	 * 获取打卡编辑页面
 	 */
@@ -165,11 +195,10 @@
 		})
 	};
 	
-	onLoad(() => {
-		safeArea.value = getSafeArea();
-	});
-	
-	onMounted(() => {
+	/**
+	 * 加载数据
+	 */
+	const loadData = async () => {
 		let token = uni.getStorageSync("token");
 		// 如果还没登录就结束获取数据
 		if (!token) {
@@ -177,33 +206,62 @@
 			punchIns.value = [];
 			return;
 		}
-		// 获取奖励
-		getReward();
-		// 获取打卡
-		getPunchIn();
+		
+		try {
+			uni.showLoading({
+				title: '加载中',
+				mask: true
+			});
+			// 获取奖励
+			getReward();
+			// 获取打卡
+			getPunchIn();
+		} finally {
+			uni.hideLoading();
+		}
+	};
+
+	onLoad(() => {
+		safeArea.value = getSafeArea();
 	});
-	
+
+	onShow(() => {
+		console.log("onSHow");
+		userInfo.value = uni.getStorageSync("userInfo");
+		loadData();
+	});
+
 	onPullDownRefresh(() => {
-		// 获取奖励
-		getReward();
-		// 获取打卡
-		getPunchIn();
+		loadData();
 		uni.stopPullDownRefresh();
 	});
 </script>
 
 <style lang="scss" scoped>
-	.user-info {
+	.user-info-container {
 		display: flex;
-		justify-content: center;
-		/* 水平居中 */
 		align-items: center;
-		/* 垂直居中 */
 		
-		border-radius: 50%;
-		background: rgba(210, 239, 243, 1);
+		.user-info {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		
+			border-radius: 50%;
+			background: rgba(210, 239, 243, 1);
+		}
+		
+		.nickname {
+			display: flex;
+			/* 水平居中 */
+			justify-content: center;
+			/* 垂直居中 */
+			align-items: center;
+			margin-left: 10rpx;
+			color: rgba(0, 0, 0, 1);
+		}
 	}
-	
+
 	.content-container {
 
 		.settle-container {

pages/login/login.vue

@@ -87,6 +87,12 @@
 		
 		// 保存token
 		uni.setStorageSync('token', token);
+		// 保存用户信息
+		uni.setStorageSync('userInfo', {
+			"avatar": userInfoResult.userInfo.avatarUrl,
+			"nickname": userInfoResult.userInfo.nickName
+		});
+		console.log(uni.getStorageInfoSync("userInfo"));
 		
 		// 登录结束返回主页
 		uni.navigateTo({

service/healthApi.js

@@ -1,7 +0,0 @@
-import request from "@/utils/request";
-
-export function getInfo() {
-  return request({
-    url: "/health/info"
-  });
-}

service/loginApi.js

@@ -9,5 +9,7 @@ export function login(data) {
     url: "/wechat/miniprogram/login",
     method: "post",
     data,
+	loading: true,
+	loadingText: "登录中..."
   });
 }

service/punchInApi.js

@@ -17,7 +17,9 @@ export function addPunchIn(data) {
   return request({
     url: "/punchIn/savePunchIn",
     method: "post",
-    data
+    data,
+	loading: true,
+	loadingText: "正在保存打卡任务，请稍后..."
   });
 }
 
@@ -29,7 +31,9 @@ export function updatePunchIn(data) {
   return request({
     url: "/punchIn/updatePunchIn",
     method: "post",
-    data
+    data,
+	loading: true,
+	loadingText: "正在更新打卡任务，请稍后..."
   });
 }
 
@@ -41,7 +45,9 @@ export function deletePunchIn(data) {
   return request({
     url: "/punchIn/deletePunchIn",
     method: "post",
-	data
+	data,
+	loading: true,
+	loadingText: "正在删除打卡任务，请稍后..."
   });
 }
 
@@ -53,7 +59,9 @@ export function doPunchIn(data) {
   return request({
     url: "/punchIn/doPunchIn",
     method: "post",
-    data
+    data,
+	loading: true,
+	loadingText: "正在打卡，请稍后..."
   });
 }
 

service/rewardApi.js

@@ -17,6 +17,8 @@ export function claimReward(data) {
 	return request({
 		url: '/reward/claimReward',
 		method: 'post',
-		data
+		data,
+		loading: true,
+		loadingText: '领取中...'
 	});
 }

utils/request.js

@@ -3,13 +3,22 @@ export default function request(config = {}) {
 		url,
 		data = {},
 		method = "GET",
-		header = {}
+		header = {},
+		loading = false,
+		loadingText = "请求中..."
 	} = config
 
 	// 拼接url TODO 这里要修改，改成不同环境取不同的url
 	url = process.env.BASE_API_URL + url;
 	// 添加token
 	header['Authorization'] = uni.getStorageSync('token');
+	// 是否显示loading
+	if (loading) {
+		uni.showLoading({
+			title: loadingText,
+			mask: true
+		});
+	}
 
 	return new Promise((resolve, reject) => {
 		uni.request({
@@ -38,6 +47,11 @@ export default function request(config = {}) {
 			},
 			fail: err => {
 				reject(err)
+			},
+			complete: () => {
+				if (loading) {
+					uni.hideLoading();
+				}
 			}
 		})
 	})